/**
 * Posicionamento da imagem principal nos nodes Artigo LP.
 *
 * O tema já usa um truque em 75_hm2_dobra_artigos_lp.css: o <article> é
 * flex-column e .node__content é display:contents, para permitir que o
 * "kicker" (classificação) apareça antes do título via `order`. Isso
 * funciona bem para 1 coluna, mas floats não têm efeito em itens flex
 * soltos — por isso os modos esquerda/direita agrupam imagem + classificação
 * + título + corpo + complemento numa caixa real (.artigo-lp__bloco-imagem,
 * criada via h2_factory_sections_preprocess_node()), que ocupa o lugar do
 * corpo de texto na sequência (order: 3).
 *
 * A largura da imagem (field_artigo_imagem_colunas, 3–9 de 12) é aplicada:
 * - modo colunas: via classes reais do Bootstrap (.row > .col-md-N), sem
 *   CSS customizado de grid — responsividade já vem do próprio Bootstrap.
 * - modo contorno: via custom property --artigo-lp-imagem-largura (float
 *   não é suportado pelo grid do Bootstrap, então aqui é CSS mesmo).
 */

.node--type-artigo-lp .field--name-field-artigo-imagem img {
  width: 100%;
  height: auto;
  display: block;
}

/* acima (padrão): imagem já é o primeiro item flex do article */
.artigo-imagem-acima .field--name-field-artigo-imagem {
  margin-bottom: 1.5rem;
}

/* abaixo: imagem passa a ser o último item flex do article */
.artigo-imagem-abaixo .field--name-field-artigo-imagem {
  order: 7;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* esquerda/direita: o bloco agrupado assume a posição do corpo de texto */
.artigo-imagem-esquerda .artigo-lp__bloco-imagem,
.artigo-imagem-direita .artigo-lp__bloco-imagem {
  order: 3;
  width: 100%;
}

/* --- Colunas fixas (sem contorno): .row/.col-md-N nativos do Bootstrap --- */
.artigo-lp__bloco-imagem--colunas {
  align-items: start;
}

.artigo-lp__bloco-imagem--colunas .field--name-field-artigo-imagem {
  margin-bottom: 0;
}

/* --- Contorno: texto flui ao redor da imagem (ideal para textos longos) --- */
.artigo-lp__bloco-imagem--contorno {
  --artigo-lp-imagem-largura: 58.33%;
}

.artigo-imagem-esquerda .artigo-lp__bloco-imagem--contorno .field--name-field-artigo-imagem {
  float: left;
  width: var(--artigo-lp-imagem-largura);
  margin: 0 2rem 1rem 0;
}

.artigo-imagem-direita .artigo-lp__bloco-imagem--contorno .field--name-field-artigo-imagem {
  float: right;
  width: var(--artigo-lp-imagem-largura);
  margin: 0 0 1rem 2rem;
}

.artigo-lp__bloco-imagem--contorno::after {
  content: "";
  display: block;
  clear: both;
}

/* Cards "abaixo do texto" ficam dentro do bloco (ver
   h2_factory_sections_preprocess_node). No modo contorno eles não devem
   tentar contornar a imagem junto com o texto — sempre voltam à largura
   total do bloco, abaixo da imagem. */
.artigo-lp__bloco-imagem--contorno .field--name-field-artigo-cards {
  clear: both;
}

/* Mobile: o modo contorno empilha manualmente (float não empilha sozinho).
   O modo colunas já empilha sozinho via .col-md-N do próprio Bootstrap. */
@media (max-width: 767.98px) {
  .artigo-lp__bloco-imagem--contorno .field--name-field-artigo-imagem {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem 0;
  }
}

/* --- Posição dos cards (field_artigo_cards_posicao) ---
   "abaixo_texto": no modo esquerda/direita os cards já são movidos para
   dentro do bloco de texto via preprocess (ficam restritos à largura da
   coluna). Nos modos acima/abaixo não há bloco separado — cards já nascem
   entre o complemento e os CTAs (order: 5 do tema), que é naturalmente
   "abaixo do texto"; nada a fazer aqui.
   "abaixo_tudo" (padrão): nos modos acima/abaixo, cards vão para depois
   dos CTAs — nos modos esquerda/direita já ficam fora do bloco por padrão
   (largura total, abaixo da imagem+texto), também nada a fazer aqui. */
.artigo-imagem-acima.artigo-cards-posicao-abaixo_tudo .field--name-field-artigo-cards,
.artigo-imagem-abaixo.artigo-cards-posicao-abaixo_tudo .field--name-field-artigo-cards {
  /* !important necessário: a regra do tema (75_hm2_dobra_artigos_lp.css)
     usa `body:not(.path-admin) .node--type-artigo-lp .field--name-field-artigo-cards`,
     que tem mais especificidade que este seletor por causa do `body:not()`. */
  order: 8 !important;
  margin-top: 1.5rem;
}

/* --- Tokens contextuais para artigos LP ---
   Cascata em 3 níveis. O preprocess V8 (h2_factory_sections) adiciona
   h2-contrast-dark-text (bg claro → texto escuro) ou h2-contrast-light-text
   (bg escuro → texto claro) na seção quando field_secao_bg_color está definido.
   Artigos com bg próprio (field_artigo_bg → lp-fundo-X no <article>) usam
   seletores de especificidade igual mas posição posterior → sempre vencem.

   Nível 1: padrão — fundo branco/claro (Bootstrap default)
   Nível 2: seção declara bg escuro → h2-contrast-light-text
   Nível 3: artigo tem bg próprio → lp-fundo-4/5/6 (definidos abaixo)
*/

/* Nível 1 — padrão: fundo claro (página branca / Bootstrap default) */
body:not(.path-admin) .node--type-artigo-lp {
  --hm2-on-surface:             #111827;
  --hm2-on-surface-muted:       #6b7280;
  --hm2-on-surface-title:       var(--hm2-heading-color, #111827);
  --hm2-on-surface-card-bg:     #ffffff;
  --hm2-on-surface-card-border: #e2e8f0;
  --hm2-on-surface-card-shadow: rgba(0, 0, 0, 0.06);
  --hm2-on-surface-accent:      var(--bs-primary, #1a56db);
  --hm2-on-surface-divider:     #e2e8f0;
  color: #111827;
}

/* Nível 2 — seção com bg escuro: preprocess adicionou h2-contrast-light-text */
body:not(.path-admin) .h2-contrast-light-text .node--type-artigo-lp {
  --hm2-on-surface:             #ffffff;
  --hm2-on-surface-muted:       rgba(255, 255, 255, 0.72);
  --hm2-on-surface-title:       #ffffff;
  --hm2-on-surface-card-bg:     rgba(255, 255, 255, 0.06);
  --hm2-on-surface-card-border: rgba(255, 255, 255, 0.18);
  --hm2-on-surface-card-shadow: rgba(0, 0, 0, 0.25);
  --hm2-on-surface-accent:      rgba(255, 255, 255, 0.90);
  --hm2-on-surface-divider:     rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* --- Fundo de seção (field_artigo_bg) ---
   A classe lp-fundo-X é adicionada ao <article> pelo preprocess. Para o
   fundo se estender além das bordas do .container (full-bleed) SEM quebrar
   o grid Bootstrap interno, usamos ::before como camada de fundo: ele
   cresce para as bordas do viewport via left/right 50% + margin -50vw,
   enquanto o box model do <article> permanece intacto (sem padding/margin
   horizontal no elemento pai que distorceria os .col-md-N filhos). */
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-4,
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-5,
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-6 {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

body:not(.path-admin) .node--type-artigo-lp.lp-fundo-4::before,
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-5::before,
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-6::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
}

body:not(.path-admin) .node--type-artigo-lp.lp-fundo-4::before {
  background-color: var(--hm2-surface-light, #f0f4f8);
}
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-5::before {
  background-color: var(--hm2-surface-medium, #e2e8f0);
}
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-6::before {
  background-color: var(--hm2-surface-dark, #1e3a5f);
}

/* Tokens de contraste por fundo do artigo — garantem independência do
   contexto da secao_modular pai. lp-fundo-4/5 (claros) copiam os tokens
   de .secao-site claro; lp-fundo-6 (escuro) inverte para texto branco. */
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-4,
body:not(.path-admin) .node--type-artigo-lp.lp-fundo-5 {
  --hm2-on-surface:             #111827;
  --hm2-on-surface-muted:       #6b7280;
  --hm2-on-surface-title:       var(--hm2-heading-color, #0c2461);
  --hm2-on-surface-card-bg:     #ffffff;
  --hm2-on-surface-card-border: #e2e8f0;
  --hm2-on-surface-card-shadow: rgba(26, 86, 219, 0.06);
  --hm2-on-surface-accent:      var(--bs-primary, #1a56db);
  --hm2-on-surface-divider:     #e2e8f0;
  color: #111827;
}

body:not(.path-admin) .node--type-artigo-lp.lp-fundo-6 {
  --hm2-on-surface:             #ffffff;
  --hm2-on-surface-muted:       rgba(255, 255, 255, 0.72);
  --hm2-on-surface-title:       #ffffff;
  --hm2-on-surface-card-bg:     rgba(255, 255, 255, 0.06);
  --hm2-on-surface-card-border: rgba(255, 255, 255, 0.18);
  --hm2-on-surface-card-shadow: rgba(0, 0, 0, 0.25);
  --hm2-on-surface-accent:      rgba(255, 255, 255, 0.90);
  --hm2-on-surface-divider:     rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* --- Formato dos cards (field_artigo_cards_borda / _borda_estilo) ---
   Aplicado via h2_factory_sections_preprocess_paragraph() usando utilities
   reais do Bootstrap5 (.border-0, .rounded-0, .rounded-4, .rounded-circle,
   .p-0, .text-start). O único ajuste que não existe pronto no Bootstrap é
   forçar proporção 1:1 + centralizar o conteúdo para o círculo ficar redondo
   de verdade (o Bootstrap só define o border-radius, não a proporção). */
.artigo-cards-circular {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}