/* ─── Hero ────────────────────────────────────────────────────────────
   Top-of-page composition; compose inside a .hzo-section (which supplies the
   vertical rhythm). These add the layout + the actions row. */
/* ── ONE COMPOSITION (Wave S) ────────────────────────────────────────────
   This component ships exactly ONE composition: copy stacked above an actions row - optionally centred, split 1:1 with media, or laid over a scrimmed photo.

   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-hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.hzo-hero--centered { text-align: center; }
.hzo-hero--centered .hzo-display,
.hzo-hero--centered .hzo-subtitle { margin-left: auto; margin-right: auto; }
.hzo-hero--centered .hzo-hero__actions { justify-content: center; }
/* Split — copy + media side by side on desktop, stacked on mobile. */
.hzo-hero--split { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .hzo-hero--split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.hzo-hero__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-panel); }
/* Image-background — author sets background-image inline (per-page photo). A
   brand-deep scrim keeps the light text readable over any image. */
.hzo-hero--image {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.hzo-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--brand-deep) 60%, transparent);
}
.hzo-hero--image > * { position: relative; } /* lift content above the scrim */
.hzo-hero--image .hzo-display,
.hzo-hero--image .hzo-eyebrow { color: var(--heading-color-on-dark, #fff) !important; }
.hzo-hero--image .hzo-subtitle { color: rgba(255, 255, 255, 0.9); }