/* ============================================================
   Team - page-level CSS (T13)
   Figma: desktop 1331:152377, mobile 1331:152732. No tablet frame: 768-1024
   follows the mobile frame.

   The two leadership grids are built here (no other template uses them) around
   the TeamCard class; everything else is a shared class that carries its own
   look. Every neighbour differs in background, so each section pads
   --space-section-alt (80 / 48); the reviews pad themselves.
   ============================================================ */

/* ── Hero: the Team frame's is shorter than the other stats heroes (674 / 565) ── */
@media (min-width: 1025px) {
    .teams .page-hero--stats { min-height: 674px; }
}
@media (max-width: 767px) {
    .teams .page-hero--stats { min-height: 565px; }
}

.teams__section--executive,
.teams__section--departmental,
.teams__section--life,
.teams__section--values {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}

/* ── Leadership grids ─────────────────────────────────────── */
.teams__section--executive,
.teams__section--departmental {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.teams__section--departmental {
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
}
.team-grid__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.team-grid__head {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centred on desktop */
    gap: 8px;
    text-align: center;
}
.team-grid__head .eyebrow { margin: 0; }
.team-grid--departmental .team-grid__eyebrow { color: var(--color-accent); }   /* Tertiary */
.team-grid__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
}
.team-grid--departmental .team-grid__heading { color: var(--color-text-inverse); }

.team-grid__item { display: flex; height: auto; }   /* the frames draw every card in a row the same height */
.team-grid__item .team-card { flex: 1 1 auto; width: 100%; }

/* Desktop: four across, no carousel; the departmental heads in two rows, centred.
   The swiper wrappers add no box of their own. */
@media (min-width: 1025px) {
    .team-grid__swiper,
    .team-grid__swiper .team-grid__list { display: contents; }
    .team-grid__body {
        display: grid;
        gap: 20px;
        justify-content: center;
    }
    .team-grid--executive .team-grid__body {
        grid-template-columns: repeat(4, minmax(0, 286px));
        padding-top: 29px;   /* room for the cut-outs that break out above the cards */
    }
    .team-grid--departmental .team-grid__body { grid-template-columns: repeat(4, minmax(0, 232px)); }
    .team-grid__item.swiper-slide { width: auto; }
    .team-grid__item .team-card { max-width: 286px; }
    .team-grid--departmental .team-grid__item .team-card { max-width: 232px; }
    .team-grid--png .team-grid__body { padding-top: 0; }   /* the PNG carries its own pop-out room */
}

/* ── Tablet and mobile: a swipe row, the heading left-aligned ── */
@media (max-width: 1024px) {
    .team-grid__inner { gap: 20px; }
    .team-grid__head { align-items: flex-start; text-align: left; }
    .team-grid__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .team-grid__swiper {
        margin: 0 calc(var(--space-gutter) * -1);
        padding: 29px var(--space-gutter) 0;   /* room above for the cut-outs; the row bleeds to both edges */
        overflow: hidden;
    }
    .team-grid__swiper:focus-visible {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: -2px;
    }
    .team-grid--executive .team-grid__item.swiper-slide { width: 287px; }
    .team-grid--departmental .team-grid__item.swiper-slide { width: 232px; }
    .team-grid--departmental .team-grid__swiper { padding-top: 0; }
    .team-grid--png .team-grid__swiper { padding-top: 0; }
}