/*
 * 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);
  }
}

/* ---------------------------------------------------------------------------
 * Sticky enrolment bar offsets
 * ---------------------------------------------------------------------------
 * Both derive from --a1-stickybar-h so the bar and the space reserved for it
 * cannot drift. The previous hard-coded 76px matched neither the bar nor the
 * safe-area inset.
 *
 * scroll-padding-bottom is the guideline that a sticky footer must not cover
 * the focused element: without it, tabbing to a control near the page end
 * scrolls it to the viewport floor, directly behind this bar.
 */
@media (max-width: 700px) {
  body { padding-bottom: calc(var(--a1-stickybar-h) + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--a1-stickybar-h) + env(safe-area-inset-bottom, 0px) + var(--a1-s-4)); }
}

/* Step indicator stacks so the third label cannot clip on a narrow screen. */
@media (max-width: 620px) {
  .a1-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════
   Make the `hidden` attribute actually hide
   ═══════
   `hidden` carries only `display: none` from the UA stylesheet, at the very
   bottom of the cascade, so ANY author `display` declaration outranks it.
   Two rules in this theme did exactly that and broke both filters:

     .a1-card { display: flex }                  - the testimonial chips
     .a1-table tr { display: block }  (above)    - the venue chips

   In both cases the JavaScript was correct and set `hidden` on precisely the
   right elements; the filters simply had no visible effect. That is the worst
   shape of bug to ship, because aria-pressed flipped and the live region
   announced a new count, so the controls looked like they were working.

   This lives at the end of the last screen stylesheet, and repeats the table
   selectors at (0,2,1), so it outranks the table-to-records rules above on
   both specificity and source order. Deliberately OUTSIDE any media query -
   hiding must hold at every width. */
.a1-table tr[hidden],
.woocommerce table.shop_table tr[hidden],
[data-a1-tags][hidden],
.a1-card[hidden],
tr[hidden],
li[hidden] { display: none; }