/* Rail.fm page layout. Every value references theme.css variables. */

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-20);
  display: grid;
  gap: var(--space-10);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}
.site-header nav { display: flex; gap: var(--space-4); }
.site-header nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}
.site-header nav a:hover { color: var(--text-primary); }
.wordmark .rail { font-size: var(--text-4xl); }
.wordmark .fm { font-size: var(--text-base); }

.site-footer {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--text-tertiary); }

.hero { display: grid; gap: var(--space-4); padding: var(--space-12) 0; }
.hero .headline { font-size: clamp(var(--text-5xl), 10vw, var(--text-8xl)); }
.hero .pitch {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  max-width: 65ch;
  margin: 0;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.page-title { font-size: clamp(var(--text-4xl), 8vw, var(--text-7xl)); overflow-wrap: anywhere; }
.page-sub { color: var(--text-secondary); margin: 0; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  align-items: center;
}

.event-list { display: grid; gap: var(--space-4); }
.event-card { padding: var(--space-5); display: grid; gap: var(--space-2); }
.event-card .artist {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  overflow-wrap: anywhere;
}
.event-card a.artist-link { text-decoration: none; }
.event-card .support { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }

.day-group { display: grid; gap: var(--space-3); }
.day-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--space-2);
}

.genre-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.genre-row .badge { text-decoration: none; }
.genre-row .badge.active {
  color: var(--text-accent);
  border-color: var(--text-accent);
}

.badge-warning { color: var(--feedback-warning); border-color: var(--feedback-warning); }
.badge-error { color: var(--feedback-error); border-color: var(--feedback-error); }

.detail-grid { display: grid; gap: var(--space-6); }
.ticket-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.prose { max-width: 65ch; }
.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
.prose a { overflow-wrap: anywhere; }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-6); color: var(--text-secondary); }
.stat-row .num { color: var(--text-primary); font-weight: 700; }

.empty-note { color: var(--text-secondary); }

/* --- accounts, feed, feedback (B5+B6) --- */

.site-header nav { align-items: baseline; flex-wrap: wrap; }
.nav-cta { color: var(--text-accent) !important; font-weight: 600; }
.inline-form { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: var(--text-sm);
  font-weight: 500; min-height: 24px;
}
.linklike:hover { color: var(--text-primary); }

.messages { display: grid; gap: var(--space-2); }
.message {
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-primary);
}
.message.warning { border-color: var(--feedback-warning); }
.message.success { border-color: var(--feedback-success); }

.auth-panel { max-width: 480px; display: grid; gap: var(--space-6); }
.stack-form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.field label, .field legend { font-weight: 500; font-size: var(--text-sm); }
.field input, .field select {
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3); font-size: var(--text-base);
  min-height: 44px; width: 100%;
}
.field input:focus-visible, .field select:focus-visible,
.chip:focus-visible, .linklike:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.field.has-error input { border-color: var(--feedback-error); }

/* Radio groups (Django RadioSelect renders ul > li > label > input) */
.field ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.field ul label {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: 400; font-size: var(--text-base); min-height: 44px; cursor: pointer;
}
.field input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; flex: none;
  accent-color: var(--action-primary); margin: 0;
}
fieldset.field { border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); }
fieldset.field legend { padding: 0 var(--space-2); }
.help { color: var(--text-tertiary); font-size: var(--text-sm); margin: 0; }
.form-error { color: var(--feedback-error); font-size: var(--text-sm); margin: 0; }
.fineprint { color: var(--text-tertiary); font-size: var(--text-sm); }

.search-row { display: flex; gap: var(--space-2); max-width: 480px; }
.search-row input {
  flex: 1; background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-3); min-height: 44px;
}
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-full, 999px);
  padding: var(--space-2) var(--space-4); min-height: 44px;
  font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.chip:hover { border-color: var(--text-accent); }
.chip-on { border-color: var(--text-accent); color: var(--text-accent); }

.feed-section { display: grid; gap: var(--space-4); }
.section-title { font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); }
.match-score { color: var(--text-accent); font-weight: 700; font-size: var(--text-lg); }
.reasons {
  margin: 0; padding-left: var(--space-5);
  color: var(--text-secondary); font-size: var(--text-sm);
}
.report-card { padding: var(--space-5); display: grid; gap: var(--space-2); }
.howto { color: var(--text-secondary); }
.howto summary { cursor: pointer; font-weight: 500; color: var(--text-primary); }
.source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- Responsive card grid: 1 / 3 / 5 per row (Henry, 2026-08-23) -------- */
.wrap { max-width: 1408px; }
.event-list {
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .event-list { grid-template-columns: repeat(3, 1fr); }
  .event-list .artist { font-size: var(--text-3xl); }
}
@media (min-width: 1280px) {
  .event-list { grid-template-columns: repeat(5, 1fr); }
  .event-list .artist { font-size: var(--text-2xl); }
  .event-list .card { padding: var(--space-4); }
}
.event-list .ticket-actions { flex-wrap: wrap; gap: var(--space-2); }

/* Event page prose sections (description / good-to-know) */
.prose {
  max-width: 65ch;
  color: var(--text-primary);
  white-space: pre-line;
}
.prose-note { color: var(--text-secondary); font-size: var(--text-sm); }
.section-label {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Festivals ---------------------------------------------------------- */
.festival-banner {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-accent);
  font-weight: 600;
  text-decoration: none;
}
.festival-banner:hover { border-color: var(--action-primary); }
.badge-festival { color: var(--text-accent); border-color: var(--text-accent); }
.fest-summary {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}
.fest-throwback { color: var(--feedback-warning); font-weight: 600; }
.lineup-day { display: grid; gap: var(--space-3); }
.lineup-artists { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.artist-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  display: inline-flex; gap: var(--space-2); align-items: baseline;
}
.artist-chip.current { border-color: var(--text-accent); }
.artist-chip.current .chip-note { color: var(--text-accent); }
.artist-chip.throwback { border-color: var(--feedback-warning); }
.artist-chip.throwback .chip-note { color: var(--feedback-warning); }
.chip-note { font-size: var(--text-sm); }