/* =========================================================
   WAVELAND — artist.css (Kunstnerside)
   ========================================================= */

.page > .wave:first-child {
  margin-top: 8.75rem;
}

.artist {
  display: grid;
  grid-template-columns: 40.875rem 1fr;
  column-gap: 3.25rem;
  align-items: start;
  padding: 4.1875rem 2.5rem 8.1875rem 2.375rem;
}

/* ---------- Portræt ---------- */
.artist__portrait {
  margin: 0;
}
.artist__portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* ---------- Overskrift (Surgena) ---------- */
.artist__title {
  margin-top: 4.1875rem;
  font-family: var(--font-artist); /* Surgena Regular */
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/* ---------- Tekst ---------- */
.artist__info {
  max-width: 41rem;
  font-size: 1.5rem;
  line-height: 2rem;
}
.artist__info > p + p {
  margin-top: 2rem;
}
.artist__info strong {
  font-weight: 700;
}

.artist__style {
  max-width: 40.3125rem;
  margin-top: 0.75rem;
  padding: 1.3125rem 0 1.125rem;
  border-top: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
}
.artist__style h2 {
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 2rem;
}
.artist__style p {
  margin-top: 0.6875rem;
  font-size: 1.5625rem;
  line-height: 2rem;
}

.artist__contact {
  margin-top: 3.3125rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  text-transform: uppercase;
}

.artist__social {
  display: flex;
  gap: 2.625rem;
  margin-top: 1.9375rem;
  padding-left: 1px;
}
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  transition: transform 0.2s ease;
}
.icon:hover {
  transform: scale(1.08);
}
.icon--instagram {
  font-size: 2.75rem;
}
.icon--instagram i {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.icon--spotify {
  border-radius: 50%;
  background: #1ed760;
  color: var(--black);
  font-size: 2.75rem;
}
.icon--tiktok {
  color: var(--black);
  font-size: 2.5rem;
  text-shadow:
    -2px -2px 0 #25f4ee,
    2px 2px 0 #fe2c55;
}

@media (max-width: 1200px) {
  .artist {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (max-width: 900px) {
  .page > .wave:first-child {
    margin-top: 2rem;
  }
  .artist__title {
    margin-top: 1.75rem;
    font-size: 2.25rem;
  }
  .artist {
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
    padding: 2.5rem 1.5rem 4.5rem;
  }
  .artist__info {
    font-size: 1.125rem;
    line-height: 1.6875rem;
  }
  .artist__info > p + p {
    margin-top: 1.25rem;
  }
  .artist__style {
    margin-top: 1.75rem;
  }
  .artist__style h2,
  .artist__style p {
    font-size: 1.1875rem;
  }
  .artist__contact {
    margin-top: 2.25rem;
    font-size: 1.125rem;
  }
}