/* Timetable rendering. Loaded by /timetable/, the homepage and /br2/.
   Containers reserve height before the JSON lands so nothing shifts. */

[data-timetable] { min-height: 18rem; }
[data-timetable="preview"] { min-height: 14rem; }

.tt-location + .tt-location { margin-top: var(--space-12); }

.tt-head { margin-bottom: var(--space-5); }

.tt-title { margin-bottom: var(--space-1); }
.tt-title a { text-decoration: none; }
.tt-title a:hover { color: var(--red-deep); text-decoration: underline; }

.tt-venue { color: var(--text-muted); font-size: var(--text-sm); }

.tt-map { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tt-map:hover { color: var(--red-deep); }

/* --- Full table ---------------------------------------------------------- */
.tt-table {
  width: 100%;
  border-collapse: collapse;
}

.tt-table th,
.tt-table td {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--hairline);
}

.tt-table thead th {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom-width: 2px;
}

.tt-table tbody th.tt-day {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  width: 11rem;
}

.tt-session {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.tt-session + .tt-session { margin-top: var(--space-3); }

.tt-time {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--ink);
  min-width: 8.5rem;
  white-space: nowrap;
}

.tt-name { color: var(--text-body); }
a.tt-name { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
a.tt-name:hover { color: var(--red-deep); text-decoration-color: currentColor; }

/* --- Awaiting times ------------------------------------------------------ */
.tt-tbc {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-tint);
  border: var(--hairline);
  border-radius: var(--radius-card);
}

.tt-tbc p { color: var(--text-body); max-width: 46ch; }

/* --- Homepage preview ---------------------------------------------------- */
.tt-preview {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 800px) {
  .tt-preview { grid-template-columns: repeat(2, 1fr); }
}

.tt-preview-item {
  padding: var(--space-6);
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--radius-card);
}

.tt-preview-item .tt-venue { margin-bottom: var(--space-4); }

.tt-preview-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }

.tt-preview-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--hairline);
}

.tt-preview-list li:last-child { border-bottom: 0; }

.tt-preview-list .tt-day { font-weight: 600; color: var(--ink); }
.tt-preview-list .tt-times { color: var(--text-body); text-align: right; }

.tt-preview-tbc {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
}

.btn-sm {
  min-height: 42px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* --- Price line above the table (must be visible without scrolling) ------ */
.tt-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-10);
  background: var(--surface-tint);
  border-radius: var(--radius-card);
}

.tt-price strong {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tt-price span { color: var(--text-muted); }

/* Phones: let the day column shrink so session names keep to one line. */
@media (max-width: 599px) {
  .tt-table th,
  .tt-table td { padding: var(--space-3) var(--space-2); }
  .tt-table tbody th.tt-day { width: auto; padding-right: var(--space-4); }
  .tt-session { display: block; }
  .tt-session .tt-name { display: block; }
  .tt-session .pill { margin-top: var(--space-1); }
}

/* --- Notes under a table ------------------------------------------------- */
.tt-footnote {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 62ch;
}

.tt-booking {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 3px solid var(--red);
  background: var(--surface-tint);
  color: var(--ink);
  font-weight: 600;
  max-width: 62ch;
}

/* The intro paragraph ran straight into the price strip with no gap. */
.lead + .tt-price { margin-top: var(--space-8); }