/* =========================================
   Gourmetize • assets/css/indexbanner.css
   Estilos exclusivos do HERO + Rotator
========================================= */

/* Hero */
.hero{
  position:relative;
  min-height:74vh;
  display:grid;
  align-items:center;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(15,10,10,.35),rgba(15,10,10,.65)),
    url("../img/hero.jpg") center/cover no-repeat;
  z-index:-2;
}
.hero-overlay{
  position:absolute; inset:auto 0 0 0; height:40%;
  background:radial-gradient(60% 50% at 50% 0%,rgba(124,12,47,.22),transparent 60%);
  z-index:-1;
}
.hero-inner{ padding:120px 0 }
.eyebrow{
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 10px;
}
h1{ margin:0 0 16px; font-size:clamp(28px,5vw,56px); line-height:1.05 }

/* Rotator */
.rotator{ display:block; min-height:1.2em }
.rotator-item{ display:none }               /* default: escondido */
.rotator-item.is-active{
  display:inline-block;                     /* visível apenas o ativo */
  animation:fadeSlide .7s ease both;
}
@keyframes fadeSlide{
  from{ opacity:0; transform:translateY(10px) }
  to{   opacity:1; transform:translateY(0) }
}

/* Subcopy + CTAs do hero (mantidos aqui) */
.subcopy{
  max-width:760px; color:#efe6e8; opacity:.9;
  margin:10px 0 26px; font-size:clamp(16px,2.2vw,18px);
}

/* Responsivo específico do hero */
@media (max-width:760px){
  .hero-inner{ padding:92px 0 80px }
  .hero-media{
    background:
      linear-gradient(180deg,rgba(15,10,10,.45),rgba(15,10,10,.72)),
      url("../img/hero-mobile.jpg") center/cover no-repeat;
  }
}

/* --- MOBILE POLISH (HERO) --- */
@media (max-width:760px){
  .container { padding: 0 16px; }

  .hero-inner{ padding: 88px 0 72px; }        /* um pouco menos alto */
  h1{ font-size: clamp(26px, 8vw, 36px); }     /* título menor no mobile */
  .subcopy{ font-size: 15px; margin: 8px 0 18px; }

  /* CTAs empilhados e fáceis de clicar */
  .hero-ctas{ display:flex; flex-direction:column; gap:10px; }
  .hero-ctas .btn{ width:100%; padding:13px 16px; }
}


/* ===== HERO crossfade (camadas e setas) ===== */

.hero-media-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
  z-index:-1;              /* acima do .hero-media e abaixo do conteúdo */
}
.hero-media-layer.is-visible{ opacity:1; transform:scale(1); }

/* garante que as setas sempre cliquem por cima das camadas */
.hero-controls{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.hero-controls .hero-btn{ pointer-events:auto; }