/* ZapGroup — Responsive Table Engine (pairs with assets/js/table-engine.js).
   Desktop (>= 768px): nothing here applies; native tables stay as styled by style.css.
   All colours come from the palette tokens, so dark / light modes follow automatically. */

@media (max-width: 767.98px) {

  /* ---------- Cards (<= 2 columns) ---------- */
  table.rt-layout-cards,
  .entry-content table.rt-layout-cards {
    display: block; width: 100%; max-width: 100%; min-width: 0; overflow: visible; border: 0;
  }
  table.rt-layout-cards > thead,
  table.rt-layout-cards tr.rt-head-row {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  table.rt-layout-cards > tbody,
  table.rt-layout-cards > tfoot { display: grid; gap: 12px; }
  table.rt-layout-cards tr {
    display: block; padding: 12px 14px; border: 1px solid var(--color-border, #d6d9de); border-radius: 12px;
    background: var(--color-bg, #fff); color: var(--color-text, #1f2937);
  }
  .entry-content table.rt-layout-cards th,
  .entry-content table.rt-layout-cards td,
  table.rt-layout-cards th,
  table.rt-layout-cards td {
    display: block; border: 0; padding: 4px 0; white-space: normal; text-align: start; background: none;
  }
  table.rt-layout-cards td:first-child,
  table.rt-layout-cards th:first-child { font-weight: 700; color: var(--color-heading, inherit); }
  table.rt-layout-cards td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: .8em; font-weight: 600; color: var(--color-text-muted, #4b5563);
  }

  /* ---------- Tabs (3 columns) ---------- */
  .rt-tabs {
    display: flex; gap: 4px; margin: 1.2rem 0 .5rem; padding: 4px; border-radius: 999px;
    background: var(--color-bg-alt, #f3f4f6); border: 1px solid var(--color-border, #d6d9de);
  }
  .rt-tab {
    flex: 1 1 0; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--color-text, #1f2937); font: inherit; font-weight: 600; line-height: 1.25;
  }
  .rt-tab[aria-selected="true"] { background: var(--color-primary, #1d4ed8); color: var(--color-text-on-primary, #fff); }
  .rt-tab:focus-visible { outline: 3px solid var(--color-heading, #111); outline-offset: 2px; }
  .entry-content table.rt-layout-tabs,
  table.rt-layout-tabs { display: table; width: 100%; max-width: 100%; min-width: 0; table-layout: fixed; margin-top: 0; }
  .entry-content .wp-block-table > table.rt-layout-tabs { width: 100%; min-width: 0; }
  .entry-content table.rt-layout-tabs th,
  .entry-content table.rt-layout-tabs td { white-space: normal; overflow-wrap: anywhere; }
  table.rt-layout-tabs th:first-child,
  table.rt-layout-tabs td:first-child { width: 42%; font-weight: 700; }
  table.rt-layout-tabs .rt-hidden { display: none; }

  /* ---------- Matrix (>= 4 columns): scroll + sticky first column ---------- */
  .rt-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  table.rt-layout-matrix .rt-sticky {
    position: sticky; inset-inline-start: 0; z-index: 1;
    background: var(--color-bg, #fff); color: var(--color-heading, inherit);
    max-width: 40vw; white-space: normal;
    transition: box-shadow .15s ease;
  }
  table.rt-layout-matrix thead .rt-sticky { background: var(--color-bg-alt, #f3f4f6); z-index: 2; }
  /* shadow on the sticky edge once content scrolls under it */
  [dir="rtl"] .rt-scrolled table.rt-layout-matrix .rt-sticky,
  [dir="rtl"] table.rt-layout-matrix.rt-scrolled .rt-sticky { box-shadow: -10px 0 10px -8px rgba(0,0,0,.35); }
  [dir="ltr"] .rt-scrolled table.rt-layout-matrix .rt-sticky,
  [dir="ltr"] table.rt-layout-matrix.rt-scrolled .rt-sticky,
  :root:not([dir]) .rt-scrolled table.rt-layout-matrix .rt-sticky { box-shadow: 10px 0 10px -8px rgba(0,0,0,.35); }
}

@media (prefers-reduced-motion: reduce) {
  table.rt-layout-matrix .rt-sticky { transition: none; }
}