/* ============================================================================
   UNIÓN , the TICKETS page's own layout. LAYOUT ONLY, IN TOKENS ONLY.

   Nothing here changes how an included component LOOKS: the ticket stub, the
   ladder, the tier cards, the stepper and the sold-out stamp all arrive with
   their appearance fixed by the design system and this file only decides where
   on the page they sit and how much room they get.
   ============================================================================ */

/* ---------------------------------------------------------------- THE HERO --
   The page's one coral fold. Asymmetric on purpose: the headline runs down the
   left at display size against open ground, and nothing sits beside it. The
   mockups do exactly this on a poster, and the fold's job here is the same one
   a poster's does, which is to say ONE thing.
   ---------------------------------------------------------------------------- */
/* MEASURED, second pass. The first version put the headline in a 1.25fr column
   with an EMPTY 1fr beside it and called the emptiness composition. In the
   1440 shot it was not composition: the coral fold ran half the height of the
   folds under it with a blank right half, and read as unfinished.
   The fix is the one the mockups use, which is MASS. The headline runs across
   the fold at its own size, the lead and the actions sit under it against the
   left edge, and the fold is given a height the coral can actually carry. The
   asymmetry stays and is now in the TYPE (a short wide headline over a narrow
   column of body) rather than in an empty grid track. */
/* MEASURED, third pass. `min-height:72svh` with `align-content:center` was
   still buying height the content did not fill: at 1440 the quick check
   measured a 431px band of bare coral inside this fold, 48% of the screen,
   above and below a block that had already finished. A fold is as tall as what
   it says. The min-height goes and the padding does the work, so the coral is
   a measured margin round the type rather than a reservoir. */
/* the hero's two actions fell below a 900px-high window: the fold was the strip,
   the header and s9 top and bottom. s8 keeps the action on the first screen. */
.tk-hero{padding-block:var(--s8) var(--s8)}
.tk-hero > .s__in{width:100%}
.tk-hero__grid{display:grid;grid-template-columns:minmax(0,1fr)}
.tk-hero__h{font-size:var(--size-mega);line-height:.84;
  padding-top:.22em;overflow:visible;margin-bottom:var(--s6)}
/* the body hangs off the left edge under the headline, at a width the eye can
   read in one go: the contrast with the headline above it IS the hierarchy. */
.tk-hero__p{max-width:38ch;margin-bottom:var(--s6)}
.tk-hero__acts{display:flex;flex-wrap:wrap;gap:var(--s4)}

/* --------------------------------------------------------------- THE SPLIT --
   The answers fold: a narrow head column and a wide body. The head is the
   dominant idea and the rows are the detail under it, so the two are not equal
   and never sit side by side at the same weight.
   ---------------------------------------------------------------------------- */
.tk-split{display:grid;gap:var(--s7) var(--s8);
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start}
.tk-split__head{position:sticky;top:var(--s9)}
.tk-split__head .s__lead{margin-bottom:0}
.tk-split__body{min-width:0;display:grid;gap:var(--s6)}

/* --------------------------------------------------------------- THE TIERS --
   The tier cards are full perforated tickets and they stack down the page at
   their own width. The stepper, the buy action and the sold-out card sit in a
   narrower column beside them, offset DOWN so the fold is not two equal
   columns starting on the same line.
   ---------------------------------------------------------------------------- */
.tk-tiers{display:grid;gap:var(--s7) var(--s8);
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr);align-items:start}
.tk-tiers__list{min-width:0}
.tk-tiers__side{min-width:0;display:grid;gap:var(--s5);
  padding-top:var(--s9);align-content:start}
.tk-note{margin:0;max-width:40ch;
  font-size:var(--size-small);line-height:1.5}
.tk-buy{justify-self:start}

/* ------------------------------------------------------------ THE WAITLIST --
   The one fold that carries the page's one action in the default state. The
   ticket is the object; the words beside it are the reason to take it. The
   ticket column is the wider one, because the ticket is the point.
   ---------------------------------------------------------------------------- */
/* MEASURED, second pass. At 1.35fr the ticket column ran to about 760px, the
   component held its own 920px max-width, and the pink stub sat hard against
   the far right of the fold with the black receipt stranded in the middle: the
   two halves of one printed object read as two separate objects.
   Narrowing the column to the ticket's own comfortable width puts the stub back
   beside the body it tears off, which is the whole gesture. The headline column
   takes the width that frees up. */
.tk-wait{display:grid;gap:var(--s7) var(--s8);
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center}
.tk-wait__ticket{min-width:0;position:relative;max-width:620px;justify-self:start}
/* the toast docks over the ticket, where the eye already is. .c-toast-dock is
   position:absolute in the system, so the host has to be positioned; this is
   that host, and the dock keeps the device's own geometry. */
.tk-dock{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);align-items:stretch;
  pointer-events:none;z-index:var(--z-raise)}
.tk-dock > *{pointer-events:auto}

/* ------------------------------------------------------------- THE NEXT ---- */
.tk-next{display:grid;gap:var(--s6) var(--s8);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.tk-next .s__h{margin-bottom:0}
.tk-next__acts{display:flex;flex-wrap:wrap;gap:var(--s4)}

/* ================================================================== 1024 ==== */
@media (max-width:1024px){
  .tk-hero__grid{grid-template-columns:minmax(0,1fr)}
  .tk-split{grid-template-columns:minmax(0,1fr)}
  .tk-split__head{position:static}
  .tk-tiers{grid-template-columns:minmax(0,1fr)}
  .tk-tiers__side{padding-top:0}
  .tk-wait{grid-template-columns:minmax(0,1fr)}
  .tk-next{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ================================================================== 640 =====
   THE PHONE IS ITS OWN LAYOUT. The hero is rebuilt rather than squeezed: the
   headline drops a size so three words still fit a line, the actions become
   full-width thumb pads stacked, and the fold ends where it is finished rather
   than filling a screen. The waitlist ticket is the FIRST thing under the hero
   on a phone, because on a phone the page is the action.
   ============================================================================ */
@media (max-width:640px){
  /* the phone hero does not try to fill a screen. A short hero that is read to
     the end beats a tall one abandoned halfway, and the action has to be above
     the fold, not under a 72px headline that ate it. */
  .tk-hero{padding-block:var(--s7) var(--s7);min-height:0;display:block}
  .tk-hero__h{font-size:var(--size-display);line-height:.9;margin-bottom:var(--s5)}
  .tk-hero__p{max-width:none;margin-bottom:var(--s6)}
  .tk-hero__acts{flex-direction:column;align-items:stretch}
  .tk-hero__acts > *{width:100%;justify-content:space-between}

  .tk-split,.tk-tiers,.tk-wait,.tk-next{gap:var(--s6)}
  .tk-note{max-width:none}
  .tk-buy{justify-self:stretch}
  .tk-buy{justify-content:space-between}
  .tk-next__acts{flex-direction:column;align-items:stretch}
  .tk-next__acts > *{width:100%;justify-content:space-between}

  /* the dock sits above the phone's fixed ticket bar, not under it */
  .tk-dock{left:var(--s3);right:var(--s3);bottom:var(--s3)}
}

/* --------------------------------------------------------- THE SOLD-OUT ----
   C-soldout arrives as a .c-row of two cards. In the side column it runs down
   rather than across, so the stamped tier sits directly above the one it is
   not happening to and the pairing still reads.
   ---------------------------------------------------------------------------- */
.tk-sold{min-width:0}
.tk-sold .c-row{flex-direction:column;align-items:stretch}

/* ------------------------------------------------------------- THE PASSES --
   The passes are printed objects and they hang from their strap, so the fold
   gives them the room to hang. Type left, passes right; at 1024 the passes
   take the full width and keep their own row.
   ---------------------------------------------------------------------------- */
/* MEASURED, 21 SEP: the strap and three passes need 982px in one row (58 + 3 x
   260 + three gaps) and the right-hand column gave them 751 at 1440, so the
   third pass wrapped under the first two and left a hole beside it. The words
   go ABOVE and the passes get the whole measure, which holds all three on one
   line from 1100 up. */
.tk-pass{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr);align-items:start}
.tk-pass__say{min-width:0}
.tk-pass__say .s__lead{margin-bottom:0;max-width:44ch}
.tk-pass__cards{min-width:0}

/* -------------------------------------------------------------- THE MERCH --
   The head sits above the grid at reading width; the grid is the component's
   own and is not touched.
   ---------------------------------------------------------------------------- */
.tk-merch__head{max-width:52ch;margin-bottom:var(--s7)}
.tk-merch__head .s__lead{margin-bottom:0}
.tk-merch{min-width:0}

@media (max-width:1024px){
  .tk-pass{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .tk-pass{gap:var(--s6)}
  .tk-pass__say .s__lead{max-width:none}
  .tk-merch__head{max-width:none;margin-bottom:var(--s6)}
}

/* PASSES LEFT, WORDS RIGHT, from 1360 up. The three passes and their strap take
   the 982px they need and the words take what is left of the row, set against
   the passes' foot, so the fold has no bare third. Under 1360 the words go
   above and the passes keep the whole measure. */
@media (min-width:1360px){
  .tk-pass{grid-template-columns:auto minmax(0,1fr);gap:var(--s7);align-items:end}
  .tk-pass__say{grid-column:2;grid-row:1}
  .tk-pass__cards{grid-column:1;grid-row:1}
}
/* A SHORT WINDOW (a 1280x720 laptop): the hero's actions measured 813px down a
   720px screen. The headline steps down one size on the system's own scale and
   the fold tightens, so the one action this page exists for is on screen one. */
@media (min-width:1025px) and (max-height:800px){
  .tk-hero{padding-block:var(--s6) var(--s6)}
  .tk-hero__h{font-size:var(--size-display);margin-bottom:var(--s4)}
  .tk-hero__p{margin-bottom:var(--s5)}
}