/* Festival pages: the archive at /festivals/ and one page per festival at
   /festivals/<edition key>, both written by tools/generate-festival-pages.cjs.
   Tokens, fonts and the reset come from css/app.css, and the page frame,
   panels, buttons and chips from css/ui.css. This file adds only the edition in
   focus (with its "tell me when set times are out" button), the ticket sale
   dates, the list of editions and the year chips. Like every page on ui.css
   they use the whole width of the screen; only running text keeps a readable
   line length. */

/* ---------- the way back, above the title ---------- */
.fest-back { display: inline-block; padding: 6px 0; margin: -6px 0 2px; color: var(--muted); text-decoration: none; }
.fest-back:hover { color: var(--ink); }

/* ---------- the edition in focus, with the ticket sale beside it ---------- */
.fest-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1100px) {
  .fest-top.has-sales { grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr); }
}
.fest-next {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  padding: 14px; border-radius: 14px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
}
@media (min-width: 560px) {
  .fest-next.has-image { grid-template-columns: clamp(200px, 22vw, 360px) minmax(0, 1fr); gap: 18px; align-items: center; }
}
/* Event artwork is whatever shape the organiser made it, from wide key art to a
   portrait poster, so it keeps its own ratio instead of losing its title. */
.fest-next img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 360px;
  margin-inline: auto; border-radius: 10px;
}
.fest-kicker {
  display: block; margin: 0 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.fest-kicker[data-state="planner"], .fest-kicker[data-state="announced"] { color: var(--accent); }
.fest-next h2 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase;
}
.fest-when { margin: 0; font-size: 14px; line-height: 1.45; }
.fest-when b { display: block; font-size: 15px; font-weight: 600; }
.fest-when span { display: block; color: var(--muted); }
.fest-next .actions { margin-top: 14px; }
.fest-note { margin: 12px 0 0; max-width: 60ch; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- "Tell me when set times are out" (js/festival-alerts.js) ---------- */
.fest-alert { margin-top: 14px; }
.fest-alert .button[aria-pressed="true"]::before {
  content: ""; width: 10px; height: 5px; margin-top: -3px;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.fest-alert .button[aria-busy="true"] { opacity: .7; }
.fest-alert-note { margin: 8px 0 0; max-width: 60ch; color: var(--muted); font-size: 13px; line-height: 1.5; }
.fest-alert-note:empty { margin: 0; }

/* ---------- ticket sale dates (states set by js/festival-sales.js) ---------- */
.fest-salebox { margin: 0; }
.fest-salebox h2 {
  margin: 0; padding: 14px 14px 10px;
  font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase;
}
.fest-sales { margin: 0; padding: 0; list-style: none; }
.fest-sale {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-top: 1px solid var(--line-strong);
}
.fest-date { font-family: var(--display); font-weight: 800; line-height: 1; text-align: center; }
.fest-date span { display: block; font-size: 22px; }
.fest-date small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fest-sale-body b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fest-sale-body small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.fest-when-tag { color: var(--accent); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.fest-when-tag:empty { display: none; }
.fest-sale[data-sale-state="done"] .fest-date,
.fest-sale[data-sale-state="done"] b { color: var(--muted); }
.fest-sale[data-sale-state="done"] b { text-decoration: line-through; text-decoration-thickness: 1px; }
.fest-sale[data-sale-state="next"] { box-shadow: inset 3px 0 0 var(--accent); }
.fest-sale[data-sale-state="next"] .fest-date span { color: var(--accent); }
.fest-sales-note {
  margin: 0; padding: 11px 14px 13px; border-top: 1px solid var(--line-strong);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}

/* ---------- every edition, newest first ---------- */
/* A phone shows them as one list; a wider screen as a grid of rows that fills
   the width. */
.fest-editions { margin: 0; padding: 0; list-style: none; }
.fest-editions li + li { border-top: 1px solid var(--line-strong); }
@media (min-width: 700px) {
  .fest-editions {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px;
    overflow: visible; border-radius: 0; background: none; box-shadow: none;
  }
  .fest-editions li { border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; }
  .fest-editions li + li { border-top: 0; }
}
/* On a phone the label ("Upcoming", "Not published yet") goes under the date. */
.fest-edition {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 14px; column-gap: 12px; align-items: center;
  grid-template-areas: "year body chev" "year value chev";
  height: 100%; padding: 11px 14px; color: inherit; text-decoration: none;
}
a.fest-edition:hover { background: var(--chip); }
a.fest-edition:focus-visible { outline-offset: -2px; }
.fest-year { grid-area: year; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; }
.fest-edition-body { grid-area: body; min-width: 0; }
.fest-edition-body b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fest-edition-body small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.fest-value { grid-area: value; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
/* An upcoming edition with a planner stands out; one without is not a link. */
a.fest-edition[data-state="upcoming"] .fest-value,
a.fest-edition[data-state="announced"] .fest-value { color: var(--accent); font-weight: 600; }
.fest-chev {
  grid-area: chev; width: 14px; height: 14px; opacity: .45;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 520px) and (max-width: 699px) {
  .fest-edition { grid-template-columns: 56px minmax(0, 1fr) auto 14px; grid-template-areas: "year body value chev"; }
  .fest-value { margin-top: 0; text-align: right; }
}

/* ---------- the archive: one card per festival with its years ---------- */
.fest-index { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); align-items: start; }
/* The years sit beside the name when they fit, and wrap below it when not. */
.fest-family { flex-flow: row wrap; align-items: center; gap: 10px 12px; scroll-margin-top: 90px; }
.fest-family-head { flex: 1 1 10rem; min-width: 0; }
.fest-family-wide { grid-column: 1 / -1; }
.fest-family-wide .fest-chips { flex-basis: 100%; }
.fest-family h2 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.05; text-transform: uppercase;
}
.fest-family h2 a { color: inherit; text-decoration: none; }
.fest-family h2 a:hover { color: var(--accent); }
.fest-family .fest-family-meta { margin-top: 3px; }
.fest-chips { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.fest-chip { font-variant-numeric: tabular-nums; }
a.fest-chip[data-state="upcoming"], a.fest-chip[data-state="announced"] { color: var(--accent); border-color: var(--accent); }
/* A year without set times yet: shown, but not a link. */
span.fest-chip { color: var(--muted); border-style: dashed; }
span.fest-chip:hover { background: none; }
.fest-foot { margin: 22px 0 0; max-width: 70ch; color: var(--muted); font-size: 13px; line-height: 1.5; }