/* =====================================================================
   LANDING BASE (Black Edition) — base do hero + botoes da nova HOME.
   ---------------------------------------------------------------------
   REGRA DE ISOLAMENTO: nada aqui pode vazar para as telas internas
   (#/votar, #/ranking) que vivem em #appRoot e usam styles.css.
   - As VARIAVEIS ficam escopadas em `#topo, .site-header, .site-footer`
     (NUNCA em :root/.pag1), pois custom properties herdam e vazariam
     para dentro de #appRoot. #appRoot e IRMAO de #topo, entao nao herda.
   - Os seletores de hero (.hero-*, .primary-button, .hero-ranking-button)
     NAO existem no markup gerado pelo app.js, entao sao inertes fora da
     landing. Carregado DEPOIS de styles.css para vencer o hero antigo.
   ===================================================================== */

/* --- Variaveis da landing, escopadas (nao vazam para #appRoot) --- */
#topo,
.site-header,
.site-footer {
  --gold-mid: #c59a45;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --body-font: "Montserrat", Arial, sans-serif;
}

/* --- Wrapper da home --- */
#topo {
  color: #fff;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 400;
}

/* --- Trilhos "Premios": fallback de iniciais (photo_url nulo) e estado vazio --- */
#topo .pg-person-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, #1a1512, #050403);
  color: #e5bd67;
  font-family: "Cinzel", Georgia, serif;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: .04em;
}
#topo .pg-rail-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: .95rem;
  letter-spacing: .04em;
}

/* =============== HERO (slider de banners — base da landing) =============== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #020201;
  isolation: isolate;
  touch-action: pan-y;
}

.hero-slider {
  position: absolute;
  inset: 0;
  cursor: grab;
  user-select: none;
}

.hero-slider.is-dragging {
  cursor: grabbing;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  --hero-text-width: 560px;
  align-items: center;
  padding: 96px 0 92px clamp(72px, 9.15vw, 176px);
  background-position: center;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 980ms ease;
}

/* Fundo de cada banner definido AQUI (nao via var entre folhas) para o url()
   resolver de forma deterministica relativo a este arquivo: ../assets/. */
.hero-slide:nth-child(1) {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 28%, rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0.34) 100%),
    url("../assets/bg-banner-1.png");
}
.hero-slide:nth-child(2) {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 28%, rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0.34) 100%),
    url("../assets/bg-banner-2.png");
}

/* Neutraliza o overlay ::after do hero antigo (styles.css) — os gradientes
   do banner ja estao no background-image acima. */
.hero-slide::after { content: none !important; }

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  width: min(var(--hero-text-width), calc(100vw - 146px));
  margin-left: 50px;
  color: #fff;
}

.hero-awards-logo {
  display: block;
  width: min(300px, 32vw);
  max-width: 100%;
  margin: 0 0 54px 184px;
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.62));
  pointer-events: none;
}

.hero-actions {
  display: grid;
  width: min(var(--hero-text-width), 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  margin-top: 84px;
}

.hero-actions .primary-button {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  font-family: "Montserrat", var(--body-font);
  font-size: 1.05rem;
  font-weight: 800;
}

.hero-ranking-button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(238, 198, 121, 0.94);
  border-radius: 999px;
  padding: 12px 28px;
  color: #fff;
  background: rgba(0, 0, 0, 0.14);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.hero-ranking-button:hover,
.hero-ranking-button:focus-visible {
  outline: none;
  border-color: #ffe7b5;
  background: rgba(253, 208, 155, 0.12);
  transform: translateY(-2px);
}

.powered-logo {
  display: block;
  width: min(294px, 32vw);
  max-width: 100%;
  margin: 44px 0 0 354px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.58));
}

.hero-pagination {
  position: absolute;
  z-index: 4;
  bottom: 10.5vh;
  left: calc(clamp(72px, 9.15vw, 176px) + 20px);
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero-page-chip {
  display: block;
  width: 46px;
  min-height: 0;
  height: 5px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: width 260ms ease, background 260ms ease, opacity 260ms ease;
}

.hero-page-chip.is-active {
  width: 50px;
  background: #fff;
}

/* Botao dourado base (usado apenas no hero/landing; nao aparece em #appRoot) */
.primary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  color: #171001;
  background: linear-gradient(135deg, #fff1bd 0%, var(--gold, #e5bd67) 38%, var(--gold-mid) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 18px 44px rgba(253, 208, 155, 0.16);
  font-weight: 900;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), filter 240ms ease;
}

.primary-button:hover,
.primary-button:focus-visible {
  outline: none;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 22px 54px rgba(253, 208, 155, 0.24);
}

/* --- Responsivo do hero (somente regras de hero) --- */
@media (max-width: 1440px) and (min-width: 761px) {
  .hero-slide {
    --hero-text-width: 470px;
    padding-top: 84px;
    padding-bottom: 70px;
    padding-left: clamp(44px, 7vw, 96px);
    background-position: center right;
  }
  .hero-slide-content { margin-left: 28px; }
  .hero-awards-logo { width: min(230px, 24vw); margin: 0 0 40px 150px; }
  .hero-actions { gap: 16px; margin-top: 58px; }
  .hero-actions .primary-button,
  .hero-ranking-button { min-height: 50px; font-size: 0.9rem; }
  .powered-logo { width: min(230px, 24vw); margin: 34px 0 0 calc(var(--hero-text-width) - 230px); }
  .hero-pagination { bottom: 8vh; left: calc(clamp(44px, 7vw, 96px) + 28px); }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .hero-slide { --hero-text-width: 410px; padding-left: 40px; }
  .hero-slide-content { margin-left: 12px; }
  .hero-awards-logo { width: 200px; margin-left: 124px; margin-bottom: 34px; }
  .hero-actions { gap: 14px; margin-top: 46px; }
  .powered-logo { width: 210px; margin-top: 28px; margin-left: calc(var(--hero-text-width) - 210px); }
  .hero-pagination { bottom: 7vh; left: 52px; }
}

@media (max-width: 1040px) {
  .hero-slide { --hero-text-width: 380px; padding-right: 32px; padding-left: 32px; }
  .hero-awards-logo { width: 184px; margin-left: 112px; }
  .powered-logo { width: 190px; margin-left: calc(var(--hero-text-width) - 190px); }
  .hero-pagination { left: 44px; }
}

@media (max-width: 760px) {
  .hero { height: 100svh; min-height: 720px; }
  .hero-slide {
    --hero-text-width: 100%;
    display: block;
    padding: 0;
    background-position: center top;
    background-size: cover;
  }
  .hero-slide:nth-child(1) { background-image: url("../assets/bg_b1_mobile.png"); }
  .hero-slide:nth-child(2) { background-image: url("../assets/bg_b2_mobile.png"); }
  .hero-slide-content {
    position: absolute;
    right: 5.4vw;
    bottom: 3.4svh;
    left: 5.4vw;
    width: auto;
    margin-left: 0;
    text-align: left;
  }
  .hero-awards-logo { display: none; }
  .hero-actions {
    display: grid;
    width: calc(100% - clamp(24px, 6vw, 64px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2.6vw, 28px);
    margin: clamp(36px, 5.7vw, 70px) auto 0;
  }
  .hero-actions .primary-button,
  .hero-ranking-button {
    width: 100%;
    min-width: 0;
    min-height: clamp(54px, 8.3vw, 90px);
    padding: 10px 12px;
    font-size: clamp(15px, 2.9vw, 31px);
    line-height: 1;
  }
  .powered-logo { width: clamp(230px, 38vw, 410px); margin: clamp(42px, 6.2vw, 82px) 7vw 0 auto; }
  .hero-pagination { top: 62.2svh; bottom: auto; left: 7.5vw; gap: clamp(8px, 1vw, 12px); }
  .hero-page-chip { width: clamp(20px, 4.8vw, 52px); height: clamp(4px, 0.55vw, 6px); }
  .hero-page-chip.is-active { width: clamp(20px, 4.8vw, 52px); }
}