/* ==========================================================================
   ZENTH TRADE — hero
   hero.css · v1.0.0
   Depende de zt-components.css
   --------------------------------------------------------------------------
   Carregado só nas páginas que usam o widget, por get_style_depends().
   ========================================================================== */

.zt-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--zt-esp-8) var(--zt-esp-7);
}

/* Halo da marca: dá o que borrar ao vidro do cabeçalho. Sem alguma coisa
   por trás, o backdrop-filter da barra fixa não borra nada e ela vira um
   retângulo cinza. */
.zt-hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -10%;
  width: min(820px, 88vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 44% 42%, rgba(86, 49, 139, 0.18), transparent 62%),
    radial-gradient(circle at 68% 74%, rgba(231, 150, 35, 0.15), transparent 58%);
  pointer-events: none;
}

/* Em fundo escuro ou gradiente o halo some: ele foi desenhado para papel. */
.zt-hero.zt-secao--escura::before,
.zt-hero.zt-secao--gradiente::before { display: none; }

.zt-hero__grade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--zt-esp-7);
  align-items: center;
}

.zt-hero__texto { max-width: 34rem; }
.zt-hero h1 { margin-bottom: var(--zt-esp-5); }
.zt-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--zt-esp-3); margin-top: var(--zt-esp-7); }

.zt-fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zt-esp-3) var(--zt-esp-5);
  margin-top: var(--zt-esp-7);
  padding-top: var(--zt-esp-5);
  border-top: var(--zt-regra-clara);
}
.zt-fatos div { display: flex; align-items: center; gap: var(--zt-esp-2); font-size: var(--zt-txt-sm); color: var(--zt-tinta-suave); }
.zt-fatos i { color: var(--zt-marca-clara); font-size: 1.15rem; }

.zt-secao--escura .zt-fatos,
.zt-secao--gradiente .zt-fatos { border-top-color: var(--zt-regra-inversa); }
.zt-secao--escura .zt-fatos div,
.zt-secao--gradiente .zt-fatos div { color: var(--zt-tinta-inversa-suave); }
.zt-secao--escura .zt-fatos i,
.zt-secao--gradiente .zt-fatos i { color: var(--zt-acento); }

.zt-palco {
  /* Expostos como controle do widget. object-fit contain garante que
     limitar a altura não deforme a foto, só a contenha. */
  --zt-palco-largura: 520px;
  --zt-palco-altura: none;

  position: relative;
  display: grid;
  place-items: center;
  padding-block: var(--zt-esp-4);
}
.zt-palco img {
  width: 100%;
  max-width: var(--zt-palco-largura);
  max-height: var(--zt-palco-altura);
  height: auto;
  object-fit: contain;
  display: block;
}
.zt-palco__foto { display: block; width: 100%; }
.zt-palco__selo { position: absolute; top: var(--zt-esp-2); left: 0; z-index: 2; }

.zt-palco__vazio {
  width: 100%;
  max-width: var(--zt-palco-largura);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--zt-raio-xl);
  background: linear-gradient(160deg, var(--zt-roxo-25) 0%, var(--zt-neutro-100) 100%);
  color: var(--zt-roxo-200);
}
.zt-palco__vazio i { font-size: 4rem; }

/* Cartão de vidro: precisa de conteúdo por trás, e aqui tem a foto. */
.zt-palco__cartao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto;
  max-width: 460px;
  background: var(--zt-vidro-claro);
  -webkit-backdrop-filter: var(--zt-vidro-blur);
  backdrop-filter: var(--zt-vidro-blur);
  border: 1px solid var(--zt-vidro-borda);
  border-radius: var(--zt-raio-lg);
  padding: var(--zt-esp-4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zt-esp-4);
}
.zt-palco__cartao h2 { font-size: var(--zt-txt-md); font-weight: var(--zt-peso-semi); color: var(--zt-tinta); }
.zt-palco__cartao p { font-size: var(--zt-txt-xs); color: var(--zt-tinta-suave); margin-top: 3px; }

@media (max-width: 900px) {
  .zt-hero__grade { grid-template-columns: 1fr; gap: var(--zt-esp-6); }
  .zt-palco { order: -1; }
  /* No celular a foto cede espaço, mas quem definiu largura menor no
     controle continua mandando. */
  .zt-palco img,
  .zt-palco__vazio { max-width: min(var(--zt-palco-largura), 340px, 88%); }
  /* No celular o cartão sai de cima da foto e vira uma faixa embaixo:
     sobreposto, ele cobre metade do aparelho. */
  .zt-palco__cartao { position: static; width: 100%; margin-top: var(--zt-esp-4); }
}