/*
 * Bloco de amanhã ([clima_amanha]). ÚNICO shortcode do plugin pensado pra
 * linha de FUNDO CLARO do WPBakery - o hero e a tira são escuros. O título da
 * seção é do WPBakery; este arquivo não estiliza título nenhum.
 *
 * ---------------------------------------------------------------------------
 * PALETA: a mesma da seção clara do elo-vazao (os blocos "Maior vazão / Menor
 * vazão / Vazão média", .elo-vazao-resumo-minimo) - fundo claro, número grande
 * em cinza escuro com peso LEVE, rótulo pequeno em maiúsculas e cinza médio,
 * divisórias de 1px entre os módulos.
 *
 * Os VALORES vêm de lá, mas as variáveis são declaradas aqui, e isso é
 * deliberado: são dois plugins independentes: nada garante que o CSS do
 * elo-vazao esteja carregado na página que usa este bloco, e uma variável não
 * resolvida cairia em preto/transparente sem aviso. A origem fica anotada em
 * cada linha - se um dia a paleta da vazão mudar, é aqui que se acompanha.
 *
 * ---------------------------------------------------------------------------
 * PONTOS DE CORTE DO LAYOUT - onde mexer pra testar
 *
 * São TRÊS números, cada um aparecendo UMA vez no arquivo. Estão em regras
 * @container, que medem a largura do PRÓPRIO elemento (não a da janela):
 *
 *   linha ~469  @container elo-clima-amanha-dados (min-width: 300px)
 *               -> daqui pra cima, módulos em DOIS POR DOIS (abaixo, empilhados)
 *
 *   linha ~543  @container elo-clima-amanha-dados (min-width: 430px)
 *               -> daqui pra cima, os QUATRO EM FILA
 *               (é este que decide "2x2 x 4 em fila")
 *
 *   linha ~597  @container elo-clima-amanha (min-width: 760px)
 *               -> daqui pra cima, DADOS À ESQUERDA e TEXTO À DIREITA
 *
 * Pra testar outro corte, troque o número na condição do @container - é o
 * único lugar onde cada um aparece.
 *
 * POR QUE NÃO SÃO CUSTOM PROPERTIES: o CSS não aceita var() dentro da
 * condição de @container nem de @media (a condição é avaliada antes da
 * cascata). Declarar --corte-fila: 620px e usar var() ali simplesmente não
 * funciona, em nenhum navegador. Então o "lugar único" possível é este: cada
 * número escrito uma vez só, apontado aqui em cima.
 *
 * ATENÇÃO à caixa que cada um mede:
 *   - elo-clima-amanha-dados = a coluna dos dados (ícone + temperatura +
 *     módulos). É ela que manda no arranjo dos módulos.
 *   - elo-clima-amanha = o bloco inteiro. Manda só na divisão dados x texto.
 * As duas medem o CONTENT BOX: no tema escuro, o padding de 20px e a borda
 * tiram 42px da conta, então o mesmo bloco troca de arranjo um pouco antes.
 *
 * ---------------------------------------------------------------------------
 * DOIS TEMAS, TRÊS PALETAS
 *
 * O bloco nasceu claro e ganhou tema="escuro" (atributo do shortcode) pra
 * poder ir numa linha escura, ao lado do hero e da tira. Os ícones de condição
 * são os PREENCHIDOS da tira nos dois temas (ícone de contorno some num
 * tamanho de destaque), o que muda é a cor:
 *
 *   peça      TIRA (referência)      CLARO (padrão)        ESCURO (daqui)
 *   nuvem     #cbd5e1 cinza claro    #64748b cinza médio   #cbd5e1 (= tira)
 *   lua       #eef2f8 quase branco   #475569 cinza escuro  #eef2f8 (= tira)
 *   sol       #ffd166 amarelo claro  #d97706 âmbar fechado #ffd166 (= tira)
 *   chuva     #7fb8ff azul claro     #0284c7 azul fechado  #7fb8ff (= tira)
 *   texto     branco 0.95            #0f172a               rgba(255,255,255,.95)
 *   rótulo    branco 0.72            #475569               rgba(255,255,255,.72)
 *   divisória branco 0.12            #e2e8f0               rgba(255,255,255,.12)
 *
 * No claro, nuvem e lua claras sobre branco desapareceriam, e o amarelo da
 * tira fica lavado (contraste ~1.4 contra branco) - daí o âmbar e o azul mais
 * fechados. No escuro os valores voltam a ser exatamente os da tira.
 *
 * POR QUE OS VALORES ESTÃO COPIADOS e não referenciados: as variáveis da tira
 * são declaradas dentro de .elo-clima-tira, então não cascateiam pra cá; e uma
 * página pode ter só [clima_amanha], sem o CSS da tira sequer enfileirado -
 * var() sem valor não cai em fallback, cai em transparente/preto sem aviso. A
 * tabela acima é o contrato entre os dois arquivos: mudou lá, muda aqui.
 * Nada da tira nem do hero é alterado - tudo aqui é escopado a
 * .elo-clima-amanha.
 */

.elo-clima-amanha {
  /* Texto e estrutura - valores de elo-vazao (--elo-vazao-cor-texto,
     -texto-suave, -borda). */
  --elo-clima-amanha-cor-texto: #0f172a;
  --elo-clima-amanha-cor-texto-suave: #475569;
  --elo-clima-amanha-cor-borda: #e2e8f0;
  /* Peso do número grande - o mesmo 200 de --elo-vazao-resumo-minimo-peso-valor. */
  --elo-clima-amanha-peso-valor: 200;

  /* Paleta CLARA dos ícones (ver o cabeçalho: paralela à da tira, nunca a
     mesma). Ajuste aqui, não no arquivo da tira. */
  --elo-clima-amanha-nuvem: #64748b;
  --elo-clima-amanha-lua: #475569;
  --elo-clima-amanha-amarelo: #d97706;
  --elo-clima-amanha-azul: #0284c7;

  --elo-clima-amanha-icone: clamp(4rem, 12vw, 7rem);

  /* Fundo do módulo. No CLARO fica sem nada de propósito (ver a nota abaixo);
     as variáveis existem pra o tema escuro sobrescrever sem duplicar regra. */
  --elo-clima-amanha-fundo: transparent;
  --elo-clima-amanha-borda-modulo: transparent;
  --elo-clima-amanha-raio: 0;
  --elo-clima-amanha-padding: 0;
  --elo-clima-amanha-blur: 0;

  /* ---- REALCE NO PONTEIRO ----
     O efeito vive em elo-clima-realce.css, compartilhado com os cartões do
     [clima_semana] e as linhas do [clima_tabela]: mesma curva, mesmos 650ms nos
     dois sentidos, sem sombra, restrito a ponteiro real e respeitando
     prefers-reduced-motion. Aqui só se diz a ESCALA e o que "mais presente"
     significa neste bloco. A classe .elo-clima-realce vem do PHP.

     A ESCALA É 1.02, e o número sai de uma conta, não do olho. O que precisa
     ficar na mesma ordem de grandeza entre os blocos é o crescimento em PIXELS,
     não a razão: 1,06 num cartão da semana (181px) cresce 11px, mas no cartão
     de amanhã, que mede 565px de largura por 550px de altura no desktop,
     cresceria 34px - três vezes mais, e leria como outro efeito. Medido em
     navegador com a marcação real:

       bloco                     tamanho      escala   cresce
       cartão da semana          181 x 145     1,06     11px larg / 9px alt
       linha da tabela          1168 x  72     1,012    14px larg / 1px alt
       CARTÃO DE AMANHÃ          565 x 550     1,02     11px larg / 11px alt

     É o único dos três que é quase quadrado, então aqui as duas dimensões
     crescem junto - e 1,02 põe as duas exatamente na faixa das outras.

     NO TEMA CLARO O REALCE NÃO PINTA FUNDO NEM BORDA, de propósito: neste
     bloco (diferente da semana e da tabela) o tema claro NÃO tem módulo
     desenhado - fundo, borda, raio e padding são todos zero, o cartão é só
     conteúdo sobre a página. Pintar fundo no ponteiro faria surgir uma caixa
     que não existe em repouso, colada no texto e sem cantos - lê como seleção
     de texto, não como realce. Sobra a ampliação, que sozinha já diz qual
     cartão está sob o cursor. Se um dia se quiser a caixa também no claro,
     é trocar os dois transparentes abaixo por um cinza bem leve. */
  --elo-clima-realce-escala: 1.02;
  --elo-clima-realce-fundo: transparent;
  --elo-clima-realce-borda: transparent;
  --elo-clima-realce-fundo-solido: transparent;

  /* Contexto de posicionamento pro z-index do realce (o cartão ampliado precisa
     passar POR CIMA do vizinho, senão a borda dele corta a do ampliado). No
     repouso não muda nada. */
  position: relative;

  box-sizing: border-box;
  width: 100%;
  /* O bloco responde à PRÓPRIA largura, não à da janela (container query).
     Isso é o que permite dois deles lado a lado numa linha do WPBakery:
     cada um recebe metade da página e se organiza pelo espaço que TEM. Com
     media query, os dois achariam que há 1200px disponíveis e tentariam
     duas colunas internas dentro de 580px. Navegador sem suporte ignora as
     regras @container e fica no empilhado - que é o layout base, nunca
     quebrado. */
  container-type: inline-size;
  container-name: elo-clima-amanha;
  color: var(--elo-clima-amanha-cor-texto);
  padding: var(--elo-clima-amanha-padding);
  border-radius: var(--elo-clima-amanha-raio);
  background: var(--elo-clima-amanha-fundo);
  border: 1px solid var(--elo-clima-amanha-borda-modulo);
  /* Sem font-family própria: herda a da página, como o resto do plugin. */
}

/* ---- TEMA ESCURO (tema="escuro") ----
   Só troca variáveis: nenhuma regra de layout é reescrita aqui embaixo, o que
   mantém os dois temas com a MESMA estrutura e impede que um evolua sem o
   outro. Os valores são os da tira (ver a tabela do cabeçalho).
   
   FUNDO: a tira usa 0.06 de branco + borda 0.12 + blur 6px. Aqui é
   deliberadamente MAIS SUTIL - 0.04, borda 0.09 e blur 4px: o bloco de amanhã
   é alto e largo (ícone grande, texto ao lado), e o mesmo peso da tira viraria
   um painel dentro da linha em vez de uma sugestão de módulo. */
.elo-clima-amanha--escuro {
  --elo-clima-amanha-cor-texto: rgba(255, 255, 255, 0.95);
  --elo-clima-amanha-cor-texto-suave: rgba(255, 255, 255, 0.72);
  --elo-clima-amanha-cor-borda: rgba(255, 255, 255, 0.12);

  --elo-clima-amanha-nuvem: #cbd5e1;
  --elo-clima-amanha-lua: #eef2f8;
  --elo-clima-amanha-amarelo: #ffd166;
  --elo-clima-amanha-azul: #7fb8ff;

  --elo-clima-amanha-fundo: rgba(255, 255, 255, 0.04);
  --elo-clima-amanha-borda-modulo: rgba(255, 255, 255, 0.09);
  --elo-clima-amanha-raio: 16px;
  --elo-clima-amanha-padding: 20px;
  --elo-clima-amanha-blur: 4px;

  /* No escuro o módulo existe (fundo 0.04, borda 0.09 - os mesmos valores de
     repouso do bloco da semana e da tabela), então o realce pode fazer o que faz
     nos outros dois: deixar fundo e borda um pouco mais presentes. Os valores de
     hover também são os mesmos dos outros blocos, pra os três reagirem igual
     numa página que tenha os três. */
  --elo-clima-realce-fundo: rgba(255, 255, 255, 0.09);
  --elo-clima-realce-borda: rgba(255, 255, 255, 0.2);
  --elo-clima-realce-fundo-solido: rgba(15, 23, 42, 0.38);

  backdrop-filter: blur(var(--elo-clima-amanha-blur));
  -webkit-backdrop-filter: blur(var(--elo-clima-amanha-blur));
}

/* Sem suporte a backdrop-filter: um escuro translúcido sólido garante que o
   módulo continue delimitado (mesmo fallback do hero e da tira). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .elo-clima-amanha--escuro {
    background: rgba(15, 23, 42, 0.28);
  }
}


.elo-clima-amanha *,
.elo-clima-amanha *::before,
.elo-clima-amanha *::after {
  box-sizing: border-box;
}

/* ---- Linha de data + filete ---- */
.elo-clima-amanha__data {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--elo-clima-amanha-cor-borda);
  font-size: 0.85rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--elo-clima-amanha-cor-texto-suave);
}

/* ---- Corpo: empilhado no celular, duas colunas a partir de 860px ----
   MOBILE PRIMEIRO e, no celular, os DADOS vêm antes do texto (pedido
   explícito: os números são o que se lê de relance). Como no HTML os dados já
   vêm primeiro, o empilhamento natural já entrega essa ordem - nenhuma
   inversão por CSS, que sempre desalinha ordem visual e ordem de leitura de
   quem usa leitor de tela. */
.elo-clima-amanha__corpo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* SEGUNDO container, e a razão importa: os módulos vivem AQUI dentro, e em
   duas colunas esta caixa fica com ~58% do bloco. Medindo o bloco, os quatro
   módulos entravam em fila achando que tinham 900px quando tinham 500 - e os
   rótulos quebravam. O arranjo dos módulos passa a perguntar pela largura
   DESTA caixa, que é a que eles de fato ocupam. */
.elo-clima-amanha__dados {
  display: flex;
  flex-direction: column;
  gap: 20px;
  container-type: inline-size;
  container-name: elo-clima-amanha-dados;
}

/* ---- Bloco principal: ícone + temperatura + condição ----
   Uma UNIDADE, não três elementos soltos (mesmo espírito do hero, onde
   temperatura e ícone ficam colados). Antes o ícone ficava sozinho num vazio e
   os quatro módulos vinham soltos embaixo, sem hierarquia - o que o leitor
   procura primeiro (que tempo faz, quanto vai fazer) estava espalhado. */
.elo-clima-amanha__principal {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.elo-clima-amanha__principal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Número grande - peso leve e tabular, num corpo maior porque é a informação
   principal do bloco. A LINHA é composta de dois blocos (número + legenda) com
   a barra desenhada no meio; alinhamento no TOPO pra a barra ficar na altura
   dos números, não no meio do conjunto número+legenda. */
.elo-clima-amanha__temperatura {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: var(--elo-clima-amanha-peso-valor);
  line-height: 1;
  color: var(--elo-clima-amanha-cor-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Separador DESENHADO entre máxima e mínima, no lugar da barra de texto ("/"),
   que ficava com cara de caractere solto. Altura em em: acompanha o número em
   qualquer tamanho de tela, sem media query. Inclinação leve e cor bem mais
   discreta que a dos números - é elemento de design, não informação. */
.elo-clima-amanha__barra {
  flex-shrink: 0;
  width: 2px;
  height: 0.62em;
  margin-top: 0.19em; /* desce até a altura dos números (a linha alinha no topo) */
  border-radius: 1px;
  background: currentColor;
  opacity: 0.25;
  transform: rotate(14deg);
}

/* ---- Barra de temperatura (atributo barra_temperatura, ligada por padrão) ----
 *
 * Vai do azul ao âmbar, e é por isso que a MÍNIMA fica à esquerda e a MÁXIMA à
 * direita no HTML: a leitura acompanha o gradiente.
 *
 * O que ela NÃO faz aqui: comparar. No app Tempo do iPhone, de onde veio a
 * ideia, a barra mostra a faixa de cada dia DENTRO da amplitude da semana - por
 * isso começa e termina em pontos diferentes a cada linha. Num bloco de um dia
 * só não há com o que comparar, e ela ocupa a largura inteira sempre.
 *
 * No BLOCO DOS PRÓXIMOS DIAS, quando existir, ela precisa ser calculada assim:
 * mínima e máxima do conjunto definem a escala, e a barra de cada dia ocupa a
 * fatia correspondente à faixa DAQUELE dia (deslocamento à esquerda + largura),
 * nunca 100% da linha. A ordem mínima-esquerda/máxima-direita já é a de lá, pra
 * os dois blocos da mesma página não se contradizerem. */
.elo-clima-amanha__barra-temp {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--elo-clima-amanha-azul) 0%, #7dd3a0 45%, var(--elo-clima-amanha-amarelo) 100%);
  opacity: 0.85;
}

/* Rótulo da condição ACIMA dos números e com peso (Rodada 28) - antes vinha
   embaixo, pequeno e apagado. É o que responde "que tempo vai fazer"; os
   números respondem "quanto", e ficam logo abaixo. Cor do texto principal, não
   a suave: ele não é apoio, é título do bloco. */
.elo-clima-amanha__condicao {
  display: block;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--elo-clima-amanha-cor-texto);
}

/* Cada número com sua legenda embaixo - é o que identifica qual é a máxima e
   qual é a mínima agora que o rótulo do módulo não existe mais (a informação
   estava só na ordem, que não se lê em leitor de tela nem se adivinha). */
.elo-clima-amanha__temp-bloco {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.elo-clima-amanha__temp-legenda {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--elo-clima-amanha-cor-texto-suave);
}

/* ---- Ícone de destaque ---- */
.elo-clima-amanha__icone {
  display: inline-flex;
  line-height: 0;
  /* Cor PADRÃO = cinza da nuvem (a maioria dos ícones tem nuvem; sol e lua
     trocam pelo modificador abaixo) - mesma mecânica da tira. */
  color: var(--elo-clima-amanha-nuvem);
}

/* fill: currentColor preenche as formas FECHADAS (nuvem, disco do sol, lua);
   as abertas (raios, gotas, linhas de neblina) seguem só traço. */
.elo-clima-amanha__icone-svg {
  width: var(--elo-clima-amanha-icone);
  height: var(--elo-clima-amanha-icone);
  display: block;
  fill: currentColor;
}

/* SOL E LUA DOS ÍCONES COMBINADOS: só CONTORNO aqui, ao contrário de todo o
   resto do ícone, que é preenchido.
   O Lucide desenha o astro do cloud-sun (e o do cloud-moon) como ARCO ABERTO,
   que termina onde a nuvem começa. Ao preencher, o SVG fecha o arco com uma
   RETA - e é ela que aparece cortando o disco do sol por baixo. Na tira o
   ícone é pequeno e o defeito passa despercebido (e lá o preenchimento total
   fica melhor, então nada muda); no tamanho grande daqui, salta.
   De quebra, a composição ganha profundidade: nuvem sólida à frente, astro de
   linha atrás. */
.elo-clima-amanha__icone-svg .elo-astro {
  fill: none;
}

.elo-clima-amanha__icone--sol {
  color: var(--elo-clima-amanha-amarelo);
}

.elo-clima-amanha__icone--lua {
  color: var(--elo-clima-amanha-lua);
}

/* Nos combinados (sol/lua atrás de nuvem), o modificador pintaria a nuvem de
   amarelo/cinza-escuro junto - ela volta pro cinza próprio. */
.elo-clima-amanha__icone--sol .elo-anim-nuvem,
.elo-clima-amanha__icone--lua .elo-anim-nuvem {
  fill: var(--elo-clima-amanha-nuvem);
  stroke: var(--elo-clima-amanha-nuvem);
}

/* Gotas e flocos em azul fechado (a classe vem dos ícones da tabela Lucide do
   plugin, a mesma usada pela animação do hero). */
.elo-clima-amanha__icone .elo-anim-gota,
.elo-clima-amanha__icone .elo-anim-floco {
  stroke: var(--elo-clima-amanha-azul);
}

/* ---- Módulos de dados: tratamento dos blocos da vazão ----
   TRÊS ARRANJOS, por largura do BLOCO (container query, não da janela - com
   dois blocos lado a lado cada um decide pelo espaço que recebeu):
     - até 300px  : um abaixo do outro, alinhado à ESQUERDA
     - 300 a 559px: dois por dois, em duas linhas, CENTRALIZADO
     - 560px+     : os quatro em fila, CENTRALIZADO
   Centralizar só faz sentido quando há colunas; empilhado volta pra esquerda.
   Pseudo-elemento em vez de border nas divisórias, pra poder recuar as pontas
   (a linha não encosta nas extremidades). */
.elo-clima-amanha__modulos {
  display: flex;
  flex-direction: column;
}

/* Módulo EMPILHADO (Rodada 28): ícone no topo, rótulo, valor por último. O
   valor deixou de ser o elemento dominante - quem carrega número grande é o
   bloco principal, e dois valores grandes competindo entre si achatavam a
   hierarquia que a reorganização anterior criou. */
.elo-clima-amanha__modulo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 0;
}

.elo-clima-amanha__modulo:first-child {
  padding-top: 0;
}

.elo-clima-amanha__modulo:last-child {
  padding-bottom: 0;
}

/* Divisória ENTRE módulos: só existe quando eles estão EM FILA (ver o
   @container abaixo). Empilhados, o que separa é o espaço - a divisória
   horizontal que havia aqui foi pro lugar onde separa de verdade: antes do
   texto (.elo-clima-amanha__texto). */

/* line-height apertada de propósito: o rótulo quebra em duas linhas com
   frequência ("CHANCE DE CHUVA", "SENSAÇÃO TÉRMICA"), e no valor padrão
   (~1.4) as duas linhas ficavam soltas, parecendo dois rótulos diferentes em
   vez de um só quebrado. */
.elo-clima-amanha__rotulo {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--elo-clima-amanha-cor-texto-suave);
  /* Empurra rótulo E valor pro FUNDO do módulo: numa fila, os módulos têm a
     mesma altura (stretch), então o valor de todos encosta na mesma base e o
     rótulo cresce PRA CIMA quando quebra em duas linhas. Sem isso, um rótulo
     de uma linha ("PÔR DO SOL") deixava o valor mais alto que o dos vizinhos
     e a fila saía desalinhada. Empilhado não faz diferença (cada módulo tem a
     altura do próprio conteúdo). */
  margin-top: auto;
}

/* Ícone no TOPO do módulo e maior que o das pílulas do hero (26 contra 18):
   aqui ele abre o módulo em vez de acompanhar um rótulo. */
.elo-clima-amanha__modulo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--elo-clima-amanha-cor-texto-suave);
}

/* Contorno, não preenchido: estes são os ícones de INTERFACE (guarda-chuva,
   termômetro), a mesma família das pílulas do hero - diferente do ícone de
   CONDIÇÃO acima, que é preenchido porque vem da tira. */
.elo-clima-amanha__modulo-icone-svg {
  width: 100%;
  height: 100%;
}

/* Nascer e pôr do sol: o meio-sol desses dois desenhos é um ARCO ABERTO, que
   só aparece cheio quando há fill - é assim que eles saem na tira. Guarda-chuva
   e termômetro seguem de contorno (são ícones de interface, não de céu). */
.elo-clima-amanha__modulo-icone--preenchido .elo-clima-amanha__modulo-icone-svg {
  fill: currentColor;
}

.elo-clima-amanha__valor {
  display: block;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--elo-clima-amanha-cor-texto);
  font-variant-numeric: tabular-nums;
}

/* ---- Texto interpretativo ----
   Empilhado (largura pequena), ganha uma divisória em cima: é ali que a
   separação importa, entre o CONJUNTO de dados e o texto. Em duas colunas a
   divisória some (o texto está ao lado, não abaixo - ver o @container). */
.elo-clima-amanha__texto {
  padding-top: 20px;
  border-top: 1px solid var(--elo-clima-amanha-cor-borda);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--elo-clima-amanha-cor-texto-suave);
}

/* ---- DOIS POR DOIS (a partir de 300px da CAIXA DE DADOS) ----
   O degrau que faltava: antes o bloco pulava de quatro em fila direto pro
   empilhado, e um bloco médio (dois deles lado a lado numa janela de 1280px
   dão ~530px cada) caía no empilhado - comprido e vazio, com dois por dois
   cabendo folgado. 300px é o limite de baixo porque dois módulos de ~150px
   ainda acomodam "SENSAÇÃO TÉRMICA" em duas linhas sem cortar palavra; num
   celular de 440px o bloco fica com ~400px, ou seja, bem dentro desta faixa,
   como pedido. */
@container elo-clima-amanha-dados (min-width: 300px) {
  .elo-clima-amanha__modulos {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .elo-clima-amanha__modulo {
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 0;
    align-items: center;
    text-align: center;
    padding: 14px;
    /* Mais respiro entre ícone, rótulo e valor: em fila os três estavam
       colados e o módulo parecia comprimido. Vale só aqui - empilhado, o
       módulo tem largura de sobra e o espaçamento menor mantém o conjunto
       compacto. */
    gap: 11px;
  }

  /* Rótulo e valor um pouco menores em fila (o ícone mantém o tamanho): com
     quatro ou dois módulos dividindo a largura, o corpo de antes pesava
     demais ao lado do número grande do bloco principal. */
  .elo-clima-amanha__rotulo {
    font-size: 0.66rem;
  }

  .elo-clima-amanha__valor {
    font-size: clamp(1rem, 2vw, 1.25rem);
  }

  /* As regras do empilhado zeram o padding de cima do primeiro e o de baixo do
     último (ali eles são as pontas do conjunto). Em grade, os dois são apenas
     uma célula entre outras, e o padding tem que voltar - senão a primeira
     coluna sobe e a última desce em relação às vizinhas. Especificidade igual
     à daquelas regras (classe + pseudo-classe), então o que decide é a ordem:
     estas vêm depois. */
  .elo-clima-amanha__modulo:first-child {
    padding-top: 14px;
  }

  .elo-clima-amanha__modulo:last-child {
    padding-bottom: 14px;
  }

  /* Divisória VERTICAL entre as duas colunas (só quem está na direita). */
  .elo-clima-amanha__modulo:nth-child(even)::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: var(--elo-clima-amanha-cor-borda);
  }

  /* Divisória HORIZONTAL entre as duas linhas (só quem está na de baixo). */
  .elo-clima-amanha__modulo:nth-child(n+3)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--elo-clima-amanha-cor-borda);
  }
}

/* ---- Os QUATRO EM FILA (a partir de 430px da CAIXA DE DADOS) ----
   Valor DECIDIDO NA TELA pelo Robson, depois de ver as duas opções: em 430px
   cada módulo fica com ~100px de conteúdo, os rótulos longos quebram em duas
   linhas e mesmo assim a fila lê bem, inclusive no celular. A medição já tinha
   mostrado que nada estoura até ~398px de caixa; o que estava em jogo era
   gosto, não limite técnico. */
@container elo-clima-amanha-dados (min-width: 430px) {
  .elo-clima-amanha__modulos {
    flex-wrap: nowrap;
  }

  .elo-clima-amanha__modulo {
    flex: 1 1 0;
    max-width: none;
    padding: 4px 18px;
  }

  .elo-clima-amanha__modulo:first-child {
    padding-top: 4px;
    padding-left: 0;
  }

  .elo-clima-amanha__modulo:last-child {
    padding-bottom: 4px;
    padding-right: 0;
  }

  /* Numa fila só, a divisória horizontal do arranjo 2x2 não existe (não há
     segunda fileira a separar), e a vertical passa a valer entre TODOS, não
     só nos pares.
     A ANULAÇÃO PRECISA DO MESMO SELETOR que criou a linha
     (:nth-child(n+3)::after): com .__modulo::after simples, a regra do 2x2
     vencia por especificidade (0,2,0 contra 0,1,0), e nascer/pôr do sol
     apareciam com uma borda em cima mesmo numa fila só - defeito real, visto
     na tela. */
  .elo-clima-amanha__modulo:nth-child(n+3)::after {
    content: none;
  }

  .elo-clima-amanha__modulo:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: var(--elo-clima-amanha-cor-borda);
  }

  .elo-clima-amanha__modulo:first-child::before {
    content: none;
  }
}

/* ---- Altura mínima do CARTÃO, só no desktop ----
 *
 * Com dois cartões lado a lado, o de texto mais curto termina antes do outro e
 * a diferença de altura salta à vista. A altura mínima nivela os dois.
 *
 * CRITÉRIO ESCOLHIDO: media query de JANELA, em 768px. Considerei a container
 * query (o mecanismo dos módulos) e ela não serve aqui, por dois motivos:
 *   1. um elemento NÃO pode ser estilizado pela própria container query - o
 *      cartão é o container, então precisaria de um invólucro novo só pra
 *      isso;
 *   2. mesmo com o invólucro, a largura do cartão não diz o que importa. O que
 *      justifica a altura mínima é EXISTIR UM VIZINHO ao lado, e disso a
 *      largura não informa nada: um cartão sozinho e estreito receberia a
 *      altura à toa.
 * A janela informa melhor: as colunas do WPBakery empilham em telas pequenas
 * (o padrão do vc_col-sm é quebrar abaixo de 768px), então acima disso os dois
 * cartões estão lado a lado, e abaixo estão empilhados - que é exatamente
 * quando a altura mínima deve sumir, pra não criar vazio no celular.
 *
 * Se um dia houver um cartão SOZINHO ocupando a linha inteira no desktop e
 * sobrar espaço embaixo, o ajuste é aqui: ou baixar o valor, ou trocar por uma
 * classe própria no shortcode. */
@media (min-width: 768px) {
  .elo-clima-amanha {
    min-height: 550px;
  }
}

/* ---- Duas colunas: dados à esquerda, texto à direita ----
   Só a partir de 760px DO BLOCO. Com dois blocos dividindo uma página de
   ~1200px, cada um fica com ~580px e NÃO entra aqui: os dados ficam em cima e
   o texto embaixo, que é o pedido ("o texto abaixo dos dados quando a largura
   não comportar duas colunas, não espremido ao lado"). Um bloco sozinho numa
   linha larga continua em duas colunas. */
@container elo-clima-amanha (min-width: 760px) {
  .elo-clima-amanha__corpo {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .elo-clima-amanha__dados {
    flex: 1 1 58%;
    min-width: 0;
  }

  .elo-clima-amanha__texto {
    flex: 1 1 42%;
    min-width: 0;
    /* Ao lado, não abaixo: a divisória de cima não faz sentido aqui. */
    padding-top: 0;
    border-top: 0;
  }
}