/* ==========================================================================
   VIPER — inner pages (anti-raging.php, academics/dynamic_content.php, …)
   Restyles the existing page markup: .section-in-p-ban / .section-in-p-con / .in-p-side-menu.
   Tokens come from css/viper-header.css.
   ========================================================================== */
.vp-inner { font-size: 15px; line-height: 1.7; overflow-x: hidden; }

/* ── Page banner ── */
.vp-inner .section-in-p-ban {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 56px 0 60px;
    text-align: left;
    color: #fff;
    background:
        radial-gradient(circle at 88% 20%, rgba(236, 128, 34, .35), transparent 32%),
        radial-gradient(circle at 70% 120%, rgba(155, 36, 135, .75), transparent 45%),
        linear-gradient(120deg, var(--vp-navy-dark) 0%, var(--vp-navy) 55%, var(--vp-purple-dark) 100%);
}
.vp-inner .section-in-p-ban::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, .06);
}
.vp-inner .section-in-p-ban .container { position: relative; z-index: 1; max-width: 1320px; padding: 0 24px; }
.vp-inner .section-in-p-ban h1 {
    margin: 0;
    font-family: var(--vp-font);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}
.vp-inner .section-in-p-ban p { color: rgba(255,255,255,.85); margin: 8px 0 0; }

.vp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}
.vp-crumbs a { color: #ffc58f; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.vp-crumbs a:hover { color: #fff; }
.vp-crumbs i.fa-chevron-right { font-size: 9px; opacity: .6; }

/* ── Content area ── */
.vp-inner .section-in-p-con { padding: 56px 0 80px; margin: 0; }
.vp-inner .section-in-p-con > .container { max-width: 1320px; padding: 0 24px; }
.vp-inner .section-in-p-con .row { row-gap: 32px; }

.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) { color: var(--vp-ink); }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) h1,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) h2,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) h3,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) h4 {
    font-family: var(--vp-font);
    color: var(--vp-navy);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 .6em;
}
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) > :first-child,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) > div > :first-child { margin-top: 0; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) p { margin: 0 0 1em; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) a:not(.btn) { color: var(--vp-purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) a:not(.btn):hover { color: var(--vp-orange-dark); }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) ul,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) ol { padding-left: 1.3em; margin: 0 0 1em; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) li { margin-bottom: .35em; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) img { max-width: 100%; height: auto; border-radius: 10px; }

.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 14px; background: #fff; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table th,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table td { border: 1px solid var(--vp-line); padding: 10px 12px; vertical-align: top; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table th,
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table thead td { background: var(--vp-purple-soft); color: var(--vp-navy); font-weight: 600; }
.vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table tr:nth-child(even) td { background: #fbfafc; }

/* ── Pasted / CMS content ──
   Content copied from the old page builder and editors carries fixed inline sizes
   (width: 1140px, height: 1177px, tables at 634px…). Keep everything inside the content area — the whole section is covered because
   unclosed tags in CMS content can push elements outside the column. */
.vp-inner .section-in-p-con [class*="col-"] { min-width: 0; }
.vp-inner .section-in-p-con * { max-width: 100%; }
.vp-inner .section-in-p-con :is(div, section, p, figure)[style*="height"] { height: auto !important; }
.vp-inner .section-in-p-con [class*="col-"] :is(.sppb-row, .row) { margin-left: 0 !important; margin-right: 0 !important; }
/* Old page-builder grid: the bundled CSS ends with a stray .sppb-row{display:table}, so rebuild it as flex.
   Columns stack on phones and take their 12-column share from 768px up. */
.vp-inner .section-in-p-con .sppb-row { display: flex !important; flex-wrap: wrap; gap: 0 24px; width: auto; height: auto; }
.vp-inner .section-in-p-con [class*="sppb-col-"] { flex: 1 1 100%; width: 100% !important; max-width: 100%; padding-left: 0; padding-right: 0; }
.vp-inner .section-in-p-con .sppb-column { width: auto !important; }
.vp-inner .section-in-p-con .sppb-column-addons { flex: 1 1 100%; width: 100% !important; }   /* .sppb-column is flex — don't let it shrink-wrap */
.vp-inner .section-in-p-con :is(.sppb-row-container, .sppb-section > .sppb-container) { padding-left: 0; padding-right: 0; width: auto; }
@media (min-width: 768px) {
    .vp-inner .section-in-p-con .sppb-col-md-8 { flex: 1 1 calc(66.666% - 12px); max-width: calc(66.666% - 12px); }
    .vp-inner .section-in-p-con .sppb-col-md-6 { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }
    .vp-inner .section-in-p-con .sppb-col-md-4 { flex: 1 1 calc(33.333% - 12px); max-width: calc(33.333% - 12px); }
}
.vp-inner .section-in-p-con img { height: auto !important; }
.vp-inner .section-in-p-con table { width: 100% !important; }
.vp-inner .section-in-p-con :is(td, th)[style*="width"] { width: auto !important; }
.vp-inner .section-in-p-con :is(td, th)[style*="height"] { height: auto !important; }
.vp-inner .section-in-p-con table caption:empty,
.vp-inner .section-in-p-con table caption { caption-side: top; padding: 0; }

/* Embedded documents (Google Drive / PDF viewers) fill the column; videos keep 16:9 */
.vp-inner .section-in-p-con iframe {
    display: block;
    width: 100% !important;
    min-height: 560px;
    margin: 1rem 0;
    border: 1px solid var(--vp-line) !important;
    border-radius: 12px;
    background: var(--vp-bg-soft);
}
.vp-inner .section-in-p-con iframe:is([src*="youtube"], [src*="vimeo"]) {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    border: 0 !important;
}
.vp-inner .section-in-p-con .embed-responsive { position: relative; overflow: hidden; border-radius: 12px; }
.vp-inner .section-in-p-con .embed-responsive iframe { margin: 0; }

/* ── Side menu ── */
.vp-inner ul.in-p-side-menu {
    position: sticky;
    top: 104px;
    list-style: none;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--vp-line);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow);
}
.vp-inner ul.in-p-side-menu:empty { display: none; }
.vp-inner ul.in-p-side-menu li + li { margin-top: 2px; }
.vp-inner ul.in-p-side-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--vp-ink);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.vp-inner ul.in-p-side-menu li a::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    opacity: .35;
}
.vp-inner ul.in-p-side-menu li a:hover { background: var(--vp-purple-soft); color: var(--vp-purple); }
.vp-inner ul.in-p-side-menu li a.active { background: var(--vp-purple); color: #fff; }
.vp-inner ul.in-p-side-menu li a.active::after { opacity: .8; }

/* Faculty accordion (academics/faculty_details.php) */
.vp-inner .sppb-panel-modern { border: 1px solid var(--vp-line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.vp-inner .sppb-panel-modern .sppb-panel-heading { padding: 14px 18px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--vp-navy); background: #fff; border: 0; }
.vp-inner .sppb-panel-modern .sppb-panel-heading:hover { background: var(--vp-purple-soft); color: var(--vp-purple); }
.vp-inner .sppb-panel-modern .sppb-panel-body { padding: 16px 18px; border-top: 1px solid var(--vp-line); }

/* News & Events (news-and-events.php) uses its own .main-container wrapper */
.vp-inner .main-container.container { max-width: 1320px; padding: 56px 24px 80px !important; }
.vp-inner .main-container .container-fluid { padding: 0; }
.vp-inner .main-container h4 { font-family: var(--vp-font); font-size: 22px; font-weight: 700; color: var(--vp-navy); margin: 0 0 14px; }
.vp-inner .main-container .hdiv { margin-top: 40px; }
.vp-inner .main-container #news-container > div { padding: 8px 0; border-bottom: 1px solid var(--vp-line); }
.vp-inner .main-container #happenings-container { padding-left: 1.2em; }
.vp-inner .main-container #happenings-container li { padding: 5px 0; }
.vp-inner .main-container a { color: var(--vp-purple); }
.vp-inner .main-container a:hover { color: var(--vp-orange-dark); }
.vp-inner .main-container .dot { background: var(--vp-orange); margin-right: 8px; vertical-align: middle; }
.vp-inner .main-container .load-more-btn {
    margin-top: 20px;
    background: var(--vp-purple);
    border: 0;
    color: #fff;
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
}
.vp-inner .main-container .load-more-btn:hover { background: var(--vp-purple-dark); }

@media (max-width: 991.98px) {
    .vp-inner ul.in-p-side-menu { position: static; }
}
@media (max-width: 767.98px) {
    .vp-inner .section-in-p-ban { padding: 36px 0 40px; }
    .vp-inner .section-in-p-ban .container,
    .vp-inner .section-in-p-con > .container { padding: 0 16px; }
    .vp-inner .section-in-p-con { padding: 36px 0 56px; }
    .vp-inner .main-container.container { padding: 36px 16px 56px !important; }
    .vp-inner .section-in-p-con iframe { min-height: 420px; }

    /* Justified text leaves big word gaps on narrow screens — read left-aligned instead */
    .vp-inner .section-in-p-con :is([style*="justify"], .sppb-text-justify, .text-justify) { text-align: left !important; }
    /* CMS headings often carry inline desktop sizes (2.5rem+) — cap them on phones */
    .vp-inner .section-in-p-con :is(h1, h2) { font-size: 24px !important; line-height: 1.3 !important; }
    .vp-inner .section-in-p-con h3 { font-size: 20px !important; line-height: 1.35 !important; }
    .vp-inner .section-in-p-con :is(h4, h5) { font-size: 17px !important; }
    .vp-inner .section-in-p-con :is(.col-lg-8, .col-lg-12) table { display: block; overflow-x: auto; }
}