/* ==========================================================================
   SSV College — Student Life
   File: css/StudentLife.css

   Self-contained, matching the pattern in css/AboutUs.css, css/MissionVision.css,
   css/Departments.css and css/FeeStructure.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, .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 ...) 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 cards / reveal       (identical to css/AboutUs.css)
     3. Student Life
     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. STUDENT LIFE ------------------------------------------------------------- */

/* NCC/NSS photo with an offset accent frame and an icon badge, echoing the
   "1969 Established" photo treatment on the About Us page. */
.ssv-sl-photo {
    position: relative;
    z-index: 0;
    margin: 0 16px 16px 0;
}

    .ssv-sl-photo::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 16px;
        left: 16px;
        right: -16px;
        bottom: -16px;
        border: 3px solid var(--accent);
        border-radius: var(--radius-lg);
    }

    .ssv-sl-photo--nss::before {
        border-color: #0F8F78;
    }

    .ssv-sl-photo img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 420px;
        object-fit: cover;
        border-radius: var(--radius-lg);
        background: var(--border);
        box-shadow: var(--shadow-md);
    }

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

    .ssv-sl-photo__badge .fa {
        margin-bottom: .3rem;
        font-size: 1.1rem;
        color: var(--accent-deep);
    }

    .ssv-sl-photo--nss .ssv-sl-photo__badge .fa {
        color: #0F8F78;
    }

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

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

    .ssv-sl-photo--nss .ssv-sl-photo__badge span {
        color: #0F8F78;
    }


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