/* =========================================================
   WAVELAND — lineup.css
   ========================================================= */

.lineup-lead {
  margin-top: 3.625rem;
  padding: 0 12.5rem 0 7.5625rem;
}
.lineup-lead + .wave { margin-top: 1.25rem; }

/* ---------- Plakat ---------- */
.poster {
  width: 58.5625rem;
  height: auto;
  margin: 5.375rem auto 0;
  border-radius: 0.75rem;
}

/* ---------- Ocean Stage ---------- */
.stage {
  margin: 5.1875rem 3.6875rem 0 3.5625rem;
  padding: 4.4375rem 0 4.1875rem;
  border: 2px solid var(--pink);
  border-radius: 3.125rem;
  text-align: center;
}
.stage__title {
  font-size: 2.5rem;
  line-height: 3rem;
  text-transform: uppercase;
}
.stage__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3.625rem;
  padding: 0 5.9375rem;
}
.stage__date { font-size: 2.125rem; font-weight: 500; line-height: 2.5rem; }
.stage__slots { margin: 0; padding: 0; list-style: none; }
.stage__slots li { margin-top: 2rem; }
.stage__slots li + li { margin-top: 4.25rem; }
.stage__slots time {
  display: block;
  font-weight: 300;                /* tider: Onest Light */
  font-size: 1.5625rem;
  line-height: 1.875rem;
}
.stage__slots span {
  display: block;
  margin-top: 1.25rem;
  font-size: 2rem;
  font-weight: 600;                /* kunstnernavne: Onest SemiBold */
  line-height: 2.375rem;
  text-transform: uppercase;
}

/* ---------- Meet the DJ's ---------- */
.djs { padding: 7.5rem 4.8125rem 7.125rem 5.375rem; }
.djs .section-title { margin-bottom: 5.3125rem; font-weight: 300; }   /* Meet the DJ's: Onest Light */
.dj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 22.375rem));
  column-gap: 2rem;
  justify-content: space-between;
  row-gap: 6.5rem;
}
.artist-card { display: block; }
.artist-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.artist-card:hover .name-bar { text-decoration: underline; text-underline-offset: 0.375rem; }

@media (max-width: 1200px) {
  .dj-grid { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .stage__grid { padding: 0 2rem; }
}

@media (max-width: 900px) {
  .lineup-lead { margin-top: 1.25rem; padding: 0 1.5rem; }
  .poster { width: calc(100% - 3rem); margin-top: 2rem; }
  .stage { margin: 3rem 1rem 0; padding: 2.5rem 1rem; border-radius: 1.75rem; }
  .stage__title { font-size: 1.75rem; line-height: 2.25rem; }
  .stage__grid { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 1.5rem; padding: 0; }
  .stage__date { font-size: 1.5rem; }
  .stage__slots li,
  .stage__slots li + li { margin-top: 1.125rem; }
  .stage__slots time { font-size: 1.0625rem; line-height: 1.5rem; }
  .stage__slots span { margin-top: 2px; font-size: 1.25rem; line-height: 1.75rem; }
  .djs { padding: 4rem 1.5rem; }
  .djs .section-title { margin-bottom: 2rem; }
  .dj-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
}