/* ==========================================================================
   HM2 FACTORY: DOBRA HERO PREMIUM - CROSS-BROWSER ESTÁVEL (SEM :has)
   ========================================================================== */

/* 1. Oculta h2 redundantes na seção Hero */
body:not(.path-admin) .node--type-landing-page .node__content > .layout.lp-hero h2 {
  display: none !important;
}

/* 2. SEÇÃO LAYOUT BUILDER (Forçando Full-Bleed estruturalmente) */
body:not(.path-admin) .node--type-landing-page .node__content > .layout.lp-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
  background-color: #0f172a !important; /* Proteção de fundo */
}

/* 3. Ajusta o grid interno e o Bloco para assumirem o espaço total */
body:not(.path-admin) .node--type-landing-page .node__content > .layout.lp-hero .layout__region,
body:not(.path-admin) .node--type-landing-page .node__content > .layout.lp-hero .block {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  /* Altura da dobra */
  height: 40vw !important;
  min-height: 500px !important;
}

/* 4. Enquadramento da Imagem de Fundo Absoluta */
body:not(.path-admin) .field--name-field-hero-imagem {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;

  /* Película para dar leitura aos textos */
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.3) 100%) !important;
}

/* 5. Tratamento Imagem e tag <picture> nativa do Drupal */
body:not(.path-admin) .field--name-field-hero-imagem picture,
body:not(.path-admin) .field--name-field-hero-imagem img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: relative !important;
  z-index: -1 !important; /* Joga a imagem física para trás da película */
}

/* 6. Textos e CTAs: Isolamento e Alinhamento */
body:not(.path-admin) .field--name-field-hero-titulo,
body:not(.path-admin) .field--name-field-hero-subtitulo,
body:not(.path-admin) .field--name-field-hero-cta-botao-primario,
body:not(.path-admin) .field--name-field-hero-cta-botao-secundario {
  position: relative !important;
  z-index: 99 !important;
  max-width: 650px !important;
  padding-right: 20px !important;

  /* Alinhamento dinâmico simulando o grid nativo */
  margin-left: max(15px, calc((100vw - 1140px) / 2)) !important;
}

/* 7. Oculta labels nativas de campos numéricos/texto */
body:not(.path-admin) .field--name-field-hero-titulo .field__label,
body:not(.path-admin) .field--name-field-hero-subtitulo .field__label {
  display: none !important;
}

/* 8. Botões CTA: coloca lado a lado e remove max-width herdado do rule 6 */
body:not(.path-admin) .field--name-field-hero-cta-botao-primario,
body:not(.path-admin) .field--name-field-hero-cta-botao-secundario {
  display: inline-block !important;
  max-width: none !important;
  padding-right: 0 !important;
  margin-right: 1rem !important;
  margin-top: 0.5rem !important;
}

/* 9. Botão primário: usa cor primária da paleta ativa */
body:not(.path-admin) .field--name-field-hero-cta-botao-primario a {
  display: inline-block;
  background-color: var(--bs-primary, #9d7b53);
  color: #ffffff !important;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 2px solid var(--bs-primary, #9d7b53);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body:not(.path-admin) .field--name-field-hero-cta-botao-primario a:hover {
  background-color: var(--bs-link-hover-color, #7a5e3a);
  border-color: var(--bs-link-hover-color, #7a5e3a);
}

/* 10. Botão secundário: branco semitransparente com borda branca */
body:not(.path-admin) .field--name-field-hero-cta-botao-secundario a {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 2px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

body:not(.path-admin) .field--name-field-hero-cta-botao-secundario a:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: #ffffff;
}