/**
 * Unified band-card component — single source of truth.
 * Loaded on every page (homepage lineup section + line-up archive/page) via the
 * `wmb-band-card` style handle. Grid/container layout lives with each page
 * (`.lineup__grid` in homepage.css, `.lp-grid` in style.css); this file styles
 * only the card itself. Rendered by wmb_render_band_card() in inc/band-card.php.
 */

.band-card {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--black);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  cursor: pointer;
}
/* Line-up context renders the card as an <a>; strip link affordance. */
.band-card--link { color: inherit; text-decoration: none; }
.band-card:hover { background: var(--surface); transform: translateY(-2px); }
.band-card:hover .band-card__name { color: var(--red); }
.band-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.band-card__photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
}
/* Photos sit at a consistent muted tone, then bloom to full colour on hover. */
.band-card__img {
  filter: grayscale(0.8) contrast(1.02);
  transition: filter 0.45s ease;
}
.band-card:hover .band-card__img { filter: grayscale(0) contrast(1); }
.band-card__photo-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-muted-2);
  text-transform: uppercase;
  z-index: 1;
}
.band-card__flag {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
/* width/height !important defeat the global style.css `.flag-img { width:auto
   !important }` base rule, which is loaded on the line-up page (but dequeued on
   the homepage). margin/radius/shadow resets keep the card identical on both. */
.band-card__flag .flag-img {
  width: 26px !important;
  height: auto !important;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.65));
}
.band-card__schedule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.band-card__day {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--red);
  text-transform: uppercase;
}
.band-card__body {
  padding: 20px 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.band-card__name {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}
/* The line-up Page wraps cards in `.wmb-prose`, whose `.wmb-prose h3` adds a
   heading margin (specificity 0,1,1). This compound selector (0,2,0) beats it
   so the name sits flush under the photo on both pages. */
.band-card .band-card__name { margin: 0; }
.band-card__time {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--red);
}
.band-card__stage {
  font-family: var(--f-ui);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}
.band-card__stage::after { content: " ·"; color: var(--red); }
.band-card__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex; justify-content: space-between; gap: 12px;
}
.band-card__meta .genre { color: var(--text-muted); }

/* TBA placeholder */
.band-card--tba .band-card__photo {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.03) 12px 13px);
}
.band-card--tba .band-card__photo::after { content: none; }
.band-card--tba .band-card__photo-ph {
  display: flex; flex-direction: column; gap: 6px;
}
.band-card--tba .band-card__slot-n {
  font-family: var(--f-display);
  font-size: 72px;
  line-height: 1;
  color: var(--red);
  letter-spacing: 0.02em;
}
.band-card--tba .band-card__name { color: var(--text-muted-2); }
.band-card--tba:hover { background: var(--black); transform: none; cursor: default; }
.band-card--tba:hover .band-card__name { color: var(--text-muted-2); }

@media (min-width: 1280px) {
  .band-card__name { font-size: 28px; }
}