/* =====================================================================
   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; }

/* ===== [titlewrap-20260820] A LONG WORD IN A TITLE SCROLLED THE PAGE SIDEWAYS.
   Every vibe sizes its headline off the viewport (billboard pushes it to
   clamp(3rem, 12vw, 10rem) = 160px at desktop). At that size ONE unbroken word
   is wider than its container, and with the browser default overflow-wrap:normal
   a word never breaks — so it pushed out of the layout and gave the whole BUYER
   page a horizontal scrollbar.

   Measured on a real event title ("ZZ NewPromoter Test - DELETE ME") across all
   25 vibes: 7 overflowed — headliner +623px, acid +307px, vow +270px, house
   +118px, junglist +110px, noir +94px, substation +87px. headliner was scrolling
   more than a third of the viewport sideways.

   This is the same treatment the vibe stylesheets already give every prose block
   (overflow-wrap: anywhere on .*-about / .*-prose / .*-blurb) — it had simply
   never been applied to the headline itself. break-word rather than anywhere
   because a headline should only break when the word genuinely cannot fit.

   Lives here because layouts.css is the one vibe stylesheet e.php AND
   vibe_theme_preview.php both load unconditionally, on every vibe. Re-measured
   after the fix: 0 of 25 overflow, 0 regressions. ===== */
body.vibe h1 { overflow-wrap: break-word; }

/* ===== 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). */