/* ==========================================================================
   Ellos Widgets — Faixa de CTA

   Bloco 5. Portado do protótipo, onde a faixa era uma <section> com
   .ec-container próprio. Aqui a largura vem do container do Elementor, então
   o container interno não existe: só a grade.
   ========================================================================== */

/* Wrapper do widget. Existe para carregar as classes de superfície e
   espaçamento; min-width: 0 evita que o conteúdo force largura maior que a
   coluna quando o bloco estiver dentro de um grid. */
.ew-strip-block { min-width: 0; }

/* A faixa tem respiro próprio, mais baixo que uma seção. Quando alguém
   escolhe "Seção padrão" no editor, quem manda é o .ec-section — sem isto os
   dois somariam e a faixa viraria outra seção. */
.ec-strip:not(.ec-section) {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.ec-strip {
  position: relative;
  overflow: hidden;
}

/* --- Halo ----------------------------------------------------------------- */

/* Clarão branco no canto superior direito. Só entra sobre fundo escuro: o PHP
   não aplica a classe em superfície clara, onde viraria mancha. */
.ec-strip--halo::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%);
  pointer-events: none;
}

/* --- Grade ---------------------------------------------------------------- */

.ec-strip__inner {
  position: relative;
  display: grid;
  gap: var(--ec-sp-6);
  align-items: center;
}

/* minmax(0, …) em toda coluna: 1fr é minmax(auto, 1fr), e o mínimo de uma
   caixa com título display em caixa alta é enorme. Sem isto a grade estoura
   a viewport no celular. */
@media (min-width: 940px) {
  .ec-strip__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
}

.ec-strip__copy {
  display: grid;
  gap: var(--ec-sp-3);
  min-width: 0;
}

.ec-strip__copy .ec-eyebrow { margin: 0; }

/* O tamanho e a fonte vêm de .ec-display--2; aqui só o que é da faixa. */
.ec-strip__text {
  margin: 0;
  line-height: .98;
  max-width: 22ch;
  /* Medido: "DESCREDENCIADO" em display a 40px gera caixa de 420px dentro de
     uma coluna de 328px. Como .ec-strip__copy é grid, o parágrafo é item de
     grid e ganha min-width: auto — o mínimo vira a largura da palavra. O
     overflow: hidden da faixa escondia o sintoma: a palavra saía cortada na
     borda, sem rolagem para denunciar.

     Precisa ser `anywhere`, não `break-word`: só `anywhere` reduz o
     min-content, que é o que dimensiona o item de grid. Medido de novo
     depois da troca: 328px, dentro da coluna. */
  overflow-wrap: anywhere;
}

.ec-strip__sub {
  margin: 0;
  font-size: var(--ec-fs-lead);
  line-height: 1.5;
  max-width: 46ch;
  opacity: .92;
}

/* --- Ações ---------------------------------------------------------------- */

.ec-strip__actions {
  display: grid;
  gap: var(--ec-sp-3);
  min-width: 0;
}

.ec-strip__actions .ec-btn { justify-content: center; }

/* SVG inline ignora font-size e cai no padrão 300x150. Largura e altura
   explícitas em todo ponto que pode receber ícone. */
.ec-strip__actions .ec-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

/* Lado a lado, cada botão com a largura do próprio texto. */
@media (min-width: 640px) {
  .ec-strip__actions--natural {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-sp-3);
  }
  .ec-strip__actions--natural .ec-btn { width: auto; }
}

@media (max-width: 639px) {
  .ec-strip__actions .ec-btn { width: 100%; }
}

/* --- Aviso do editor ------------------------------------------------------ */

/* O aviso fica fora da grade, colado no rodapé da faixa. */
.ec-strip .ew-aviso {
  position: relative;
  margin-top: var(--ec-sp-5);
}