/* ─── Feature overlap (.hzo-feature--overlap) ──────────────────────────
   NEW modifier on .hzo-feature — the base 50/50 split is untouched.
   Asymmetric editorial split on a 12-col grid from 768px: media spans
   cols 1-7, the .hzo-feature__panel spans cols 6-12 and floats OVER the
   media's right edge on an elevated card surface, dropped by --overlap-rise
   for an offset composition. .hzo-feature--reverse mirrors the whole
   arrangement. Below 768px: normal stacked flow, NO overlap — the panel
   simply keeps its card surface (base .hzo-feature single-column grid +
   gap are inherited untouched).
   Tokens: --overlap-rise (default --space-xl), plus the shared card tokens
   (--card-bg, --shadow-lg, --radius-card). Static layout — no motion.

   CASCADE HARDENING: the root override below is written as the compound
   .hzo-feature.hzo-feature--overlap (specificity 0,2,0) ON PURPOSE. It
   overrides grid-template-columns/gap that feature-split.css sets on the
   SAME element via the single class .hzo-feature (0,1,0), and the two
   sheets' load order is NOT stable across load paths: the primitives.css
   aggregator imports feature-split first (overlap later, wins ties), but
   the per-component registry enqueues in glob (alphabetical) order —
   feature-overlap BEFORE feature-split — so feature-split prints later and
   would win an equal-specificity tie, collapsing the whole 12-col overlap
   composition to the plain split layout. The compound selector wins on
   specificity regardless of stylesheet order. Do not "simplify" it back
   to .hzo-feature--overlap. */
.hzo-feature--overlap .hzo-feature__panel {
    position: relative;
    z-index: 1;
    background: var(--card-bg, #fff);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
}
@media (min-width: 768px) {
    /* Compound selector = load-order-proof vs feature-split's .hzo-feature
       rules (see CASCADE HARDENING in the header). */
    .hzo-feature.hzo-feature--overlap {
        grid-template-columns: repeat(12, 1fr);
        gap: 0;                                   /* the overlap IS the gutter */
        align-items: center;
    }
    .hzo-feature--overlap .hzo-feature__media { grid-column: 1 / 8; grid-row: 1; }
    .hzo-feature--overlap .hzo-feature__panel {
        grid-column: 6 / 13;
        grid-row: 1;
        /* margin (not transform) drops the panel by --overlap-rise: transform
           would fight the .hzo-reveal keyframe when the panel is reveal-wired,
           and a margin keeps the panel INSIDE the grid row (the row grows to
           contain it), so the offset can never collide with content below. */
        margin-top: var(--overlap-rise, var(--space-xl));
        padding: var(--space-xl);
    }
    .hzo-feature--overlap.hzo-feature--reverse .hzo-feature__media { grid-column: 6 / 13; }
    .hzo-feature--overlap.hzo-feature--reverse .hzo-feature__panel { grid-column: 1 / 8; }
}