/* =====================================================
   CATEGORY PAGES — NAV OVER BLUE BANNER
   The header pill is transparent before the reader scrolls, so on these
   pages it floats over the blue banner. Dark nav text is unreadable there,
   so lift it to white while un-scrolled; once scrolled the pill turns to
   opaque clay again and the default dark text takes back over.
   Scoped to data-page="experts-category" — the expert hub ("experts") opens
   with a white banner instead, so it keeps the default dark nav.
===================================================== */

body[data-page="experts-category"] .header:not([data-scrolled='true']) .header__link,
body[data-page="experts-category"] .header:not([data-scrolled='true']) .header__login,
body[data-page="experts-category"] .header:not([data-scrolled='true']) .header__menu-btn{
    color:#fff;
}

body[data-page="experts-category"] .header:not([data-scrolled='true']) .header__link:hover,
body[data-page="experts-category"] .header:not([data-scrolled='true']) .header__nav:not(:hover) .header__link[aria-current='page']{
    color:#fff;
}

body[data-page="experts-category"] .header:not([data-scrolled='true']) .header__login{
    border-color:rgba(255,255,255,.5);
}

/* Category banners run a deeper blue than the brand #2F67B7 for more presence. */
body[data-page="experts-category"] .experts-hero-banner{
    background:#1E4482;
}


/* =====================================================
   EXPERTS HERO
===================================================== */

.experts-hero-banner{

    position:relative;
    overflow:hidden;

    width:100%;

    background:#2F67B7;

    /* Content flows straight after the top padding — no flex centering or
       min-height, both of which were padding the banner out with dead space. */
    text-align:left;

    /* Top padding clears the fixed nav pill; the copy is left-aligned and the
       pill is centred, so it only needs to sit below the pill, not far below.
       Horizontal gutter is handled by __content so the copy lines up with the
       page container below. */
    padding:78px 0 34px;
}

/* decorative dots */

.experts-hero-banner::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
        radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);

    background-size:34px 34px;

    opacity:.25;
}

/* gradient */

.experts-hero-banner::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.08),transparent 35%),
    radial-gradient(circle at 85% 20%,rgba(255,255,255,.08),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(255,255,255,.06),transparent 45%);
}

.experts-hero-banner__content{

    position:relative;
    z-index:5;

    /* Mirror the site .container so the banner copy aligns with the cards and
       stats below it, rather than floating dead-centre. */
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--space-6);
}


.experts-hero-banner__tag{

    color:#DCE8FF;

    font-size:13px;

    font-weight:700;

    letter-spacing:2.5px;

    text-transform:uppercase;

    margin-bottom:16px;

    opacity:0;

    transform:scale(.8);

    animation:expertTagPopup .9s ease forwards;
}

@keyframes expertTagPopup{

    0%{

        opacity:0;
        transform:scale(.8) translateY(20px);
    }

    70%{

        transform:scale(1.05) translateY(-3px);
    }

    100%{

        opacity:1;
        transform:scale(1) translateY(0);
    }

}

.experts-hero-banner__title{

    margin:0;

    /* Matches the site's .h1 scale (caps at 48px) so the banner reads as a
       page heading, not an oversized outlier. */
    font-size:clamp(2.125rem, 1.1rem + 3.6vw, 3rem);

    font-weight:800;

    line-height:1.1;

    color:white;

    letter-spacing:-0.015em;
}

.experts-hero-banner__line{

    /* inline-block keeps the two words on one line while still allowing the
       slide-in transform (a plain inline span would ignore it). */
    display:inline-block;

    opacity:0;

    transform:translateX(-120px);

    animation:expertHeadingSlide 1s ease forwards;
}

.experts-hero-banner__line:nth-child(2){

    animation-delay:.35s;
}

@keyframes expertHeadingSlide{

    from{

        opacity:0;

        transform:translateX(-120px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }

}

.experts-hero-banner__line--accent{

    color:#D8E9FF;
}

.experts-hero-banner__description{

    margin:18px 0 0;

    max-width:680px;

    color:rgba(255,255,255,.88);

    font-size:17px;

    line-height:1.6;
}

@keyframes expertsHeroSlide{

    from{

        opacity:0;

        transform:translateX(-80px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }
}


/* =====================================================
   STATS
===================================================== */

.experts-hero-stats{

    background:white;

    border-radius:26px;

    margin:-55px auto 0;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    box-shadow:0 18px 60px rgba(0,0,0,.12);

    position:relative;

    z-index:20;
}

.experts-hero-stat{

    padding:42px 20px;

    text-align:center;

    position:relative;
}

.experts-hero-stat:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:20%;

    height:60%;

    width:1px;

    background:#E6EBF4;
}

.experts-hero-stat h2{

    margin:0;

    color:#2F67B7;

    font-size:56px;

    font-weight:800;
}

.experts-hero-stat p{

    margin-top:12px;

    font-size:19px;

    color:#666;
}

/* =====================================================
   EXPERT HUB (experts.html) — INVERTED PALETTE
   The hub opens on a white banner with a compact blue stats card, the
   reverse of the category pages' blue banner + white card. Scoped to
   data-page="experts" so only the hub flips.
===================================================== */

body[data-page="experts"] .experts-hero-banner{
    background:#e9f1fc;
    /* Extra bottom room so the stats card can sit half inside the banner
       without colliding with the hero copy above it. */
    padding-bottom:86px;
}

/* Faint blue dots + glow instead of the white-on-blue texture. */
body[data-page="experts"] .experts-hero-banner::before{
    background-image:radial-gradient(rgba(47,103,183,.12) 1px, transparent 1px);
    opacity:.6;
}
body[data-page="experts"] .experts-hero-banner::after{
    background:
        radial-gradient(circle at 15% 15%,rgba(47,103,183,.06),transparent 35%),
        radial-gradient(circle at 85% 20%,rgba(47,103,183,.06),transparent 30%);
}

/* The label is now the hero's headline on the left, so it goes large. */
body[data-page="experts"] .experts-hero-banner__tag{
    color:#2F67B7;
    font-size:clamp(1.9rem, 1rem + 3vw, 3rem);
    letter-spacing:1px;
    line-height:1.05;
    margin-bottom:14px;
}
body[data-page="experts"] .experts-hero-banner__title{
    color:var(--fg, #16233a);
}
body[data-page="experts"] .experts-hero-banner__line--accent{
    color:#2F67B7;
}
body[data-page="experts"] .experts-hero-banner__description{
    color:var(--fg-muted, #556);
}

/* --- Split layout: label + copy on the left, titled box on the right --- */
body[data-page="experts"] .experts-hero-banner__content--split{
    display:grid;
    grid-template-columns:1fr auto;
    gap:clamp(24px, 4vw, 56px);
    align-items:center;
}

/* Outlined box — just a blue border on the white banner, no fill. It hugs the
   title (fit-content) so the right border stays as close to the text as the
   left, with uniform padding all round. */
body[data-page="experts"] .experts-hero-banner__box{
    position:relative;
    overflow:hidden;
    width:fit-content;
    background:transparent;
    border:2px solid #2F67B7;
    border-radius:26px;
    padding:clamp(22px, 2.2vw, 30px) clamp(26px, 2.4vw, 34px);
}

/* Stack the two phrases so the box stays compact and reads as two tidy lines. */
body[data-page="experts"] .experts-hero-banner__title--boxed .experts-hero-banner__line{
    display:block;
}

/* The moved title: navy on the light interior, smaller than a full h1. */
body[data-page="experts"] .experts-hero-banner__title--boxed{
    color:var(--fg, #16233a);
    font-size:clamp(1.3rem, 0.9rem + 1.3vw, 1.75rem);
    line-height:1.2;
    /* Entrance slide lives on the child spans; this gentle float + glow keeps
       the title alive at rest. */
    animation:boxTitleFloat 3.4s ease-in-out 1.6s infinite;
}
body[data-page="experts"] .experts-hero-banner__title--boxed .experts-hero-banner__line--accent{
    color:#2F67B7;
}

@keyframes boxTitleFloat{
    0%,100%{
        transform:translateY(0);
        text-shadow:0 0 0 rgba(47,103,183,0);
    }
    50%{
        transform:translateY(-5px);
        text-shadow:0 8px 22px rgba(47,103,183,.22);
    }
}

@media (prefers-reduced-motion: reduce){
    body[data-page="experts"] .experts-hero-banner__title--boxed{
        animation:none;
    }
}

@media(max-width:860px){
    body[data-page="experts"] .experts-hero-banner__content--split{
        grid-template-columns:1fr;
        gap:22px;
    }
}

/* Compact blue stats card. */
body[data-page="experts"] .experts-hero-stats{
    background:#2F67B7;
    max-width:760px;
    /* Overlap the banner's lower edge so the card reads as half inside the
       light-blue banner and half on the white page below it. */
    margin-top:-55px;
}
body[data-page="experts"] .experts-hero-stat{
    padding:24px 16px;
}
body[data-page="experts"] .experts-hero-stat:not(:last-child)::after{
    background:rgba(255,255,255,.22);
}
body[data-page="experts"] .experts-hero-stat h2{
    color:#fff;
    font-size:34px;
}
body[data-page="experts"] .experts-hero-stat p{
    margin-top:6px;
    font-size:14px;
    color:rgba(255,255,255,.82);
}

/* =====================================================
   CATEGORY PAGES — FROSTED GLASS EXPERT CARDS
   White, translucent cards that read as glass. A faint tinted wash on the
   section behind them gives the backdrop-blur something to pick up, so the
   frosting is visible rather than flat white-on-white.
===================================================== */

body[data-page="experts-category"] .section--plain{
    background:linear-gradient(180deg,#eaf0fa 0%,#f6f8fc 55%,#fff 100%);
}

body[data-page="experts-category"] .expert-card{
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:
        0 14px 42px rgba(31,54,102,.12),
        inset 0 1px 0 rgba(255,255,255,.6);
    transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}

body[data-page="experts-category"] .expert-card:hover{
    background:rgba(255,255,255,.78);
    box-shadow:
        0 20px 54px rgba(31,54,102,.16),
        inset 0 1px 0 rgba(255,255,255,.7);
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:900px){

.experts-hero-banner{

    /* Wider nav pill on small screens, so keep a little more top clearance. */
    padding:84px 0 30px;
}

.experts-hero-banner__description{

    font-size:16px;
}

.experts-hero-stats{

    grid-template-columns:repeat(2,1fr);
}

.experts-hero-stat:nth-child(2)::after{

    display:none;
}

}

@media(max-width:640px){

.experts-hero-banner__description{

    font-size:15px;
}

.experts-hero-stats{

    grid-template-columns:1fr;
}

.experts-hero-stat::after{

    display:none;
}

}
/* =====================================================
   REAL EXPERT PROFILES — photos, student cards, filters
   (added for the Career/Student expert integration)
===================================================== */

.expert-card__photo{
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
    background:#dfe7f4;
    box-shadow:0 4px 14px rgba(31,54,102,.18), inset 0 0 0 2px rgba(255,255,255,.85);
}

body[data-page="experts-category"] .expert-card .card__header{
    display:flex;
    align-items:center;
    gap:14px;
}

body[data-page="experts-category"] .expert-card{
    display:flex;
    flex-direction:column;
    gap:12px;
}

body[data-page="experts-category"] .expert-card .card__body{
    flex:1 1 auto;
}

/* Student-expert filter bar */
.expert-filter{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin:0 auto 34px;
    max-width:840px;
}

.expert-filter__btn{
    appearance:none;
    border:1px solid rgba(31,54,102,.16);
    background:rgba(255,255,255,.7);
    color:#274063;
    font:inherit;
    font-size:13px;
    font-weight:600;
    letter-spacing:.01em;
    padding:8px 15px;
    border-radius:999px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.expert-filter__btn:hover{
    background:#fff;
    border-color:rgba(31,54,102,.32);
    transform:translateY(-1px);
}

.expert-filter__btn.is-active{
    background:#0f75ba;
    border-color:#0f75ba;
    color:#fff;
    box-shadow:0 8px 20px rgba(15,117,186,.28);
}

.expert-filter__count-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    margin-left:7px;
    padding:0 5px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    line-height:1;
    background:rgba(31,54,102,.1);
    color:#274063;
    transition:background .2s ease, color .2s ease;
}
.expert-filter__btn.is-active .expert-filter__count-badge{
    background:rgba(255,255,255,.24);
    color:#fff;
}

.expert-filter__count{
    text-align:center;
    margin:-20px auto 26px;
    font-size:13px;
    font-weight:600;
    color:#5a6b85;
}

.expert-item[hidden]{ display:none !important; }

/* Soft entrance when a filter reveals a card. */
.expert-item.is-filtering{
    animation:expert-item-in .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes expert-item-in{
    from{ opacity:0; transform:translateY(10px) scale(.985); }
    to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
    .expert-item.is-filtering{ animation:none; }
}

.expert-empty{
    grid-column:1 / -1;
    text-align:center;
    padding:48px 24px;
    border:1px dashed rgba(31,54,102,.2);
    border-radius:18px;
    background:rgba(255,255,255,.6);
}
.expert-empty__title{
    font-size:18px;
    font-weight:700;
    color:#1f3666;
}
.expert-empty__body{
    margin:8px 0 18px;
    font-size:14px;
    color:#5a6b85;
}

.student-card .card__eyebrow{
    color:#0f75ba;
    font-weight:600;
}

/* Student source photos are wide banners with the person on the left and a
   baked-in CTA on the right — crop the avatar to the left so we show the face,
   not the old button. */
.student-card .expert-card__photo{
    object-position:left center;
    background:#eef2f9;
}

@media(max-width:640px){
    .expert-filter{ gap:6px; }
    .expert-filter__btn{ font-size:12px; padding:7px 12px; }
    .expert-card__photo{ width:56px; height:56px; }
}