/**
 * Hero carousel de campanha (ref. funko.com.br).
 * Slides CSS-driven: gradiente por franquia + conteúdo. Quando houver artes
 * reais, basta setar background-image no .pn-slide-bg correspondente.
 */

.pn-hero-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(340px, 42vw, 520px);
  background: var(--wp--preset--color--primary-dark, #0A192C);
}
.pn-hero-track {
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.pn-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(340px, 42vw, 520px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pn-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Gradientes por franquia (placeholder até vir arte real) */
.pn-slide--onepiece .pn-slide-bg {
  background:
    radial-gradient(circle at 78% 30%, rgba(0,167,157,.5), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(255,69,0,.35), transparent 50%),
    linear-gradient(135deg, #0A192C 0%, #14324F 100%);
}
.pn-slide--starwars .pn-slide-bg {
  background:
    radial-gradient(circle at 20% 25%, rgba(255,215,0,.28), transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(101,100,238,.4), transparent 55%),
    linear-gradient(160deg, #05080F 0%, #101D33 100%);
}
.pn-slide--kaiju .pn-slide-bg {
  background:
    radial-gradient(circle at 80% 20%, rgba(229,62,62,.4), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(101,100,238,.35), transparent 55%),
    linear-gradient(120deg, #0A192C 0%, #1D1433 100%);
}
/* Estrelas sutis */
.pn-slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 56% 22%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 72% 56%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 34%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.4), transparent);
  opacity: .5;
}

.pn-slide-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0;
  color: #fff;
}
.pn-slide-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary, #00A79D);
  margin-bottom: .75rem;
}
.pn-slide-title {
  /* Os slides usam <h1>/<h2>. O Kadence colore headings via seletor de
     elemento (h1 { color: ... }), e regra direta vence a herança do
     .pn-slide-inner — por isso a cor precisa ser declarada aqui. */
  color: #fff !important;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .75rem;
  max-width: 14ch;
  text-wrap: balance;
}
.pn-slide-sub {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  color: rgba(255,255,255,.82);
  max-width: 46ch;
  margin: 0 0 1.5rem;
}
.pn-slide-cta {
  display: inline-block;
  background: var(--wp--preset--color--accent, #6564EE);
  color: #fff !important;
  padding: .85rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.pn-slide-cta:hover { background: var(--wp--preset--color--secondary, #00A79D); transform: translateY(-2px); }

/* Setas */
.pn-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s ease;
}
.pn-hero-arrow:hover { background: rgba(255,255,255,.28); }
.pn-hero-arrow--prev { left: 1rem; }
.pn-hero-arrow--next { right: 1rem; }

/* Dots */
.pn-hero-dots {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.pn-hero-dot {
  width: 9px; height: 9px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, width .2s ease;
}
.pn-hero-dot.is-active {
  background: #fff;
  width: 22px;
}

@media (max-width: 640px) {
  .pn-hero-arrow { display: none; }
}

/* ---------- FULL-BLEED: hero ocupa 100% da largura da tela ---------- */
.pn-hero-carousel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- Hero rente ao header: zera o respiro vertical do Kadence na home ---------- */
/* Cobre todos os wrappers que o Kadence pode usar entre o header e o conteudo */
body.home #primary,
body.home .content-area,
body.home .site-main,
body.home #main { padding-top: 0 !important; margin-top: 0 !important; }
body.home .content-container,
body.home .site-container,
body.home .inner-wrap.site-container { padding-top: 0 !important; }
body.home .entry-content-wrap,
body.home .singular-inner-wrap,
body.home article.page,
body.home .entry-wrap { padding-top: 0 !important; margin-top: 0 !important; }
body.home .entry-content,
body.home .wp-block-post-content { padding-top: 0 !important; margin-top: 0 !important; }
body.home .entry-content > *:first-child,
body.home .wp-block-post-content > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }
/* gap que vem de margin-bottom do header ou padding-top do body wrapper */
body.home .site > .inner-wrap > .content-area { padding-top: 0 !important; }
body.home .wp-site-blocks > * + * { margin-block-start: 0; }
/* Kadence pode injetar padding via CSS variable de altura do header */
body.home .kadence-blocks-row-layout-wrap:first-of-type,
body.home .pn-hero,
body.home .wp-block-group.pn-hero { margin-top: 0 !important; padding-top: 0 !important; }

/* ---------- Benefit boxes flutuam SOBRE o hero (nao atras) ---------- */
.pn-benefit-wrapper {
  position: relative !important;
  z-index: 5 !important;
}

/* ---------- Newsletter (cupom): mais respiro interno + rente ao footer ---------- */
body.home .wp-block-group.has-primary-accent-gradient-background {
  padding-top: clamp(3rem, 6vw, 4.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
  margin-bottom: 0 !important;
}
/* zera o respiro inferior do Kadence na home para a secao encostar no footer */
body.home .content-area {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.home .entry-content-wrap { padding-bottom: 0 !important; }
body.home .entry-content > *:last-child { margin-bottom: 0 !important; }
body.home .site-main { margin-bottom: 0 !important; padding-bottom: 0 !important; }