/* DUROV MUSIC LAB — Artists Section */

:root {
  --ac-color-stefany: #e83ca8;
  --ac-color-kant:    #c9a84c;
  --ac-color-romani:  #cc823c;
  --ac-min-height:    88vh;
  --ac-transition:    0.35s ease;
}

.artists-section {
  background:  #0a0a0a;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

.artists-section__header {
  padding: 40px 48px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.artists-section__tag {
  font-size:      clamp(16px, 1.35vw, 20px);
  font-weight:    700;
  letter-spacing: 0.14em;
  color:          rgba(201, 168, 76, 0.85);
}

.artists-section__header::before {
  content:     '';
  width:       36px;
  height:      2px;
  background:  rgba(201, 168, 76, 0.7);
  flex-shrink: 0;
}

.artists-section__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(28px, 3vw, 48px);
  min-height:            var(--ac-min-height);
  padding:               0 clamp(12px, 1.2vw, 20px) clamp(32px, 3vw, 56px);
}

.ac {
  position: relative;
  overflow: hidden;
  cursor:   pointer;
}

.ac__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.ac__img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  transition:      transform 0.7s ease;
}

.ac:hover .ac__img,
.ac.is-touched .ac__img {
  transform: scale(1.04);
}

.ac__texture {
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse at 40% 35%, rgba(204, 130, 60, 0.45) 0%, rgba(204, 130, 60, 0) 55%),
    radial-gradient(ellipse at 75% 75%, rgba(160, 90, 30, 0.30) 0%, rgba(160, 90, 30, 0) 50%),
    radial-gradient(ellipse at 20% 80%, rgba(120, 60, 20, 0.20) 0%, rgba(120, 60, 20, 0) 45%),
    linear-gradient(180deg, #110d08 0%, #0d0d0d 100%);
}

.ac__overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to bottom,
    rgba(6, 5, 8, 0.72)  0%,
    rgba(6, 5, 8, 0.18)  35%,
    rgba(6, 5, 8, 0.18)  55%,
    rgba(6, 5, 8, 0.82)  78%,
    rgba(6, 5, 8, 0.97)  100%
  );
  transition: opacity var(--ac-transition);
}

.ac:hover .ac__overlay,
.ac.is-touched .ac__overlay {
  opacity: 0.85;
}

.ac--stefany .ac__overlay {
  background: linear-gradient(
    to bottom,
    rgba(5, 4, 10, 0.72) 0%,
    rgba(15, 5, 20, 0.12) 40%,
    rgba(10, 3, 18, 0.82) 78%,
    rgba(8, 2, 15, 0.97)  100%
  );
}

.ac--kant .ac__overlay {
  background: linear-gradient(
    to bottom,
    rgba(8, 7, 4, 0.72)  0%,
    rgba(12, 10, 4, 0.12) 40%,
    rgba(8, 7, 3, 0.82)  78%,
    rgba(6, 5, 2, 0.97)  100%
  );
}

.ac--romani .ac__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 7, 4, 0.72)  0%,
    rgba(14, 9, 4, 0.12)  40%,
    rgba(10, 6, 3, 0.82)  78%,
    rgba(8, 5, 2, 0.97)   100%
  );
}

.ac__top-border {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           3px;
  z-index:          5;
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform 0.45s ease;
}

.ac:hover .ac__top-border,
.ac.is-touched .ac__top-border {
  transform: scaleX(1);
}

.ac--stefany .ac__top-border { background: var(--ac-color-stefany); }
.ac--kant    .ac__top-border { background: var(--ac-color-kant); }
.ac--romani  .ac__top-border { background: var(--ac-color-romani); }

.ac__content {
  position:        absolute;
  inset:           0;
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding:         36px 32px 40px;
}

.ac__top {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.ac__num {
  font-family:    Georgia, serif;
  font-style:     italic;
  font-size:      clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.12em;
  color:          rgba(255, 255, 255, 0.52);
}

.ac__genre {
  font-size:      clamp(13px, 1.05vw, 16px);
  font-weight:    600;
  letter-spacing: 0.22em;
  line-height:    1.55;
  transition:     color var(--ac-transition);
}

.ac--stefany .ac__genre { color: rgba(232, 60, 168, 0.78); }
.ac--kant    .ac__genre { color: rgba(201, 168, 76, 0.78); }
.ac--romani  .ac__genre { color: rgba(204, 130, 60, 0.78); }

.ac--stefany:hover .ac__genre,
.ac--stefany.is-touched .ac__genre { color: rgba(232, 60, 168, 0.90); }
.ac--kant:hover .ac__genre,
.ac--kant.is-touched .ac__genre { color: rgba(201, 168, 76, 0.90); }
.ac--romani:hover .ac__genre,
.ac--romani.is-touched .ac__genre { color: rgba(204, 130, 60, 0.90); }

.ac__bottom {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.ac__release {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.ac__release-label {
  font-size:      clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.22em;
  color:          rgba(255, 255, 255, 0.58);
}

.ac__release-title {
  font-family:    Georgia, serif;
  font-style:     italic;
  font-size:      clamp(18px, 1.4vw, 22px);
  letter-spacing: 0.02em;
  line-height:    1.75;
  color:          rgba(255, 255, 255, 0.88);
}

.ac__name {
  font-size:      clamp(28px, 3vw, 48px);
  font-weight:    700;
  letter-spacing: 0.04em;
  line-height:    1.0;
  color:          #ffffff;
  margin:         0;
  transition:     letter-spacing var(--ac-transition);
}

.ac:hover .ac__name,
.ac.is-touched .ac__name {
  letter-spacing: 0.06em;
}

.ac__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  font-size:       clamp(12px, 0.95vw, 14px);
  letter-spacing:  0.2em;
  font-weight:     700;
  text-decoration: none;
  padding:         14px 20px;
  border:          1px solid rgba(255, 255, 255, 0.35);
  color:           rgba(255, 255, 255, 0.88);
  background:      transparent;
  align-self:      flex-start;
  transition:      border-color var(--ac-transition),
                   color var(--ac-transition),
                   background var(--ac-transition);
}

.ac--stefany:hover .ac__btn,
.ac--stefany.is-touched .ac__btn {
  border-color: var(--ac-color-stefany);
  color:        var(--ac-color-stefany);
  background:   rgba(232, 60, 168, 0.08);
}

.ac--kant:hover .ac__btn,
.ac--kant.is-touched .ac__btn {
  border-color: var(--ac-color-kant);
  color:        var(--ac-color-kant);
  background:   rgba(201, 168, 76, 0.08);
}

.ac--romani:hover .ac__btn,
.ac--romani.is-touched .ac__btn {
  border-color: var(--ac-color-romani);
  color:        var(--ac-color-romani);
  background:   rgba(204, 130, 60, 0.08);
}

.ac--stefany .ac__img { object-position: 50% 15%; }
.ac--kant .ac__img    { object-position: center top; }
.ac--romani .ac__img  { object-position: center top; }

@media (max-width: 1100px) {
  .ac__name { font-size: clamp(26px, 2.8vw, 40px); }
  .ac__content { padding: 28px 22px 30px; }
}

@media (max-width: 900px) {
  :root { --ac-min-height: auto; }

  .artists-section__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(22px, 2.8vw, 36px);
    padding: 0 16px 36px;
  }

  .ac {
    min-height: 60vw;
  }

  .ac:last-child {
    grid-column: 1 / -1;
    min-height: 44vw;
  }
}

@media (max-width: 600px) {
  .artists-section__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px 32px;
  }

  .ac {
    min-height: 85vw;
  }

  .ac:last-child {
    grid-column:  auto;
    min-height:   80vw;
  }

  .artists-section__header {
    padding: 24px 20px 18px;
  }

  .artists-section__tag {
    font-size:      clamp(13px, 3.4vw, 16px);
    letter-spacing: 0.1em;
  }

  .ac__content { padding: 24px 20px 28px; }
  .ac__name { font-size: 36px; }
  .ac__num,
  .ac__genre,
  .ac__release-label {
    font-size: clamp(12px, 3.2vw, 15px);
  }
  .ac__release-title {
    font-size: clamp(16px, 4.2vw, 19px);
  }
  .ac__btn {
    font-size: 11px;
    padding: 12px 16px;
  }
}