/* 900px and under (the phone layer, 3 October 2026): the venue hero's rows, moved out of world-venue.css's
   @media (max-width:900px) block unchanged, linked with media="(max-width:900px)" immediately after world-venue.css.
   Nothing after that block in world-venue.css touches the hero. */
@media (max-width:900px){
 /* Phones and tablets (3 October 2026, launch): the copy takes its own space in the hero instead of the desktop stage's
    one shared row, one element to a row (eyebrow, title, paragraph, the two calls to action, which wrap if they must);
    the reel, its scrim and the veil stay behind it, and the Pause video pill keeps the bottom 72px. */
 .venue-page .vd-hero--reel .vd-hero-grid{
  position:relative;inset:auto;min-height:calc(100svh - 2 * var(--frame-inset));
  grid-template-rows:none;align-content:end;padding:calc(var(--wi-header) + 8px) var(--vd-pad) 72px;
 }
 .venue-page .vd-hero--reel .vd-sector{grid-row:1;margin:0 0 14px}
 .venue-page .vd-hero--reel .vd-h1{grid-row:2;margin:0 0 18px;font-size:clamp(40px,11vw,56px)}
 .venue-page .vd-hero--reel .vd-hero-lead{grid-row:3;margin:0}
 .venue-page .vd-hero--reel .vd-hero-lead::before{inset:-28px -24px}
 .venue-page .vd-hero--reel .vd-hero-action{grid-row:4;margin:24px 0 0}
}