/* Grouped shows: one run, its dates pickable.
 *
 * Its own file because magician.ejs carries a bespoke head and never loaded
 * app.css, so every magician page rendered this block as bare underlined text
 * — "Wed22 Thu23 Fri24" — while venue and city pages showed proper chips. Both
 * heads link this now, so the component has one definition.
 *
 * Only design tokens from app.css are used, and magician.ejs declares the same
 * ones, so this file is portable between the two.
 */
/* A header per venue, its runs grouped beneath it, so a fan sees at a glance
 * which shows are where instead of one flat chronological column. */
.venue-group { margin-top:2.2rem; }
.venue-group:first-child { margin-top:0; }
.venue-group .vg-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem;
  padding-bottom:.6rem; border-bottom:2px solid var(--line); }
.venue-group .vg-name { font-family:var(--font-display); font-size:1.4rem; line-height:1.15; margin:0; }
.venue-group .vg-name a { text-decoration:none; color:inherit; }
.venue-group .vg-name a:hover { text-decoration:underline; text-underline-offset:3px; }
.venue-group .vg-place { color:var(--muted); font-size:.9rem; }
.venue-group .vg-status { margin-left:auto; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); }
.venue-group .vg-status.is-current { color:var(--accent-ink); }
/* Runs sit tighter under their shared header than free-standing rows do. */
.venue-group .showgroup:last-child { border-bottom:none; }

.showgroup { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:1.6rem;
  padding:1.5rem .4rem; border-bottom:1px solid var(--line-soft); }
.showgroup .sg-when { text-align:center; min-width:96px; }
.showgroup .sg-when .mon { display:block; text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--accent-ink); }
.showgroup .sg-when .day { display:block; font-family:var(--font-display); font-size:2.3rem; line-height:1; }
.showgroup .sg-when .dow { display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.2rem; }
.showgroup .sg-run { display:block; font-family:var(--font-display); font-size:1.15rem; line-height:1.25; }
.showgroup .sg-count { display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }
.showgroup .sg-info h3 { font-size:1.35rem; margin:0; }
.showgroup .sg-info h3 a { text-decoration:none; }
.showgroup .sg-info h3 a:hover { text-decoration:underline; text-underline-offset:3px; }
.showgroup .sg-venue { color:var(--muted); font-size:.9rem; margin-top:.25rem; }
.showgroup .sg-venue .city { color:var(--accent-ink); }
.showgroup .sg-venue a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.showgroup .byline { font-size:.85rem; color:var(--muted); margin-top:.3rem; }
.showgroup .sg-note { font-size:.82rem; color:var(--muted); margin:.6rem 0 0; font-style:italic; }

/* The dates are the reason anyone is on this page, so they get room to read as
 * a row of tickets rather than a run-on line. */
.showgroup .sg-dates { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.sg-date { display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:58px; gap:.15rem;
  padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink-soft); background:var(--ground);
  transition:border-color .2s ease, background .2s ease, transform .2s ease; }
a.sg-date:hover { border-color:var(--accent-ink); background:color-mix(in srgb, var(--gold) 10%, transparent);
  transform:translateY(-2px); }
.sg-date .d-dow { font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sg-date .d-day { font-family:var(--font-display); font-size:1.25rem; line-height:1; }
.sg-date .d-time { font-size:.58rem; color:var(--muted); }
/* A date with nowhere to buy is still information, but it must not look clickable. */
.sg-date.is-plain { opacity:.6; border-style:dashed; }
.sg-more { align-self:center; font-size:.8rem; color:var(--muted); }
.showgroup .sg-act { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }

/* One or two runs is not a list. Left-aligned against a full-width rule, a
 * single run reads as a table that lost its other rows; centred, it reads as
 * the thing you came for. Three or more genuinely are a list and stay left. */
.shows-few { max-width:47rem; margin-inline:auto; }
.shows-few .showgroup { grid-template-columns:1fr; justify-items:center; text-align:center;
  gap:.9rem; border-bottom:none; }
.shows-few .showgroup .sg-when { min-width:0; }
.shows-few .showgroup .sg-dates { justify-content:center; }
.shows-few .showgroup .sg-act { align-items:center; }
.shows-few .showgroup + .showgroup { border-top:1px solid var(--line-soft); padding-top:2.2rem; }

@media (max-width:640px){
  .showgroup { grid-template-columns:1fr; gap:.8rem; }
  .showgroup .sg-when { text-align:left; }
  .showgroup .sg-act { align-items:flex-start; }
}