/* ==========================================================================
   Team Grid Block — Smith 2.0 ("Meet our Team")
   Navy member cards: square headshot, serif name, role. Figma node 10665:2504.
   ========================================================================== */

.block-team {
    background-color: var(--color-white, #fff);
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

.block-team .container {
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
}

.block-team__heading {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    font-size: 3.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-blue-zodiac, #0e1b44);
    text-align: center;
    margin: 0 0 3rem;
}

/* ---- Grid -------------------------------------------------------------- */
.block-team__grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(4, 1fr);
}
.block-team__grid--3 { grid-template-columns: repeat(3, 1fr); }
.block-team__grid--5 { grid-template-columns: repeat(5, 1fr); }
.block-team__grid--2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-inline: auto;
}

/* ---- Member card (navy) ------------------------------------------------ */
.block-team__member {
    display: flex;
    flex-direction: column;
    background-color: var(--color-blue-zodiac, #0e1b44);
    color: var(--color-white, #fff);
    overflow: hidden;
}

.block-team__photo {
    display: block;
    width: 100%;
    /* Figma About team card (10773:71962): 240x277 portrait crop */
    aspect-ratio: 240 / 277;
    object-fit: cover;
}

.block-team__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1b2a55;
    color: var(--color-white, #fff);
}

/* Figma card band: centered text, pad 16px 24px — Role Barlow Bold 14 white,
   "Joined in YYYY" Barlow 400 14 white.

   BugZap #85 - Christine, verbatim:
       "match style of Agentis design:
        text style changes to name, title, joined
        Move arrow beside name **first row only (all 4 will have)
        Add linked in button below **first row only (all 4 will have)"

   Resolved against the Agentis design export's REAL cascade at viewport 1759, not by
   reading its stylesheet top-down: the export authors this block twice and only
   the later !important layer renders. Measured on the export:
       card      299x529, padding-bottom 20px
       photo     299x345            (240/277 portrait crop - unchanged)
       name-row  251x26, margin 20px 24px 0, gap 8px, centred
       name      Hoefler Text 400, 20px / 26px, letter-spacing -0.01em, white
       arrow     20x20 glyph, inline in the row, hover gold
       role      margin-top 4px     (Barlow 700 14 - unchanged)
       joined    margin-top 4px     (Barlow 400 14 - unchanged)
       LinkedIn  40x40 circle, margin 16px auto 0, 18px glyph
       345 + 20 + 26 + 4 + role + 4 + joined + 16 + 40 + 20 = 529 exactly.

   On "text style changes to ... title, joined": the export RENDERS role and
   joined at 17px / weight 300, but that is its own blanket
   `p { font-size: 1.0625rem !important; font-weight: 300 !important }` bleeding
   through - its authored .block-team__role and .block-team__joined rules are
   identical to ours (0.875rem / 1.4 / 700 and 400, white, centred). So the only
   real type change on the card is the name: Barlow Bold -> Hoefler Text Regular,
   which is also what the Smith Style Guide asks for. */
/* The !important flags here are load-bearing, not decorative.
   assets/css/figma-layer/figma-mobile-v4.css holds the global type scale and
   applies !important to the bare `h4` element selector:
       font-family: var(--font-serif)    font-weight: 400
       font-size:   var(--h4-card-size)  = 1.75rem / 28px
       line-height: var(--h4-card-lh)    = 1.286  / 36px
       letter-spacing: -0.01em
   Now that the card name is an <h4> (matching the export), that global rule
   would win over a plain class declaration. `.block-team__name` is (0,1,0)
   against the scale layer's (0,0,1), so !important here wins on specificity
   regardless of enqueue order - the same reason the Agentis design export declares
   `.block-team__name { font-size: 1.25rem !important; line-height: 1.3 !important }`.
   Measured live on staging: without the flags the name rendered 28px/36px and
   wrapped to two lines, taking the card to 560px tall; with them it renders
   20px/26px on one line and the card is 514px, matching the export. */
.block-team__name {
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif) !important;
    font-weight: 400 !important; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--color-white, #fff);
    text-align: center;
    margin: 0;
}

/* Name + bio arrow share one centred row (BugZap #85). Emitted for every card,
   so the photo -> name gap is identical whether or not a member has a bio. */
.block-team__name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem 1.5rem 0;
}

.block-team__role {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-white, #fff);
    text-align: center;
    margin: 0.25rem 1.5rem 0;
}

.block-team__joined {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-white, #fff);
    text-align: center;
    /* Bottom breathing room is the card's own padding now (BugZap #85), so the
       gap is the same with or without the LinkedIn circle underneath. */
    margin: 0.25rem 1.5rem 0;
}

/* ---- Bio modal (leadership rows) ------------------------------------- */
/* BugZap #85 supersedes BZ #33 rev 2: the bio arrow is no longer pinned to the
   card's bottom-right corner. It sits inline beside the name, so it needs no
   box of its own and no translateX nudge - just a 20px glyph that goes gold on
   hover. The glyph also changes from a chevron to a full arrow, matching the
   Agentis design export (line 5,12 -> 19,12 plus polyline 12 5 / 19 12 / 12 19). */
.block-team__member {
    position: relative;
    padding-bottom: 1.25rem;
}

.block-team__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-white, #fff);
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}
.block-team__more svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}
.block-team__more:hover,
.block-team__more:focus-visible {
    color: var(--color-selective-yellow, #f0b200);
}

.block-team__modal[hidden] { display: none; }

.block-team__modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.block-team__modal.is-open { opacity: 1; }

.block-team__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 27, 68, 0.8); /* blue-zodiac scrim */
    cursor: pointer;
}

.block-team__modal-panel {
    position: relative;
    display: flex;
    /* BugZap #192 - this panel is the scroll container (overflow-y below).
       With the default align-items:stretch the body was pinned to the panel's
       560px content box while the bio text overflowed straight out of that
       box, so the body's own padding-bottom was painted ~3,500px above where
       the text actually ended and the last line sat flush on the panel edge
       (measured: 0px from bio bottom to panel bottom at scroll end).
       flex-start lets the body size to its content; the 40px of end space
       then lives on .block-team__modal-body and lands in the scrollable
       region exactly once - hence padding-bottom:0 here. */
    align-items: flex-start;
    gap: 2rem;
    max-width: 720px;
    width: 100%;
    max-height: min(85vh, 640px);
    overflow-y: auto;
    background: var(--color-white, #fff);
    padding: 2.5rem 2.5rem 0;
}

/* BugZap #192 - the end space for the scrollable panel. Lives here (not on
   the panel) because a flex scroll container's own end padding is not
   reliably included in the scrollable overflow region across browsers. */
.block-team__modal-body {
    padding-bottom: 40px;
}

.block-team__modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--color-blue-zodiac, #0e1b44);
    cursor: pointer;
}
.block-team__modal-close:hover { color: var(--color-surfie-green, #0f7e7c); }

.block-team__modal-photo {
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    object-fit: cover;
}

.block-team__modal-name {
    margin: 0 0 0.25rem;
    font-family: var(--font-family-heading, "Hoefler Text", Georgia, serif);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--color-blue-zodiac, #0e1b44);
}

.block-team__modal-role {
    margin: 0 0 1rem;
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-surfie-green, #0f7e7c);
}
.block-team__modal-joined {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted, #5a6072);
}

.block-team__modal-bio {
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-blue-zodiac, #0e1b44);
}
.block-team__modal-bio p { margin: 0 0 1em; }
.block-team__modal-bio p:last-child { margin-bottom: 0; }

.block-team__modal-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-family: var(--font-family-base, "Barlow", sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-surfie-green, #0f7e7c);
    text-decoration: none;
}
.block-team__modal-linkedin:hover { text-decoration: underline; }

@media (max-width: 640px) {
    /* BugZap #192 - in column direction align-items governs the horizontal
       axis, so flex-start would shrink-wrap the body. Back to stretch; the
       body is already content-sized on the main axis here. */
    .block-team__modal-panel { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1.75rem 1.75rem 0; }
    .block-team__modal-photo { width: 120px; height: 120px; flex-basis: auto; }
}

body.has-modal-open { overflow: hidden; }

/* ---- LinkedIn circle on the card (BugZap #85) -------------------------- */
/* Christine: "Add linked in button below **first row only (all 4 will have)".
   It is field-driven, not a variant: the circle renders whenever the member has
   a LinkedIn URL, which is why the export shows it on all four leadership cards
   and on none of the second row. 40x40 hairline circle, gold fill on hover with
   the glyph flipping to navy. */
.block-team__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--color-white, #fff);
    transition: color 0.2s ease;
}
.block-team__social:hover { color: var(--color-pine-glade, #b9c789); }

.block-team__social--circle {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    margin: 1rem auto 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: transparent;
    line-height: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Same specificity as .block-team__social:hover above and declared after it, so
   the circle keeps the gold/navy treatment rather than the pine-glade one. */
.block-team__social--circle:hover,
.block-team__social--circle:focus-visible {
    background-color: var(--color-selective-yellow, #f0b200);
    border-color: var(--color-selective-yellow, #f0b200);
    color: var(--color-blue-zodiac, #0e1b44);
}

/* ---- Responsive -------------------------------------------------------- */
/* Tighter card furniture once the grid drops to two-up (BugZap #85, matching
   the export's own narrow step). Card type is deliberately left alone here -
   the export's mobile layer contradicts itself on name size and Christine's
   note was written against the 1970px desktop view. */
@media (max-width: 767px) {
    .block-team__name-row {
        gap: 0.125rem;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    .block-team__social--circle {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 991px) {
    .block-team__grid,
    .block-team__grid--3,
    .block-team__grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .block-team__grid,
    .block-team__grid--2,
    .block-team__grid--3,
    .block-team__grid--5 { grid-template-columns: 1fr; max-width: 360px; }
}