/* ==========================================================================
   Cards — lineup members (Band) and video cards (Media) share one anatomy:
   image (378x462 ratio) → 20px → title + subtitle (+ arrow) → 20px → rule
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 72px var(--col-gap);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;            /* grid rows share height → bottom rules line up even when a role wraps */
  color: inherit;
}
.card__media {
  position: relative;
  aspect-ratio: 378 / 462;
  overflow: hidden;
  background: #1a1922;
}
.card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  line-height: 24px;
}
.card__title {
  font-weight: 700;
  font-size: 20px;
}
.card__sub {
  font-weight: 300;
  font-size: 14px;
}
.card__arrow {
  font-weight: 700;
  font-size: 20px;
}
/* Member detail pages are deferred — arrows stay in the markup, hidden for v1 */
.card--member .card__arrow { display: none; }

.card__rule {
  margin-top: auto;
  height: 1px;
  background: var(--c-white-20);
}
.theme-light .card__rule { background: var(--c-dark-20); }

/* Video card: whole card is a button that opens the modal */
.card--video {
  display: flex;          /* a <button> is shrink-to-fit by default: force full width */
  width: 100%;
  text-align: left;
}
.card--video .card__media { width: 100%; }
.card--video .card__media { cursor: pointer; }
.card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 75px;
  height: 75px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
  pointer-events: none;
}
.card--video:hover .card__play,
.card--video:focus-visible .card__play {
  transform: translate(-50%, -50%) scale(1.1);   /* +10% on hover, per brief */
}

/* --------------------------------------------------------------------------
   Section heads used on Media ("Video Gallery" + rule + category label)
   -------------------------------------------------------------------------- */
.gallery-head {
  padding-top: 120px;
}
.gallery-head .rule { margin-top: 16px; }
.gallery-head .label { margin-top: 24px; }
.gallery-head + .cards { margin-top: 24px; }

/* Lineup section (Band) */
.lineup {
  padding-top: 120px;
}
.lineup .lead-dark { margin-top: 32px; }
.lineup .cards { margin-top: 111px; }

@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 32px var(--col-gap); }
  .lineup { padding-top: 152px; }
  .lineup .cards { margin-top: 111px; }
}
@media (max-width: 767px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lineup .cards {                       /* members: 2 columns on phones (review) */
    grid-template-columns: repeat(2, 1fr);
    gap: 32px var(--col-gap);
  }
  .lineup .cards { margin-top: 111px; }
}