/* =============================================================
   RESPONSIVE — mobile rules for Time For A Show
   -------------------------------------------------------------
   Activated via CONTAINER queries on `.tfas-page` (not viewport
   media queries) so a 390-wide mobile artboard in the design
   canvas gets the mobile layout while a 1280-wide desktop
   artboard stays on the desktop layout — same browser window,
   side-by-side. In production, `.tfas-page` fills the viewport,
   so the behaviour matches a normal viewport media query.

   Breakpoint: ≤ 960px container width = mobile.
   No tablet range — anything below desktop is mobile.
   ============================================================= */

/* -------------------------------------------------------------
   Containment setup. Without this, container queries don't fire.
   ------------------------------------------------------------- */
.tfas-page {
  container-type: inline-size;
  container-name: page;
}

/* Children of grid/flex layouts need min-width:0 to shrink */
.tfas-page * { min-width: 0; }

/* -------------------------------------------------------------
   Desktop defaults for mobile-only chrome (hidden up here so the
   container query block stays minimal)
   ------------------------------------------------------------- */
.nav__burger,
.nav-drawer,
.nav-drawer__scrim,
.customiser-mobile-warn { display: none; }


/* =============================================================
   MOBILE  ≤ 960px
   ============================================================= */
@container page (max-width: 960px) {

  /* ---------- Container & sections ---------- */
  .container { padding: 0 16px; }
  .section { padding: 56px 0 !important; }

  /* ---------- Top nav: hide desktop bits, show hamburger ---------- */
  .nav { padding: 14px 16px; gap: 12px; }
  .nav > div:first-child { gap: 0 !important; flex: 1; min-width: 0; }
  .nav__brand { font-size: 18px !important; }
  .nav__links { display: none; }
  .nav__right > .btn { display: none !important; }   /* drop sign-in + List your show — drawer carries them */
  .nav__right { gap: 8px; }
  /* dashboard user pill: collapse to avatar only */
  .nav__right > button:not(.nav__burger) {
    padding: 4px !important;
  }
  .nav__right > button:not(.nav__burger) > span:nth-of-type(2),
  .nav__right > button:not(.nav__burger) > svg { display: none !important; }

  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    color: var(--color-fg);
    cursor: pointer;
  }
  .nav__burger:hover { background: var(--tfas-paper-100); }
  .nav__burger svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round;
  }

  /* ---------- Slide-in drawer ---------- */
  .nav-drawer {
    display: block;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86%, 360px);
    background: #fff;
    z-index: 100;
    transform: translateX(102%);
    transition: transform .26s var(--ease-standard);
    box-shadow: -10px 0 32px rgba(15,24,47,0.22);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .nav-drawer.is-open { transform: translateX(0); }

  .nav-drawer__scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15, 24, 47, 0);
    z-index: 99;
    pointer-events: none;
    transition: background .26s var(--ease-standard);
  }
  .nav-drawer__scrim.is-open {
    background: rgba(15, 24, 47, 0.55);
    pointer-events: auto;
  }

  .nav-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-drawer__head .nav__brand { font-size: 18px; }
  .nav-drawer__close {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    color: var(--color-fg);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .nav-drawer__close:hover { background: var(--tfas-paper-100); }
  .nav-drawer__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

  .nav-drawer__user {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    background: var(--tfas-paper-50);
    border-bottom: 1px solid var(--color-border);
  }
  .nav-drawer__avatar {
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--tfas-blue-500); color: #fff;
    font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .nav-drawer__avatar--velvet { background: var(--tfas-velvet-500); }
  .nav-drawer__user-name { font-size: 14px; font-weight: 600; color: var(--color-fg); }
  .nav-drawer__user-group {
    font-size: 11px; color: var(--tfas-paper-500);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 2px;
  }

  .nav-drawer__links {
    display: flex; flex-direction: column;
    padding: 12px 0;
    flex: 1;
  }
  .nav-drawer__links a,
  .nav-drawer__links button {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    font-family: var(--font-sans);
    font-size: 15px; font-weight: 500;
    color: var(--color-fg);
    background: transparent; border: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .nav-drawer__links a small,
  .nav-drawer__links button small {
    display: block;
    font-size: 12px; font-weight: 400;
    color: var(--color-fg-subtle);
    margin-top: 2px;
  }
  .nav-drawer__links a.is-active {
    color: var(--color-brand);
    background: var(--tfas-paper-100);
    border-left: 3px solid var(--color-brand);
    padding-left: 19px;
  }
  .nav-drawer__links a:hover,
  .nav-drawer__links button:hover { background: var(--tfas-paper-100); }

  .nav-drawer__section-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--tfas-paper-500);
    padding: 16px 22px 6px;
  }
  .nav-drawer__section-label:not(:first-child) {
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
  }

  .nav-drawer__cta {
    padding: 16px 22px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--tfas-paper-50);
    display: flex; flex-direction: column; gap: 10px;
  }

  /* ---------- Headings — scale down ---------- */
  .display { font-size: clamp(38px, 10vw, 56px) !important; line-height: 1.05; letter-spacing: -0.01em; }
  .heading--xl { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.15; }
  .heading--md { font-size: 22px !important; line-height: 1.2; }

  /* Hero paragraphs */
  p[style*="font-size:22"],
  p[style*="font-size: 22"] { font-size: 17px !important; line-height: 1.5; }
  p[style*="font-size:19"],
  p[style*="font-size: 19"] { font-size: 16px !important; }

  /* ---------- THE BIG ONE: collapse any inline grid to one column ----------
     Catches every gridTemplateColumns: "..." pattern in the codebase
     without needing per-page JSX edits. Use class `.keep-grid` to opt out.
  */
  [style*="grid-template-columns"]:not(.keep-grid) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Footer (uses a class, not inline) */
  .foot__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .foot__legal {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    text-align: left;
  }

  /* ---------- Toolbars & button rows ---------- */
  .tabs { flex-wrap: wrap; max-width: 100%; }
  .btn--lg { padding: 14px 22px; font-size: 14px; }

  /* CTA strips often have flex rows of buttons — wrap them */
  [style*="justify-content"][style*="center"][style*="gap"][style*="flex"]:not(.no-wrap-buttons) {
    flex-wrap: wrap;
  }

  /* ---------- Hero / featured sections ---------- */
  .hero--paper { padding-top: 56px !important; padding-bottom: 32px !important; }

  /* ---------- Card padding ---------- */
  .card--feature { padding: 24px !important; }
  .card--paper { padding: 20px !important; }

  /* ---------- Ticker — keep, but smaller ---------- */
  .ticker { padding: 8px 0; }
  .ticker__inner { font-size: 12px; gap: 24px; }

  /* ---------- Crumbs — wrap ---------- */
  .crumbs { flex-wrap: wrap; row-gap: 4px; }

  /* ---------- Form inputs ---------- */
  .field__input { font-size: 16px; /* avoids iOS zoom */ }

  /* ---------- Posters — shrink ---------- */
  .paper-poster { padding: 24px; }
  .paper-poster__title { font-size: 36px !important; }

  /* ---------- Tag/badge rows wrap (only ROW flexes, not columns) ---------- */
  [style*="display:flex"][style*="gap"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]),
  [style*="display: flex"][style*="gap"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) { flex-wrap: wrap; }

  /* ---------- Designer / customiser → show "use larger screen" notice
                and hide the actual designer. ---------- */
  .customiser-mobile-warn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-width: 460px;
    margin: 32px auto;
  }
  .customiser-mobile-warn .icon-wrap {
    width: 64px; height: 64px;
    background: var(--tfas-amber-100);
    color: var(--tfas-amber-700);
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .customiser-desktop { display: none !important; }

  /* ---------- Card-per-row table pattern (Phase 3) ----------
     Tables built with display:grid rows can opt in with the class
     `.row-table` — on mobile each row becomes a stacked card. */
  .row-table > div[style*="grid-template-columns"],
  .row-table > li[style*="grid-template-columns"] {
    display: block !important;
    padding: 14px 16px !important;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
  }
  .row-table > div[style*="grid-template-columns"] > *,
  .row-table > li[style*="grid-template-columns"] > * {
    display: block;
    padding: 4px 0;
  }
}


/* =============================================================
   VERY SMALL ≤ 380px — tiny phones / cramped artboards
   ============================================================= */
@container page (max-width: 380px) {
  .container { padding: 0 14px; }
  .display { font-size: 34px !important; }
  .heading--xl { font-size: 24px !important; }
  .nav__brand { font-size: 17px !important; }
}


/* =============================================================
   TABLET-FRIENDLY POLISH  640–960px
   -------------------------------------------------------------
   Block lives AT THE END of this file (after Phase 2 + Phase 3)
   so its rules win the cascade for the 640–960 range. See below.
   ============================================================= */


/* =============================================================
   PHASE 2 — MARKETING PAGE POLISH (≤ 960px)
   ============================================================= */
@container page (max-width: 960px) {

  /* ---------- Section heads — stack title and "more" link ---------- */
  .section__head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
  }
  .section__more { font-size: 13px; }

  /* ---------- Hero "intro strip" big serif quote ---------- */
  p[style*="font-size:30"],
  p[style*="font-size: 30"] {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
  p[style*="font-size:24"],
  p[style*="font-size: 24"] {
    font-size: 18px !important;
  }

  /* ---------- Decorative chrome that overflows on narrow screens ---------- */
  .rosette {
    width: 64px !important; height: 64px !important;
    font-size: 11px !important;
  }
  .rosette__ribbon { display: none; }
  .tape { display: none; }     /* masking tape adds clutter at small size */
  .marquee-bulbs i { width: 6px; height: 6px; }
  .marquee-bulbs { gap: 10px; }

  /* ---------- Posters / placeholders ---------- */
  .paper-poster { padding: 22px; }
  .paper-poster__title { font-size: 32px !important; }
  .paper-poster__top, .paper-poster__byline { font-size: 10px; }
  .paper-poster__pres, .paper-poster__sub { font-size: 12px; }

  /* ---------- Footer ---------- */
  .foot {
    padding: 56px 0 24px;
  }
  .foot__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .foot__about { max-width: 100% !important; font-size: 13px; }
  .foot__col h4 { margin-bottom: 10px; }

  /* ---------- Step numbers — tighten ---------- */
  .step__num { font-size: 56px !important; }

  /* ---------- Hero CTA buttons full-width pair ---------- */
  .hero--paper .btn--lg,
  section[class*="hero"] .btn--lg {
    flex: 1 1 auto;
  }
  .hero--paper [style*="flex-wrap"] .btn--lg {
    min-width: calc(50% - 6px);
  }

  /* ---------- "Worked example" / fee bar — keep readable ---------- */
  .fee-bar { font-size: 12px; }
  .fee-bar__face, .fee-bar__fee { padding: 12px 14px; }
  .fee-bar small { font-size: 9px; }
  .fee-graphic { padding: 20px !important; }

  /* ---------- Ribbons & pills ---------- */
  .ribbon { font-size: 11px; padding: 6px 12px; }
  .pill { font-size: 12px; padding: 6px 12px; }
  .eyebrow { font-size: 10px; }

  /* ---------- Note / inline callouts ---------- */
  .note {
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px 18px !important;
  }

  /* ---------- Blog article + similar long-form pages ---------- */
  article p, article li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  h2[style*="font-size:30"],
  h2[style*="font-size: 30"] {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px 18px !important;
    font-size: 18px !important;
  }

  /* ---------- Ticker on tiny screens ---------- */
  .ticker__inner { animation-duration: 50s !important; }

  /* ---------- Hero photos / placeholders shouldn't dominate ---------- */
  .paper-poster, .poster {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- Tabs (e.g. event detail, customiser header) ---------- */
  .tabs button { font-size: 12px !important; padding: 6px 10px !important; }

  /* ---------- Tag rows wrap (was inline in grep) ---------- */
  [style*="display:flex"][style*="justifyContent:space-between"],
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* ---------- Reduce big margins between sections ---------- */
  section[style*="padding:96px"],
  section[style*="padding: 96px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  section[style*="padding:72px"],
  section[style*="padding: 72px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  section[style*="padding:56px"],
  section[style*="padding: 56px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* ---------- Card grid gap tightens ---------- */
  .card--feature { padding: 22px !important; }
  .card--feature .heading--md { font-size: 20px !important; }
  .card .price__amount { font-size: 48px !important; }
  .card .price__unit { font-size: 13px !important; }

  /* ---------- Hero "list at top of page" stats row wrap ---------- */
  .stat-row {
    flex-direction: column;
    gap: 14px;
  }

  /* ---------- Order summary / ticket stub layouts ---------- */
  .stub {
    flex-direction: column;
  }
  .stub__seat {
    border-left: 0 !important;
    border-top: 1px dashed var(--tfas-paper-300);
    flex-direction: row !important;
    justify-content: space-between;
    padding: 12px 16px !important;
    gap: 12px;
  }

  /* ---------- "Section more" arrows on right go below ---------- */
  .section__more {
    align-self: flex-start;
  }

  /* ---------- Crumbs eyebrow text ---------- */
  .crumbs a, .crumbs span { font-size: 11px; }

  /* ---------- Two-col forms become stacked ---------- */
  .field { width: 100%; }

  /* ---------- Make sure scribble & circled remain readable ---------- */
  .scribble, .circled { background-size: 100% 0.5em; }

  /* ---------- Auth pages (Sign in / Register) ----------
     Class-based grid, not inline — needs its own collapse rule.
     Hide the side "poster" panel entirely; show only the form. */
  .auth {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .auth__poster { display: none !important; }
  .auth__panel {
    padding: 32px 20px !important;
  }
  .auth__form {
    max-width: 100% !important;
    gap: 16px !important;
  }


  /* =============================================================
     PHASE 3 — DASHBOARDS, EVENT DETAIL, WIZARD
     ============================================================= */

  /* ---------- Column-header rows in dashboard tables ----------
     Heuristic: inline grid + uppercase + font-size:11. These rows
     are pure column-name labels and add nothing once the row
     collapses to single column. Hide them. */
  [style*="grid-template-columns"][style*="text-transform: uppercase"][style*="font-size: 11"],
  [style*="grid-template-columns"][style*="text-transform:uppercase"][style*="font-size:11"] {
    display: none !important;
  }

  /* ---------- Body rows of dashboard tables ----------
     The body rows have padding "22px 24px" inline and a
     gridTemplateColumns. Once the global rule collapses them to
     single column, give them card-like spacing. */
  [style*="grid-template-columns"][style*="padding"][style*="border-bottom"]:not([style*="text-transform"]) {
    padding: 18px 18px !important;
    row-gap: 6px !important;
  }

  /* ---------- Events grid (organiser): collapse to a single column ----------
     The card grid is repeat(3,1fr) on desktop; on mobile stack the
     cards one per row so each event reads clearly when scrolling. */
  .events-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .events-card--add {
    min-height: 140px !important;
  }

  /* Event-detail orders row separators */
  ul[style*="display:flex"] > li[style*="grid-template-columns"],
  ul[style*="display: flex"] > li[style*="grid-template-columns"] {
    padding: 14px 0 !important;
    row-gap: 4px;
  }

  /* ---------- Sticky asides ---------- */
  /* The wizard's left stepper + right preview rails should NOT
     stick on mobile — they just become full-width blocks before
     and after the form. The global grid collapse puts them in
     source order: stepper → form → preview. */
  aside[style*="position:sticky"],
  aside[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* ---------- Wizard stepper — horizontal scroll pill row ---------- */
  /* The stepper is an <ol> of <li>s; turn it into a chip-strip. */
  .card--paper + .card--paper { } /* placeholder, no-op */
  ol[style*="flex-direction:column"],
  ol[style*="flex-direction: column"] {
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px;
    /* hide scrollbar visually but keep functionality */
    scrollbar-width: thin;
  }
  ol[style*="flex-direction"] > li {
    flex-shrink: 0;
  }
  ol[style*="flex-direction"] > li a[style*="grid-template-columns"] {
    grid-template-columns: 24px auto !important;
    padding: 8px 12px !important;
    background: #fff !important;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 12px !important;
  }

  /* ---------- "Stuck on something?" help card under stepper ---------- */
  aside > div[style*="border:1px dashed"],
  aside > div[style*="border: 1px dashed"] {
    margin-top: 16px !important;
  }

  /* ---------- Event-detail hero ---------- */
  /* The hero card has poster + main + side rail. Once collapsed
     to single column, drop the dashed left-border on the side
     rail. */
  div[style*="border-left:1px dashed"],
  div[style*="border-left: 1px dashed"] {
    border-left: 0 !important;
    border-top: 1px dashed var(--tfas-paper-300);
    padding-left: 0 !important;
    padding-top: 18px !important;
    margin-top: 6px;
  }

  /* Hero poster shouldn't take 180px when stacked — let it size to its content */
  div[style*="aspect-ratio:3/4"],
  div[style*="aspect-ratio: 3 / 4"] {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- Event-detail stats row (Sold / Takings / Occupancy / Payout) ---------- */
  /* 4-col grid of stats becomes 2-col on mobile, not 1.
     Specificity-bumped with :not(.keep-grid) so this wins over the
     global single-column collapse rule. */
  div[style*="grid-template-columns:repeat(4"]:not(.keep-grid),
  div[style*="grid-template-columns: repeat(4"]:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  /* ---------- Action item buttons (e.g. "Door list", "Voucher codes") ---------- */
  /* They have 44px-1fr-auto grid; just shrink the icon column.
     Need :not(.keep-grid) here too so we beat the global collapse. */
  button[style*="grid-template-columns:44px"]:not(.keep-grid),
  button[style*="grid-template-columns: 44px"]:not(.keep-grid) {
    grid-template-columns: 36px 1fr auto !important;
    padding: 12px 14px !important;
  }

  /* ---------- Wizard form section cards ---------- */
  .card--paper[style*="padding:28px"],
  .card--paper[style*="padding: 28px"] {
    padding: 20px 18px !important;
  }
  .card--paper[style*="padding:24px 28px"],
  .card--paper[style*="padding: 24px 28px"] {
    padding: 18px 16px !important;
  }

  /* ---------- Page hero areas with absolute-positioned chrome ---------- */
  section[style*="background:var(--tfas-paper-50)"] [style*="position:absolute"][style*="left:96px"] {
    /* perforation lines on the customiser are hidden along with the rest */
    display: none;
  }

  /* ---------- Door list / patron list rows: tighten ---------- */
  div[style*="grid-template-columns"] > div[style*="font-family:var(--font-mono)"] {
    font-size: 12px;
  }

  /* ---------- Accounting page: rebrand "ledger" rows as stacked cards ---------- */
  /* Same heuristic as table rows above already handles the row
     collapse and padding. Just hide running totals that only make
     sense as a wide-table column header. */
  [style*="grid-template-columns"][style*="border-top"][style*="font-weight"] {
    border-top: 1px solid var(--color-border) !important;
  }

  /* ---------- Make ManageActions (5 buttons in a row) a 2-col grid ---------- */
  /* Override the 1fr collapse — looks better as 2 wide tappable tiles.
     :not(.keep-grid) for specificity. */
  div[style*="grid-template-columns:repeat(5"]:not(.keep-grid),
  div[style*="grid-template-columns: repeat(5"]:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ---------- Tag rows on event hero ---------- */
  .tag { font-size: 11px; padding: 4px 10px; }
  .tag--dot::before { width: 6px; height: 6px; }

  /* ---------- Belt-and-braces: prevent ANY element from overflowing its container.
                Inputs, selects, posters, etc. ---------- */
  .tfas-page input,
  .tfas-page select,
  .tfas-page textarea,
  .tfas-page img,
  .tfas-page video {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .tfas-page .field__input { width: 100%; }

  /* Inline fixed-width buttons (e.g. preview/edit chips) shouldn't break out */
  .tfas-page button { max-width: 100%; }

  /* The wizard's performances row has inline-styled inputs and a select+button group.
     Force flex items to wrap inside collapsed rows. */
  [style*="grid-template-columns"][style*="padding"] > [style*="display:flex"],
  [style*="grid-template-columns"][style*="padding"] > [style*="display: flex"] {
    flex-wrap: wrap;
  }
}


/* =============================================================
   TABLET-FRIENDLY POLISH  640–960px
   -------------------------------------------------------------
   Sits inside the mobile range (≤960px). On portrait tablets and
   bigger phones, lets specific grids breathe back into 2 columns
   instead of stacking, and keeps a few hero layouts side-by-side.
   No new design language — just gentle un-collapsing of the
   mobile rules where there's room.

   Placed AT THE END of the file (after Phase 2 + Phase 3) so its
   rules win the cascade for the 640–960 range.
   ============================================================= */
@container page (min-width: 640px) and (max-width: 960px) {

  /* ---------- Slightly more breathing room ---------- */
  .container { padding: 0 24px; }

  /* ---------- Feature card grids: 3-up → 2-up (was 1-up) ---------- */
  [style*="grid-template-columns:repeat(3"]:not(.keep-grid),
  [style*="grid-template-columns: repeat(3"]:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  /* ---------- 2-up grids stay 2-up (don't collapse) ---------- */
  [style*="grid-template-columns:1fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns:repeat(2"]:not(.keep-grid),
  [style*="grid-template-columns: repeat(2"]:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  /* ---------- Hero "words + image" layouts stay side-by-side ----------
     Covers every fractional-ratio pair used in the codebase. */
  [style*="grid-template-columns:1.15fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1.15fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns:1.1fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1.1fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns:1.2fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1.2fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns:1fr 1.2fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1fr 1.2fr"]:not(.keep-grid),
  [style*="grid-template-columns:1fr 1.4fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1fr 1.4fr"]:not(.keep-grid),
  [style*="grid-template-columns:1.4fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1.4fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns:1fr 1.5fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1fr 1.5fr"]:not(.keep-grid),
  [style*="grid-template-columns:1.5fr 1fr"]:not(.keep-grid),
  [style*="grid-template-columns: 1.5fr 1fr"]:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* ---------- Footer goes 2-col, not 1-col ---------- */
  .foot__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .foot__about { max-width: 36ch !important; }

  /* ---------- Don't tighten section padding as aggressively ---------- */
  .section { padding: 72px 0 !important; }

  /* ---------- Headings can be larger than tight-mobile ---------- */
  .display { font-size: clamp(48px, 8vw, 64px) !important; }
  .heading--xl { font-size: clamp(30px, 5vw, 40px) !important; }

  /* ---------- Card padding restores a bit ---------- */
  .card--feature { padding: 28px !important; }
  .card--paper { padding: 24px !important; }

  /* ---------- ManageActions: 5 buttons → 3-col (instead of 2) ---------- */
  div[style*="grid-template-columns:repeat(5"]:not(.keep-grid),
  div[style*="grid-template-columns: repeat(5"]:not(.keep-grid) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* ---------- 4-col stat row: 4×1, not 2×2 ---------- */
  div[style*="grid-template-columns:repeat(4"]:not(.keep-grid),
  div[style*="grid-template-columns: repeat(4"]:not(.keep-grid) {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }

  /* ---------- Hero CTA buttons don't need to flex 50/50 anymore ---------- */
  .hero--paper .btn--lg,
  section[class*="hero"] .btn--lg {
    flex: 0 0 auto;
  }
}

/* =============================================================
   BOOKING PAGE
   ============================================================= */
.book-cal-nav {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-fg); cursor: pointer;
}
.book-cal-nav:hover { background: var(--tfas-paper-100); }
.book-cal-nav .icon { width: 16px; height: 16px; }

@container page (max-width: 960px) {
  /* Seat picker: stack canvas over summary */
  .book-seats-grid { grid-template-columns: 1fr !important; }
  /* Slot rows: stack the action under the time/where */
  .book-slot-row { grid-template-columns: 1fr !important; }
  .book-slot-row > div:last-child { justify-self: start !important; }
  /* Stepper labels can wrap to icons-only feel by shrinking */
  .book-stepper { gap: 0 !important; }
  .book-stepper button { padding: 12px 10px !important; }
}

/* =============================================================
   SUPPORT — skeleton loader shimmer
   ============================================================= */
.sup-skel {
  border-radius: 5px;
  background: linear-gradient(90deg, var(--tfas-paper-100) 25%, var(--tfas-paper-200) 50%, var(--tfas-paper-100) 75%);
  background-size: 200% 100%;
  animation: sup-shimmer 1.3s ease-in-out infinite;
}
@keyframes sup-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================
   PUBLIC PROFILE — loading spinner
   ============================================================= */
.tfas-spinner {
  width: 44px; height: 44px; border-radius: 999px;
  border: 4px solid var(--tfas-paper-200);
  border-top-color: var(--color-brand);
  animation: tfas-spin 0.8s linear infinite;
}
@keyframes tfas-spin { to { transform: rotate(360deg); } }

/* =============================================================
   HELP CENTRE — article body
   ============================================================= */
.help-body { font-family: var(--font-serif); color: var(--tfas-paper-800); font-size: 16px; line-height: 1.65; }
.help-body h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--color-fg); margin: 28px 0 10px; letter-spacing: -0.01em; }
.help-body p { margin: 0 0 14px; }
.help-body ul, .help-body ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.help-body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--color-brand); background: var(--tfas-paper-100); border-radius: 0 6px 6px 0; font-style: italic; }
.help-body code { font-family: var(--font-mono); font-size: 13px; background: var(--tfas-paper-100); padding: 2px 6px; border-radius: 4px; }
.help-body pre { font-family: var(--font-mono); font-size: 13px; background: var(--tfas-stage-700); color: #e6e9f0; padding: 14px 16px; border-radius: 8px; overflow: auto; margin: 0 0 16px; }
.help-body pre code { background: none; padding: 0; color: inherit; }