/* ==========================================================================
   INAEC · SEÇÃO 1b: BANNER PRINCIPAL DO PORTAL
   Manchete institucional + resumo + mídia de destaque, sobre o ground cinza.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Container "hero" (full width · fundo Cinza do Portal)
     └── Container "hero__inner" (flex · row · align center · gap 64)
           ├── Container "hero__content" (flex · column · gap 24 · 55%)
           │     ├── Texto .label · Título h1 · Texto .lead
           │     └── Container "hero__ctas" (flex · row · gap 16)
           └── Container "hero__media" (45%)
     └── Container "hero__indicadores" (grid 3 col · borda superior)
   Em Tablet/Mobile: direção do "hero__inner" para "column", filhos a 100%.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  padding-block-start: calc(var(--header-height) + var(--space-xl));
  padding-block-end: var(--space-xl);
  background-color: var(--color-bg);
  overflow: hidden;
}

/* --- Lentes (elemento de apoio do MIV) ----------------------------------
   Círculos sobrepostos em multiply, atrás do conteúdo, cortados pela borda
   e ocupando menos de 1/3 da área. Em fundo claro, tintas muito suaves. */
.hero .lente--a {
  inline-size: 34vw; aspect-ratio: 1;
  inset-block-start: -14vw; inset-inline-end: -12vw;
  background: var(--inaec-verde);
  opacity: 0.08;
}
.hero .lente--b {
  inline-size: 22vw; aspect-ratio: 1;
  inset-block-end: -14vw; inset-inline-end: -11vw;
  background: var(--inaec-oliva);
  opacity: 0.10;
}
.hero .lente--c {
  inline-size: 13vw; aspect-ratio: 1;
  inset-block-start: 8%; inset-inline-end: 7vw;
  background: var(--inaec-amarelo);
  opacity: 0.16;
}

/* --- Grade interna ------------------------------------------------------ */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}

.hero__content {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* Manchete em Grafite para máximo contraste (15.5:1 sobre o cinza do
   portal); a marca entra pelo realce em Verde INAEC, não pelo bloco todo. */
/* Sem max-inline-size: a largura da coluna já define a medida. Limitar em
   `ch` forçava quebras em pontos arbitrários do título. */
.hero__title {
  color: var(--inaec-grafite);
}
/* Sem a serifada, o itálico deixa de funcionar como recurso de display.
   O MIV pede ênfase por peso ou cor institucional — é o que usamos aqui. */
.hero__title em {
  font-style: normal;
  color: var(--inaec-verde);
}
/* O realce é uma unidade de leitura: mantém-se inteiro enquanto couber na
   linha, e volta a quebrar normalmente se a tela for estreita demais. */
.hero__title em { white-space: nowrap; }
@media (max-width: 400px) {
  .hero__title em { white-space: normal; }
}

.hero__lead { max-inline-size: 58ch; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
}

/* --- Painel de mídia de destaque ----------------------------------------
   MIV · Imagens: fotografia documental (processos reais, transformação de
   materiais, pessoas em trabalho, paisagens produtivas brasileiras), luz
   natural, enquadramento honesto, saturação reduzida, sem filtros coloridos.
   Trocar o arquivo em assets/img/media/ mantendo o aspect-ratio. */
.hero__media {
  flex: 1 1 45%;
  position: relative;
  margin: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hero__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Régua como assinatura na base da imagem (sem texto sobreposto) */
.hero__media::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--regua-height);
  background-image: var(--inaec-grad-ciclo);
}

/* --- Faixa de indicadores ----------------------------------------------- */
.hero__indicadores {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-block-start: clamp(var(--space-lg), 5vw, var(--space-xl));
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
}
.indicador { margin: 0; }
.indicador__valor {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;            /* 28px — destaque numérico, sem gritar */
  font-weight: var(--fw-heading);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--inaec-verde);
}
.indicador__rotulo {
  margin: 0;
  font-size: var(--fs-legend);
  line-height: var(--lh-legend);
  color: var(--color-text-muted);
  max-inline-size: 34ch;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  .hero { padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg); }
  .hero__inner { flex-direction: column; align-items: stretch; }
  .hero__content, .hero__media { flex: 1 1 auto; }
  .hero__media img { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
  .hero__indicadores { grid-template-columns: 1fr; gap: var(--space-sm); }
  .hero__ctas { flex-direction: column; align-items: stretch; inline-size: 100%; }
  .hero__ctas .btn { inline-size: 100%; }
  /* No mobile o texto ocupa a largura inteira: qualquer lente ficaria sob
     ele, o que o MIV proíbe. Suprimimos o elemento de apoio nessa faixa. */
  .hero .lentes { display: none; }
}