/* The Unique Batch — phone & tablet layout.
   Every rule is inside a media query, so the laptop/desktop layout is
   untouched. Targets data-* markers on the layout containers; !important
   is needed because the page styles are inline. */

/* ---------- TABLET (portrait iPad and below) ---------- */
@media (max-width: 1024px) {
  [data-shell] { padding-left: 24px !important; padding-right: 24px !important; }

  /* Content + sidebar stack, sidebar stops sticking */
  [data-side] { grid-template-columns: 1fr !important; }
  [data-aside] { position: static !important; top: auto !important; }

  /* Hero / story / CTA splits */
  [data-split] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Card grids lose a column */
  [data-cards], [data-photos] { grid-template-columns: repeat(2, 1fr) !important; }

  [data-foot] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Wide tables scroll sideways rather than crushing */
  [data-tbl] { min-width: 540px !important; }
  [data-tbl-scroll] { overflow-x: auto !important; min-width: 0 !important; -webkit-overflow-scrolling: touch; }
  [data-side] > *, [data-split] > * { min-width: 0 !important; }
}

/* ---------- PHONE ---------- */
@media (max-width: 700px) {
  /* Nothing may push the page wider than the screen */
  html, body { overflow-x: hidden !important; }
  img, select, textarea, input, table { max-width: 100% !important; }

  [data-shell] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* One column for everything laid out in columns */
  [data-cards], [data-pair], [data-foot], [data-photos-1], [data-side], [data-split] {
    grid-template-columns: 1fr !important;
  }
  /* photos stay two-up — reads better than one giant tile */
  [data-photos] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  [data-pad] { padding: 18px !important; }

  /* ---- Type: sized down so lines don't run off the edge ---- */
  h1[style] { font-size: 28px !important; line-height: 1.14 !important; }
  h2[style] { font-size: 22px !important; line-height: 1.18 !important; }
  h3[style] { font-size: 18px !important; line-height: 1.2 !important; }
  p[style], span[style], div[style], li[style], a[style], label[style] { text-wrap: pretty; }
  /* body copy and card text */
  [data-cards] p[style] { font-size: 13px !important; }
  [data-cards] h3[style] { font-size: 17px !important; }

  /* ---- Header: compact, tidy, three clean rows ---- */
  [data-navbar] {
    padding: 10px 14px !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    justify-content: center !important;
  }
  [data-logo] { width: 40px !important; height: 40px !important; }
  [data-navbar] > a:first-child { flex: 1 1 100% !important; justify-content: flex-start !important; }
  [data-navbar] > a:first-child span[style] { font-size: 14px !important; letter-spacing: .04em !important; }
  [data-navbar] > a:first-child span[style*="italic"] { font-size: 11px !important; }
  header nav {
    width: 100% !important;
    justify-content: center !important;
    row-gap: 8px !important;
    column-gap: 12px !important;
  }
  header nav > a[style] { font-size: 13px !important; }
  header nav > button { font-size: 11.5px !important; padding: 8px 12px !important; }
  /* Order now gets its own full-width row — the clearest tap target on the page */
  header nav > a:last-child {
    flex: 1 1 100% !important;
    text-align: center !important;
    font-size: 15px !important;
    padding: 13px 20px !important;
    margin-top: 2px !important;
  }

  /* ---- Touch targets ---- */
  button, select { min-height: 44px; }
  select, input[type="text"], textarea { font-size: 16px !important; } /* stops iOS zoom on focus */
  [data-cal] button { min-height: 38px !important; }
  [data-cal] { gap: 3px !important; }

  /* Tables: keep the sideways scroll contained. Grid/flex children need
     min-width:0 or the table's min-width props the whole column open. */
  [data-tbl] { min-width: 460px !important; }
  [data-tbl-scroll] { min-width: 0 !important; max-width: 100% !important; }
  [data-side] > *, [data-split] > *, [data-shell] > *, [data-pad] > * { min-width: 0 !important; }

  /* Rounded corners feel oversized on a small screen */
  [style*="border-radius: 28px"] { border-radius: 18px !important; }
}