/* ==========================================================
   gk-artists.css — Página Artistas (grid, cards, overlay, CTA)
   ========================================================== */

/* ── Seção container ─────────────────────────────────────── */

.gk-artists-hub {
  min-height: 100vh;
  background-color: #000;
  /* Compensa o navbar-2 fixo (112px, igual .section-home1 no index) */
  padding-top: 112px;
}

.gk-artists-hub .w-container {
  max-width: 100%;
  padding: 0;
}

/* ── Grid principal ──────────────────────────────────────── */

.gk-artist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 0;
}

/* ── Card de artista ─────────────────────────────────────── */

.gk-artist-card {
  position: relative;
  height: 90vh;
  overflow: hidden;
  border: 0 solid #000;
  border-radius: 0;
}

.gk-artist-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ── Foto de fundo (por artista) ───────────────────────────
   Mesmas imagens da seção index "Conheça os artistas" (.meet-the-artists):
   Grenckelvin → panel-a · Meire → panel-b · Jeh → panel-c · Junior → panel-d (AVIF)
   (referência: assets/an-tattoo_85a25f0c1e7c.css) */

.gk-artist-photo {
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #111;
  height: 100%;
}

.gk-artist-photo--grenckelvin {
  background-image: url("gk-about-panel-a.avif");
}

.gk-artist-photo--meire {
  background-image: url("gk-about-panel-b.avif");
}

.gk-artist-photo--jeh {
  background-image: url("gk-about-panel-c.avif");
}

/* .mta-sunyul usa background-position: 50% (centro vertical) no bundle principal */
.gk-artist-photo--junior {
  background-image: url("gk-about-panel-d.avif");
  background-position: 50%;
}

/* ── Overlay gradiente + hover ───────────────────────────── */

.gk-artist-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-bottom: 60px;
  cursor: pointer;
  background-image: linear-gradient(transparent, #000 83%);
  transition: all 0.475s;
}

.gk-artist-overlay:hover {
  background-image: linear-gradient(transparent 48%, #000);
  padding-top: 60px;
}

/* ── Nome do artista ─────────────────────────────────────── */

.gk-artist-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f1f1f1;
  margin: 0;
  font-size: clamp(24px, 5vw, 64px);
  line-height: 1.15;
}

.gk-artist-surname {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f1f1f1;
  margin: 10px 0 0;
  font-size: clamp(40px, 10vw, 175px);
  line-height: 0.9;
}

/* ── Célula CTA (Solicitar Agendamento) ──────────────────── */

.gk-artists-cta {
  position: relative;
  overflow: hidden;
  background-color: #0a0a0a;
}

/* Camada de foto: evita url() no CSS (resolução relativa ao .css falha em alguns cenários) */
.gk-artists-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.gk-artists-cta-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 50vh;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  transition: color 0.225s ease;
}

/* Overlay no hover (sem backdrop-filter — evita bloco branco/leitoso em alguns browsers) */
.gk-artists-cta-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(95, 6, 6, 0.25), #000);
  opacity: 0;
  transition: opacity 0.225s ease;
  pointer-events: none;
}

.gk-artists-cta-link:hover::after {
  opacity: 1;
}

.gk-artists-cta-heading {
  position: relative;
  z-index: 1;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.5vw, 30px);
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f1f1f1;
  margin: 0;
}

/* ── Responsive: Tablet ──────────────────────────────────── */

@media screen and (max-width: 991px) {
  .gk-artist-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gk-artist-card {
    min-height: 70vh;
    height: auto;
  }

  .gk-artist-overlay {
    padding: 20px;
    background-image: linear-gradient(transparent 29%, #000 83%);
  }

  .gk-artist-name {
    font-size: clamp(20px, 7.5vw, 48px);
  }

  .gk-artist-surname {
    font-size: clamp(30px, 15vw, 100px);
  }
}

/* ── Responsive: Mobile ──────────────────────────────────── */

@media screen and (max-width: 479px) {
  .gk-artist-grid {
    grid-template-columns: 1fr;
  }

  .gk-artist-card {
    min-height: 60vh;
  }

  .gk-artist-name {
    font-size: clamp(20px, 14vw, 48px);
    line-height: 1;
  }

  .gk-artist-surname {
    font-size: clamp(36px, 20vw, 80px);
  }
}