/*
  Componente reutilizável CTA + hero com fundo — extraído do Figma:
    texto    115:6345 (desktop) / 311:322 (mobile)
    fundo    129:5615 (desktop, "Section", 1920x1200) / 300:1084 (mobile, 724x452)

  Fundo exportado direto do nó Section/Thumbnail no Figma (REST API /v1/images) — os 2
  gradientes já vêm flatten no raster, não são recriados em CSS (pedido explícito do usuário,
  2026-08-17). --cta-hero-bg/--cta-hero-bg-mobile são setadas inline por instância no PHP
  (template-parts/components/cta-hero.php) — é o mecanismo que permite o MESMO componente ter
  fundo diferente por página (rules/html-css-js.md, exceção documentada pra valor dinâmico).
  Desktop e mobile são ARQUIVOS DIFERENTES (crop/gradiente próprios por breakpoint no Figma),
  não o mesmo arquivo redimensionado — por isso a troca de variável no media query abaixo, não
  só background-size.
*/

.cta-hero {
  position: relative;
  width: 100%;
  min-height: 1020px;
  display: flex;
  align-items: center;
  background-color: var(--color-navy);
  background-image: var(--cta-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
  Overlay opcional: instância que passa a foto de fundo CRUA (sem gradiente já flatten no
  raster) usa esse elemento pra reproduzir o gradiente via CSS — mesmos stops extraídos do
  Figma (rgba(19,33,57,.9/.65/.3), left→right), 1 arquivo de foto serve desktop e mobile porque
  o crop (object-fit: cover) e o gradiente são idênticos nos dois breakpoints (página Paulista,
  node 129:5726 desktop / 306:366 mobile). Instância que já usa foto pré-flatten (home) não
  renderiza esse elemento — sem alteração de comportamento pra ela.
*/
.cta-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(19, 33, 57, 0.9),
    rgba(19, 33, 57, 0.65) 50%,
    rgba(19, 33, 57, 0.3)
  );
  pointer-events: none;
}

.cta-hero__inner {
  position: relative;
  max-width: 1520px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}

.cta-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-brand-orange);
}

.cta-hero__eyebrow img {
  display: block;
  flex: 0 0 auto;
}

.cta-hero__heading {
  max-width: 687px;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 75px;
  color: #ffffff;
}

.cta-hero__description {
  max-width: 489px;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 29.25px;
  color: #ffffff;
}

.cta-hero__highlight {
  color: var(--color-brand-orange);
}

.cta-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding-inline: 28px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  box-shadow:
    0px 10px 15px -3px rgba(236, 90, 0, 0.25),
    0px 4px 6px -4px rgba(236, 90, 0, 0.25);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- tablet/mobile — sem frame Figma nessa faixa, interpolado (rules/responsive.md seção 2) ---- */

@media (max-width: 1024px) {
  .cta-hero {
    min-height: 700px;
    padding-block: 64px;
  }

  .cta-hero__heading {
    font-size: 40px;
    line-height: 1.2;
  }
}

/* ---- mobile real (frames 311:322 / 300:1084, ~430px) ---- */

@media (max-width: 767px) {
  .cta-hero {
    min-height: 0;
    padding-block: 48px;
    background-image: var(--cta-hero-bg-mobile);
  }

  /* padding-inline: 50px — pedido do usuário 2026-08-31, padrão pro componente (era 24px);
     vale pra toda página que reusa cta-hero.php, não só Paulista. */
  .cta-hero__inner {
    padding-inline: 50px;
  }

  .cta-hero__heading {
    max-width: 100%;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 15px;
  }

  .cta-hero__description {
    max-width: 100%;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
  }
}