/* =====================================================================
   LAYOUT SWAPS — layouts-20260719. The final buildmap item: the ARRANGEMENT
   itself swaps. One body class `vc-layout--<key>` per layout, single layout
   at a time, pure re-arrangement of each vibe's EXISTING markup (DOM never
   moves, so looks / effects / glow / styles / text edits all survive).
   Publishes as `ly:<key>`; replays with one class on editor AND live page.
   HERO-ZONE scope v1 (Shock-approved); section-order variants = wave 2 on
   the same channel. Adapters are written against each vibe's REAL markup —
   a layout only shows in the picker where it is wired (vibe_layout_map).
   Stacked adapters reuse each vibe's own proven phone-collapse rules.
   body. prefix beats the vibes' own .vibe-x rules at equal load order.
   ===================================================================== */

/* ===== stacked — "Stacked zine": full-width vertical, one clean scroll ===== */
body.vc-layout--stacked .dnb-paste { flex-direction: column; }
body.vc-layout--stacked .dnb-photo { flex: 0 0 auto; width: min(92vw, 560px); margin-left: auto; margin-right: auto; }
body.vc-layout--stacked .bln-grid { grid-template-columns: minmax(0, 1fr); }
body.vc-layout--stacked .jng-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
body.vc-layout--stacked .jng-flyer { max-width: min(92vw, 560px); margin-left: auto; margin-right: auto; }
body.vc-layout--stacked .sub-grid { grid-template-columns: minmax(0, 1fr); }
body.vc-layout--stacked .sub-flyer { max-width: min(92vw, 560px); margin-left: auto; margin-right: auto; }
body.vc-layout--stacked .hdl-split { grid-template-columns: 1fr; }
body.vc-layout--stacked .hdl-stage { position: static; height: auto; padding: clamp(18px, 5vw, 30px); }

/* ===== mirror — the flyer side flips (direction trick flips grid/flex
   column order without touching the children's own text flow) ===== */
body.vc-layout--mirror .dnb-paste { flex-direction: row-reverse; }
body.vc-layout--mirror .bln-grid,
body.vc-layout--mirror .jng-grid,
body.vc-layout--mirror .sub-grid,
body.vc-layout--mirror .hdl-split { direction: rtl; }
body.vc-layout--mirror .bln-grid > *,
body.vc-layout--mirror .jng-grid > *,
body.vc-layout--mirror .sub-grid > *,
body.vc-layout--mirror .hdl-split > * { direction: ltr; }

/* ===== billboard — the headline dominates, full width, centered.
   Universal: every vibe's headline is its single h1. ===== */
body.vc-layout--billboard h1 { font-size: clamp(3rem, 12vw, 10rem) !important; line-height: .95 !important; text-align: center !important; max-width: none !important; }

/* ===== centerpiece — the flyer is the show (dnb wave 1) ===== */
body.vc-layout--centerpiece .dnb-paste { flex-direction: column; }
body.vc-layout--centerpiece .dnb-photo { flex: 0 0 auto; width: min(92vw, 680px); margin-left: auto; margin-right: auto; }

/* Phone: stacked/centerpiece are already single-column; mirror collapses with
   each vibe's own phone rules (grids go 1-col ≤700-860px, order moot). */