/* =====================================================
   TEAM PAGE
   Reuses the experts hero banner (blue) for the top band, then a body of
   people cards: photo, name, role line, hairline, detail. Two groups — the
   core team and the advisors.
===================================================== */

/* --- Nav over the blue banner --------------------------------------------
   The header pill is transparent before the reader scrolls, so on this page
   it floats over the blue banner. Lift the nav text to white while
   un-scrolled; once scrolled the pill turns opaque and the default dark text
   takes back over. Mirrors the experts-category rule. */
body[data-page="team"] .header:not([data-scrolled='true']) .header__link,
body[data-page="team"] .header:not([data-scrolled='true']) .header__login,
body[data-page="team"] .header:not([data-scrolled='true']) .header__menu-btn{
    color:#fff;
}
body[data-page="team"] .header:not([data-scrolled='true']) .header__link:hover{
    color:#fff;
}
body[data-page="team"] .header:not([data-scrolled='true']) .header__login{
    border-color:rgba(255,255,255,.5);
}

/* Deeper blue for more presence, matching the category banners. */
body[data-page="team"] .experts-hero-banner{
    background:#1E4482;
}

/* =====================================================
   SECTION WASH
   A soft tinted gradient behind the card grids gives the frosted glass a
   backdrop to blur, so the frosting reads instead of looking flat white.
===================================================== */

body[data-page="team"] .section--tint{
    background:linear-gradient(180deg,#e4edfa 0%,#eef4fc 55%,#f6f9fd 100%);
}
body[data-page="team"] .section--plain:has(.team-grid--advisors){
    background:linear-gradient(180deg,#fff 0%,#eef4fc 45%,#e7effb 100%);
}

/* =====================================================
   GROUP HEADING
===================================================== */

.team-group__head{
    text-align:center;
    margin-bottom:var(--space-10, 2.5rem);
}

/* =====================================================
   PEOPLE CARDS
===================================================== */

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(1.5rem, 2.4vw, 2.25rem);
}
.team-grid--advisors{
    grid-template-columns:repeat(2,1fr);
    max-width:900px;
    margin-inline:auto;
}

.team-card{
    display:flex;
    flex-direction:column;
    /* Frosted glass — a translucent white pane the section wash shows through,
       with a blur that picks up the tinted backdrop behind it. */
    background:var(--glass-bg-strong, rgba(255,255,255,.58));
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid var(--glass-border, rgba(255,255,255,.55));
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:
        0 14px 42px rgba(31,54,102,.12),
        inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
    height:100%;
}
.team-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.72);
    box-shadow:
        0 24px 60px rgba(31,54,102,.18),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.team-card__photo{
    aspect-ratio:4 / 3;
    width:100%;
    overflow:hidden;
    background:var(--ls-blue-50, #eef4fc);
}
.team-card__photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .5s ease;
}
.team-card:hover .team-card__photo img{
    transform:scale(1.04);
}

.team-card__body{
    padding:clamp(1.25rem, 2vw, 1.75rem);
    display:flex;
    flex-direction:column;
    flex:1;
}
.team-card__name{
    margin:0;
    font-size:1.3rem;
    font-weight:800;
    color:var(--fg);
    letter-spacing:-0.01em;
}
.team-card__role{
    margin:6px 0 0;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#2F67B7;
}
.team-card__rule{
    height:1px;
    width:44px;
    background:#2F67B7;
    border:0;
    margin:16px 0;
    opacity:.5;
}
.team-card__detail{
    margin:0;
    font-size:1rem;
    line-height:1.65;
    color:var(--fg-muted);
}

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

@media(max-width:960px){
    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:620px){
    .team-grid,
    .team-grid--advisors{
        grid-template-columns:1fr;
        max-width:420px;
    }
}