/* sellfood-table-stack.css
   Shared mobile table treatments (DISC-HSCROLL-SWEEP-1, A2, 2026-09-25).

   .sf-stack  (on <table>)  At <=640px each row becomes a card: the first cell
                            is the card title, every other cell shows its
                            column name above the value (from data-label,
                            written into the HTML at build time — no JS).
   .sf-stack-plain          Modifier: no title cell; every cell gets a label.
   .sf-tight  (on <table>)  At <=640px, tighter horizontal cell padding for
                            tables that miss fitting a phone by a few px.
   .sf-scroll (on wrapper)  Contained horizontal scroll at every width.

   Eleventy: move these rules into the shared template stylesheet and emit
   data-label from the header row when the state-guide families migrate. */

.sf-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {

  /* ── stacked cards ─────────────────────────────── */
  table.sf-stack,
  table.sf-stack tbody,
  table.sf-stack tr,
  table.sf-stack td,
  table.sf-stack tbody th {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  table.sf-stack { border-collapse: separate !important; }

  /* Header row stays in the DOM for screen readers, off-screen visually. */
  table.sf-stack thead {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  table.sf-stack tbody tr {
    padding: 0.85rem 0.9rem !important;
    border: none !important;
    border-bottom: 1px solid var(--border, #E8DDD0) !important;
    background: transparent;
  }
  table.sf-stack tbody tr:last-child { border-bottom: none !important; }

  table.sf-stack td,
  table.sf-stack tbody th {
    padding: 0.2rem 0 !important;
    border: none !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    background: transparent !important;
  }
  table.sf-stack td:empty { display: none !important; }

  table.sf-stack td[data-label]:not([data-label=""])::before,
  table.sf-stack tbody th[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light, #9A7B65);
  }

  /* First cell = card title (unless .sf-stack-plain). */
  table.sf-stack:not(.sf-stack-plain) tbody tr > :first-child {
    padding-bottom: 0.35rem !important;
    font-weight: 700;
    color: var(--brown, #3B2314);
  }
  table.sf-stack:not(.sf-stack-plain) tbody tr > :first-child::before {
    display: none !important;
  }

  /* ── near-fit tables ───────────────────────────── */
  table.sf-tight th,
  table.sf-tight td {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
  table.sf-tight th:first-child,
  table.sf-tight td:first-child { padding-left: 0.6rem !important; }
  table.sf-tight th:last-child,
  table.sf-tight td:last-child { padding-right: 0.6rem !important; }
}