/*
 * .team-section-shell IS the pinned scroll-mask animation's "third
 * section" on the About page — assets/js/main.js toggles its opacity the
 * instant #about-intro's pill fully covers the screen and starts lifting
 * away, same pattern as risks-section-shell on the home page.
 */
.team-section-shell {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .team-section-shell {
        transition: none;
    }
}

.team-section {
    --team-pad-x: 20px;
    box-sizing: border-box;
    width: 100%;
    /* Fills the shell's 100vh exactly (percentage heights resolve here
       because .team-section-shell has a definite height via inset:0),
       so align-items:center below can distribute whatever's left AFTER
       the fixed top/bottom floors — instead of a flat 96px top/bottom
       padding that stayed the same no matter how little vertical room a
       shorter laptop screen actually had, pushing the member row down
       into content that then had nowhere to go but clipped or shifted.
       On a tall screen the centering soaks up the extra space; on a
       short one there's nothing to soak up and the floors are all
       that's left. */
    height: 100%;
    padding: 120px var(--team-pad-x) 40px;
    display: flex;
    align-items: center;
    /* Top floor is 120px, not a symmetric 40px: .site-header stays
       sticky and visible the whole time this shell is revealed (unlike
       the home page's risks-section-shell, main.js never hides it
       here), so anything drawn less than its full 120px height (80px
       logo + 20px*2 padding, see header/style.css) gets clipped
       underneath it — exactly what was cutting off the top of "Our
       Team". */
    background: #FFFFFF;
}

@media (min-width: 500px) {
    .team-section {
        --team-pad-x: 40px;
    }
}

@media (min-width: 768px) {
    .team-section {
        --team-pad-x: 60px;
    }
}

@media (min-width: 900px) {
    .team-section {
        --team-pad-x: 96px;
    }
}

/*
 * Without a max-width, a wide viewport just stretches .team-section and
 * leaves everything pinned to the left edge (the exact "massive/lopsided"
 * bug already hit once on services-section) — capping + centering this
 * inner wrapper avoids it. flex-direction:column + gap replaces what used
 * to be a position:absolute header floating over track's own hardcoded
 * top-padding "clearance" — header and track are now just two plain
 * stacked children.
 */
.team-section__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.team-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-section__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 108%;
    letter-spacing: -0.03em;
    color: #023A85;
}

.team-section__highlight {
    color: rgba(252, 169, 58, 1);
}

.team-section__nav {
    display: flex;
    gap: 16px;
}

.team-section__arrow {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #023A85;
    border-radius: 50%;
    background: transparent;
    color: #023A85;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.team-section__arrow:hover {
    background: #023A85;
    color: #FFFFFF;
}

/* Set by assets/js/main.js's generic carousel IIFE once the track is
   scrolled all the way to that end. */
.team-section__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.team-section__arrow:disabled:hover {
    background: transparent;
    color: #023A85;
}

.team-section__track {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.team-section__track::-webkit-scrollbar {
    display: none;
}

.team-card {
    flex: 0 0 auto;
    width: 380px;
    scroll-snap-align: start;
    border-radius: 32px;
    overflow: hidden;
}

.team-card__photo {
    /* Raised from 280px — still well under the original 420px that used
       to overflow the pinned 100vh stage this section sits inside on the
       About page (.about-scroll-stage has overflow:hidden), but tall
       enough that background-size:cover crops portrait photos less
       aggressively. */
    height: 340px;
    background-color: #E7F1FF;
    background-size: cover;
    background-position: center;
}

.team-card__info {
    box-sizing: border-box;
    padding: 24px 28px;
    background: #E7F1FF;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-card__name {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.03em;
    color: #023A85;
}

.team-card__role {
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #023A85;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .team-section__title {
        font-size: 28px;
    }

    .team-card {
        width: 280px;
    }

    .team-card__photo {
        height: 240px;
    }
}

/*
 * Below 400px the 280px card plus 24px side padding leaves barely any
 * peek of the next card, reading as an oddly centered single block —
 * the peek-carousel treatment (card centered, next one visible at the
 * edge) only earns its keep on phones this narrow. From 400px up to
 * 768px the track behaves like the plain start-aligned rule above
 * instead.
 */
@media (max-width: 400px) {
    .team-section__track {
        /* Half the leftover space on each side (viewport minus one
           280px card) — the first card sits centered at rest instead
           of flush against the edge, and the next card's edge peeks in
           from the right by whatever's left after the 24px gap. */
        padding: 0 calc((100% - 280px) / 2);
    }

    .team-card {
        /* start (the 768px rule above) snaps each card flush to the
           track's edge — center is what actually produces the
           peek-carousel look together with the padding above. */
        scroll-snap-align: center;
    }
}