/**
 * AC | Banner — estilos frontend.
 * Componente "Banner" do DS (vSHIFT): banner compacto temático com imagem na
 * mancha (sistema compartilhado css/ac-mancha-img.css). 4 temas de cor.
 * Tokens extraídos do Figma (node 853:560).
 */
.ac-banner {
  position: relative;
  /* A mancha vaza pro topo/base do fundo colorido (DS); o texto respeita o
   * padding. overflow visível pra deixar o transbordo aparecer. */
  overflow: visible;
  padding: 48px 0;
  background-color: var(--ac-banner-bg);
}
/* clipTop: recorta só o topo da mancha na borda do banner (laterais/base
 * seguem transbordando via insets negativos). */
.ac-banner--clip-top {
  clip-path: inset(0 -100vw -100vw -100vw);
}

/* ============================================================
 * Temas de cor (bg / textos / botão / accent da mancha)
 * ============================================================ */
.ac-banner--theme-amarelo {
  --ac-banner-bg: #FFD16C;
  --ac-banner-heading: #774900;
  --ac-banner-body: #774900;
  --ac-banner-btn-bg: #FFFFFF;
  --ac-banner-btn-text: #0E5236;
  --ac-banner-accent: #F6A71C;
}
.ac-banner--theme-menta {
  --ac-banner-bg: #D7F9D3;
  --ac-banner-heading: #0E5236;
  --ac-banner-body: #774900;
  --ac-banner-btn-bg: #0E5236;
  --ac-banner-btn-text: #FFFFFF;
  --ac-banner-accent: #0E5236;
}
.ac-banner--theme-roxo {
  --ac-banner-bg: #CFD0F9;
  --ac-banner-heading: #413D99;
  --ac-banner-body: #774900;
  --ac-banner-btn-bg: #413D99;
  --ac-banner-btn-text: #FFFFFF;
  --ac-banner-accent: #6861F2;
}
.ac-banner--theme-verde {
  --ac-banner-bg: #0E5236;
  --ac-banner-heading: #FFFFFF;
  --ac-banner-body: #FFFFFF;
  --ac-banner-btn-bg: #FFFFFF;
  --ac-banner-btn-text: #0E5236;
  --ac-banner-accent: #D7F9D3;
}

/* ============================================================
 * Layout (Frame 17/11/18 do DS)
 * ============================================================ */
.ac-banner__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max, 1104px);
  margin-inline: auto;
  padding-inline: 16px;
  display: flex;
  flex-wrap: wrap;
  /* stretch: a coluna da imagem acompanha a altura do texto (que governa a
   * altura do banner); a mancha então transborda além dela. */
  align-items: stretch;
  gap: 32px 16px;
}
.ac-banner__content {
  /* base 624 + cap 624 = a coluna de texto cresce até 624px (DS) e não passa;
   * encolhe abaixo disso em telas estreitas (min-width:0 preserva o shrink). */
  flex: 1 1 624px;
  max-width: 624px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.ac-banner__media {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  min-height: 240px; /* piso da coluna p/ a mancha ter referência mesmo com texto curto. */
}
/* Imagem à esquerda: inverte a ordem visual (DOM continua conteúdo→imagem). */
.ac-banner--img-left .ac-banner__media { order: -1; }

/* ============================================================
 * Tipografia
 * ============================================================ */
.ac-banner__subheader {
  margin: 0 0 -8px; /* aproxima do título (gap DS = 8). */
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac-banner-heading);
}
.ac-banner__title {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ac-banner-heading);
}
.ac-banner__title--32 {
  font-size: 32px;
}
@media (max-width: 768px) {
  .ac-banner__title--32 {
    font-size: 24px;
  }
}
.ac-banner__body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-banner-body);
}
.ac-banner__body strong { font-weight: 700; }

/* ============================================================
 * CTA — componente accamargo/cta-button (InnerBlocks)
 * ============================================================ */
.ac-banner__cta-wrap {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
 * Mancha da imagem (override do sistema compartilhado p/ o banner)
 * ============================================================ */
.ac-banner .ac-mancha-img {
  --ac-mancha-fill: transparent;
  /* Tamanho FIXO e estável (≈440×420, do DS), desacoplado da altura do texto —
   * fica idêntico no editor e no front. Absoluta e centralizada na coluna: não
   * empurra a altura do banner (governada pelo texto), então transborda topo/
   * base quando o banner é mais baixo que ela. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 440px;
  aspect-ratio: 400 / 382;
  height: auto;
}
/* Stroke da mancha: padrão = accent do tema; ou cor explícita via select. */
.ac-banner .ac-mancha-img__stroke { color: var(--ac-banner-accent); }
.ac-banner .ac-mancha-img__stroke.is-verde   { color: #0E5236; }
.ac-banner .ac-mancha-img__stroke.is-amarelo { color: #F6A71C; }
.ac-banner .ac-mancha-img__stroke.is-roxo    { color: #6861F2; }
.ac-banner .ac-mancha-img__stroke.is-menta   { color: #D7F9D3; }
.ac-banner .ac-mancha-img__stroke.is-branco  { color: #FFFFFF; }
/* Cor padrão dos ícones = accent do tema (sobreposta por inline color quando
 * o editor escolhe uma cor). Posições/tamanho vêm de --icon-* no inline-style. */
.ac-banner .ac-mancha-img__icon { color: var(--ac-banner-accent); }

/* Botão de upload (apenas editor). */
.ac-banner__img-btn {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

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

/* ============================================================
 * Responsivo
 * ============================================================ */
@media (max-width: 768px) {
  /* Banner sobe no empilhamento p/ a mancha vazar POR CIMA da seção debaixo. */
  .ac-banner { z-index: 1; }
  .ac-banner__inner { gap: 24px; }
  .ac-banner__content { flex-basis: 100%; }
  /* Coluna de mídia empilha; caixa de referência MENOR que a mancha p/ ela
   * transbordar pra baixo (Figma mobile: mancha maior, vazada, ultrapassando). */
  .ac-banner__media {
    flex-basis: 100%;
    min-height: 240px;
  }
  .ac-banner--img-left .ac-banner__media { order: 0; }
  /* Toggle "Imagem acima do texto no mobile" (mobileImageTop): inverte o
   * empilhamento → mídia primeiro (order:-1), texto embaixo. Vence o reset acima
   * (mesma especificidade, vem depois). */
  .ac-banner--mobile-img-top .ac-banner__media { order: -1; }
  /* Mancha segue absoluta (vaza), maior e ancorada no TOPO da coluna →
   * transborda pra baixo, sobre a seção seguinte. */
  .ac-banner .ac-mancha-img {
    /* Posição vertical da mancha no mobile — controlável por instância
     * (manchaMobileY → var); fallback -17px (padrão). */
    top: var(--ac-banner-mancha-mobile-y, -17px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 440px;
    z-index: 2;
  }
}