/* ─── Bento — asymmetric primary + stack grid ─────────────────────────
   One large primary cell beside a stacked column of smaller cells. Cells are
   plain .hzo-card so hover/reveal/tokens come for free. Mobile collapses to a
   single column (primary, then each stack card). --bento-gap sets both the
   outer and the stack gap; --bento-primary-col tunes the desktop split. */
/* ── ONE COMPOSITION (Wave S) ────────────────────────────────────────────
   This component ships exactly ONE composition: one large primary cell beside a stacked column of smaller cells.

   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-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bento-gap, var(--space-lg));
}
.hzo-bento__stack {
    display: grid;
    gap: var(--bento-gap, var(--space-lg));
    grid-auto-rows: 1fr;   /* stack cells share the height evenly */
}
/* Cells fill their track so the primary matches the stack's total height. */
.hzo-bento__primary,
.hzo-bento__stack > * { height: 100%; }
@media (min-width: 768px) {
    .hzo-bento { grid-template-columns: var(--bento-primary-col, 1.6fr) 1fr; align-items: stretch; }
    /* Mirrored variant ([hzo_bento reverse="true"] / add the class by hand):
       primary on the RIGHT — --bento-primary-col still means the primary's
       share. DOM order stays primary-first, so mobile stacking (primary, then
       each stack card) and tab order are unchanged. Static layout — no motion
       to gate for reduced-motion. */
    .hzo-bento--reverse { grid-template-columns: 1fr var(--bento-primary-col, 1.6fr); }
    .hzo-bento--reverse > .hzo-bento__primary { order: 2; }
}