/**
 * R3.4X — Expertise Submarkets Module (shared architecture remediation).
 *
 * Owns the full `[fgma_expertise_submarkets]` component (Expertise_Submarkets_Renderer): the new
 * two-column image+list module wrapper AND the list/link/hover styling that previously lived only in
 * the shared Customizer "Additional CSS" stylesheet (R3.3Q Fix 3B2/EXP-002B's own original rule).
 * That old rule was REMOVED from Customizer as part of this same change (see the pointer comment left
 * in its place there) rather than left to coexist: Customizer's own wp-custom-css always prints AFTER
 * every plugin-enqueued stylesheet in `<head>` (confirmed live), so a corrected rule added only here
 * could never win the cascade against an old, conflicting rule of equal specificity left there —
 * splitting one component's ownership across two layers would be a real regression risk, not a
 * caution to defer. `.fgma-expertise-submarkets-section` (the outer Elementor band shell + its own
 * `:has()` empty-collapse rule) is untouched and still Customizer's — this file never duplicates it.
 *
 * Enqueued unconditionally (Expertise_Submarkets_Assets), mirroring Header_Assets/Carousel_Assets/
 * Reveal_Assets: every selector below is scoped to this component's own semantic classes, a no-op on
 * any page that never renders `[fgma_expertise_submarkets]`.
 *
 * Tokens: `--fgma-space-2xs`/the local "10p" formula are NOT registered anywhere on fgmadev
 * (confirmed — same real gap `fgma-home.css`'s own R3.7B.5G Finding 3/the Curated News cards comment
 * already documented for "10p"/"2xs" respectively). Rather than inventing a new global token or
 * approximating with a nearby one, both are reproduced here as literal `clamp()` formulas, byte-for-
 * byte identical to Production's own real, confirmed values and scoped to exactly the rules that need
 * them — never promoted to `:root`/Global Settings. "10p" is defined ONCE as a module-local custom
 * property (`--fgma-expertise-submarkets-module-gap-10p`, R3.4Y) and reused for both the <600px
 * stacked row-gap and the ≥600px column-gap — Production uses the identical value for both, so this
 * is one real token, not two coincidentally-equal literals. Recorded as a genuine follow-up: if a
 * THIRD component ever needs either "2xs" or "10p", promoting both to real global
 * `--fgma-space-2xs`/`--fgma-space-10p` tokens (matching the corpus's own existing naming scale)
 * would then be worth its own risk; not yet, for two isolated component uses.
 *
 * Font-family/font-weight/line-height/hover mechanism for the link are unchanged from R3.4X. R3.4Y
 * corrected font-size to `--fgma-space-md` — browser QA proved `--fgma-step-1` (R3.4X's own original
 * choice) was a coincidentally-close but wrong value, a confirmed ~30% desktop undersize; Production
 * actually derives this link's size from its own "md" SPACING-scale token, and fgmadev's real,
 * already-registered `--fgma-space-md` is formula-identical to it.
 *
 * Reveal: the module's own image wrapper (`__media`) is registered in the existing
 * `fgma-reveal.js` selector registry (`{ selector: 'body.single-expertise
 * .fgma-expertise-submarkets-module__media', behavior: 'reveal' }`) — opacity+translateY(20px), 1.5s,
 * exactly the shared, already-established contract (fgma-reveal.css). No new animation system, no
 * CSS added here for it.
 */

.fgma-expertise-submarkets-module {
    /* "10p" -- Production's own real, confirmed formula, not registered as a global fgmadev token
       (see this file's own header comment) -- defined once here and reused for BOTH the <600px
       stacked row-gap and the ≥600px column-gap (R3.4Y browser QA: Production uses this same value
       for both, DEV's own stacked gap was wrongly using --fgma-space-md, measuring ~18px vs
       Production's confirmed 38px @407). */
    --fgma-expertise-submarkets-module-gap-10p: clamp(2.375rem, -0.4261rem + 10.4225vw, 16.25rem);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--fgma-expertise-submarkets-module-gap-10p);
}

@media (min-width: 600px) {
    .fgma-expertise-submarkets-module {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--fgma-expertise-submarkets-module-gap-10p);
    }
}

.fgma-expertise-submarkets-module__media {
    display: block;
}

.fgma-expertise-submarkets-module__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.fgma-expertise-submarkets {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* "2xs" -- Production's own real, confirmed formula (block brief §8), not registered as a global
       fgmadev token; see this file's own header comment. */
    gap: clamp(0.25rem, 0.1518rem + 0.4911vw, 0.9375rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fgma-expertise-submarkets__item {
    margin: 0;
    padding: 0;
}

.fgma-expertise-submarkets__link {
    display: inline-flex;
    align-items: center;
    gap: var(--fgma-space-xs);
    font-family: var(--fgma-font-family);
    font-weight: var(--fgma-weight-medium);
    /* R3.4Y browser QA: Production derives this link's size from its own "md" SPACING-scale token
       (never a typography "step" token) -- confirmed formula-identical to fgmadev's real, already-
       registered --fgma-space-md (clamp(1.0625rem,.8214rem + 1.2054vw,2.75rem)). --fgma-step-1 was a
       coincidentally-close but wrong value (the ~30% desktop undersize browser QA measured). */
    font-size: var(--fgma-space-md);
    line-height: 1.3;
    color: var(--e-global-color-v4-fgma-black, #000);
    text-decoration: none;
}

.fgma-expertise-submarkets__link:hover,
.fgma-expertise-submarkets__link:focus-visible {
    color: var(--e-global-color-v4-fgma-brand-red, #F21400);
}

.fgma-expertise-submarkets__link svg {
    flex: 0 0 auto;
    display: block;
    width: 26px;
    height: 21px;
    color: var(--e-global-color-v4-fgma-brand-red, #F21400);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fgma-expertise-submarkets__link:hover svg,
.fgma-expertise-submarkets__link:focus-visible svg {
    opacity: 1;
    transform: translateX(0);
}