/**
 * AC | Highlight Color Section (Section/Highlight-Color do DS)
 * Banda colorida (default verde menta #D7F9D3) com mancha decorativa de fundo
 * + 2 colunas: card imagem (radius/shadow, foto sangra -24px) + card branco.
 */

.ac-highlight-color {
  position: relative;
  width: 100%;
  overflow: clip; /* corta a mancha decorativa que sangra */
}

.ac-highlight-color--pt-0   { padding-top: 0; }
.ac-highlight-color--pt-24  { padding-top: 24px; }
.ac-highlight-color--pt-32  { padding-top: 32px; }
.ac-highlight-color--pt-40  { padding-top: 40px; }
.ac-highlight-color--pt-48  { padding-top: 48px; }
.ac-highlight-color--pt-56  { padding-top: 56px; }
.ac-highlight-color--pt-80  { padding-top: 80px; }
.ac-highlight-color--pt-104 { padding-top: 104px; }
.ac-highlight-color--pb-0   { padding-bottom: 0; }
.ac-highlight-color--pb-24  { padding-bottom: 24px; }
.ac-highlight-color--pb-32  { padding-bottom: 32px; }
.ac-highlight-color--pb-40  { padding-bottom: 40px; }
.ac-highlight-color--pb-48  { padding-bottom: 48px; }
.ac-highlight-color--pb-56  { padding-bottom: 56px; }
.ac-highlight-color--pb-80  { padding-bottom: 80px; }
.ac-highlight-color--pb-104 { padding-bottom: 104px; }

.ac-highlight-color__inner {
  position: relative;
  z-index: 1;
  max-width: 1104px;
  margin-inline: auto;
  padding-inline: 16px;
}

/*
 * Grid 3 colunas: [card1] [overlap fixo 64px] [card2]
 * - media spans cols 1+2 (card width = side + 64)
 * - content spans cols 2+3 (overlap em col 2)
 * - Side tracks `minmax(0, 504px)` cap em 504 → cards travam em 568 no desktop.
 * - Em viewports menores que 1136, side tracks encolhem proporcionalmente
 *   e os cards seguem juntos sem quebrar.
 */
.ac-highlight-color__row {
  display: grid;
  grid-template-columns: minmax(0, 536px) 32px minmax(0, 536px);
  justify-content: center;
  align-items: center;
  position: relative;
}

/* --- Mídia (Figma: 568 × 352) --- */
.ac-highlight-color__media {
  position: relative;
  grid-row: 1;
  grid-column: 1 / 3; /* cols 1+2 = side + 32 = 568 (max) */
  min-width: 0;
}
.ac-highlight-color--img-right .ac-highlight-color__media {
  grid-column: 2 / 4;
}
.ac-highlight-color__img,
.ac-highlight-color__video {
  display: block;
  width: 100%;
  height: 352px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.06); /* Elevation/sm */
  background-color: #E2E5E9;
}
.ac-highlight-color__img--placeholder {
  background-image: linear-gradient(135deg, #E2E5E9 25%, #F0F2F5 25%, #F0F2F5 50%, #E2E5E9 50%, #E2E5E9 75%, #F0F2F5 75%);
  background-size: 24px 24px;
}

/* --- Card branco (Figma: 568 × 324, overlap via grid col 2) --- */
.ac-highlight-color__content {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 2 / 4; /* cols 2+3 — sobrepõe col 2 com a media */
  min-width: 0;
  min-height: 324px; /* Figma — image 352 - card 324 = 14px sangra acima+abaixo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  background-color: #FFFFFF;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 16px 24px -2px rgba(0, 0, 0, 0.12); /* Elevation/lg */
}
.ac-highlight-color--img-right .ac-highlight-color__content {
  grid-column: 1 / 3;
}

.ac-highlight-color__subheader {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #774900;
}
.ac-highlight-color__title {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 120%;
  color: #033936;
}
.ac-highlight-color__body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  color: #404040;
}
.ac-highlight-color__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Corpo via InnerBlocks (parágrafo + lista + CTA). Flex column = ritmo de 16px;
 * parágrafos/listas full-width (stretch), o cta-button fica na largura natural. */
.ac-highlight-color__body-blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ac-highlight-color__body-blocks p,
.ac-highlight-color__body-blocks ul,
.ac-highlight-color__body-blocks ol {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  color: #404040;
}
.ac-highlight-color__body-blocks ul,
.ac-highlight-color__body-blocks ol {
  padding-left: 24px;
}
.ac-highlight-color__body-blocks ul { list-style: disc; }
.ac-highlight-color__body-blocks ol { list-style: decimal; }
.ac-highlight-color__body-blocks li { margin: 4px 0; }
/* O cta-button renderiza como `.ac-cta` — `align-self:flex-start` mantém o
 * botão na largura natural, à ESQUERDA (senão estica 100% e o texto centraliza). */
.ac-highlight-color__body-blocks .ac-cta { align-self: flex-start; }

/* --- Mancha decorativa de fundo (FIXA do DS) ---
 * A mancha inteira (blob + fill verde 10% + dots #033936 10% + stroke 50%) vem
 * de um SVG único exportado do DS (`assets/manchas/ds-mancha-highlight.svg`),
 * com o opacity já embutido — por isso NÃO usa mais opacity/luminosity aqui. */
.ac-highlight-color__bg-mancha {
  position: absolute;
  z-index: 0;
  aspect-ratio: 503 / 480;
  pointer-events: none;
}
/* Variante 2 da mancha do DS (SVG `ds-mancha-highlight-2.svg`, viewBox 476×492
 * — sem o clip do export, o blob inteiro aparece). */
.ac-highlight-color__bg-mancha--v2 { aspect-ratio: 476 / 492; }
.ac-highlight-color__bg-mancha-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* Mancha da variante features: SVG exato do DS (ds-mancha-features.svg, fill 10%
 * + stroke 50% baked-in). viewBox 513.233×490.614. Textura (cells) por cima via
 * ds-mancha-features-pattern.svg (mesmo viewBox → alinha). */
.ac-highlight-color__bg-mancha--shape { aspect-ratio: 513.233 / 490.614; }
.ac-highlight-color__bg-mancha-pattern {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* Ícones decorativos (sorriso/proteina/celula) sobre a mancha — NÍTIDOS, cor
 * própria, posição/tamanho via inline (X/Y em %, W em % da largura da mancha). */
.ac-highlight-color__bg-mancha-icon {
  position: absolute;
  display: block;
  color: #033936;
  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-highlight-color__bg-mancha-icon--sorriso  { aspect-ratio: 70 / 32; }
.ac-highlight-color__bg-mancha-icon--celula   { aspect-ratio: 58 / 56; }
.ac-highlight-color__bg-mancha-icon--proteina { aspect-ratio: 76 / 30; }
.ac-highlight-color__bg-mancha-stroke {
  position: absolute;
  inset: 0;
}
.ac-highlight-color__bg-mancha-stroke svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ac-highlight-color__bg-mancha--verde .ac-highlight-color__bg-mancha-stroke svg path {
  stroke: rgba(14, 82, 54, 0.5);
}
.ac-highlight-color__bg-mancha--amarelo .ac-highlight-color__bg-mancha-stroke svg path {
  stroke: rgba(246, 167, 28, 0.7);
}

/* --- Ícone decorativo (mask + color) --- */
.ac-highlight-color__deco {
  position: absolute;
  left: var(--icon-x, 30%);
  top: var(--icon-y, 10%);
  width: var(--icon-w, 8%);
  aspect-ratio: 1 / 1;
  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: 2;
}

/* --- Mobile (stack vertical com card branco sobreposto à imagem) --- */
@media (max-width: 768px) {
  .ac-highlight-color__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: none;
  }
  .ac-highlight-color__media,
  .ac-highlight-color--img-right .ac-highlight-color__media,
  .ac-highlight-color__content,
  .ac-highlight-color--img-right .ac-highlight-color__content {
    grid-column: unset;
    grid-row: unset;
  }
  .ac-highlight-color__content,
  .ac-highlight-color--img-right .ac-highlight-color__content {
    margin-top: -21px;
    margin-left: 0;
    margin-right: 0;
    min-height: 384px; /* Figma mobile */
    justify-content: flex-start;
  }
  .ac-highlight-color__img,
  .ac-highlight-color__video {
    height: 280px;
  }
  .ac-highlight-color__content {
    padding: 40px;
    gap: 16px;
  }
  .ac-highlight-color__title {
    font-size: 24px;
  }
  .ac-highlight-color--pt-104 { padding-top: 56px; }
  .ac-highlight-color--pb-104 { padding-bottom: 56px; }
  /* Variante features: os feature-item empilham em 1 coluna no mobile (gap 16
   * já vem do container .ac-highlight-color__features). */
  .ac-highlight-color__features {
    flex-direction: column;
    align-items: stretch;
  }
  .ac-highlight-color__features > .ac-feature-item {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * Variante "features" (DS Section/Highlight-Color 4868:25498):
 * header centralizado (ícone 64 + H2 + body) + grid de feature-items.
 * --------------------------------------------------------------------- */
/* DS Frame 15087 = ROW (header à ESQUERDA + cards à DIREITA, wrap, gap, center). */
.ac-highlight-color--variant-features .ac-highlight-color__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
/* Header (coluna esquerda): ícone 64 + título + body, alinhado à esquerda. */
.ac-highlight-color__header {
  flex: 0 1 524px;
  min-width: 280px;
  max-width: 524px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.ac-highlight-color__header-icon {
  width: 64px;
  height: 64px;
  line-height: 0;
  color: #033936;
}
.ac-highlight-color__header-icon svg { width: 64px; height: 64px; display: block; }
/* Body do header maior (Body/lg 18) e Verde Nobre (DS). */
.ac-highlight-color__header .ac-highlight-color__body {
  font-size: 18px;
  color: #033936;
}

/* Cards (feature-item): coluna direita, FLEX row wrap (DS Frame 91, 2-up).
 * flex-basis baixo (340) pra caber ao lado do header de 524px na mesma linha —
 * o flexbox quebra a linha pela basis, não pelo min-content; 524+520+40 estourava
 * e ia pra coluna. Cresce pra preencher o resto da linha. */
.ac-highlight-color__features {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  align-items: stretch;
}
/* Card no tamanho do DS: flex 1 0 0, min 240 / max 524 (2-up na coluna).
 * Os feature-items ficam no layout NORMAL deles (ícone à esquerda) — não
 * centralizamos nada aqui. */
.ac-highlight-color__features > .ac-feature-item {
  height: auto;
  flex: 1 0 0;
  min-width: 240px;
  max-width: 524px;
}

@media (max-width: 600px) {
  .ac-highlight-color__features > .ac-feature-item { min-width: 0; }
}