/* ------------------------------------------------------------------
   mobile.css
   Loaded last in <head> on every page, so it wins over the inline
   <style> blocks without needing !important. Everything here is about
   how the site behaves on a phone. Desktop is untouched except for the
   price ladder wrapper, which is defined once here for both sizes.
   ------------------------------------------------------------------ */

/* ---------- grid items must be allowed to shrink ----------
   A grid track of 1fr will not go below the intrinsic width of what is
   inside it. One wide partner logo was stretching the whole page and
   pushing the header off screen on phones. */
.grid > *, .pgrid > *, .djgrid > *, .facts > *, .venue > *,
.prizes > *, .crit > *, .rules > *, .steps-comp > * { min-width: 0; }
img { max-width: 100%; }

/* ---------- footer columns ----------
   The columns are flex items that stretch to the tallest one, and a stretched
   grid spreads its rows apart. That is why the two links under Legal were
   floating in the middle of the column instead of sitting under the heading. */
.foot .cols { align-items: flex-start; }
.foot .col { align-content: start; justify-items: start; }

/* the logo is a transparent PNG and must never sit on a white plate */
.brand img, .hero-logo, .flogo, .band img { background: transparent; }

/* ---------- price on the buttons ----------
   It used to be a thin serif sitting on the bright red end of the gradient,
   which is the hardest thing to read on the whole site. Same family as the
   label, heavier, separated by a hairline, and the gradient ends a shade
   deeper so white text actually holds up against it. */
.cta { background-image: linear-gradient(100deg, #2E4BE0, #CE1240); }
.cta .price {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .005em;
  color: #fff;
  margin-left: 2px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .34);
  white-space: nowrap;
}
.tl-buy { background-image: linear-gradient(100deg, #2E4BE0, #CE1240); }

/* ---------- price ladder: shared structure ---------- */
.tl-price { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; }
.tl-amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tl-couple { margin-top: 2px; }

/* live price chip: each half stays whole when the line wraps */
.live .live-a, .live .live-b { white-space: nowrap; }
.live .live-b::before { content: "·"; margin-right: 9px; opacity: .55; }

@media (max-width: 760px) {
  .tl { margin-top: 6px; }
  .tl-line { left: 9px; top: 22px; bottom: 22px; }
  .tl-step {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0 14px;
    align-items: start;
    padding: 18px 0;
  }
  .tl-node { width: 22px; justify-content: flex-start; padding-top: 6px; }
  .tl-ph { font-size: 20px; gap: 10px; }
  .tl-win { font-size: 13px; }
  .tl-badge { font-size: 10px; padding: 4px 9px; }

  /* price block moves under the phase name and reads left to right */
  .tl-price {
    grid-column: 2;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
  }
  .tl-amounts {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 12px;
  }
  .tl-full { font-size: 27px; }
  .tl-couple { margin-top: 0; font-size: 13px; }
  .tl-amounts .tl-couple::before { content: "·"; margin-right: 12px; opacity: .5; }

  /* the buy button on the live phase gets its own full width row */
  .tl-buy {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 14px 18px;
    border-radius: 100px;
  }

  /* live price chip */
  .live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
    border-radius: 20px;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.4;
  }
}

/* ---------- checkout sheet becomes a bottom sheet ---------- */
@media (max-width: 640px) {
  .modal { align-items: flex-end; padding: 0; }
  .sheet {
    max-width: none;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(40px);
    -webkit-overflow-scrolling: touch;
  }
  .sheet::before { border-radius: 24px 24px 0 0; }
  .sheet::after { left: 20px; right: 20px; }
  .sheet-close { top: 14px; right: 14px; width: 40px; height: 40px; }
  .sheet .kick { font-size: 11px; margin-bottom: 10px; }
  .sheet h3 { font-size: 27px; padding-right: 46px; }
  .sheet .lead { font-size: 14px; margin-bottom: 20px; }
  .steps { margin-bottom: 22px; }

  /* pass options: title left, price right, never wrapping mid number */
  .opt { padding: 18px 52px 18px 18px; gap: 12px; margin-bottom: 12px; border-radius: 18px; }
  .opt::after { right: 16px; }
  .opt .t { font-size: 18px; }
  .opt .d { font-size: 12.5px; line-height: 1.35; }
  .opt .p { margin-right: 0; font-size: 20px; white-space: nowrap; }

  .rolelabel { margin: 16px 0 8px; }
  .chips { gap: 8px; }
  .chip { padding: 11px 16px; font-size: 14px; }

  /* one field per row, so nothing gets squeezed */
  .frow { grid-template-columns: 1fr; gap: 12px; }
  .fields input { padding: 15px 14px; }

  .summary { padding: 14px 15px; font-size: 13.5px; }
  .sheet-actions { flex-direction: column-reverse; gap: 10px; }
  .sheet-actions .cta,
  .sheet-actions .backbtn { width: 100%; justify-content: center; text-align: center; padding: 16px 18px; }

  .pay-amount-row { padding: 14px 16px; }
  .pay-amount-row .amt { font-size: 24px; }

  /* success screen */
  #paySuccess { padding: 20px 2px; }
  #paySuccess .big { font-size: 23px; }
  #paySuccess .tk .row { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* the cookie bar must never sit on top of the checkout */
  #cookiebar { z-index: 90; }
}

/* ---------- phone: buy first ----------
   On a phone the whole point of the first screen is the price, the countdown
   and the button. The logo used to eat 287px and pushed the button below the
   fold, so nobody could buy without scrolling. */
@media (max-width: 640px) {

  /* header keeps a compact buy pill instead of hiding it */
  .nav { gap: 10px; }
  .brand img { height: 34px; }
  header .nav > .cta {
    display: inline-flex;
    order: 2;
    margin-left: auto;
    gap: 7px;
    padding: 10px 15px;
    font-size: 0;            /* hides "Get your pass" on the small screen */
    line-height: 1;
    box-shadow: 0 6px 18px -8px rgba(46, 75, 224, .8);
  }
  header .nav > .cta::before {
    content: "Buy";
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .92);
  }
  header .nav > .cta .price { font-size: 15px; font-weight: 800; padding-left: 10px; }
  .menu-btn { order: 3; }

  /* hero */
  .hero-inner { padding: 96px 0 44px; }
  .hero-logo { height: auto; width: min(62vw, 230px); max-height: 21vh; margin: 0 auto 14px; }
  .eyebrow { font-size: 11.5px; letter-spacing: .18em; margin-bottom: 14px;
             max-width: 30ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.06; max-width: 18ch; text-wrap: balance; }
  .hero .sub { margin-top: 14px; font-size: 15.5px; line-height: 1.5; max-width: 34ch; text-wrap: balance; }

  /* countdown sits right above the button and reads as one block with it */
  .fcount { margin-top: 22px; gap: 8px; flex-wrap: nowrap; }
  .fc { min-width: 0; flex: 1; padding: 10px 4px; border-radius: 12px; }
  .fc .n { font-size: 25px; }
  .fc .l { font-size: 9.5px; letter-spacing: .1em; margin-top: 5px; }

  .hero-actions { margin-top: 16px; gap: 10px; flex-direction: column; }
  .hero-actions .cta { width: 100%; justify-content: center; padding: 16px 22px; font-size: 15.5px; }
  .hero-actions .ghost { width: 100%; text-align: center; padding: 13px 22px; }
}

/* ---------- general phone polish ---------- */
@media (max-width: 640px) {
  .wrap, .tk-wrap { padding-left: 20px; padding-right: 20px; }
  section { padding: 64px 0; }

  .pagehero { padding: 118px 0 44px; }
  .tk-hero { padding: 118px 0 34px; }
  .pagehero h1 { font-size: clamp(34px, 10vw, 46px); }

  .subhead { margin-top: 44px; font-size: 13px; letter-spacing: .12em; }
  .band { padding: 90px 0; }
  .band img { height: 84px; }
  .band p { font-size: 16.5px; }
  .band .cta { width: 100%; justify-content: center; }

  .price-cta, .tk-cta { gap: 12px; }
  .price-cta .cta, .tk-cta .cta { width: 100%; justify-content: center; }

  /* footer stops being a squeezed row */
  .foot { flex-direction: column; gap: 30px; }
  .foot .cols { gap: 26px 40px; }
  .foot .flogo { height: 44px; }

  /* long words and links never push the page sideways */
  body { overflow-x: hidden; }
  p, li, .tl-win, .lead, .note { overflow-wrap: anywhere; }

  /* decorative blur circles stay inside the screen */
  .pagehero .orb, .tk-hero .orb, .hero .orb { max-width: 78vw; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .tl-full { font-size: 24px; }
  .opt .p { font-size: 18px; }
  .sheet h3 { font-size: 25px; }
  .chip { padding: 10px 14px; font-size: 13.5px; }
}
