/* ==========================================================================
   Ellos Widgets — componente Hero
   ew-hero · ew-hero__figure · ec-float

   Consolidação das camadas 4, 5 e 6 do protótipo. Depende dos tokens de
   ellos-ds.css.
   ========================================================================== */

.ew-hero { padding-block: clamp(3.5rem, 9vw, 7rem); }

/* Opcional, desligado por padrão. Os cartões devem passar da borda da figura —
   é isso que cria a sobreposição. Isto existe só para o caso de container de
   largura total sem espaçamento lateral, onde a invasão chegaria à borda da
   página e viraria barra de rolagem.

   `clip` e não `hidden`: hidden criaria contexto de rolagem e cortaria também
   as sombras no eixo vertical. */
.ew-hero--contido { overflow-x: clip; }

/* minmax(0, ...) em toda coluna. Sem isso `1fr` significa
   `minmax(auto, 1fr)`, cujo mínimo é a largura mínima do conteúdo — e o
   título display em caixa alta tem largura mínima enorme. O resultado é uma
   coluna maior que o container: em 390px o grid chegava a 535px de largura,
   arrastando texto, figura e cartões para fora da tela. Era a causa do
   estouro horizontal e do hero quebrado no celular. */
.ew-hero__grid {
  display: grid;
  gap: var(--ec-sp-7);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .ew-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
  }
}

/* Rede de segurança contra palavra que não cabe de jeito nenhum. Só age
   quando a linha já não tem para onde ir. */
.ew-hero__title,
.ew-hero__lead { overflow-wrap: break-word; }

/* O tamanho mínimo da display foi calibrado para a largura do desktop. Numa
   tela de 360px ele não cabe, e a rede de segurança acima passa a partir
   palavras no meio — "FARMÁCIA PO / PULAR". Reduzir o mínimo aqui evita
   chegar nesse ponto. */
@media (max-width: 520px) {
  .ew-hero__title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
}

/* Sem imagem o bloco é coluna única e o texto ganha a largura inteira —
   mas não a largura toda: linha muito longa cansa a leitura. */
.ew-hero--solo .ew-hero__grid { grid-template-columns: minmax(0, 1fr); }
.ew-hero--solo .ew-hero__copy { max-width: 46rem; }

.ew-hero__title { margin: 0; }
.ew-hero__lead { margin: var(--ec-sp-5) 0 0; max-width: 36rem; }
.ew-hero__acoes { margin-top: var(--ec-sp-6); }
.ew-hero__acoes .ec-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* --------------------------------------------------------------------------
   FIGURA
   -------------------------------------------------------------------------- */

.ew-hero__figure {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: end center;
  isolation: isolate;
  min-width: 0;
}

/* Caixa de referência explícita para os cartões. Antes eles se ancoravam na
   figura por acaso, porque o contêiner de floats não tinha posição — e o
   contêiner ficava com largura zero num ponto arbitrário. */
.ew-hero__floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ew-hero__floats .ec-float { pointer-events: auto; }

/* A largura vem dos controles responsivos do widget, por breakpoint. O valor
   aqui é só a rede de segurança para o caso de o controle vir vazio. */
.ew-hero__photo {
  display: block;
  width: min(100%, 28rem);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(1, 15, 60, .45));
}

/* Halo: gradiente radial atrás da figura. Fica no ::before para não entrar no
   fluxo e não exigir um elemento a mais no HTML. */
.ew-hero__figure--halo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 8% 0 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(101, 179, 253, .38), rgba(1, 63, 182, 0) 68%);
}

/* Em fundo claro o halo azul sobre lavanda vira uma mancha suja. */
.ec-on-light .ew-hero__figure--halo::before { display: none; }

/* Em tela estreita a figura é menor e o halo, calibrado para o desktop,
   praticamente desaparecia atrás da foto.

   A tentativa de compensar com inset negativo foi um erro: a figura ocupa a
   largura toda no celular, então o halo passava a borda da página e criava
   barra de rolagem horizontal. Sem sair da caixa, o ganho vem de um raio
   maior e de mais opacidade. */
@media (max-width: 899.98px) {
  .ew-hero__figure--halo::before {
    inset: auto 0 0 0;
    background: radial-gradient(circle at 50% 58%, rgba(101, 179, 253, .5), rgba(1, 63, 182, 0) 72%);
  }
}

/* Figura encostando na base do bloco. Só no desktop: no celular a imagem
   fica acima do texto e ancorar não significa nada. */
@media (min-width: 900px) {
  .ew-hero__figure { align-self: end; }
  .ew-hero__photo { vertical-align: bottom; }
  .ew-hero__figure--halo::before { inset: auto 6% 0 6%; }

  .ew-hero--ancorado { padding-bottom: 0; }
  .ew-hero--ancorado .ew-hero__figure { padding-bottom: 0; }
  .ew-hero--ancorado .ew-hero__copy { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
}

@media (max-width: 899.98px) {
  .ew-hero__photo { margin-inline: auto; }
  /* No desktop o gap de 3rem separa duas colunas; empilhado ele vira um
     buraco entre o texto e a figura. */
  .ew-hero__grid { gap: var(--ec-sp-5); }

  /* A ancoragem valia só no desktop, e no celular sobrava uma faixa de fundo
     vazia sob a figura — justamente onde a foto deveria encostar. */
  .ew-hero--ancorado { padding-bottom: 0; }
  .ew-hero--ancorado .ew-hero__figure { padding-bottom: 0; }
  .ew-hero--ancorado .ew-hero__photo { vertical-align: bottom; }
}

/* Botões de larguras diferentes empilhados leem como hierarquia acidental:
   o mais largo parece mais importante só porque o texto é maior. */
@media (max-width: 560px) {
  .ew-hero__acoes { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ew-hero__acoes .ec-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   CARTÕES FLUTUANTES
   -------------------------------------------------------------------------- */

/* A largura vem de variável, aplicada como `width` e não `max-width`: o cartão
   é posicionado de forma absoluta, então sua largura é a do conteúdo, e um
   teto maior nunca o faz crescer. Sem valor, `auto` mantém o comportamento de
   se ajustar ao texto. */
.ec-float {
  width: var(--ew-largura, auto);
  max-width: 100%;
}

/* O deslocamento fino vive em variáveis, não em margin nem em transform
   direto. Motivo: os cartões ancorados à direita têm `right` definido e
   `left: auto` — ali margin-left não move nada. E transform direto seria
   sobrescrito pela animação de flutuação, que também usa transform. Com as
   variáveis, os keyframes compõem os dois. */
.ec-float {
  --ew-dx: 0px;
  --ew-dy: 0px;
  display: flex;
  align-items: center;
  gap: var(--ec-sp-3);
  background-color: var(--ec-white);
  color: var(--ec-ink-900);
  border-radius: var(--ec-r-md);
  padding: var(--ec-sp-3) var(--ec-sp-4);
  box-shadow: var(--ec-shadow-card);
  font-size: var(--ec-fs-sm);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.ec-float svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  color: var(--ec-green-500);
}
.ec-float small {
  display: block;
  font-weight: 400;
  font-size: var(--ec-fs-xs);
  color: var(--ec-ink-400);
}
.ec-float--alert svg { color: var(--ec-red-500); }
.ec-float--info  svg { color: var(--ec-blue-600); }

/* Posições fixas por índice. Só no desktop: o posicionamento absoluto ao
   redor da figura não cabe em tela estreita. */
@media (min-width: 900px) {
  .ec-float {
    position: absolute;
    z-index: 2;
    transform: translate(var(--ew-dx), var(--ew-dy));
  }

  /* Seis âncoras. Os valores negativos são propositais: o cartão invade a
     borda da figura, que é o que dá a sensação de sobreposição.

     A invasão à direita passa por max(), e não é preciosismo: no protótipo
     a figura vive dentro do container de 1160px, e o que transborda cai na
     margem da página. Aqui a figura encosta na borda da tela, e a mesma
     porcentagem passa a transbordar a viewport — medido, 33px de rolagem
     lateral em 1024 e 64px em 1920, crescendo com a largura porque o valor
     é percentual.

     max(0px, …) mantém a invasão sobre a figura em qualquer largura e
     impede que ela ultrapasse a borda direita. À esquerda o problema não
     existe: ali o vizinho é a coluna de texto, não a borda da tela. */
  .ew-float--tl { top: 12%;    left: -6%; }
  .ew-float--tr { top: 12%;    right: max(0px, -6%); }
  .ew-float--ml { top: 44%;    left: -8%; }
  .ew-float--mr { top: 44%;    right: max(0px, -8%); }
  .ew-float--bl { bottom: 8%;  left: -2%; }
  .ew-float--br { bottom: 8%;  right: max(0px, -2%); }

  /* Regra 1 do sistema: loop é exceção. Aqui se justifica — os cartões
     representam status vivo. Fora de fase pela ordem no DOM, para não
     pulsarem em bloco, independente da âncora escolhida. */
  .ew-hero__floats--anima .ec-float { animation: ew-float-y 6s ease-in-out infinite; }
  .ew-hero__floats--anima .ec-float:nth-child(2) { animation-delay: -2s; }
  .ew-hero__floats--anima .ec-float:nth-child(3) { animation-delay: -4s; }
}

@keyframes ew-float-y {
  0%, 100% { transform: translate(var(--ew-dx), var(--ew-dy)); }
  50%      { transform: translate(var(--ew-dx), calc(var(--ew-dy) - 9px)); }
}

/* --------------------------------------------------------------------------
   CARTÕES EM TELA ESTREITA

   Três modos. O padrão mantém a sobreposição, porque é ela que dá vida ao
   bloco: empilhar os cartões em lista transforma o hero numa página de texto
   com uma foto no meio.
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  /* --- Modo lista --- */

  .ew-hero--mob-lista .ew-hero__floats {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ec-sp-3);
    margin-top: var(--ec-sp-5);
  }
  .ew-hero--mob-lista .ec-float {
    white-space: normal;
    box-shadow: var(--ec-shadow-soft);
  }

  /* --- Modo oculto --- */

  .ew-hero--mob-ocultos .ew-hero__floats { display: none; }

  /* --- Modo sobreposto (padrão) --- */

  /* A figura já é relative na regra base. */

  .ew-hero--mob-sobrepostos .ec-float {
    position: absolute;
    z-index: 2;
    /* Largura fluida como padrão. Definida na variável, e não em max-width,
       para que o valor escolhido no editor a substitua por completo. */
    --ew-largura: clamp(9rem, 36vw, 13rem);
    padding: .5rem .65rem;
    gap: .45rem;
    font-size: clamp(.72rem, 2.6vw, .84rem);
    line-height: 1.25;
    border-radius: 10px;
    white-space: normal;
    /* Ícone alinhado ao topo. Centralizado, ele flutua no meio de um texto de
       duas linhas e o cartão perde o eixo. */
    align-items: flex-start;
    /* O deslocamento continua valendo aqui: os controles são responsivos e
       têm aba por breakpoint, então quem ajusta o celular quer que o ajuste
       do celular seja aplicado. */
    transform: translate(var(--ew-dx), var(--ew-dy));
  }
  /* Pequeno deslocamento para o ícone alinhar com a primeira linha de texto,
     não com o topo da caixa. */
  .ew-hero--mob-sobrepostos .ec-float svg {
    width: 1rem;
    height: 1rem;
    margin-top: .1em;
  }
  .ew-hero--mob-sobrepostos .ec-float small {
    font-size: .9em;
    margin-top: 1px;
  }

  /* Âncoras próprias, sem valores negativos: aqui não há espaço lateral
     sobrando e qualquer invasão de borda vira corte. */
  .ew-hero--mob-sobrepostos .ew-float--tl,
  .ew-hero--mob-sobrepostos .ew-float--ml { top: 4%;  left: 0; }
  .ew-hero--mob-sobrepostos .ew-float--tr,
  .ew-hero--mob-sobrepostos .ew-float--mr { top: 40%; right: 0; }
  .ew-hero--mob-sobrepostos .ew-float--bl { bottom: 6%; left: 0; }
  .ew-hero--mob-sobrepostos .ew-float--br { bottom: 6%; right: 0; }

  /* Escalonamento por ordem, para três cartões não se empilharem na mesma
     faixa quando todos usam a posição automática. */
  .ew-hero--mob-sobrepostos .ec-float:nth-child(2) { top: 42%; }
  .ew-hero--mob-sobrepostos .ec-float:nth-child(3) { top: auto; bottom: 6%; }

  /* A animação segue valendo: é o que mantém o bloco vivo em tela pequena. */
  .ew-hero--mob-sobrepostos .ew-hero__floats--anima .ec-float {
    animation: ew-float-y 6s ease-in-out infinite;
  }
  .ew-hero--mob-sobrepostos .ew-hero__floats--anima .ec-float:nth-child(2) { animation-delay: -2s; }
  .ew-hero--mob-sobrepostos .ew-hero__floats--anima .ec-float:nth-child(3) { animation-delay: -4s; }

  /* Com os cartões menores a foto pode voltar a crescer: sobra borda
     suficiente para eles se apoiarem sem cobrir o centro da imagem. */
  .ew-hero--mob-sobrepostos .ew-hero__photo { max-width: 82%; }
}

/* Em telas muito estreitas os cartões encolhem, mas nenhum é escondido:
   com posição e largura ajustáveis por breakpoint, quem monta resolve a
   colisão movendo o cartão — esconder conteúdo por conta própria seria
   decidir no lugar de quem monta. */
@media (max-width: 420px) {
  .ew-hero--mob-sobrepostos .ec-float { --ew-largura: clamp(8rem, 42vw, 11rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ew-hero__floats--anima .ec-float { animation: none; }
}