/* ─── Bleed — escape the container, once ───────────────────────────────
   Wave S spatial vocabulary. The canonical container-escape math, declared
   ONE time so it stops being re-derived (usually wrong) in per-client CSS.

   THE CONTRACT. The design system's skeleton is
   `<section class="hzo-section"><div class="hzo-container">…</div></section>`:
   the section spans the viewport, the container holds the max-width. That is
   correct for 95% of content and it is also why an image or panel can never
   touch the viewport edge — the single most common "why does this look like a
   document and not like a site" symptom. .hzo-bleed is the sanctioned way for
   ONE element inside a container to reach the edge without unwrapping the
   section.

     <section class="hzo-section">
       <div class="hzo-container">
         <p>Normal measure copy…</p>
         <figure class="hzo-bleed"><img src="…" alt="…"></figure>
       </div>
     </section>

   ── The math ────────────────────────────────────────────────────────────
   `margin-inline: calc(50% - 50vw)` on a block-level child pulls each side out
   to the viewport edge: 50% is half the container's own width, 50vw is half
   the viewport, so the negative margin is exactly the gutter. No `width: 100vw`
   is needed (and it is deliberately NOT set — width:100vw double-counts the
   scrollbar and is the usual source of the phantom horizontal scrollbar).

   ⚠ OVERFLOW GUARD — READ THIS, IT IS THE ONE FOOTGUN.
   `vw` units include the vertical scrollbar's width. On a page WITH a vertical
   scrollbar, 50vw is ~8px wider than half the visible area, so a bleed element
   overhangs by about one scrollbar width and the page gains a horizontal
   scrollbar. The fix belongs on the page root, not here (a guard on .hzo-bleed
   itself cannot clip its own overhang, and a guard on .hzo-section would clip
   every deliberate overlap from _base/overlap.css). Add ONE line to the
   client's custom.css when the site uses bleed:

     body { overflow-x: clip; }

   Use `clip`, not `hidden`: `hidden` on an ancestor silently kills
   `position: sticky` inside it (the sticky header, the sticky-cta rail),
   `clip` does not. `.hzo-bleed-guard` below is that rule as a class for the
   cases where the guard needs to sit on a wrapper instead of on body.

   ── Half bleed ──────────────────────────────────────────────────────────
   --left / --right escape one side only and keep the container edge on the
   other, so an image can run off the page while its copy stays on the grid.
   This is the asymmetric-split move; it is the reason this file exists.

   ── Inner padding ───────────────────────────────────────────────────────
   A bled element is edge-to-edge, so any TEXT inside it needs its own gutter
   back. .hzo-bleed__inner re-applies the container's responsive padding
   without re-applying the max-width. Never put a bare paragraph directly in a
   .hzo-bleed — it will touch the glass on mobile.
   ────────────────────────────────────────────────────────────────────────── */

.hzo-bleed {
    margin-inline: calc(50% - 50vw);
}
.hzo-bleed--left {
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: 0;
}
.hzo-bleed--right {
    margin-inline-start: 0;
    margin-inline-end: calc(50% - 50vw);
}

/* Below 768px a half-bleed reads as a mistake rather than as art direction —
   the copy column is already full width, so an image escaping one side only
   looks misaligned. Both halves flatten to a full bleed on mobile. */
@media (max-width: 767.98px) {
    .hzo-bleed--left,
    .hzo-bleed--right { margin-inline: calc(50% - 50vw); }
}

/* Opt-in overflow guard (see the note above). Put it on body via custom.css,
   or on the nearest wrapper that owns the horizontal axis. */
.hzo-bleed-guard { overflow-x: clip; }

/* Gutter restore for content inside a bled element. Mirrors _base/container.css
   padding exactly — same five zones, same tokens — minus the max-width. */
.hzo-bleed__inner { padding: 0 var(--space-md); }
@media (min-width: 480px)  { .hzo-bleed__inner { padding: 0 var(--space-lg); } }
@media (min-width: 768px)  { .hzo-bleed__inner { padding: 0 var(--space-lg-2); } }
@media (min-width: 1024px) { .hzo-bleed__inner { padding: 0 var(--space-xl); } }
@media (min-width: 1250px) { .hzo-bleed__inner { padding: 0 var(--space-2xl); } }