/* VPE Refresh — mobile layer.
   ────────────────────────────────────────────────────────────────────────────
   The approved design handoff was a fixed 1280px desktop artifact: every layout
   value (grid columns, section padding, display type size) lives in an inline
   style="" attribute on the element, and the design system stylesheet carries no
   breakpoints at all. Overriding inline styles from a stylesheet requires
   matching the exact inline declaration and winning on !important — so the
   [style*="…"] selectors and the !important below are load-bearing, not
   shortcuts. Restructuring the markup into classes was the alternative; it would
   have meant rewriting ~40 wrappers across 6 pages plus the two renderers.

   Two properties make this safe:
     1. Every rule is inside a media query, so the desktop rendering above 900px
        is untouched.
     2. js/main.js emits these same inline strings when it re-renders sections
        from data/events.json at runtime, so runtime markup reflows too — the
        rules do not need to be duplicated for baked vs. client-rendered HTML.

   Breakpoints: 900px stacks the layout, 600px tightens it for phones.
   When editing an inline layout value in a page or in js/main.js, update the
   matching selector here or that element silently stops reflowing.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  :root { --m-gutter: 22px; }

  /* ── Section shells ──────────────────────────────────────────────────────
     Every full-bleed section is a max-width container with 56px side padding.
     Rewrite the whole shorthand so the generous desktop vertical rhythm scales
     down with the gutter instead of leaving 76px of dead space above the fold. */
  [style*="padding:20px 56px"]        { padding: 16px var(--m-gutter) !important; }
  [style*="padding:20px 56px 40px"]   { padding: 16px var(--m-gutter) 28px !important; }
  [style*="padding:24px 56px 80px"]   { padding: 20px var(--m-gutter) 44px !important; }
  [style*="padding:40px 56px"]        { padding: 28px var(--m-gutter) !important; }
  [style*="padding:48px 56px 80px"]   { padding: 30px var(--m-gutter) 44px !important; }
  [style*="padding:56px 56px"]        { padding: 34px var(--m-gutter) !important; }
  [style*="padding:56px 56px 40px"]   { padding: 34px var(--m-gutter) 28px !important; }
  [style*="padding:64px 56px 68px"]   { padding: 38px var(--m-gutter) 40px !important; }
  [style*="padding:64px 56px 80px"]   { padding: 38px var(--m-gutter) 44px !important; }
  [style*="padding:72px 56px"]        { padding: 40px var(--m-gutter) !important; }
  [style*="padding:72px 56px 76px"]   { padding: 40px var(--m-gutter) 44px !important; }
  [style*="padding:76px 56px"]        { padding: 42px var(--m-gutter) !important; }
  [style*="padding:76px 56px 84px"]   { padding: 42px var(--m-gutter) 48px !important; }
  [style*="padding:80px 56px"]        { padding: 44px var(--m-gutter) !important; }
  [style*="padding:80px 56px 40px"]   { padding: 44px var(--m-gutter) 28px !important; }

  /* Catch-all backstop: any container that slips past the list above still
     loses its 56px side gutter rather than clipping text off-screen. */
  [style*="max-width:1280px"],
  [style*="max-width:1180px"],
  [style*="max-width:1000px"] {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Card interiors — desktop padding eats too much of a 375px card. */
  [style*="padding:36px"]        { padding: 22px !important; }
  [style*="padding:32px"]        { padding: 22px !important; }
  [style*="padding:28px"]        { padding: 20px !important; }
  [style*="padding:26px 28px"]   { padding: 18px 20px !important; }
  [style*="padding:24px 28px"]   { padding: 18px 20px !important; }
  [style*="padding:22px 24px"]   { padding: 16px 18px !important; }
  [style*="padding:20px 26px"]   { padding: 16px 18px !important; }

  /* ── Grids ───────────────────────────────────────────────────────────────
     Every two-up layout — hero, program rows, benefit splits, form field pairs,
     the legal pages' sidebar + body — becomes a single column. */
  [style*="grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)"],
  [style*="grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)"],
  [style*="grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)"],
  [style*="grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)"],
  [style*="grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)"],
  [style*="grid-template-columns:240px minmax(0,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Three- and four-up card rows hold their shape better two-up at tablet
     width than as one tall column; they collapse fully at 600px below. */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,auto)"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* The exhibitor logo strips inside the program cards share the repeat(3,1fr)
     shape but are a different thing: a tight 12px-gutter run of small marks,
     not a row of content cards. The gap is what tells them apart. Collapsing
     them turns six logos into six ~200px-tall boxes and a very long scroll, so
     they keep all three columns while the card around them goes full width. */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:12px"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* A grid track's default minimum is min-content, so one unbreakable child —
     a long headline, a nowrap meta row — widens the whole track past the
     viewport and the page scrolls sideways. minmax(0,…) above caps the track;
     this caps the items inside it for the same reason. */
  [style*="display:grid"] > * { min-width: 0; }

  /* Title-left / status-right header rows are flex with no wrap, and the status
     pill is white-space:nowrap — together they push past a phone column. Allowing
     the wrap costs nothing at widths where the pair still fits on one line. */
  [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; }

  /* Column gaps were tuned for side-by-side columns; as vertical gaps between
     stacked blocks they read as gaps in the page, so pull them in. */
  [style*="gap:64px"] { gap: 32px !important; }
  [style*="gap:56px"] { gap: 30px !important; }
  [style*="gap:40px"] { gap: 26px !important; }
  [style*="gap:36px"] { gap: 24px !important; }
  [style*="gap:32px"] { gap: 22px !important; }
  [style*="gap:28px"] { gap: 20px !important; }

  /* ── Display type ────────────────────────────────────────────────────────
     Fluid between a legible phone floor and the exact desktop size, so each
     heading arrives at its designed value as the viewport reaches 900px. */
  [style*="font-size:62px"] { font-size: clamp(33px, 7.4vw, 62px) !important; }
  [style*="font-size:56px"] { font-size: clamp(31px, 6.7vw, 56px) !important; }
  [style*="font-size:52px"] { font-size: clamp(30px, 6.2vw, 52px) !important; }
  [style*="font-size:48px"] { font-size: clamp(29px, 5.7vw, 48px) !important; }
  [style*="font-size:46px"] { font-size: clamp(28px, 5.5vw, 46px) !important; }
  [style*="font-size:40px"] { font-size: clamp(26px, 4.8vw, 40px) !important; }
  [style*="font-size:38px"] { font-size: clamp(25px, 4.6vw, 38px) !important; }
  [style*="font-size:36px"] { font-size: clamp(24px, 4.3vw, 36px) !important; }
  [style*="font-size:34px"] { font-size: clamp(23px, 4.1vw, 34px) !important; }
  [style*="font-size:30px"] { font-size: clamp(22px, 3.6vw, 30px) !important; }

  /* Body copy set with a ch measure would otherwise stay narrower than the
     column it now owns. */
  [style*="max-width:52ch"] { max-width: 100% !important; }

  /* ── Navigation ──────────────────────────────────────────────────────────
     The bar still fits on one row through the whole tablet range; only the
     28px design gap needs pulling in so it survives down to the stacking
     breakpoint below. */
  .nav { column-gap: 18px !important; }
}

@media (max-width: 600px) {

  :root { --m-gutter: 18px; }

  /* Card rows go single-column on a phone; the sponsor and footer link
     columns stay two-up, where short labels and wide logos still read. */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3,auto)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Logo strips go two-up rather than one — three cells in a 293px card leaves
     each mark ~90px wide, too small to recognise. */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:12px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="gap:64px"] { gap: 26px !important; }
  [style*="gap:56px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 22px !important; }

  /* Full-width tap targets for the primary actions. */
  .btn-cta, [data-reg] { width: 100%; }

  /* A CTA pair that has wrapped onto two rows otherwise shows two different
     natural widths stacked on top of each other, which reads as misalignment
     rather than hierarchy. */
  [style*="display:flex"][style*="flex-wrap:wrap"] > .btn { flex: 1 1 100%; }

  /* The hero's NEXT EVENT plate is an inline-flex pair of cells; at phone width
     the two cells crush, so stack them and let the divider run horizontally. */
  .vpe-next-plate { display: block !important; }
  /* :first-of-type, not :first-child — the four <i class="corner"> registration
     marks are the plate's first children, so :first-child matches nothing. */
  .vpe-next-plate > div:first-of-type {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(242, 242, 243, .24);
    text-align: left !important;
  }
}

/* ── Navigation stacking ──────────────────────────────────────────────────────
   Its own breakpoint, measured rather than guessed: logo + four links + the
   register button fill the row exactly at 680px, so the bar has to break just
   above that — 700px, leaving ~20px against font-loading and label changes.
   Tying it to the 900px tier instead would stack a nav with 200px to spare.

   It becomes three tiers — logo, links, CTA — rather than a hamburger, which
   would mean a toggle, a focus trap, and an aria-expanded state on all six
   pages to hide four links. Everything stays flush left to match the desktop
   lockup and the hero; a centred logo over left-aligned links reads as a
   mistake rather than a choice.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .nav { flex-wrap: wrap !important; row-gap: 14px !important; column-gap: 16px !important; }
  .nav > a:first-child { flex: 0 0 100%; margin-right: 0 !important; }
  .nav > a:first-child img { height: 34px !important; }
  /* At 14px the four links need 346px of a 339px row and "Contact" orphans
     onto a line of its own; 13px brings them back together. */
  .nav > a:not(:first-child):not(.btn) { font-size: 13px; }
  .nav .btn { flex: 1 1 100%; }
}