/* ==========================================================================
   WREN — pages/shows.css
   Underground-today banner, upcoming list, past archive.
   ========================================================================== */

/* ---- UNDERGROUND TODAY banner ---------------------------------------------- */
.underground {
  background: color-mix(in srgb, var(--signal) 12%, var(--tunnel));
  border-bottom: 1px solid var(--signal);
}

.underground__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  flex-wrap: wrap;
}

.underground__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .underground__dot { animation: none; }
}

.underground__label {
  color: var(--tile); /* red lives in the dot + border — signal text fails AA at this size */
  font-weight: 700;
}

.underground__where {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--tile);
}

.underground__ig {
  font-size: var(--text-xs);
}

.underground__dismiss {
  margin-left: auto;
  color: var(--concrete);
  font-size: 1.3rem;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
}

.underground__dismiss:hover,
.underground__dismiss:focus-visible {
  color: var(--tile);
}

/* ---- Hero image -------------------------------------------------------------- */
.shows-hero {
  padding-top: var(--space-5);
}

/* ---- Show lists ---------------------------------------------------------------- */
.shows-upcoming,
.shows-past {
  padding-block: var(--space-6);
}

.show-list {
  display: grid;
}

.show-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--concrete-dim);
}

.show-row:first-child {
  border-top: 1px solid var(--concrete-dim);
}

.show-row__date {
  font-family: var(--font-mono);
  color: var(--sodium);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
}

.show-row__year {
  display: block;
  color: var(--concrete);
  font-weight: 400;
  font-size: var(--text-xs);
}

.show-row__venue {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  text-transform: uppercase;
  letter-spacing: var(--tracking-sign);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.15;
}

.show-row__city {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--concrete);
  display: block;
  margin-top: var(--space-1);
}

.show-row__note {
  color: var(--tile-dim);
  font-size: 0.95rem;
  margin-top: var(--space-1);
}

.show-row__status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #fff; /* signal-on-dark fails AA at this size; filled chip passes */
  background: var(--signal);
  border: 1px solid var(--signal);
  padding: 2px 8px;
  text-transform: uppercase;
}

/* Past: condensed */
.show-list--past .show-row {
  grid-template-columns: 7rem 1fr auto;
  padding-block: var(--space-3);
}

.show-list--past .show-row__venue {
  font-size: var(--text-base);
}

.show-list--past .show-row__date {
  color: var(--concrete);
  font-weight: 400;
}

.shows-past__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (max-width: 640px) {
  .show-row,
  .show-list--past .show-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}