/**
* R3.7A.2A: Insights-archive-SPECIFIC rules only -- genuine differences from Portfolio, never
* duplicated generic behavior (the shared hero/results shell, filter drawer/chips/active-pills/
* Clear-All/empty-state/pagination-suppression contract lives in the new shared `fgma-archive.css`,
* consumed here unchanged via the generic `.fgma-archive-*` classes).
*
* Grid columns themselves (Production-confirmed: 2 mobile / 3 tablet+desktop, no 4-column breakpoint,
* unlike Portfolio's 4-column desktop grid) are owned natively by Elementor's own Loop Grid widget
* settings, exactly as Portfolio's own 4-column grid is -- never Custom CSS here.
*
* The grid GAP is a genuine, confirmed Insights-specific difference from Portfolio's own `--fgma-
* space-sm` gap: Production's real values (`gap-x-lg`/`gap-y-xl` below its own `lg:` breakpoint) map
* to the already-existing `--fgma-space-lg`/`--fgma-space-xl` tokens -- so `.fgma-insights-archive-
* results` (applied alongside the shared, generic `.fgma-archive-results` class -- both together, the
* same "generic shell class + archive-specific class only for the true difference" pattern
* `.fgma-project-archive-card`/`.fgma-insight-card` already use for cards) owns it here, scoped so it
* can never leak onto Portfolio's or any future archive's own `.fgma-archive-results` element.
*
* R3.7A.2E correction: R3.7A.2A missed Production's own `lg:gap-2xl` responsive override (confirmed
* live: the grid's real class list is `grid-cols-2 gap-x-lg gap-y-xl md:grid-cols-3 lg:gap-2xl`) --
* AT DESKTOP, Production's real gap is `--space-2xl` on BOTH axes (`gap` shorthand), not `gap-x-lg`/
* `gap-y-xl`, which only apply below the `lg` breakpoint. This is the root cause of the confirmed
* ~40px-vs-~80px DEV/Production mismatch: `--fgma-space-2xl` (confirmed byte-identical clamp formula
* to Production's own `--space-2xl`) computes to ~80px at typical desktop viewports, matching the
* confirmed real measurement, versus `--fgma-space-lg`'s own ~40px. Also confirms Production's real
* `lg:` breakpoint for THIS site is `min-width: 900px` -- re-verified directly against the live
* generated CSS's own `@media` wrapper (`@media (min-width:900px){...lg\:gap-2xl{gap:var(--space-
* 2xl)}...}`), NOT the Tailwind framework default of 1024px R3.7A.2A had assumed -- reused here, and
* corrected below on the card title rule that shares the identical real breakpoint.
*/
.fgma-insights-archive-results .elementor-widget-loop-grid .elementor-grid {
column-gap: var(--fgma-space-lg);
row-gap: var(--fgma-space-xl);
}
@media (min-width: 900px) {
.fgma-insights-archive-results .elementor-widget-loop-grid .elementor-grid {
column-gap: var(--fgma-space-2xl);
row-gap: var(--fgma-space-2xl);
}
}
/**
* `.fgma-insight-card` -- a genuinely different card contract from `.fgma-project-archive-card`
* (different CPT, different typography scale, different metadata semantics: Category text, not a
* Practice Area line), even though the underlying structural PATTERN -- fixed 3:2 media frame,
* `overflow: hidden`, hover-zoom on the real descendant `![]()
` only (never the frame/wrapper itself),
* colored title on hover -- is the exact same proven recipe R3.7A.1A-R4/R8 and R3.7A.1-V5 already
* solved for Portfolio; confirmed live against Production's own real Insight card
* (`.zoom-image{aspect-[3/2]}`, `.base-image{object-cover;group-hover:scale-[1.04]}`,
* `.header-5{group-hover:text-red}`, `.text-grey.paragraph-sm`). Physical `width`/`height` (not
* logical `inline-size`/`block-size`) are used deliberately on the image, mirroring the confirmed R8
* rationale (mapping onto the exact same property Elementor's own competing `.elementor img{height:
* auto}` rule sets).
*/
.fgma-insight-card__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--fgma-media-ratio);
}
.elementor .fgma-insight-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.fgma-insight-card.fgma-insight-card__link:hover .fgma-insight-card__media img,
.fgma-insight-card.fgma-insight-card__link:focus-within .fgma-insight-card__media img {
transform: scale(1.04);
}
/**
* Title: Production's own confirmed real contract -- `AvenirMedium`/`--step-2`/`line-height:1.35` at
* desktop (`lg:header-5`), `--space-md` at mobile/tablet (`.paragraph-list-item`) -- both map to
* already-existing FGMA tokens (`--fgma-weight-medium`, `--fgma-step-2`, `--fgma-space-md`), no new
* token introduced. Hover color mirrors the identical proven Portfolio title-hover pattern
* (R3.7A.1-V3): the outer card link's own `:hover`/`:focus-within` recolors the title to the confirmed
* brand-red token.
*
* R3.7A.2E correction: the desktop breakpoint below was `min-width: 1024px`, an unverified assumption
* ("Tailwind's default `lg`"). Re-verified directly against Production's own live generated CSS this
* pass (while investigating the grid-gap fix, same file, same `lg:` breakpoint family): THIS site's
* real `lg:` breakpoint is `min-width: 900px` (confirmed via the actual `@media` wrapper around
* `.lg\:gap-2xl`/`.lg\:header-5` alike) -- corrected to match exactly.
*
* R3.7A.2C: `color` corrected -- confirmed live, the Insight Archive Card's title is Elementor's newer
* Atomic Heading widget (`e-heading-base`), a materially different DOM/link shape from Portfolio's
* classic Heading widget: the visible text is a direct `