/**
 * R3.7A.3A: Team-archive-SPECIFIC rules only -- genuine differences from Portfolio/Insights, never
 * duplicated generic behavior (the shared hero/results/filter-UI/card-geometry/card-rhythm contract
 * lives in, and is tested by, the shared `fgma-archive.css`, consumed here unchanged via the generic
 * `.fgma-archive-*` classes). `.fgma-team-card`/`.fgma-team-card__media`/`.fgma-team-card__title`/
 * `.fgma-team-card__meta` are compounded into the shared card-geometry/vertical-rhythm rules in
 * `fgma-archive.css` for backward-compatible zero-padding/flush-media/Production-derived spacing --
 * nothing about geometry/rhythm needs to be re-declared here.
 *
 * Grid columns themselves (Production-confirmed: 2 mobile / 3 tablet / 4 desktop) are owned natively by
 * Elementor's own Loop Grid widget settings, exactly as Portfolio's/Insights' own grids are -- never
 * Custom CSS here.
 *
 * The grid GAP is a genuine, confirmed Team-specific difference from BOTH Portfolio's and Insights'
 * own contracts: Production's real grid class list is `grid-cols-2 gap-x-lg gap-y-xl md:grid-cols-3
 * lg:gap-2xl`... but Team's own real `lg:` override only re-asserts `gap-x-lg` (confirmed live,
 * re-verified fresh against the actual compiled Production page this pass) and never upgrades to
 * `lg:gap-2xl` on the row axis the way Insights' own grid does -- Team's gap stays `--space-lg`
 * (column) / `--space-xl` (row) at every breakpoint, no responsive override, mapping to the
 * already-existing `--fgma-space-lg`/`--fgma-space-xl` tokens (byte-identical clamp formulas to
 * Production's own `--space-lg`/`--space-xl`), no new token.
 */
.fgma-team-archive-results .elementor-widget-loop-grid .elementor-grid {
    column-gap: var(--fgma-space-lg);
    row-gap: var(--fgma-space-xl);
}

/**
 * Portrait ratio -- confirmed live, Production Team's real portrait frame is `aspect-square` (1:1),
 * genuinely different from Portfolio's/Insights' own confirmed `3:2` frame (`--fgma-media-ratio`) --
 * a real Team-specific visual difference, not an oversight. `1` is a plain, dimensionless structural
 * ratio value (like `flex: 1`), not a design/spacing magic number a `--fgma-*` token could ever
 * meaningfully represent, so it is used directly here, mirroring the same "structural keyword, not a
 * hardcoded value" exemption already established elsewhere in this codebase (e.g. `margin-inline:
 * auto`). `overflow: hidden`/`object-fit: cover`/hover-zoom are all already owned by the shared
 * `.fgma-archive-card__media`/hover-zoom pattern each archive's own media rule already reuses --
 * only the ratio itself differs, so only the ratio is declared here.
 */
.fgma-team-card__media {
    aspect-ratio: 1;
}

/**
 * Careers CTA -- confirmed live, Production's own post-listing Careers section reuses Production's
 * existing global `.cta-card` component (a solid brand-red block, white text, a right-aligned "Explore
 * Careers" link to `/careers/`) -- genuinely Team-archive-specific (the block brief's own explicit
 * instruction: "Do NOT genericize it into all archive pages"), so it is NOT added to the shared
 * `fgma-archive.css` layer. No existing FGMA sitewide CTA-block component was found in this codebase to
 * reuse (`grep` across `fgma-core/assets/css` found no `.cta-card`/`.fgma-cta`-shaped rule), so this is
 * a new, minimal, Team-scoped rule reusing only already-existing tokens (`--fgma-brand-red`, spacing
 * scale) -- never a new sitewide component.
 */
.fgma-team-careers-cta {
    display: block;
    background: var(--e-global-color-v4-fgma-brand-red);
    color: var(--e-global-color-v4-fgma-white);
    padding-block: var(--fgma-space-2xl) var(--fgma-space-xl);
    padding-inline: var(--fgma-gutter);
    margin-block: var(--fgma-space-3xl) var(--fgma-space-2xl);
}

.fgma-team-careers-cta__heading {
    margin: 0;
    color: var(--e-global-color-v4-fgma-white);
}

.fgma-team-careers-cta__link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-block-start: var(--fgma-space-md);
    color: var(--e-global-color-v4-fgma-white);
    text-decoration: none;
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-heavy);
}

.fgma-team-careers-cta__link:hover,
.fgma-team-careers-cta__link:focus-visible {
    text-decoration: underline;
}

.fgma-team-careers-cta__link:focus-visible {
    outline: 2px solid var(--e-global-color-v4-fgma-white);
    outline-offset: 2px;
}

/**
 * R3.7Q-055: Team archive typography -- confirmed live, three elements were falling through
 * Elementor's own Atomic Heading defaults entirely (never this codebase's tokens):
 *
 *  - `.fgma-archive-eyebrow` ("Team"): `fgma-archive.css`'s own shared rule sets `margin`/
 *    `font-size` only, never `font-family` -- so it fell to `global-3277-frontend-desktop.css`'s
 *    own generated `.elementor .fgma-archive-eyebrow{font-family:Roboto;...}`. That generated file
 *    is never edited directly (per this task's own constraint); this is the additive override.
 *  - `.fgma-team-card__title`/`.fgma-team-card__meta` (member name/role): the shared color/margin
 *    rule in `fgma-archive.css` (`.fgma-archive-card__title.e-heading-base`/`.fgma-archive-card__
 *    meta.e-heading-base`) never set `font-family`/`font-weight`/`line-height` either, so both fell
 *    to `reset.css`'s bare `h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.2}`
 *    -- `inherit` resolves to `<body>`'s own Tailwind system-UI stack (confirmed live), the exact
 *    "Arial/system font" this ticket reports. `font-size` is NOT touched here: DEV's real
 *    per-instance `global-3277-frontend-desktop.css` values (25px/18px) already numerically match
 *    Production's own real fluid values closely, and that file is generated/off-limits regardless.
 *
 *  Scoped to `body.post-type-archive-team_member` (WordPress's own native CPT-archive body class)
 *  deliberately, NOT added to the shared multi-archive rule in `fgma-archive.css` -- `.fgma-archive-
 *  card__title.e-heading-base` is also consumed by Insights, and this task's own scope is Team only;
 *  broadening there was neither asked for nor verified. `.fgma-team-card__title`/`__meta` are
 *  themselves already Team-exclusive classes (confirmed live: no other archive's card carries
 *  them), so the body-class prefix is defense-in-depth, mirroring the same scoping convention
 *  `fgma-expertise-archive.css` already uses for its own per-archive overrides.
 *
 *  Name maps to Production's confirmed "AvenirMedium" (`--fgma-weight-medium`); role/meta maps to
 *  Production's confirmed "AvenirBook" (`--fgma-weight-book`) -- both re-fetched live this pass, not
 *  assumed from the ticket's own mapping table alone. `line-height: 1.35` matches Production's own
 *  confirmed ratio (both name and meta) and the identical value already used by the established
 *  Expertise-archive card-title fix (`fgma-expertise-archive.css`), not a new number.
 *
 *  No `.elementor`/generated-class prefix is used in any of these three selectors -- this file's
 *  own established contract (`TeamArchiveStyleContractTest::testOnlyStableNonGeneratedElementorClass
 *  esAreUsed()`) already restricts it to two Loop Grid classes only, and none is needed for
 *  specificity here regardless: `body.post-type-archive-team_member .fgma-*` is (0,2,1), which still
 *  exceeds both the generated eyebrow rule's (0,2,0) (the tie-breaking third value alone decides it)
 *  and `reset.css`'s bare-tag rule's (0,0,1) outright -- no `!important` needed either way.
 */
body.post-type-archive-team_member .fgma-archive-eyebrow {
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-book);
}

body.post-type-archive-team_member .fgma-team-card__title {
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-medium);
    line-height: 1.35;
}

body.post-type-archive-team_member .fgma-team-card__meta {
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-book);
    line-height: 1.35;
}