/**
 * R3.7C — Institutional Hero Nav Contrast (shared gradient implementation).
 *
 * Production's real SplitHero contrast overlay, reproduced byte-for-byte:
 * linear-gradient(186deg, rgba(0, 0, 0, 0.49) 10.94%, transparent 32.11%).
 *
 * ONE shared partial, explicit selectors only (never a wildcard like `[class*="-hero__media"]`) --
 * Production specifically does NOT apply this treatment to routes such as `/expertise/`, so a
 * wildcard would silently over-apply. Scoped to the four current DEV consumers only (Approach,
 * Culture, Community, Careers) -- `/history/`/`/about/` share the same Production SplitHero
 * treatment but do not yet exist on DEV, so no selector is added for them ahead of time.
 *
 * The gradient lives entirely on the hero MEDIA wrapper's own `::after`, never Header 2746/its CSS --
 * the Production audit already confirmed the Header itself contributes zero darkening.
 *
 * `position: relative` is included here even though the task's own brief expected it to already be
 * present: direct inspection of all four pages' real generated per-template CSS (post-2730/2718/
 * 2722/2711.css) and the shared Customizer stylesheet found NO `position` declaration at all for any
 * of the four `.fgma-*-hero__media` wrappers (`position: static`, the CSS default) -- confirmed live,
 * not assumed. Without a positioned ancestor, `inset: 0` on the `::after` would resolve against a
 * distant, unintended ancestor instead of the hero media box itself, breaking the overlay's geometry
 * entirely. Adding it here is required for correctness, not a duplicate of an existing rule.
 *
 * No media queries: Production applies this identical pseudo-element at every viewport, and the
 * overlay simply follows whatever geometry the media wrapper itself already resolves to (desktop/
 * tablet/mobile) -- no responsive rule is needed or added. `pointer-events: none` keeps the overlay
 * fully inert to clicks/hover on any real content underneath it (the hero image, any link).
 */

.fgma-approach-hero__media,
.fgma-culture-hero__media,
.fgma-community-hero__media,
.fgma-careers-hero__media {
    position: relative;
}

.fgma-approach-hero__media::after,
.fgma-culture-hero__media::after,
.fgma-community-hero__media::after,
.fgma-careers-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        186deg,
        rgba(0, 0, 0, 0.49) 10.94%,
        transparent 32.11%
    );
    pointer-events: none;
}

/**
 * R3.7C Phase B — shared stacked-layout Production parity below the 900px SplitHero breakpoint
 * (Phase A already moved that breakpoint from 1024px to 900px on all four per-page Elementor
 * stylesheets; this block owns only what remains below it).
 *
 * Cascade verification (confirmed live, all four per-template stylesheets, byte-identical shape
 * across Approach/Culture/Community/Careers): this shared file's own `<link>` loads BEFORE each
 * page's own `elementor-post-{ID}-css` in `<head>`, so a same-specificity tie would go to the later,
 * per-page rule -- but no such tie exists for the two properties that matter:
 *  - `max-block-size` on `.fgma-*-hero__image` is not set anywhere below 900px in any per-page
 *    stylesheet (only inside their own `min-width:900px` blocks) -- this rule introduces the
 *    property fresh, nothing to lose a tie against.
 *  - `row-gap`/`padding-block-start`/`padding-block-end` on the hero row / hero copy are currently
 *    only ever set via the LOWER-specificity base rules `.fgma-*-hero__copy.e-con` ((0,2,0)) and
 *    Elementor's own core `.elementor-element:where(.e-con-full,.elementor-widget){gap:var(--row-gap)
 *    var(--column-gap)}` ((0,1,0) -- `:where()` contributes zero) -- the selectors below reach
 *    (0,3,0)/(0,5,0) respectively, strictly greater, winning outright regardless of load order. No
 *    `!important` needed anywhere.
 *
 * Image cap: DEV's aspect-ratio (390/461) + `block-size:auto` lives on `.fgma-*-hero__image` itself
 * (confirmed live), so the 700px cap belongs there too, as `max-block-size` -- never restructuring
 * markup or moving aspect-ratio ownership. Below the ~592.6px crossover (700px / (461/390)) the
 * aspect-ratio's own natural computed height already stays under 700px, so this never overrides
 * anything there; above it, `max-block-size` caps the height while `inline-size:100%` keeps the width
 * at full measure and `object-fit:cover` on the image keeps the visible photo undistorted -- exactly
 * Production's own non-uniform "full width, capped height" shape, never a fixed height.
 *
 * Copy padding: `--fgma-header-height` is a REAL, already-live global token (`:root`, defined in
 * Header 2746's own per-template CSS, confirmed live: 70px <600px / 80px 600-899px / 85px ≥900px) --
 * not something this task adds or Header 2746 needs touching for. Subtracting it from the raw 5xl
 * clamp is what makes the header's own `main.site-main{padding-top:var(--fgma-header-height)}` offset
 * and this copy's own padding-block-start sum to exactly the same total Production itself uses with
 * no such header offset to begin with (verified arithmetically: 70+71.981=141.981 @407px,
 * 80+75.250=155.250 @600px, 80+82.125=162.125 @700px, 80+95.806=175.806 @899px -- all match the
 * confirmed Production eyebrow positions exactly). `--fgma-space-5xl`/`--fgma-space-5p` have no
 * fgmadev-registered equivalent (confirmed, matching the same real gap already documented for "2xs"/
 * "10p" elsewhere in this codebase) -- both clamp formulas are inlined here rather than approximated.
 */
@media (max-width: 899px) {
    .fgma-approach-hero__image,
    .fgma-culture-hero__image,
    .fgma-community-hero__image,
    .fgma-careers-hero__image {
        max-block-size: 700px;
    }

    .fgma-approach > .e-con.fgma-approach-hero,
    .fgma-culture > .e-con.fgma-culture-hero,
    .fgma-community > .e-con.fgma-community-hero,
    .fgma-careers > .e-con.fgma-careers-hero {
        row-gap: 0;
    }

    .fgma-approach > .e-con.fgma-approach-hero > .fgma-approach-hero__copy.e-con,
    .fgma-culture > .e-con.fgma-culture-hero > .fgma-culture-hero__copy.e-con,
    .fgma-community > .e-con.fgma-community-hero > .fgma-community-hero__copy.e-con,
    .fgma-careers > .e-con.fgma-careers-hero > .fgma-careers-hero__copy.e-con {
        padding-block-start: calc(
            clamp(8.5rem, 7.125rem + 6.875vw, 18.125rem)
            - var(--fgma-header-height)
        );
        padding-block-end: clamp(1.1875rem, -0.213rem + 5.2113vw, 8.125rem);
    }
}