/* ==========================================================================
   HM2 FACTORY: SEÇÃO HERO — V8 (wrapper .h2-secao--hero + View hm2_lp_hero)
   Estrutura real:
     section.h2-secao--hero[style="background-image:url(...)"]
       .container > .row > .col-12
         .view-hm2-lp-hero
           h1.hero-titulo           ← title da view
           p.hero-subtitulo         ← field_hero_subtitulo da view
         .h2-secao__ctas            ← CTAs extraídos via preprocess
           a.btn.btn-primary
           a.btn.btn-secondary
   ========================================================================== */

/* 1. Container: altura fluida + centralização vertical */
body:not(.path-admin) .h2-secao--hero {
  position: relative;
  min-height: 480px;
  height: 50vw;
  max-height: 750px;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Overlay gradiente escuro — só quando há imagem de fundo.
   --hm2-hero-overlay é injetado inline na <section> pelo preprocess PHP;
   os stops secundários são proporcionais ao valor principal via calc(). */
body:not(.path-admin) .h2-secao--hero.h2-secao--bg-imagem::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, var(--hm2-hero-overlay, 0.78)) 0%,
    rgba(0, 0, 0, calc(var(--hm2-hero-overlay, 0.78) * 0.577)) 55%,
    rgba(0, 0, 0, calc(var(--hm2-hero-overlay, 0.78) * 0.192)) 100%
  );
  z-index: 0;
}

/* 2b. Hero com cor de fundo (sem imagem): texto adapta ao tom da paleta */
body:not(.path-admin) .h2-secao--hero.h2-secao--bg-cor:not(.h2-secao--bg-cor-escuro) .hero-titulo {
  color: var(--hm2-color-heading, #212529) !important;
}

body:not(.path-admin) .h2-secao--hero.h2-secao--bg-cor:not(.h2-secao--bg-cor-escuro) .hero-subtitulo {
  color: var(--hm2-on-surface-body, #495057) !important;
}

body:not(.path-admin) .h2-secao--hero.h2-secao--bg-cor-escuro .hero-titulo {
  color: #ffffff !important;
}

body:not(.path-admin) .h2-secao--hero.h2-secao--bg-cor-escuro .hero-subtitulo {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Botão secundário em fundo colorido claro usa a paleta, não branco translúcido */
body:not(.path-admin) .h2-secao--hero.h2-secao--bg-cor:not(.h2-secao--bg-cor-escuro) .h2-secao__ctas .btn-secondary {
  background-color: transparent !important;
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:not(.path-admin) .h2-secao--hero.h2-secao--bg-cor:not(.h2-secao--bg-cor-escuro) .h2-secao__ctas .btn-secondary:hover {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* 3. Container e col acima do overlay */
body:not(.path-admin) .h2-secao--hero > .container,
body:not(.path-admin) .h2-secao--hero > .container-fluid {
  position: relative;
  z-index: 1;
}

/* 4. Título (renderizado pela View como h1.hero-titulo) */
body:not(.path-admin) .h2-secao--hero .hero-titulo {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff !important;
  margin-bottom: 1rem;
  max-width: 680px;
}

body:not(.path-admin) .h2-secao--hero.text-center .hero-titulo {
  margin-left: auto;
  margin-right: auto;
}

/* 5. Subtítulo (renderizado pela View como p.hero-subtitulo) */
body:not(.path-admin) .h2-secao--hero .hero-subtitulo {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 600px;
}

body:not(.path-admin) .h2-secao--hero.text-center .hero-subtitulo {
  margin-left: auto;
  margin-right: auto;
}

/* 6. CTAs: flex side-by-side */
body:not(.path-admin) .h2-secao--hero .h2-secao__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0;
}

body:not(.path-admin) .h2-secao--hero.text-center .h2-secao__ctas {
  justify-content: center;
}

/* 7. Botão primário: paleta ativa */
body:not(.path-admin) .h2-secao--hero .h2-secao__ctas .btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body:not(.path-admin) .h2-secao--hero .h2-secao__ctas .btn-primary:hover {
  background-color: var(--bs-link-hover-color) !important;
  border-color: var(--bs-link-hover-color) !important;
}

/* 8. Botão secundário: branco translúcido */
body:not(.path-admin) .h2-secao--hero .h2-secao__ctas .btn-secondary {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body:not(.path-admin) .h2-secao--hero .h2-secao__ctas .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
}

/* 9. Layout lateral: texto + imagem lado a lado */
body:not(.path-admin) .h2-secao--hero-lateral {
  min-height: auto;
  height: auto;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: block !important;
}

/* Sem overlay escuro no layout lateral */
body:not(.path-admin) .h2-secao--hero-lateral::before {
  display: none;
}

/* Texto no layout lateral usa cores da paleta ativa */
body:not(.path-admin) .h2-secao--hero-lateral .hero-titulo {
  color: var(--hm2-color-heading, #212529) !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 100%;
}

body:not(.path-admin) .h2-secao--hero-lateral .hero-subtitulo {
  color: var(--hm2-on-surface-body, #495057) !important;
  font-size: clamp(0.9rem, 1.25vw, 1.1rem);
  max-width: 100%;
}

/* Coluna de texto: container query para adaptar quando a coluna encolhe */
body:not(.path-admin) .h2-secao--hero-lateral .h2-hero-lateral__texto {
  container-type: inline-size;
  container-name: hero-texto;
  min-width: 0;
}

/* Texto à direita: inverte a ordem das colunas */
body:not(.path-admin) .h2-secao--hero-lateral-texto-direita .h2-hero-lateral__row {
  flex-direction: row-reverse;
}

/* Wrapper da imagem: recorte do border-radius + sombra */
body:not(.path-admin) .h2-secao--hero-lateral .h2-hero-lateral__imagem-wrap {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Imagem ilustrativa: proporção do crop do servidor + altura máxima para caber acima da dobra */
body:not(.path-admin) .h2-secao--hero-lateral .h2-hero-lateral__img {
  width: 100%;
  max-height: 490px;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* picture herda largura do wrapper */
body:not(.path-admin) .h2-secao--hero-lateral .h2-hero-lateral__imagem-wrap picture {
  display: block;
  width: 100%;
}

/* ── Cards do hero ────────────────────────────────────────────────────────── */

/* Container de cards */
body:not(.path-admin) .h2-hero-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Card individual */
body:not(.path-admin) .h2-hero-card {
  background: #ffffff;
  border-radius: 0.625rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  flex: 1 1 200px;
  min-width: 0;
}

/* Card tipo depoimento: barra lateral colorida */
body:not(.path-admin) .h2-hero-card--depoimento {
  border-left: 3px solid var(--bs-primary);
}

/* Card tipo destaque: título em negrito com cor da paleta */
body:not(.path-admin) .h2-hero-card__titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-primary);
  margin-bottom: 0.4rem;
}

body:not(.path-admin) .h2-hero-card__corpo {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #212529;
  margin: 0;
}

body:not(.path-admin) .h2-hero-card__rodape {
  font-size: 0.8rem;
  color: var(--bs-primary);
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Posição: acima_cta — cards na coluna de texto, entre subtítulo e botões */
body:not(.path-admin) .h2-secao--hero-lateral .h2-hero-lateral__texto .h2-hero-cards--acima_cta {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

/* Posição: abaixo_texto — cards na coluna de texto, após os botões */
body:not(.path-admin) .h2-secao--hero-lateral .h2-hero-lateral__texto .h2-hero-cards--abaixo_texto {
  margin-top: 1.5rem;
}

/* Posição: sobre a imagem (desktop: absolute no rodapé do wrap) */
body:not(.path-admin) .h2-hero-lateral__imagem-col .h2-hero-cards--sobre_imagem {
  position: absolute;
  bottom: -0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: transparent;
  margin-top: 0;
}

/* Mobile: sobre_imagem cai para static */
@media (max-width: 767.98px) {
  body:not(.path-admin) .h2-hero-lateral__imagem-col .h2-hero-cards--sobre_imagem {
    position: static;
    margin-top: 0.75rem;
  }
}

/* CTAs no layout lateral usam a paleta normal */
body:not(.path-admin) .h2-secao--hero-lateral .h2-secao__ctas .btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body:not(.path-admin) .h2-secao--hero-lateral .h2-secao__ctas .btn-primary:hover {
  background-color: var(--bs-link-hover-color) !important;
  border-color: var(--bs-link-hover-color) !important;
}

body:not(.path-admin) .h2-secao--hero-lateral .h2-secao__ctas .btn-secondary {
  background-color: transparent !important;
  border: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body:not(.path-admin) .h2-secao--hero-lateral .h2-secao__ctas .btn-secondary:hover {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* Botões do lateral podem quebrar linha quando coluna de texto é estreita;
   inline-flex garante centralização vertical do texto mesmo com quebra */
body:not(.path-admin) .h2-secao--hero-lateral .h2-secao__ctas .btn {
  white-space: normal;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Container queries: adapta título, subtítulo e botões em colunas estreitas */
@container hero-texto (max-width: 380px) {
  .hero-titulo {
    font-size: clamp(1.2rem, 8cqi, 1.6rem) !important;
    margin-bottom: 0.6rem;
  }
  .hero-subtitulo {
    font-size: 0.85rem !important;
    margin-bottom: 1.25rem;
  }
  .h2-secao__ctas .btn {
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
}

/* 10. Retrato vertical: sem max-height — a imagem determina a altura da seção */
body:not(.path-admin) .h2-secao--hero-retrato-v .h2-hero-lateral__img {
  max-height: none;
  object-position: top center;
}

/* 11. Mobile */
@media (max-width: 767.98px) {
  body:not(.path-admin) .h2-secao--hero {
    height: auto;
    min-height: 380px;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  body:not(.path-admin) .h2-secao--hero.h2-secao--bg-imagem::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, var(--hm2-hero-overlay, 0.78)) 0%,
      rgba(0, 0, 0, calc(var(--hm2-hero-overlay, 0.78) * 0.641)) 100%
    );
  }
}