/* ==========================================================================
   SSV College — Fee Structure
   File: css/FeeStructure.css

   Self-contained, matching the pattern in css/AboutUs.css, css/MissionVision.css and
   css/Departments.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-callout, .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: callout / link cards / reveal    (identical to css/AboutUs.css)
     3. Fee Structure
     4. Print
     5. 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 — CALLOUT / LINK CARDS / REVEAL-ON-SCROLL ----------------------- */

.ssv-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.75rem 0 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-callout p {
    margin: 0;
    font-weight: 500;
    color: var(--primary);
}

    .ssv-callout p a {
        color: var(--accent-ink);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .ssv-callout p a:hover,
        .ssv-callout p a:focus {
            color: var(--primary);
        }

.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. FEE STRUCTURE ----------------------------------------------------------- */

/* The approved fee structure is published as a single image (images/fee-structure.jpg),
   not typed-out figures, so it's framed like a document rather than invented as a table. */
.ssv-fee-card {
    position: relative;
    margin: 0 0 1.75rem;
    padding: clamp(.75rem, .5rem + 1vw, 1.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-md);
}

    .ssv-fee-card a {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: var(--radius);
        cursor: zoom-in;
    }

    .ssv-fee-card img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius);
        background: var(--light-bg);
        transition: transform .4s var(--ease);
    }

    .ssv-fee-card a:hover img,
    .ssv-fee-card a:focus img {
        transform: scale(1.015);
    }

.ssv-fee-card__zoom {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: rgba(11, 37, 69, .82);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}

.ssv-fee-card a:hover .ssv-fee-card__zoom,
.ssv-fee-card a:focus .ssv-fee-card__zoom {
    opacity: 1;
}

.ssv-fee-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.ssv-scope button.ssv-btn {
    border: 2px solid var(--primary);
}

    .ssv-scope button.ssv-btn.ssv-btn--outline {
        border-color: var(--primary);
    }


/* 4. PRINT -------------------------------------------------------------------
   Only the fee-structure image itself should print; header, footer, banner and
   buttons are hidden via .ssv-fee-print-hide so it comes out as a clean copy. */
@media print {
    .ssv-fee-print-hide,
    .ssv-header,
    .ssv-footer {
        display: none !important;
    }

    .ssv-fee-card {
        box-shadow: none;
        border: none;
        padding: 0;
    }

        .ssv-fee-card a {
            cursor: default;
        }

    .ssv-fee-card__zoom {
        display: none;
    }
}


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