/*
 * ACAD1 Review Center — responsive layer
 * child-theme-guide.md §6, desktop-first: every rule below overrides the
 * unqueried desktop CSS in 20-layout.css / 30-components.css inside a
 * max-width media query. Do not add min-width queries here.
 *
 * §6 breakpoints: 1080 / 920 / 900 / 820 / 767 / 700 / 620, plus 1024 for
 * the footer 4→2 collapse (§4 prose gives that number explicitly; §6's
 * breakpoint table has no 1024 row of its own).
 * §12 requires zero horizontal scroll at 320/375/414/768/1024/1280/1440/1920
 * and every schedule/cart table reading as labelled records at 375px.
 *
 * ── Scope note (Woo) ─────────────────────────────────────────────────
 * Task 3 (this file's original author) deliberately left the
 * `.woocommerce table.shop_table` half of the ≤767px record pattern
 * (guide §8's "Responsive Woo" block) unwritten, noting it belonged to
 * Task 6's WooCommerce layer. Task 6 added that block below, next to the
 * `.a1-table` block it mirrors — see "≤767px — Woo classic cart/order
 * tables" further down. It targets classic shop_table markup only; the
 * block cart/checkout (45-woocommerce-blocks.css) has no equivalent table
 * markup to make responsive.
 *
 * ── Base classes this file overrides ─────────────────────────────────
 * §6 describes breakpoint behaviour for several chrome components
 * (header/nav collapse, the sticky bottom bar, footer column collapse,
 * sticky rails going static, stat rows staying 3-up, horizontal chip/tab
 * scrollers, span-2 release, right-align flush). Every one of those
 * classes now has its real desktop base in 20-layout.css (`.a1-stats`,
 * `.a1-span-2`, `.a1-text-right`) or 30-components.css (`.a1-header*`,
 * `.a1-nav-toggle`, `.a1-stickybar`, `.a1-cta-band`, `.a1-footer*`,
 * `.a1-chips`/`.a1-tabs-scroll`, `.a1-sticky`, `.a1-marquee*`). This file
 * contains ONLY media-query overrides of those bases — no unqueried rules.
 */

/* ══════════════════════════════════════════════════════════════════
   ≤1080px — §6 row 1
   4-up → 2-up, 5-up → 3-up, 6-up → 3-up.
   All side rails (--rail, --filter, --toc) collapse to one column.
   Every position: sticky becomes static.

   The 6-up row was previously missing here, with a comment claiming
   `.a1-grid--6` did not exist: Task 4 added it to 20-layout.css and this file
   was never updated. Task 7 needs it — woocommerce/loop/loop-start.php maps a
   `columns-6` shop loop onto `.a1-grid--6`. Like `.a1-grid--5`, it is NOT
   stepped down again at ≤820px (that block only moves 3-up → 2-up); it holds
   3-up until the ≤620px single-column collapse, which now lists it.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .a1-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a1-grid--5,
  .a1-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .a1-split--rail,
  .a1-split--filter,
  .a1-split--toc { grid-template-columns: minmax(0, 1fr); }

  .a1-sticky { position: static; }
}

/* ══════════════════════════════════════════════════════════════════
   ≤1024px — §4 prose: "Footer: 4 columns → 2 at 1024px → 1 at 620px."
   Its own block (not folded into ≤1080) because the guide gives this
   breakpoint as an explicit number and §6's table has no 1024 row to
   fold it into. The →1 collapse stays at ≤620px below.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .a1-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════
   ≤920px — §6 row 2
   Primary nav → hamburger. Header grid → minmax(0, 1fr) auto auto (the
   first track now holds the logo and must not be a bare `1fr` — a
   replaced element's `min-width: auto` would otherwise floor it; §4).
   The opened panel gets elevation + --a1-z-mobile-nav so it stacks above
   page content (§4: elevation is reserved for the mobile nav panel, the
   sticky bar and dialogs) — anchored to `.a1-header { position: relative }`
   in 30-components.css.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  .a1-header { grid-template-columns: minmax(0, 1fr) auto auto; }

  .a1-nav-toggle > summary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--a1-target-min); min-width: var(--a1-target-min); cursor: pointer;
  }
  .a1-nav-toggle .a1-header__nav { display: none; }
  .a1-nav-toggle[open] .a1-header__nav {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--a1-contrast);
    box-shadow: var(--a1-sh-lg);
    z-index: var(--a1-z-mobile-nav);
  }
}

/* ══════════════════════════════════════════════════════════════════
   ≤900px — §6 row 3
   Hero split stacks. 1fr auto CTA bands stack.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .a1-split { grid-template-columns: minmax(0, 1fr); }
  .a1-cta-band { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   ≤820px — §6 row 4
   Section padding → 44px. Gaps compress (56→32, 40→26 land on existing
   tokens; 48→30 has no matching selector — see report). Card padding
   nearest-token compressed. Images shrink with their column
   (width: 100%), capped at 420px — not `vw`-sized, which ignored the
   container and overflowed 2-up columns between 620–820px (review-fix
   pass; see task-3-report.md). 3-up → 2-up.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .a1-section { padding-block: var(--a1-section-y-sm); }

  .a1-split,
  .a1-split--toc { gap: var(--a1-s-7); }        /* 56 (--a1-s-9) → 32 (--a1-s-7) */
  .a1-split--rail,
  .a1-split--filter { gap: var(--a1-s-6); }     /* 40 (--a1-s-8) → 26 (--a1-s-6) */

  .a1-card { padding: var(--a1-s-5); }          /* nearest-token compression, see report */

  .a1-split img,
  .a1-card img { width: 100%; max-width: var(--a1-img-cap); }

  .a1-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════
   ≤767px — §6 row 5 + guide §6 "Tables → records" code block.
   Reproduced verbatim, then extended for the dual data-label/data-title
   requirement (§6 + §8): our tables emit data-label; Woo's cart/order
   tables (task 6, `.woocommerce table.shop_table`) emit data-title. If
   a future template feeds a data-title attribute into an `.a1-table`
   cell too (guide §9: "cart/cart.php: .a1-table classes + data-title
   verification"), the higher-specificity rule below wins.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .a1-table, .a1-table tbody, .a1-table tr { display: block; width: 100%; }
  .a1-table thead { display: none; }
  .a1-table tr {
    border-bottom: 2px solid var(--a1-border);
    padding-block: var(--a1-s-3);
    background: transparent !important;
  }
  .a1-table tr:last-child { border-bottom: 0; }
  .a1-table td {
    display: flex !important; justify-content: space-between; align-items: baseline; gap: var(--a1-s-4);
    border: 0 !important; padding: 7px var(--a1-s-4) !important; text-align: right !important;
  }
  .a1-table td::before {
    content: attr(data-label);
    flex: none; text-align: left;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--a1-secondary);
  }
  .a1-table td:empty { display: none !important; }

  /* dual data-label / data-title support, scoped to .a1-table only */
  .a1-table td[data-title]::before { content: attr(data-title); }
}

/* ══════════════════════════════════════════════════════════════════
   ≤767px — Woo classic cart/order tables (Task 6; guide §8 "Responsive
   Woo", reproduced verbatim). WooCommerce already emits `data-title` on
   `table.shop_table` cells (its own attribute, not our `data-label`), so
   the record pattern applies with one extra selector. Scoped to
   `.woocommerce table.shop_table` only — does not touch `.a1-table`.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr { display: block; width: 100%; }
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table tr { border-bottom: 2px solid var(--a1-border); padding-block: var(--a1-s-3); }
  .woocommerce table.shop_table td {
    display: flex !important; justify-content: space-between; align-items: baseline; gap: var(--a1-s-4);
    border: 0 !important; padding: 7px var(--a1-s-4) !important; text-align: right !important;
  }
  .woocommerce table.shop_table td::before {
    content: attr(data-title); flex: none; text-align: left;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a1-secondary);
  }
  .woocommerce table.shop_table td.product-remove::before,
  .woocommerce table.shop_table td.actions::before { content: none; }
  .woocommerce table.shop_table td.actions { flex-direction: column; }
  .woocommerce-cart-form .actions .coupon { display: flex; gap: var(--a1-s-2); width: 100%; }
  .woocommerce #coupon_code { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   ≤700px — §6 row 6
   Utility-bar links hide. Header CTA hides. Sticky bottom bar appears.
   body gains 76px bottom padding so the bar can't cover the footer.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body { padding-bottom: 76px; }

  .a1-header__utility { display: none; }
  .a1-header__cta { display: none; }

  .a1-stickybar { display: flex; }
  /* Hidden on cart/checkout per §4 — page-build task adds body classes
     `.woocommerce-cart`/`.woocommerce-checkout`, both emitted by WP core. */
  .woocommerce-cart .a1-stickybar,
  .woocommerce-checkout .a1-stickybar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ≤620px — §6 row 7
   Everything → single column. grid-column: span 2 released.
   Right-aligned text flushes left. Footer legal row stacks.
   Stat rows are explicitly excluded — they stay 3-up at every width.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .a1-grid--2,
  .a1-grid--3,
  .a1-grid--4,
  .a1-grid--5,
  .a1-grid--6 { grid-template-columns: minmax(0, 1fr); }

  .a1-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* defensive re-assertion, see file header */

  .a1-span-2 { grid-column: auto; }
  .a1-text-right { text-align: left; }

  .a1-footer { grid-template-columns: minmax(0, 1fr); }
  .a1-footer__legal { flex-direction: column; align-items: flex-start; gap: var(--a1-s-2); }
}

/* ══════════════════════════════════════════════════════════════════
   §7 — prefers-reduced-motion
   Stop the marquee. No component built so far carries a transition over
   200ms (.a1-btn's is 150ms), so no blanket transition kill is added —
   that would fight the 150ms focus/hover micro-interactions §7 asks us
   to keep.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .a1-marquee,
  .a1-marquee * { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Header breakpoint contract
 * ---------------------------------------------------------------------------
 * Pairs with the base rules in 30-components.css. The desktop nav is a
 * direct child of .a1-header, so it is hidden with a child selector; the
 * hamburger panel lives inside <details class="a1-nav-toggle">.
 */
@media (max-width: 920px) {
  .a1-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .a1-header > .a1-header__nav { display: none; }
  .a1-nav-toggle { display: block; position: static; }
  .a1-nav-toggle > summary { display: inline-flex; cursor: pointer; }
  .a1-nav-toggle[open] .a1-header__nav-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: var(--a1-z-mobile-nav); box-shadow: var(--a1-sh-lg);
  }
}