/* ============================================================
   SCHEDULE — real HTML day-tabs + list (never an image)
   Works with no JS too: all panels render as normal stacked
   sections when JS hasn't run yet / has failed (see schedule.ejs
   noscript rule + schedule-tabs.js progressive enhancement).
   ============================================================ */

/* Poster-style info panel — the dense running order sits in a
   contained blue block within the yellow/cream page, same as the
   key visual's lineup box, instead of the whole page turning blue. */
.schedule-panel {
  background: var(--color-sky-deep);
  color: #fff;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}
@media (min-width: 640px) {
  .schedule-panel { padding: var(--space-lg); }
}
/* Specificity note: `.section.on-light .muted` in section.css is
   3 class-selectors deep and otherwise beats this 2-deep rule outright
   regardless of stylesheet order (specificity is compared before
   source order) — doubling `.schedule-panel` here is the standard way
   to out-specificity it without resorting to !important. */
.schedule-panel.schedule-panel .muted { color: var(--color-muted-on-sky); }

.day-tabs {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin: var(--space-lg) 0 var(--space-md);
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  background: var(--color-sky-deep);
  padding-block: .5rem;
}

.day-tab {
  min-height: 48px;
  border: 1px solid rgba(241,231,210,.4);
  padding: .7rem 1.3rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .25rem;
  color: #fff;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.day-tab span { font-size: .66rem; opacity: .65; }
.day-tab.is-active,
.day-tab:hover {
  background: var(--color-flame);
  border-color: var(--color-flame);
  color: var(--color-ink);
}

.day-panel { display: none; }
.day-panel.is-active { display: block; animation: day-fade-in .4s ease; }

/* No-JS fallback: show every day as a stacked, labelled section */
.no-js .day-tabs { display: none; }
.no-js .day-panel { display: block !important; margin-bottom: var(--space-xl); }
.no-js .day-panel::before {
  content: attr(data-day-label) " — " attr(data-day-date);
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--color-muted-on-sky);
  margin-bottom: var(--space-sm);
}

@keyframes day-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Groups items under the physical venue they happen at (see program.ejs's
   lastVenue tracking) - keeps simultaneous rooms like Live House/Coma in their
   own block instead of interleaved by clock time. */
.venue-heading {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--color-flame);
  border-bottom: 1px solid rgba(241,231,210,.3);
  padding-bottom: .4rem;
  margin: var(--space-lg) 0 var(--space-xs);
}
.venue-heading:first-child { margin-top: 0; }

.day-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(241,231,210,.12);
}
.day-row:last-child { border-bottom: none; }
@media (min-width: 640px) {
  .day-row { grid-template-columns: 110px 1fr; gap: var(--space-md); }
}

.daypart {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--color-muted-on-sky);
}
.day-row h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .01em;
  margin-bottom: .3rem;
}
.day-row .stage-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border: 1px solid var(--color-paper);
  color: #fff;
  margin-bottom: .35rem;
}

.schedule-note { margin-top: var(--space-lg); font-family: var(--font-mono); font-size: .78rem; }