/* ==========================================================================
   Tables — ceníky
   ========================================================================== */

.table-scroll { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
table.data th,
table.data td {
  padding: .875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
/* Uppercase belongs on the column headings only. Row headers hold real
   sentences, village names and pricing notes, and a paragraph in capitals
   is markedly harder to read, which matters for this audience. */
table.data thead th {
  background: var(--cream-deep);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}
table.data tbody th { background: transparent; }
/* Do NOT put overflow-wrap: anywhere on these cells. It does fix a stray
   URL overflowing its column, but it also lets ordinary words break at any
   character, and on a phone that collapses the whole table into one letter
   per line rather than letting .table-scroll scroll it. Long values are
   shortened where they occur (see the short_url filter) instead. */
table.data td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* The unsubsidised price, first row of the delivery table on /rozvoz-obedu/.
   Set apart because it is the rule the rest of the rows are exceptions to,
   not another village. The disclosure it sits inside is in forms.css. */
.data__lead > th,
.data__lead > td { border-bottom: 2px solid var(--line); }
.data__lead > th { font-weight: 700; }

/* A wide table on a phone.

   Four columns cannot be read across a 375px screen: squeezed they break
   words mid-letter, and scrolled sideways the reader has to remember the
   left-hand column while looking at the right. Below this width each row
   becomes a small card instead: the place name as its heading, the figures
   labelled underneath. Opt in with .table-cards; tables that are genuinely
   a grid of numbers still scroll. */
@media (max-width: 34em) {
  .table-cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards th,
  .table-cards td { display: block; width: auto; }

  .table-cards tr {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .table-cards tr:last-child { border-bottom: 0; }

  .table-cards th[scope="row"] {
    padding: 0 0 .5rem;
    border: 0;
    /* !important because the templates set font-weight:400 inline, which is
       right in a grid; as a card heading the place name carries the row. */
    font-weight: 700 !important;
  }
  /* …but not the note underneath it, which is still small print. */
  .table-cards th[scope="row"] .card__meta { font-weight: 400; }

  .table-cards td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .125rem 0;
    border: 0;
    text-align: right;
  }
  /* The column heading, repeated per cell. Without it the figures are
     three unlabelled numbers. */
  .table-cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 400;
    text-align: left;
  }
}