/* ─── Responsive content grid — 2 / 3 / 4-up ──────────────────────────
   Mobile-first single column; expands at the QA breakpoints. Drives feature
   grids, stat rows, card rows, logo grids. */
.hzo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) {
    .hzo-grid--2, .hzo-grid--3, .hzo-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .hzo-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .hzo-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Spatial vocabulary (Wave S) — spans, arbitrary template, gap ─────
   The 11 lines above are the frozen base: every existing .hzo-grid renders
   byte-identically. Everything below is ADDITIVE and opt-in by class.

   WHY THIS EXISTS. A uniform N-up grid is one composition. Premium layouts
   need ONE cell to carry more weight than its neighbours — the feature tile,
   the tall portrait, the full-width closer. That was possible before only by
   hand-writing grid-column in a client's custom.css, which is why it happened
   once and never became vocabulary.

   ── Column spans ────────────────────────────────────────────────────────
   RESPONSIVE-SAFE COLLAPSE is the whole design: a span is only declared at
   the breakpoint where the columns it asks for actually exist. Below 768px
   the base grid is a single column and NO span applies, so a spanned cell can
   never open an implicit extra track and blow the grid out horizontally.

     .hzo-span-2      2 columns from 768px  (in a --3/--4 grid at 768px the
                      grid is 2-up, so this reads as a full row — intended)
     .hzo-span-3      3 columns from 1024px (--3 / --4 grids)
     .hzo-span-4      4 columns from 1024px (--4 grids)
     .hzo-span-full   the whole row at EVERY breakpoint (1 / -1) — safe in a
                      single-column grid too, which is why it needs no gate
     .hzo-rowspan-2   2 rows from 768px — the tall cell. Pair with --dense so
                      the hole it leaves gets backfilled.
     .hzo-rowspan-3   3 rows from 1024px

   Spans are declared on the CELL, not the grid, and carry no .hzo-grid
   ancestor requirement — they work inside .hzo-bento__stack or any hand-rolled
   grid on the same page. That is deliberate: the utility describes the cell.

   ── Arbitrary template ──────────────────────────────────────────────────
   .hzo-grid--custom reads --hzo-grid-template (desktop) and the optional
   --hzo-grid-template-md (tablet). Mobile always stays single-column. This is
   the escape hatch for compositions the 2/3/4 ladder cannot express — a
   golden-ratio split, a 5-up logo wall, a sidebar rail:

     <div class="hzo-grid hzo-grid--custom" style="--hzo-grid-template: 1.6fr 1fr">

   Unset --hzo-grid-template falls back to a responsive auto-fit, so a typo
   degrades to a sensible grid rather than to `none` + auto columns.

   ── Gap ─────────────────────────────────────────────────────────────────
   Steps the --space ladder, same names as .hzo-stack / .hzo-cluster. Default
   (no modifier) is unchanged at --space-lg. --gap-0 is the flush-tile case
   (a mosaic where cells touch); it is NOT a substitute for a designed rhythm.

   ── Density ─────────────────────────────────────────────────────────────
   .hzo-grid--dense turns on grid-auto-flow: dense so later small cells
   backfill the gaps a span leaves. Note the a11y caveat: dense packing can
   put DOM order out of step with visual order. Keep source order meaningful.
   ────────────────────────────────────────────────────────────────────────── */

.hzo-span-full { grid-column: 1 / -1; }

@media (min-width: 768px) {
    .hzo-span-2    { grid-column: span 2; }
    .hzo-rowspan-2 { grid-row: span 2; }
}
@media (min-width: 1024px) {
    .hzo-span-3    { grid-column: span 3; }
    .hzo-span-4    { grid-column: span 4; }
    .hzo-rowspan-3 { grid-row: span 3; }
}

.hzo-grid--custom { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .hzo-grid--custom {
        grid-template-columns: var(--hzo-grid-template-md,
            var(--hzo-grid-template, repeat(auto-fit, minmax(240px, 1fr))));
    }
}
@media (min-width: 1024px) {
    .hzo-grid--custom {
        grid-template-columns: var(--hzo-grid-template, repeat(auto-fit, minmax(240px, 1fr)));
    }
}

.hzo-grid--gap-0   { gap: 0; }
.hzo-grid--gap-xs  { gap: var(--space-xs); }
.hzo-grid--gap-sm  { gap: var(--space-sm); }
.hzo-grid--gap-md  { gap: var(--space-md); }
.hzo-grid--gap-lg  { gap: var(--space-lg); }
.hzo-grid--gap-xl  { gap: var(--space-xl); }
.hzo-grid--gap-2xl { gap: var(--space-2xl); }

.hzo-grid--dense { grid-auto-flow: dense; }