/* ==========================================================================
   SSV College — Departments
   File: css/Departments.css

   Self-contained, matching the pattern in css/AboutUs.css and css/MissionVision.css:
   section 1 below is the same page-banner/breadcrumb ruleset used on every inner
   page (byte-for-byte, so this page's hero renders identically), section 2 is the
   handful of reusable bits this page also needs (.ssv-about-title/.ssv-about-text
   typography, .ssv-link-card, .ssv-reveal), and section 3 is specific to this page.
   Works together with css/site-modern.css (tokens, .ssv-card, .ssv-section, .ssv-label,
   .ssv-btn ...) and Bootstrap 4. Everything is prefixed "ssv-" and lives under ".ssv-scope".

   Contents
     1. Shared: page banner + breadcrumb       (identical to css/AboutUs.css)
     2. Shared: text/link-card/reveal-on-scroll (identical to css/AboutUs.css)
     3. Departments
     4. Reduced motion
   ========================================================================== */


/* 1. SHARED — PAGE BANNER + BREADCRUMB ------------------------------------ */
.ssv-page-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.25rem, 2.25rem + 5vw, 6.5rem) 0 clamp(4.5rem, 3.25rem + 6vw, 7.5rem);
    color: #fff;
    background-color: var(--primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    --pb-after-bg: #fff;
    background-image: radial-gradient(circle at 88% 15%, rgba(255, 122, 0, .22) 0, rgba(255, 122, 0, 0) 40%), linear-gradient(120deg, rgba(9, 30, 58, .95) 0%, rgba(11, 37, 69, .88) 45%, rgba(17, 55, 97, .82) 100%), var(--pb-image, none);
}

.ssv-page-banner--tint-next {
    --pb-after-bg: var(--light-bg);
}

.ssv-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .1));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .1));
    pointer-events: none;
}

.ssv-page-banner::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(28px, 4vw, 56px);
    background: var(--pb-after-bg);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,26 C220,60 420,0 700,18 C920,32 1040,4 1200,22 L1200,60 L0,60 Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,26 C220,60 420,0 700,18 C920,32 1040,4 1200,22 L1200,60 L0,60 Z'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.ssv-page-banner > .container {
    position: relative;
    z-index: 2;
}

.ssv-page-banner__icon {
    position: absolute;
    z-index: 0;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(7rem, 4rem + 10vw, 15rem);
    line-height: 1;
    color: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.ssv-crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .55rem;
    margin-bottom: 1.5rem;
    padding: .45rem .9rem .45rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
    backdrop-filter: blur(2px);
}

    .ssv-crumbs li {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
    }

        .ssv-crumbs li + li::before {
            content: "\f105";
            font-family: FontAwesome;
            opacity: .55;
        }

    .ssv-crumbs a {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        color: rgba(255, 255, 255, .8);
    }

        .ssv-crumbs a:hover,
        .ssv-crumbs a:focus {
            color: #fff;
        }

    .ssv-crumbs [aria-current="page"] {
        font-weight: 600;
        color: #fff;
    }

    .ssv-crumbs .fa {
        color: #FFB067;
    }

.ssv-scope .ssv-page-banner__title {
    font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.3rem);
    line-height: 1.12;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}

    .ssv-scope .ssv-page-banner__title::after {
        content: "";
        display: block;
        width: 52px;
        height: 3px;
        margin: 1.1rem 0 1rem;
        border-radius: 3px;
        background: var(--accent);
    }

.ssv-page-banner__sub {
    max-width: 38rem;
    font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
    color: rgba(255, 255, 255, .88);
}


/* 2. SHARED — TEXT / LINK CARDS / REVEAL-ON-SCROLL -------------------------- */

.ssv-about-title {
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
}

.ssv-about-text p {
    margin-bottom: 1.1rem;
    font-size: 1.02rem;
    line-height: 1.85;
    color: #334155;
}

.ssv-explore-title {
    margin-bottom: 1.5rem;
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem);
}

.ssv-scope .ssv-link-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    color: var(--primary);
}

    .ssv-scope .ssv-link-card:hover,
    .ssv-scope .ssv-link-card:focus {
        color: var(--primary);
    }

.ssv-link-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--warm-bg) 0%, rgba(253, 248, 243, 0) 60%);
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
}

.ssv-link-card:hover::after {
    opacity: 1;
}

.ssv-link-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFF1E3;
    color: var(--accent-deep);
    font-size: 1.15rem;
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.ssv-link-card__title {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.ssv-link-card__arrow {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    font-size: .9rem;
    color: var(--accent-ink);
    transition: transform .25s var(--ease);
}

.ssv-link-card:hover .ssv-link-card__icon {
    background: var(--btn-bg);
    color: #fff;
    transform: scale(1.06);
}

.ssv-link-card:hover .ssv-link-card__arrow {
    transform: translateX(4px);
}

.ssv-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

    .ssv-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

.ssv-reveal-group > *:nth-child(2) > [data-ssv-reveal] {
    transition-delay: .08s;
}

.ssv-reveal-group > *:nth-child(3) > [data-ssv-reveal] {
    transition-delay: .16s;
}


/* 3. DEPARTMENTS ------------------------------------------------------------- */

.ssv-dept-intro { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ssv-dept-intro__text { max-width: 46rem; font-size: 1.02rem; line-height: 1.8; color: var(--muted); }

/* Quick-jump pills to each department section below */
.ssv-dept-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

    .ssv-dept-jump a {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .6rem 1.25rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #fff;
        color: var(--primary);
        font-weight: 600;
        font-size: .92rem;
        transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
    }

        .ssv-dept-jump a:hover,
        .ssv-dept-jump a:focus {
            background: var(--btn-bg);
            border-color: var(--btn-bg);
            color: #fff;
            transform: translateY(-1px);
        }

        .ssv-dept-jump a .fa {
            font-size: .9em;
        }

/* Department spotlight visual: a decorative icon panel (no stock photography
   pretending to be a real department photo) with a program badge, echoing the
   "1969 Established" badge treatment on the About Us page photo. */
.ssv-dept-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

    .ssv-dept-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, .16) 1.5px, transparent 1.5px);
        background-size: 22px 22px;
    }

    .ssv-dept-visual .fa {
        position: relative;
        z-index: 1;
        font-size: clamp(4.5rem, 3.5rem + 4vw, 7rem);
        color: rgba(255, 255, 255, .92);
    }

.ssv-dept-visual--arts { background: linear-gradient(150deg, #FF8A3D 0%, #E8620A 100%); }
.ssv-dept-visual--science { background: linear-gradient(150deg, #2CC3A8 0%, #0F8F78 100%); }
.ssv-dept-visual--commerce { background: linear-gradient(150deg, #A78BFA 0%, #7048D9 100%); }

.ssv-dept-visual__badge {
    position: absolute;
    z-index: 1;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .55rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-md);
    line-height: 1.15;
}

    .ssv-dept-visual__badge strong {
        font: 700 1.35rem/1 var(--font-head);
        color: var(--primary);
    }

    .ssv-dept-visual__badge span {
        margin-top: .25rem;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--accent-ink);
    }


/* 4. REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ssv-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}