/* ─── Feature split — alternating image/copy content rows ─────────────
   Distinct from .hzo-hero--split: a repeatable content row. --reverse swaps
   the column order on desktop for alternating rhythm. Stacks on mobile.

   Widget vars (set inline by [hzo_feature_split]; the var() fallbacks ARE the
   frozen no-attribute defaults — do not change them):
     --hzo-feature-cols  desktop grid-template-columns (default 1fr 1fr)
     --hzo-feature-gap   row gap (default --space-xl, --space-3xl ≥1024px) */
/* ── ONE COMPOSITION (Wave S) ────────────────────────────────────────────
   This component ships exactly ONE composition: one copy column beside one media column, optionally reversed.

   That is a feature. One composition is why it is responsive, accessible and
   identical on two hundred sites, and why a client build can place it without
   re-deciding anything. It is also a hard limit: the component cannot express
   a SECOND composition, and making it try — nesting it, stacking modifiers on
   it, overriding its grid from a client sheet — is how a page ends up fighting
   its own components and still looking generic.

   FOR AN AMPLIFY OR ELEVATE SECTION, DO NOT BEND THIS COMPONENT. Take one of:
     • RAW mode — author the section's markup directly, or
     • hand-author to the class contract on the spatial utilities:
       .hzo-grid + .hzo-span-* / .hzo-rowspan-* / --hzo-grid-template,
       .hzo-bleed, .hzo-pull-* / .hzo-z-*, .hzo-section--edge-*, .hzo-measure-*.
   Both are the STANDARD route for a high-intensity section, not an escape
   hatch, and the composition plan is what says which sections those are.

   PLUMBING AND PROOF COMPONENTS ARE UNAFFECTED. Every JS widget and every
   proof/data component (reviews, credentials, ratings, schema) stays
   mandatory — never hand-roll those. This note is about LAYOUT only.
   ────────────────────────────────────────────────────────────────────────── */

.hzo-feature { display: grid; grid-template-columns: 1fr; gap: var(--hzo-feature-gap, var(--space-xl)); align-items: center; }
@media (min-width: 1024px) {
    .hzo-feature { grid-template-columns: var(--hzo-feature-cols, 1fr 1fr); gap: var(--hzo-feature-gap, var(--space-3xl)); }
    .hzo-feature--reverse .hzo-feature__media { order: 2; }
}
.hzo-feature__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-panel); }

/* Opt-in vertical alignment (default stays center) — [hzo_feature_split align=…] */
.hzo-feature--align-start { align-items: start; }
.hzo-feature--align-end { align-items: end; }