/**
 * AC | Section — wrapper que constrange filhos ao grid do tema (1104px)
 * e opcionalmente adiciona a barra lateral amarela (espelhando os Frames
 * "Frame 128/130" do Figma).
 */

.ac-section {
  position: relative;
  margin: 0;
  /* Recorta o full-bleed à direita dos filhos (ex.: carrossel cujo __scroll
   * estende via margin-right negativo com 100vw — que inclui a scrollbar) na
   * borda da seção, evitando scroll horizontal na página. `clip` (não `hidden`)
   * não cria scroll-container → não quebra position:sticky; overflow-y fica visible. */
  overflow-x: clip;
}

/* --- Mancha decorativa de fundo (opcional) ---
 * Mesmo sistema das manchas (fill #FFD16C + stroke), mas com opacity 0.5 e
 * mix-blend-mode luminosity pra ficar sutil/dessaturada sobre o fundo da seção
 * (espelha o export do Figma). overflow:hidden recorta o que extrapola. */
/* `clip` (não `hidden`) recorta a mancha que extrapola SEM virar scroll-container
 * — senão quebra o position:sticky do highlight-text na section split. */
.ac-section--bg-mancha { overflow: clip; }
/* Caixa de referência da mancha: ancorada à área de conteúdo CENTRALIZADA
 * (max 1104px), NÃO ao section full-width. Assim o `left: X%` da mancha é % dessa
 * caixa (fixa acima de 1104) — a mancha PARA de "andar" pra direita conforme a
 * tela cresce e respeita a posição setada no editor. Abaixo de 1104 a caixa
 * encolhe com o viewport (a mancha acompanha, comportamento responsivo).
 * `inset:0` + `max-width` + `margin-inline:auto` = caixa centrada de altura cheia.
 * SEM z-index/opacity/transform → NÃO vira stacking context, então o
 * `mix-blend luminosity` do blob continua compondo contra o fundo da seção. */
.ac-section__bg-mancha-area {
  position: absolute;
  inset: 0;
  max-width: 1104px;
  margin-inline: auto;
  pointer-events: none;
}
/* Layer da mancha (1 por mancha): `position:absolute; inset:0` → mesma caixa da
 * `__bg-mancha-area` (1104 centrada, altura cheia da seção). Serve pra (1) isolar
 * cada mancha — vários layers se sobrepõem em inset:0, então os rails sticky NÃO
 * empilham no fluxo (cada mancha posiciona independente) — e (2) ser o bloco
 * de referência (altura cheia da seção) do rail sticky. */
.ac-section__bg-mancha-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Rail da mancha: por padrão é passthrough (inline/static, NÃO posicionado) →
 * a `.ac-section__bg-mancha` (absolute) resolve left/top/width contra o LAYER
 * (que ≡ área). Cada mancha tem o SEU rail, então o "fixa" é POR mancha (modifier
 * `--sticky`, NÃO classe na section). No modo fixa o rail vira `position: sticky`
 * e passa a ser o bloco de referência da mancha: ela gruda no mesmo offset do card
 * sticky (header + anchor-nav + 24px) e acompanha a rolagem junto com o highlight-text.
 * ⚠️ A ALTURA do rail vem INLINE (= altura da mancha, width × aspect 320/420 ou
 * 503/480 no DS) — NÃO pode ser 0: com height:0 o rail só "soltava" no fim absoluto
 * da seção, então a mancha continuava grudada lá embaixo enquanto o card (altura
 * real) já tinha soltado e subido. Com altura = altura da mancha, o rail solta
 * quando o fundo da mancha encosta no fundo do layer (≈ fundo da seção, igual ao
 * card) → a mancha sobe JUNTO no fim da seção. (NÃO usar margin negativo pra
 * colapsar o fluxo: a margin-box é o que o sticky usa de constraint — margin
 * negativo zeraria a altura efetiva e voltaria o bug; por isso o layer absolute.) */
.ac-section__bg-mancha-rail--sticky {
  position: sticky;
  display: block;
  width: 100%;
  top: calc(var(--ac-header-height, 0px) + var(--ac-anchor-nav-height, 0px) + 24px);
}
.ac-section__bg-mancha {
  position: absolute;
  /* SEM z-index aqui de propósito: um z-index (mesmo 0) tornaria este wrapper um
   * stacking context próprio e ISOLARIA o `mix-blend-mode: luminosity` do blob —
   * o blend não enxergaria o fundo da seção e a mancha renderizaria a cor cheia
   * (amarelo), em vez de dessaturar igual ao Figma (#FFD16C → ~#E1E3E6). O
   * conteúdo segue acima via `.ac-section__inner { z-index: 1 }` + ordem no DOM.
   * (O toggle "Mancha por cima" reintroduz z-index conscientemente — ali o blend
   * fica isolado, mas é combo improvável com luminosity.)
   * left/top/width vêm inline (RangeControl X/Y/Width). Altura via aspect-ratio
   * da mancha (~320:420) — a máscara fica contida. */
  aspect-ratio: 320 / 420;
  pointer-events: none;
}
/* Variante "mancha do DS (verde)" — usa o MESMO SVG auto-contido do
 * highlight-color (ds-mancha-highlight.svg: blob + fill verde 10% + dots verde
 * nobre 10% + stroke 50%, opacidade já embutida). Substitui o sistema
 * configurável (shape/fill/pattern/stroke); os ícones decorativos seguem iguais. */
.ac-section__bg-mancha--ds { aspect-ratio: 503 / 480; }
.ac-section__bg-mancha-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* O "blob" (fill+pattern+stroke) carrega a opacidade/blend da mancha; os ícones
 * decorativos ficam FORA dele (irmãos) pra manter a cor própria nítida. */
.ac-section__bg-mancha-blob { position: absolute; inset: 0; opacity: 0.5; }
.ac-section__bg-mancha-blob--solid { opacity: 1; }
/* Opcional (toggle): dessatura a mancha sobre o fundo, igual ao Figma. Combina
 * com a opacidade 0.5 do "Sutil". Sobre fundo claro/areia vira um creme
 * acinzentado; sobre fundo colorido pega a saturação do fundo. */
.ac-section__bg-mancha-blob--luminosity { mix-blend-mode: luminosity; }
.ac-section__bg-mancha-fill {
  position: absolute;
  inset: 0;
  background-color: #FFD16C;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Pattern (textura de pontinhos): mask recolorida pela COR da mancha (igual aos
 * ícones decorativos) — o SVG `pattern-N.svg` vira só a forma (alpha dos dots) e
 * a cor vem do `background-color` inline (= cor da mancha). Opacidade via
 * `opacity` inline (controle "Opacidade do pattern"). Antes era background-image
 * com a cor cinza embutida (#B9BFC6), não dava pra acompanhar a cor. */
.ac-section__bg-mancha-pattern {
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}
.ac-section__bg-mancha-stroke { position: absolute; inset: 0; line-height: 0; color: #F6A71C; }
/* Cor da borda (o SVG usa stroke="currentColor"). Verde = #0E5236 @ 50% (Figma). */
.ac-section__bg-mancha-stroke--amarelo { color: #F6A71C; }
.ac-section__bg-mancha-stroke--verde { color: rgba(14, 82, 54, 0.5); }
.ac-section__bg-mancha-stroke svg { width: 100%; height: 100%; display: block; }
.ac-section__bg-mancha-stroke svg path { fill: none; }
/* Ícones decorativos (sorriso/proteina/celula) sobre a mancha — NÍTIDOS (cor
 * própria, fora do blob com opacidade). left/top/width vêm inline (X/Y em %, W em
 * % da largura da mancha). Cor via `color` inline (ColorPalette); fallback amarelo. */
.ac-section__bg-mancha-icon {
  position: absolute;
  display: block;
  color: #F6A71C;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
  z-index: 1;
}
.ac-section__bg-mancha-icon--sorriso  { aspect-ratio: 70 / 32; }
.ac-section__bg-mancha-icon--celula   { aspect-ratio: 58 / 56; }
.ac-section__bg-mancha-icon--proteina { aspect-ratio: 76 / 30; }
/* O conteúdo fica acima da mancha. */
.ac-section--bg-mancha .ac-section__inner { position: relative; z-index: 1; }

/* --- Mancha "por cima" (toggle backgroundManchaOverflow) ---
 * Por padrão a mancha é recortada (overflow:clip) e fica atrás do conteúdo.
 * Com o toggle ligado ela: (1) vaza pra fora da seção na vertical — mantém o
 * recorte horizontal pra não criar scroll lateral — e (2) sobe o z-index pra
 * ficar acima do conteúdo da própria seção E da seção seguinte (a seção inteira
 * vira um stacking context elevado). Uso típico: mancha posicionada no bottom
 * aparecendo no topo da seção de baixo.
 * ⚠️ z-index 3: fica acima da seção SEGUINTE, mas o `ac-hero` (z-index:4) está
 * ACIMA de propósito — quando o hero está logo acima desta section, a base da
 * mancha do hero precisa sangrar por cima dela (senão a section tapava o hero). */
.ac-section--mancha-overflow.ac-section--bg-mancha {
  overflow: clip visible;
  z-index: 3;
}
.ac-section--mancha-overflow .ac-section__bg-mancha { z-index: 2; }

/* --- Mancha "por cima" TAMBÉM da seção ACIMA (toggle backgroundManchaOverflowUp) ---
 * O overflow normal põe z-index:3 NA SEÇÃO → ela vira stacking context abaixo do
 * `ac-hero` (z-index:4), então a mancha (z-index:2 dentro) só sobressai pra BAIXO.
 * Aqui a seção deixa de ser stacking context (z-index:auto) e a mancha sobe pro
 * stacking context RAIZ num z-index acima do hero → vaza por cima da seção de cima
 * (o hero) E da de baixo. O bg/conteúdo da seção seguem baixos (não viram stacking
 * context elevado), então a mancha do PRÓPRIO hero continua passando por cima do
 * conteúdo/bg desta seção (comportamento que deve permanecer). */
.ac-section--mancha-overflow-up.ac-section--bg-mancha {
  z-index: auto;
}
.ac-section--mancha-overflow-up .ac-section__bg-mancha {
  z-index: 5;
}

/* Esconder mancha no mobile (toggle backgroundManchaHideMobile). */
@media (max-width: 768px) {
  .ac-section__bg-mancha--hide-mobile { display: none !important; }
  /* Posição/tamanho próprios da mancha principal no mobile (toggle "Ajustar no
   * mobile"). Vars setadas inline no elemento; !important vence o left/top/width
   * inline do desktop. Só a principal recebe a classe --mobile-custom. */
  .ac-section__bg-mancha--mobile-custom {
    left: var(--ac-mancha-mx) !important;
    top: var(--ac-mancha-my) !important;
    width: var(--ac-mancha-mw) !important;
  }
}
/* padding top/bottom independentes (tokens DS). */
.ac-section--pt-0  { padding-top: 0; }
.ac-section--pt-24 { padding-top: 24px; }
.ac-section--pt-32 { padding-top: 32px; }
.ac-section--pt-40 { padding-top: 40px; }
.ac-section--pt-48 { padding-top: 48px; }
.ac-section--pt-56 { padding-top: 56px; }
.ac-section--pt-80 { padding-top: 80px; }
.ac-section--pb-0  { padding-bottom: 0; }
.ac-section--pb-24 { padding-bottom: 24px; }
.ac-section--pb-32 { padding-bottom: 32px; }
.ac-section--pb-40 { padding-bottom: 40px; }
.ac-section--pb-48 { padding-bottom: 48px; }
.ac-section--pb-56 { padding-bottom: 56px; }
.ac-section--pb-80 { padding-bottom: 80px; }

/* O section é um wrapper estrutural (max-width + gutter).
 * Gutter nos DOIS lados: dentro da section o padding-inline próprio dos filhos
 * (text-intro, media-text, columns/big-numbers) é neutralizado, então é a
 * section que provê o respiro lateral — senão no mobile (full-width) o conteúdo
 * cola na borda esquerda. A variante --left-bar sobrescreve o padding-left. */
.ac-section__inner {
  position: relative;
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  padding-inline: var(--space-4, 16px);
}

/* Section aninhada dentro de outra section: a externa já provê o gutter lateral
 * (16px) — a interna NÃO re-adiciona, senão dobra (32px+) no mobile. A barra
 * lateral (regra mais abaixo) ainda aplica seu border + padding-left de 24px. */
.ac-section .ac-section > .ac-section__inner {
  padding-inline: 0;
}

/* Defensiva: wp-block-columns dentro do section preenche 100% do inner.
 * Anula constraints do Gutenberg core/tema legado. Usa descendant porque
 * no editor o Gutenberg injeta wrappers (.block-editor-inner-blocks,
 * .block-editor-block-list__layout) entre o inner e o columns. */
.ac-section__inner .wp-block-columns,
.ac-section__inner .wp-block-group:not(:has(> .ac-cta)) {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}
.ac-section__inner .wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
/* Row/grupo nativo (core/group) usado só pra agrupar CTAs dentro da section:
 * vira uma linha flex com o gap canônico de linha de CTA do DS (24px). Não
 * dependemos do blockGap nativo (desligado no projeto) — escopo via :has(> .ac-cta)
 * pra não afetar outros grupos. Mobile: empilha. Neutraliza só a margin
 * HORIZONTAL (margin-inline) — a margin vertical nativa do editor (Dimensões →
 * Margem) é PRESERVADA (por isso fica fora do `margin:0` da regra acima). */
.ac-section__inner .wp-block-group:has(> .ac-cta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .ac-section__inner .wp-block-group:has(> .ac-cta) {
    flex-direction: column;
    align-items: flex-start;
  }
}
.ac-section__inner .wp-block-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Feature-item card numa coluna de section = lista vertical (DS Frame 29,
 * "Prevenção corporativa"): o card faz HUG (não estica como no card-grid/
 * carrossel, onde align-items:stretch alinha por linha) + 16px entre os items.
 * Escopado a colunas que contêm feature-item, pra não afetar outros layouts. */
.ac-section__inner .wp-block-column .ac-feature-item--card {
  height: auto;
  max-width: none; /* ocupa 100% da coluna (até o gap), DS Frame 29 */
}
.ac-section__inner .wp-block-column:has(> .ac-feature-item) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Mobile: força stack das columns dentro de ac-section, independente da
 * config "Stack on mobile" do Columns (que pode estar como is-nowrap). */
@media (max-width: 768px) {
  .ac-section__inner .wp-block-columns,
  .ac-section__inner .wp-block-columns.is-not-stacked-on-mobile {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .ac-section__inner .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
/* Anula wrappers que o Gutenberg/editor injeta entre o inner e os blocos. */
.ac-section__inner > .block-editor-inner-blocks,
.ac-section__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Quando ac-media-text está aninhado em ac-section, neutralizar só o
 * gutter/largura do inner — a section.inner já constrange ao grid (1104px) e
 * provê o padding-inline. O padding-y PRÓPRIO do card é PRESERVADO: a section
 * é apenas wrapper visual (bg + largura) e quem dita o ritmo vertical são os
 * filhos. Permite uma section única envolver vários blocos com respiro entre
 * eles (a section NÃO deve setar paddingTop/Bottom nesse cenário, pra não
 * somar; default 0/0). */
.ac-section .ac-media-text__inner {
  padding-inline: 0 !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
/* Variante sem imagem: __content não precisa do padding vertical
 * (não tem altura de imagem pra acompanhar). */
.ac-media-text--no-image .ac-media-text__content {
  padding: 0 !important;
}

/* Quando dois blocos AC aparecem em sequência, neutralizar o padding-top do
 * segundo pra não duplicar com o padding-bottom do primeiro (gap único).
 *
 * IMPORTANTE: o colapso só vale quando o bloco ANTERIOR é media-text ou
 * text-intro (que têm padding-bottom próprio). NÃO colapsamos depois de uma
 * `.ac-section`, porque o paddingY da section é `none` por padrão (pb 0) —
 * colapsar o pt do bloco seguinte deixaria gap ZERO.
 *
 * EXCEÇÃO: se o segundo bloco tem bg color (--has-bg), NÃO colapsa — o user
 * quer respiro DENTRO da área colorida (frame visual). */
.ac-media-text + .ac-section:not(.ac-section--has-bg),
.ac-media-text + .ac-media-text:not(.ac-media-text--has-bg),
.ac-media-text + .ac-text-intro:not(.ac-text-intro--has-bg),
.ac-text-intro + .ac-section:not(.ac-section--has-bg),
.ac-text-intro + .ac-media-text:not(.ac-media-text--has-bg),
.ac-text-intro + .ac-text-intro:not(.ac-text-intro--has-bg) {
  padding-top: 0 !important;
}

/* Barra lateral amarela (espelha Frame 130 do Figma). */
.ac-section.ac-section--left-bar .ac-section__inner {
  border-left: 4px solid var(--ac-section-left-bar-color, #F6A71C);
  padding-left: 24px;
}
@media (max-width: 1104px) {
  .ac-section.ac-section--left-bar .ac-section__inner {
    margin-left: var(--space-4, 16px);
  }
  /* Aninhada: a externa já dá o gutter de borda — não somar outro margin. */
  .ac-section .ac-section--left-bar > .ac-section__inner {
    margin-left: 0;
  }
}

/* ─── Layout SPLIT: texto (esquerda) + highlight-text sticky (direita) ───────
 * Grid 2 colunas: os filhos normais vão pra col 1 (empilham), o
 * `ac-highlight-text` vai pra col 2 ocupando a coluna inteira e fica STICKY —
 * o texto rola e o card fica fixo até a seção acabar (efeito da pág. tipos de
 * câncer). O sticky gruda abaixo do header + anchor-nav (vars do anchor-nav). */
.ac-section--split .ac-section__inner {
  display: grid;
  /* minmax(0, …) nas duas colunas: nunca forçam largura maior que o container
   * (a coluna fixa 360px viraria overflow/scroll lateral no mobile se algo
   * impedisse o stack). Assim o grid sempre cabe na viewport. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 0 40px;
  align-items: start;
}
.ac-section--split .ac-section__inner > * {
  grid-column: 1;
  min-width: 0;
}
.ac-section--split .ac-section__inner > .ac-highlight-text {
  grid-column: 2;
  /* span = nº de linhas realmente ocupadas (quantity queries abaixo). NÃO usar
   * span gigante (1/999): o Chrome distribui a altura do highlight pelas
   * centenas de tracks implícitos vazios e a section infla (card + highlight
   * SOMADOS em vez de max). */
  grid-row: 1 / span 1;
  align-self: start;
  position: sticky;
  top: calc(var(--ac-header-height, 0px) + var(--ac-anchor-nav-height, 0px) + 24px);
}
/* Quantity queries: span = total de filhos do inner - 1 (o próprio highlight). */
.ac-section--split .ac-section__inner:has(> :nth-child(3))  > .ac-highlight-text { grid-row: 1 / span 2; }
.ac-section--split .ac-section__inner:has(> :nth-child(4))  > .ac-highlight-text { grid-row: 1 / span 3; }
.ac-section--split .ac-section__inner:has(> :nth-child(5))  > .ac-highlight-text { grid-row: 1 / span 4; }
.ac-section--split .ac-section__inner:has(> :nth-child(6))  > .ac-highlight-text { grid-row: 1 / span 5; }
.ac-section--split .ac-section__inner:has(> :nth-child(7))  > .ac-highlight-text { grid-row: 1 / span 6; }
.ac-section--split .ac-section__inner:has(> :nth-child(8))  > .ac-highlight-text { grid-row: 1 / span 7; }
.ac-section--split .ac-section__inner:has(> :nth-child(9))  > .ac-highlight-text { grid-row: 1 / span 8; }
.ac-section--split .ac-section__inner:has(> :nth-child(10)) > .ac-highlight-text { grid-row: 1 / span 9; }
.ac-section--split .ac-section__inner:has(> :nth-child(11)) > .ac-highlight-text { grid-row: 1 / span 10; }
.ac-section--split .ac-section__inner:has(> :nth-child(12)) > .ac-highlight-text { grid-row: 1 / span 11; }
.ac-section--split .ac-section__inner:has(> :nth-child(13)) > .ac-highlight-text { grid-row: 1 / span 12; }
.ac-section--split .ac-section__inner:has(> :nth-child(14)) > .ac-highlight-text { grid-row: 1 / span 13; }
.ac-section--split .ac-section__inner:has(> :nth-child(15)) > .ac-highlight-text { grid-row: 1 / span 14; }
.ac-section--split .ac-section__inner:has(> :nth-child(16)) > .ac-highlight-text { grid-row: 1 / span 15; }
.ac-section--split .ac-section__inner:has(> :nth-child(17)) > .ac-highlight-text { grid-row: 1 / span 16; }
.ac-section--split .ac-section__inner:has(> :nth-child(18)) > .ac-highlight-text { grid-row: 1 / span 17; }
.ac-section--split .ac-section__inner:has(> :nth-child(19)) > .ac-highlight-text { grid-row: 1 / span 18; }
.ac-section--split .ac-section__inner:has(> :nth-child(20)) > .ac-highlight-text { grid-row: 1 / span 19; }
.ac-section--split .ac-section__inner:has(> :nth-child(21)) > .ac-highlight-text { grid-row: 1 / span 20; }
.ac-section--split .ac-section__inner:has(> :nth-child(22)) > .ac-highlight-text { grid-row: 1 / span 21; }
.ac-section--split .ac-section__inner:has(> :nth-child(23)) > .ac-highlight-text { grid-row: 1 / span 22; }
.ac-section--split .ac-section__inner:has(> :nth-child(24)) > .ac-highlight-text { grid-row: 1 / span 23; }
.ac-section--split .ac-section__inner:has(> :nth-child(25)) > .ac-highlight-text { grid-row: 1 / span 24; }

@media (max-width: 900px) {
  /* Empilha em FLEX (não grid): as quantity-queries do desktop
   * (`grid-row: 1 / span N`, especificidade 0,4,0 por causa do `:has()`) venciam
   * o reset `grid-row: auto` e mantinham o highlight nas primeiras linhas →
   * aparecia ANTES do conteúdo no mobile. Flex ignora grid-row e respeita a
   * ordem do DOM (conteúdo → highlight). 24px entre os blocos. */
  .ac-section--split .ac-section__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .ac-section--split .ac-section__inner > .ac-highlight-text {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  /* Empilhado: o card deixa de ser sticky, então a mancha também volta ao normal
   * (rail passthrough → mancha resolve left/top/width contra o layer de novo).
   * `!important` pra vencer a altura inline do rail sticky. */
  .ac-section__bg-mancha-rail--sticky {
    position: static;
    height: auto !important;
  }
}

/* cta-button como filho DIRETO do __inner (ex.: cols2/split): o item de grid
 * sofre blockification (inline-flex→flex) e estica pra preencher a coluna.
 * justify-self:start faz a pílula voltar a "hug" o texto (à esquerda). Em
 * layout não-grid o justify-self é ignorado, então é seguro/global. */
.ac-section__inner > .ac-cta { justify-self: start; }

/* ── Layout "2 colunas" (genérico, sem highlight) ─────────────────────
 * Cada bloco filho da section vira uma coluna (ex.: text-intro + card-grid).
 * 2 filhos = lado a lado; align ao topo. Mobile (≤900px): empilha. */
.ac-section--cols2 .ac-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start; /* topo: o subheader/título colam no TOPO, alinhados com o
                         topo dos cards (sem espaço vazio acima, como o Figma). */
}
/* Quando a coluna direita é um card-grid, ela faz HUG no tamanho do grid
 * (2 cards de 296px + gap 24 = 616px, DS) em vez de 1fr — o card-grid 1fr/1fr
 * interno entrega 296px por card e o text-intro toma o resto da largura. */
.ac-section--cols2 .ac-section__inner:has(> .ac-card-grid) {
  grid-template-columns: minmax(0, 1fr) fit-content(616px);
}
/* Coluna direita = imagem nativa (core/image → figure.wp-block-image): o texto
 * fica capado em 680px e a imagem é empurrada pra direita (space-between), em
 * vez do grid simétrico. Atende "texto à esquerda (680) + ilustração à direita". */
.ac-section--cols2 .ac-section__inner:has(> figure.wp-block-image) {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.ac-section--cols2 .ac-section__inner:has(> figure.wp-block-image) > :not(figure.wp-block-image) {
  flex: 0 1 680px;
  min-width: 0;
}
.ac-section--cols2 .ac-section__inner:has(> figure.wp-block-image) > figure.wp-block-image {
  flex: 0 0 auto;
  margin: 0;
}

/* Alinhamento vertical das colunas (cols2 e split): "Centro" → align-items
 * center. Default (sem a classe) segue no topo. */
.ac-section--valign-center .ac-section__inner {
  align-items: center;
}

@media (max-width: 900px) {
  .ac-section--cols2 .ac-section__inner,
  .ac-section--cols2 .ac-section__inner:has(> .ac-card-grid) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ac-section--cols2 .ac-section__inner:has(> figure.wp-block-image) {
    flex-direction: column;
  }
  .ac-section--cols2 .ac-section__inner:has(> figure.wp-block-image) > :not(figure.wp-block-image),
  .ac-section--cols2 .ac-section__inner:has(> figure.wp-block-image) > figure.wp-block-image {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Ordem invertida no empilhamento mobile (2ª coluna em cima): flex
   * column-reverse vence o grid 1fr das duas variantes (cols2 e split). */
  .ac-section--mobile-reverse.ac-section--cols2 .ac-section__inner,
  .ac-section--mobile-reverse.ac-section--split .ac-section__inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }
}