/* Responsive content tables for the Hell's Kitchen static mirror.
   Matches the sibling Astro sites' treatment: comparison tables get a
   data-label on every body cell (added at crawl time by transform.mjs), and on
   phones each row becomes a card with the column header printed beside the
   value — no horizontal scrolling. Wide tables that AREN'T labelled keep a
   plain horizontal-scroll fallback. Desktop table rendering is untouched. */

/* wrapper gives any wide table a scroll box instead of overflowing the page */
.hk-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0; }
.hk-tw > table { width: 100%; border-collapse: collapse; }

/* --- phones: labelled tables become stacked cards --- */
@media (max-width: 768px) {
  .hk-tw:has(td[data-label]) { overflow-x: visible; }
  table:has(td[data-label]) { display: block; overflow: visible; border: 0; width: 100%; }
  table:has(td[data-label]) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  table:has(td[data-label]) tbody { display: block; }
  table:has(td[data-label]) tr {
    display: block; border: 1px solid #e4ded4; border-radius: 10px;
    padding: .85rem 1.05rem; background: #fff; margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(40,25,15,.05);
  }
  table:has(td[data-label]) td {
    display: grid; grid-template-columns: 7.5rem 1fr; gap: .85rem;
    border: 0; border-bottom: 1px solid #efe8dd; padding: .5rem 0;
    min-width: 0; text-align: left; word-break: break-word;
  }
  table:has(td[data-label]) td:last-child { border-bottom: 0; padding-bottom: 0; }
  table:has(td[data-label]) td::before {
    content: attr(data-label);
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #9a8b7b; padding-top: .12rem;
  }
  /* first cell is the card's title — full width, bold, no label */
  table:has(td[data-label]) td:first-child {
    grid-template-columns: 1fr; font-weight: 600; font-size: 1.02rem;
    border-bottom: 1px solid #e4ded4; margin-bottom: .2rem; padding-bottom: .55rem;
  }
  table:has(td[data-label]) td:first-child::before { display: none; }
}