/* ==========================================================================
   SSV College — inner pages
   File: css/inner-pages.css   (linked from each inner page through the "head" placeholder)

   Works together with css/site-modern.css (tokens, buttons, cards, section heads) and
   Bootstrap 4 (grid). Everything is prefixed "ssv-" and lives under ".ssv-scope".

   Contents
     1. Shared: page banner + breadcrumb           (reuse on every inner page)
     2. About Us
     3. Reduced motion
   ========================================================================== */


/* 1. SHARED — PAGE BANNER + BREADCRUMB ------------------------------------
   Set a background photo per page with:  style='--pb-image: url("...")'
   on the .ssv-page-banner element (see AboutUs.aspx). Without one, it falls
   back to the plain navy gradient below, so pages that don't set it still look right.
   If the section right after the banner is tinted (.ssv-section--tint) rather than
   white, add the modifier class .ssv-page-banner--tint-next so the curved edge matches. */
.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);
}

/* quiet dot-grid texture between the photo and the text */
.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;
}

/* soft curved edge into the section that follows, so the banner doesn't end on a hard line */
.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;
}

/* big translucent Font Awesome icon as a quiet watermark */
.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. ABOUT US ------------------------------------------------------------- */

/* Photo with an orange offset frame and an "Established" badge */
.ssv-about-photo {
    position: relative;
    z-index: 0;
    margin: 0 16px 16px 0;
}

    .ssv-about-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-about-photo img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 520px;
        object-fit: cover;
        border-radius: var(--radius-lg);
        background: var(--border);
        box-shadow: var(--shadow-md);
    }

.ssv-about-photo__badge {
    position: absolute;
    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-about-photo__badge strong {
        font: 700 1.6rem/1 var(--font-head);
        color: var(--primary);
    }

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

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

/* Reusable pull-quote / highlighted-note block: used on About Us (the "sacred memory"
   note) and on Principal's Desk (the closing message). Not page-specific despite living
   in this section — safe to reuse on any inner page. */
.ssv-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid #F6E3D0;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--warm-bg);
}

.ssv-callout__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFE9D2;
    color: var(--accent-deep);
}

.ssv-about-text .ssv-callout p {
    margin: 0;
    font-weight: 500;
    color: var(--primary);
}

/* At-a-glance fact cards */
.ssv-fact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: clamp(1.25rem, .9rem + 1.4vw, 1.9rem) clamp(1.1rem, .8rem + 1.2vw, 1.75rem) clamp(1.1rem, .8rem + 1.2vw, 1.75rem);
    overflow: hidden;
}

    .ssv-fact::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent) 0%, #FFB067 100%);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .35s var(--ease);
    }

    .ssv-fact:hover::before {
        transform: scaleX(1);
    }

.ssv-fact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: .6rem;
    border-radius: 12px;
    background: #FFF1E3;
    color: var(--accent-deep);
    font-size: 1.2rem;
    transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}

.ssv-fact:hover .ssv-fact__icon {
    transform: scale(1.08) rotate(-6deg);
    background: var(--btn-bg);
    color: #fff;
}

.ssv-fact__value {
    font: 700 clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem)/1.1 var(--font-head);
    color: var(--primary);
    overflow-wrap: anywhere;
}

.ssv-scope .ssv-fact__label {
    font: 600 1rem/1.3 var(--font-body);
    letter-spacing: 0;
    color: var(--primary);
}

.ssv-fact__note {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--muted);
}

/* "Explore more" link cards */
.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.
   Starts hidden only once JS confirms it can animate it back in; see site-modern.js §6. */
.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 goes on the row; [data-ssv-reveal] is one level deeper, inside each column */
.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;
}

@media (max-width: 575.98px) {
    .ssv-about-photo__badge strong {
        font-size: 1.35rem;
    }
}


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