/*
 * R3.7D.1 — Single Insight hero-image-to-content spacing.
 *
 * Root cause (proven via live inspection, not assumed): Template 3092's root article
 * (`.elementor article.fgma-insight`, an Elementor Flexbox Container) lays out its direct children
 * — the title/meta `HEADER.fgma-insight-header`, the hero image `DIV.fgma-insight-hero`, the editorial
 * body `DIV.fgma-insight-editorial`, and the related-news block — with one single, shared `row-gap`
 * (`.elementor article.fgma-insight { gap: var(--fgma-space-xl); }`, defined in WordPress's own
 * Additional CSS / `#wp-custom-css`). That token measures ~66.9px live and is intentionally NOT
 * changed here: it also governs the (already-correct) Header→Hero and Editorial→Related gaps, and
 * is reused elsewhere in the design system (confirmed: the same custom property also drives an
 * unrelated Header panel-card gap). Measured live, DEV's hero-image→first-paragraph-text distance is
 * ~86.9px against Production's real ~133.8px (Production is a different, non-Elementor
 * Tailwind-based frontend, where this same distance comes from a `.mb-3xl` margin-bottom utility on
 * its own hero-image wrapper) — a real, confirmed ~47px shortfall.
 *
 * Elementor's own per-Container "Row Gap" control cannot fix this: any value it writes is scoped to
 * `.elementor-element-8f051d1` (specificity 0,1,0), which the Additional-CSS rule above
 * (`.elementor article.fgma-insight`, specificity 0,2,1) always outranks regardless of edit or load
 * order — proven live: the control was set to 98px, then 300px/400px, the generated CSS changed and
 * was served, and the rendered gap never moved. That failed experiment was fully reverted before this
 * fix was written; DEV's root row-gap is back to its original, untouched state.
 *
 * Fix: a single, additive `margin-bottom` on the hero block only — `.fgma-insight-hero`, the second
 * child of the article, never `:first-child` (that is the title/meta header, not the hero) — using
 * the closest existing FGMA fluid spacing token, `--fgma-space-lg` (~45.9px live), which lands the
 * resulting hero→text distance at ~132.7px, ~1px off Production's own ~133.8px. `--fgma-space-lg` is
 * a genuinely different token from the shared `--fgma-space-xl` row-gap, so this rule stacks an
 * *additional* margin on top of the existing gap rather than replacing or resizing it. Because a flex
 * item's own margin is never collapsed against its container's `gap` (`row-gap`/`gap` and margin are
 * independent box-model mechanisms in a flex formatting context), this adds exactly one gap's worth of
 * extra space after the hero block and nowhere else: the Header→Hero gap above it, the Gutenberg
 * internal spacing inside the editorial body, later in-article figures, and the Editorial→Related gap
 * below are all untouched.
 *
 * Specificity: `body.single-insight .elementor article.fgma-insight > .fgma-insight-hero` is
 * (0,4,1) — 4 classes (`.single-insight`, `.elementor`, `.fgma-insight`, `.fgma-insight-hero`) plus 1
 * type (`article`) — which outranks the Additional-CSS gap rule's (0,2,1) outright, so no
 * `!important` is needed or used.
 */

body.single-insight .elementor article.fgma-insight > .fgma-insight-hero {
    margin-bottom: var(--fgma-space-lg);
}