/**
 * AC | Media + Text — estilos frontend.
 * Tokens extraídos do Figma (Design System vSHIFT, componente "Block").
 */

.ac-media-text {
  --ac-mt-color-subheader: #774900;
  --ac-mt-color-title: #242424;
  --ac-mt-color-body: #404040;
  --ac-mt-color-eyebrow-mark: #F6A71C;
  --ac-mt-shadow-card: 0px 3px 4px -2px rgba(0, 0, 0, 0.08);
  --ac-mt-radius-card: 16px;
  --ac-mt-gap: 24px;

  position: relative;
  padding: 56px 0;
}

/* Padding vertical separado (tokens DS). */
.ac-media-text--pt-0  { padding-top: 0; }
.ac-media-text--pt-24 { padding-top: 24px; }
.ac-media-text--pt-32 { padding-top: 32px; }
.ac-media-text--pt-40 { padding-top: 40px; }
.ac-media-text--pt-48 { padding-top: 48px; }
.ac-media-text--pt-56 { padding-top: 56px; }
.ac-media-text--pt-80 { padding-top: 80px; }
.ac-media-text--pb-0  { padding-bottom: 0; }
.ac-media-text--pb-24 { padding-bottom: 24px; }
.ac-media-text--pb-32 { padding-bottom: 32px; }
.ac-media-text--pb-40 { padding-bottom: 40px; }
.ac-media-text--pb-48 { padding-bottom: 48px; }
.ac-media-text--pb-56 { padding-bottom: 56px; }
.ac-media-text--pb-80 { padding-bottom: 80px; }

/* Barra lateral amarela (wrapper "Frame 128" do Figma: border-left 4px + padding-left 24px).
 * Aplicada no .inner (max-width centralizado) pra ficar junto do conteúdo,
 * não no extremo esquerdo da página. */
.ac-media-text.ac-media-text--left-bar {
  --ac-mt-left-bar-color: #F6A71C;
}
/* Barra na coluna de texto, com altura = conteúdo de texto (não estica até a
 * altura da linha do grid, que é a imagem). align-self:start impede o stretch e
 * o padding-y zerado faz a barra bater EXATAMENTE a altura do texto. */
.ac-media-text.ac-media-text--left-bar .ac-media-text__content {
  border-left: 4px solid var(--ac-mt-left-bar-color);
  padding: 0 0 0 24px !important;
  align-self: start;
}

/* Barra SÓ na coluna de texto (leftBarPosition: content) — útil quando a imagem
 * fica à esquerda e a barra deve acompanhar o texto à direita. */
.ac-media-text.ac-media-text--left-bar-on-text {
  --ac-mt-left-bar-color: #F6A71C;
}
.ac-media-text.ac-media-text--left-bar-on-text .ac-media-text__content {
  border-left: 4px solid var(--ac-mt-left-bar-color);
  /* Zera o padding vertical do __content (base é 24px 0) pra a barra ter
   * EXATAMENTE a altura do texto; mantém o gap de 24px barra→texto (DS). */
  padding: 0 0 0 24px !important;
  /* Não estica até a altura da linha do grid (imagem mais alta) — a barra
   * acompanha só o conteúdo de texto. */
  align-self: start;
}

.ac-media-text__inner {
  position: relative;
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  padding-inline: var(--space-4, 16px);
  display: grid;
  gap: var(--ac-mt-gap);
  align-items: center;
}

/* Alinhamento vertical da imagem com o texto: "topo" alinha a imagem ao
 * início do conteúdo (em vez de centralizar quando o texto é mais alto). */
.ac-media-text--valign-top .ac-media-text__inner { align-items: start; }

/* Proporções: 1/2 = imagem ocupa metade; 1/3 = imagem 1/3; 1/4 = imagem 1/4. */
.ac-media-text--size-half    .ac-media-text__inner { grid-template-columns: 1fr 1fr; }
.ac-media-text--size-third   .ac-media-text__inner { grid-template-columns: 1fr 2fr; }
.ac-media-text--size-quarter .ac-media-text__inner { grid-template-columns: 1fr 3fr; }
.ac-media-text--size-banner  .ac-media-text__inner { grid-template-columns: 1fr 1fr; }

/* Banner: imagem em faixa de ALTURA FIXA 200px (DS), não aspect 16/10.
 * Radius 16px herdado do base (--ac-mt-radius-card). */
.ac-media-text--size-banner .ac-media-text__image {
  aspect-ratio: auto;
  height: 200px;
}

/* Lado da imagem. Por padrão a imagem vem antes do conteúdo (esquerda).
 * Quando o lado é "direita", invertemos a ordem via grid order. */
.ac-media-text--img-right .ac-media-text__media   { order: 2; }
.ac-media-text--img-right .ac-media-text__content { order: 1; }
.ac-media-text--img-right.ac-media-text--size-third .ac-media-text__inner { grid-template-columns: 2fr 1fr; }
.ac-media-text--img-left.ac-media-text--size-third  .ac-media-text__inner { grid-template-columns: 1fr 2fr; }
.ac-media-text--img-right.ac-media-text--size-quarter .ac-media-text__inner { grid-template-columns: 3fr 1fr; }
.ac-media-text--img-left.ac-media-text--size-quarter  .ac-media-text__inner { grid-template-columns: 1fr 3fr; }

/* Layout empilhado (card vertical): imagem em cima, conteúdo abaixo.
 * Coluna única independente de img-side/size. */
.ac-media-text--layout-stacked .ac-media-text__inner {
  grid-template-columns: 1fr;
  gap: 0; /* o respiro imagem→texto vem do padding-top do __content (24px), sem somar gap */
  align-items: start;
  align-content: start;
}
.ac-media-text--layout-stacked .ac-media-text__media   { order: 0; align-self: start; }
.ac-media-text--layout-stacked .ac-media-text__content { order: 1; }
/* Card preenche a altura da célula (linhas alinhadas); a imagem NÃO estica
 * (mantém aspect-ratio) e o conteúdo fica no topo — espaço sobra embaixo. */
.ac-card-grid .ac-media-text,
.ac-media-text--layout-stacked { height: 100%; }
.ac-media-text--layout-stacked .ac-media-text__image { height: auto; }

/* Variante "Block-highlight" do DS (996:303): imagem com altura fixa 280px +
 * card de texto (branco, Elevation/md, radius 16) logo abaixo, com 8px de gap
 * (o `gap: 8px -32px` do DS é row com wrap: 8px = gap vertical entre as linhas
 * imagem→card; o -32px é o gap horizontal, sem efeito após a quebra).
 * Especificidade dobrada (.ac-media-text.ac-media-text--highlight) pra vencer
 * a regra base `.ac-media-text .ac-media-text__content { padding: 24px 0 }`,
 * que vem depois no arquivo e tem a mesma especificidade — senão zerava o
 * padding lateral e o texto colava na borda do card. */
.ac-media-text--layout-stacked.ac-media-text--highlight .ac-media-text__image {
  aspect-ratio: auto;
  height: 280px;
  box-shadow: none;
}
/* GAP imagem↔card via row-gap no grid do __inner (margin-top no item não rende
 * o espaço no grid stacked, que tem gap:0). Escopado ao --highlight + fallback 0
 * = ZERO efeito nos media-text de outras LPs (que não usam highlight). */
.ac-media-text--layout-stacked.ac-media-text--highlight .ac-media-text__inner {
  row-gap: var(--ac-mt-highlight-gap, 0px);
}
.ac-media-text.ac-media-text--highlight .ac-media-text__content {
  padding: 24px !important;
  background: #FFFFFF;
  border-radius: var(--ac-mt-radius-card);
  box-shadow: 0px 12px 16px -2px rgba(0, 0, 0, 0.08); /* Elevation/md */
}

/* Mídia. */
.ac-media-text__media {
  position: relative;
  width: 100%;
}
.ac-media-text__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--ac-mt-radius-card);
  border: 1px solid #D9D9D9; /* DS: stroke #D9D9D9 1px na imagem */
  box-shadow: var(--ac-mt-shadow-card);
  background-color: #E2E5E9;
}

/* Proporção (aspect ratio) da imagem — sobrescreve o 16/10 base.
 * Prefixo .ac-media-text dá specificity (0,2,0) pra vencer também o
 * 16/9 mobile e o 16/10 base (ambos 0,1,0). Não aplicado no banner (twig
 * só adiciona estas classes quando img_size != banner). */
.ac-media-text .ac-media-text__image--ratio-16-10 { aspect-ratio: 16 / 10; }
.ac-media-text .ac-media-text__image--ratio-13-10 { aspect-ratio: 13 / 10; } /* DS Block 524×404 */
.ac-media-text .ac-media-text__image--ratio-4-3   { aspect-ratio: 4 / 3; }
/* Ratio "fill" (DS Block): a imagem acompanha a ALTURA da coluna de texto —
 * a coluna da mídia estica na linha do grid e a imagem preenche 100%. */
.ac-media-text .ac-media-text__image--ratio-fill {
  aspect-ratio: auto;
  height: 100%;
  min-height: 240px; /* piso quando o texto é curto. */
}
.ac-media-text .ac-media-text__media:has(.ac-media-text__image--ratio-fill) {
  align-self: stretch;
}
.ac-media-text .ac-media-text__image--ratio-1-1   { aspect-ratio: 1 / 1; }
.ac-media-text .ac-media-text__image--ratio-3-4   { aspect-ratio: 3 / 4; }
.ac-media-text .ac-media-text__image--ratio-4-5   { aspect-ratio: 4 / 5; }

/* Ajuste "contain": mostra a ilustração inteira sem cortar; sem card/sombra/bg
 * (a imagem flutua sobre o fundo da seção, como no Figma das ilustrações). */
.ac-media-text .ac-media-text__image--fit-contain {
  background-size: contain;
  background-color: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.ac-media-text__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA0A6;
  font-size: 13px;
  font-family: Arial, sans-serif;
}

/* Conteúdo. !important porque o tema legado injeta margens em headings/p. */
.ac-media-text .ac-media-text__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 24px 0 !important;
  margin: 0 !important;
}

/* Marca decorativa (a "Proteína" do DS — pílula amarela sobre o subheader).
 * Spec Figma: 20×8 com rounded full. */
.ac-media-text__eyebrow-mark {
  display: block;
  width: 20px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--ac-mt-color-eyebrow-mark);
  margin: 0;
}

.ac-media-text .ac-media-text__subheader {
  margin: 0 !important;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-mt-color-subheader);
}

.ac-media-text .ac-media-text__title {
  margin: 0 !important;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ac-mt-color-title);
}

/* Tamanhos de título (Card-title/md, Card-title/lg, Heading/H3 do DS). */
.ac-media-text--title-sm .ac-media-text__title { font-size: 18px; line-height: 1.3; }
.ac-media-text--title-md .ac-media-text__title { font-size: 20px; line-height: 1.3; }
.ac-media-text--title-lg .ac-media-text__title { font-size: 24px; line-height: 1.2; }
/* Tamanho seção (Heading/H2 do DS) — usado em seções texto+imagem. */
.ac-media-text--title-32 .ac-media-text__title { font-size: 32px; line-height: 1.2; }

/* Sem imagem: coluna única (mesmo componente do DS com Show image=false). */
.ac-media-text--no-image .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--size-half .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--size-third .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--size-quarter .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--img-right.ac-media-text--size-third .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--img-left.ac-media-text--size-third .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--img-right.ac-media-text--size-quarter .ac-media-text__inner,
.ac-media-text--no-image.ac-media-text--img-left.ac-media-text--size-quarter .ac-media-text__inner {
  grid-template-columns: 1fr;
}

.ac-media-text .ac-media-text__text {
  margin: 0 !important;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ac-mt-color-body);
}

/* Link inline no corpo (core/link) — sublinhado, herda a cor do texto. */
.ac-media-text .ac-media-text__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ac-media-text .ac-media-text__text a:hover { opacity: 0.8; }

/* Lista com marcadores (showList). */
.ac-media-text .ac-media-text__list {
  margin: 0 !important;
  padding-left: 20px;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ac-mt-color-body);
}
.ac-media-text .ac-media-text__list li { margin-bottom: 8px; }

.ac-media-text__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Campo de conteúdo inline (InnerBlocks: parágrafos, listas e CTA na ordem do
 * editor). Fluxo de bloco: parágrafos/listas empilham; CTAs (.ac-cta é
 * inline-flex) ficam lado a lado quando adjacentes. */
.ac-media-text .ac-media-text__body {
  margin-top: 8px;
}
.ac-media-text .ac-media-text__body > * {
  margin-top: 0;
  margin-bottom: 16px; /* paragraphSpacing do DS (Body/md/400) */
}
.ac-media-text .ac-media-text__body > *:last-child {
  margin-bottom: 0;
}
/* Tipografia do corpo (Body/md/400 do DS: Arial 16px / 160%) pros parágrafos
 * e listas nativos. */
.ac-media-text .ac-media-text__body p,
.ac-media-text .ac-media-text__body li {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-mt-color-body);
}
.ac-media-text .ac-media-text__body ul,
.ac-media-text .ac-media-text__body ol {
  padding-left: 20px;
}
/* list-style explícito: o editor do Gutenberg zera os bullets do core/list
 * (padding/list-style), então os marcadores sumiam no canvas. Front + editor. */
.ac-media-text .ac-media-text__body ul { list-style: disc; }
.ac-media-text .ac-media-text__body ol { list-style: decimal; }
.ac-media-text .ac-media-text__body li { margin-bottom: 8px; }
.ac-media-text .ac-media-text__body li:last-child { margin-bottom: 0; }
.ac-media-text .ac-media-text__body p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Espaço entre CTAs adjacentes (inline-flex no fluxo de bloco). */
.ac-media-text .ac-media-text__body .ac-cta + .ac-cta { margin-left: 8px; }

/* Mobile: empilha (imagem em cima, conteúdo embaixo) independente da configuração. */
@media (max-width: 768px) {
  .ac-media-text__inner,
  .ac-media-text--size-half .ac-media-text__inner,
  .ac-media-text--size-third .ac-media-text__inner,
  .ac-media-text--size-quarter .ac-media-text__inner,
  .ac-media-text--size-banner .ac-media-text__inner,
  .ac-media-text--img-right.ac-media-text--size-third .ac-media-text__inner,
  .ac-media-text--img-left.ac-media-text--size-third .ac-media-text__inner,
  .ac-media-text--img-right.ac-media-text--size-quarter .ac-media-text__inner,
  .ac-media-text--img-left.ac-media-text--size-quarter .ac-media-text__inner {
    grid-template-columns: 1fr;
  }
  .ac-media-text--img-right .ac-media-text__media,
  .ac-media-text--img-right .ac-media-text__content {
    order: initial;
  }
  .ac-media-text__image { aspect-ratio: 16 / 9; }
  /* Banner mantém a faixa de 200px também no mobile (não vira 16/9). */
  .ac-media-text--size-banner .ac-media-text__image { aspect-ratio: auto; height: 200px; }
  /* Banner: CTA com largura fixa 239px no mobile (DS). */
  .ac-media-text--size-banner .ac-media-text__ctas .ac-cta { width: 239px; max-width: 100%; justify-content: center; }
  /* Banner: gap imagem→título = 16px no mobile (grid 16 + content sem padding-top). */
  .ac-media-text--size-banner .ac-media-text__inner { gap: 16px; }
  .ac-media-text--size-banner .ac-media-text__content { padding-top: 0 !important; }
  /* Título responsivo (DS): cada nível reduz no mobile. lg 24→20, md 20→18, sm 18→16. */
  .ac-media-text--title-lg .ac-media-text__title { font-size: 20px; }
  .ac-media-text--title-md .ac-media-text__title { font-size: 18px; }
  .ac-media-text--title-sm .ac-media-text__title { font-size: 16px; }
  .ac-media-text--title-32 .ac-media-text__title { font-size: 24px; }
  /* Requisito do grid de cards: oculta a imagem no mobile. */
  .ac-media-text--hide-img-mobile .ac-media-text__media { display: none; }

  /* Barra lateral no mobile (bloco empilhado): a barra vira uma linha de ALTURA
   * CHEIA no __inner (sobe junto à imagem), não só ao lado do texto. Fica a 24px
   * de respiro HORIZONTAL da imagem e do texto (padding-left) e mantém 24px de
   * respiro VERTICAL imagem→texto (row-gap). Sai do __content (posição desktop).
   * `padding-left !important` pra vencer o `padding-inline:0 !important` que a
   * ac-section aplica no __inner. Banner fica de fora (faixa/gap próprios). */
  .ac-media-text--left-bar:not(.ac-media-text--size-banner) .ac-media-text__inner,
  .ac-media-text--left-bar-on-text:not(.ac-media-text--size-banner) .ac-media-text__inner {
    border-left: 4px solid var(--ac-mt-left-bar-color, #F6A71C);
    padding-left: 24px !important;
    row-gap: 24px;
  }
  .ac-media-text--left-bar:not(.ac-media-text--size-banner) .ac-media-text__content,
  .ac-media-text--left-bar-on-text:not(.ac-media-text--size-banner) .ac-media-text__content {
    border-left: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
  }
}