/* ==========================================================================
   SSV College — Mission & Vision
   File: css/MissionVision.css

   Self-contained, matching the pattern in css/AboutUs.css: section 1 below is the
   same page-banner/breadcrumb ruleset as AboutUs.css (byte-for-byte, so this page's
   hero renders identically), section 2 is the handful of reusable bits this page
   also needs (.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: link cards + reveal-on-scroll  (identical to css/AboutUs.css)
     3. Mission & Vision
     4. Reduced motion
   ========================================================================== */


/* 1. SHARED — PAGE BANNER + BREADCRUMB ------------------------------------
   Set a background photo per page with:  style='--pb-image: url("...")'
   on the .ssv-page-banner element. Without one, it falls back to the plain navy
   gradient below. Override --pb-after-bg inline when the section right after the
   banner isn't plain white (this page sets it to var(--primary) — see MissionVision.aspx). */
.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 — LINK CARDS + REVEAL-ON-SCROLL -------------------------------- */

.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);
}

/* Reveal-on-scroll: applied via data-ssv-reveal in js/site-modern.js. */
.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;
}

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

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


/* 3. MISSION & VISION ------------------------------------------------------- */

/* Our Vision: one large full-bleed statement panel, echoing the Vision & Mission
   section on the homepage but built for a single wide statement rather than two
   columns. Background photo comes from --mv-image (see MissionVision.aspx). */
.ssv-mv-vision {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 2.5rem + 5vw, 6rem) 0;
    color: #fff;
    background-color: var(--primary);
    background-image: linear-gradient(100deg, rgba(11, 37, 69, .93) 0%, rgba(11, 37, 69, .74) 55%, rgba(11, 37, 69, .6) 100%), var(--mv-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ssv-mv-vision__panel {
    max-width: 46rem;
}

.ssv-mv-vision__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #FFB067;
    font-size: 1.6rem;
}

.ssv-mv-vision__title {
    margin-bottom: 1.1rem;
    font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
    line-height: 1.2;
    color: #fff;
}

.ssv-mv-vision__text {
    font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
    line-height: 1.85;
    color: rgba(255, 255, 255, .92);
}

/* Our Mission: five points pulled straight from the college's own mission statement,
   shown as a grid of icon tiles rather than a plain bulleted list. */
.ssv-mv-mission {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}

.ssv-mv-mission__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(145deg, #FFB067, var(--accent-deep));
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 8px 16px rgba(232, 98, 10, .22);
    transition: transform .3s var(--ease);
}

.ssv-mv-mission:hover .ssv-mv-mission__icon {
    transform: scale(1.07) rotate(-4deg);
}

.ssv-mv-mission__text {
    margin: 0;
    font-size: .98rem;
    line-height: 1.65;
    color: #334155;
}


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