/*
 * Tabela de quinze dias ([clima_tabela]): uma linha por dia, começando em hoje.
 * Cada linha é um módulo próprio - fundo translúcido, borda fina e as duas
 * pontas arredondadas. O título da seção é do WPBakery; este arquivo não
 * estiliza título nenhum.
 *
 * ---------------------------------------------------------------------------
 * RELAÇÃO COM O [clima_semana] - o que é o mesmo e o que muda
 *
 * O MESMO, e reaproveitado no PHP (nenhuma conta reimplementada): a régua de
 * escala comum e a fatia de cada dia (escala_temperatura/fatia_temperatura), os
 * ícones preenchidos e coloridos (icone_condicao_tira), a data curta, o ícone
 * da condição atual no primeiro dia, o limiar de chuva da tira.
 *
 * O MESMO, e copiado aqui no CSS: a paleta dos ícones e o tratamento de fundo
 * translúcido. Copiado, e não referenciado, pelo mesmo motivo que o bloco da
 * semana copia da tira e documenta lá: as variáveis daquele bloco são
 * declaradas dentro de .elo-clima-semana e não cascateiam pra cá, e uma página
 * pode ter esta tabela sem o CSS da semana sequer enfileirado - var() sem valor
 * não cai em fallback, cai em transparente/preto sem aviso. A tabela abaixo é o
 * contrato; mexer numa ponta pede conferir a outra.
 *
 *   peça      valor      igual a
 *   nuvem     #cbd5e1    tira / semana / amanhã escuro
 *   lua       #eef2f8    tira / semana / amanhã escuro
 *   sol       #ffd166    tira / semana / amanhã escuro
 *   chuva     #7fb8ff    tira / semana / amanhã escuro
 *
 * O TEMA segue o contrato do [clima_semana], não o do [clima_amanha]: texto e
 * ícones são SEMPRE claros, nos dois temas, e o que muda entre claro e escuro é
 * só o fundo translúcido da linha e a borda. Por isso as variáveis de texto e
 * de ícone não são redeclaradas no bloco --escuro.
 *
 * DIFERENTE, de propósito: a chance de chuva só aparece a partir de 20% (o
 * limiar da TIRA, LIMIAR_PROB_CHUVA_TIRA no PHP), enquanto o bloco da semana
 * mostra inclusive 0%. Lá a chuva tem linha própria e o zero é informação; aqui
 * ela divide uma linha estreita com o ícone, e quinze zeros empilhados seriam
 * ruído puro.
 *
 * ---------------------------------------------------------------------------
 * POR QUE AS COLUNAS SÃO LARGURA FIXA, E NÃO `auto`
 *
 * Cada linha é um grid INDEPENDENTE (precisa ser: o fundo translúcido e a borda
 * são de cada linha, e `display: contents` num grid único apagaria os dois).
 * Grids independentes não conversam entre si, então uma coluna `auto` teria
 * largura diferente em cada linha - a que tem "100%" de chuva empurraria a
 * mínima pra direita, e a coluna de temperatura sairia serrilhada de uma linha
 * pra outra. Com largura fixa em variável, todas as linhas dividem a mesma
 * grade e as barras ficam alinhadas verticalmente, que é o que faz a coluna de
 * barras ser lida como um gráfico só.
 *
 * ---------------------------------------------------------------------------
 * PONTOS DE CORTE - onde mexer pra testar
 *
 * DOIS números, cada um uma vez, em @container (medem a largura do PRÓPRIO
 * bloco, não a da janela):
 *
 *   @container elo-clima-tabela (min-width: 380px) -> folga confortável
 *   @container elo-clima-tabela (min-width: 620px) -> tipo e ícone maiores
 *
 * Abaixo de 380px vale o layout base, apertado de propósito: é o que garante
 * que nada transborde num celular de 320px dentro de uma coluna com padding.
 * Navegador sem suporte a @container fica no base - apertado, nunca quebrado.
 *
 * A BARRA É O ELEMENTO FLEXÍVEL (minmax(N, 1fr)): todas as outras colunas são
 * fixas, então é ela que absorve a variação de largura. O piso do minmax existe
 * pra ela não sumir quando o bloco é muito estreito - abaixo dele o grid
 * prefere transbordar, e é justamente o caso que os cortes acima evitam.
 * Medido em navegador (ver o commit): a 320px de janela sobram ~57px de barra,
 * e o conteúdo não transborda.
 *
 * O empilhamento vertical não precisa de regra nenhuma: a tabela já é uma
 * coluna de linhas por natureza. O que precisou de cuidado foi o INTERIOR da
 * linha, que é horizontal e tem cinco colunas.
 */

.elo-clima-tabela {
  /* Texto e ícones: SEMPRE claros, nos dois temas (ver o cabeçalho). */
  --elo-clima-tabela-cor-texto: rgba(255, 255, 255, 0.95);
  --elo-clima-tabela-cor-texto-suave: rgba(255, 255, 255, 0.72);

  /* Paleta dos ícones - a da tira (ver a tabela do cabeçalho). */
  --elo-clima-tabela-nuvem: #cbd5e1;
  --elo-clima-tabela-lua: #eef2f8;
  --elo-clima-tabela-amarelo: #ffd166;
  --elo-clima-tabela-azul: #7fb8ff;

  /* Fundo da LINHA - as quatro únicas variáveis que o tema escuro troca, nos
     mesmos valores do bloco da semana. */
  --elo-clima-tabela-fundo: rgba(255, 255, 255, 0.04);
  --elo-clima-tabela-fundo-borda: rgba(255, 255, 255, 0.09);
  --elo-clima-tabela-blur: 4px;
  --elo-clima-tabela-fundo-solido: rgba(15, 23, 42, 0.28);

  /* Grade da linha - todas fixas menos a barra (ver o cabeçalho). Base = o
     arranjo apertado, pra celular estreito; os @container do fim do arquivo
     folgam esses números. */
  --elo-clima-tabela-col-dia: 3.5rem;
  --elo-clima-tabela-col-condicao: 2.4rem;
  --elo-clima-tabela-col-temp: 2.1rem;
  /* BARRA EM PORCENTAGEM DO BLOCO, não em pixels. Em pixels ela precisaria de
     um valor por faixa e ficaria pequena de novo em tela larga (o problema que
     esta rodada corrigiu); em porcentagem, acompanha sozinha qualquer largura,
     inclusive as que não têm ponto de corte. As demais colunas são fixas, então
     a porcentagem nunca compete com elas por espaço: sobra sempre para o ícone,
     que é a coluna flexível. */
  --elo-clima-tabela-barra-largura: 24%;
  --elo-clima-tabela-gap: 7px;
  --elo-clima-tabela-espaco-linhas: 6px;
  --elo-clima-tabela-padding-x: 12px;
  --elo-clima-tabela-padding-y: 8px;
  --elo-clima-tabela-icone: 1.5rem;
  --elo-clima-tabela-corpo: 0.88rem;
  --elo-clima-tabela-prob: 0.66rem;

  box-sizing: border-box;
  width: 100%;
  /* Responde à PRÓPRIA largura, não à da janela - numa coluna estreita do
     WPBakery a tabela se organiza pelo espaço que TEM. Mesma decisão dos
     demais blocos. */
  container-type: inline-size;
  container-name: elo-clima-tabela;
  color: var(--elo-clima-tabela-cor-texto);
}

/* ---- TEMA ESCURO (tema="escuro") ----
   Só o fundo da linha, nada de texto nem de ícone: um tom mais fechado por
   baixo, pra o texto claro continuar legível quando a linha do WPBakery tiver
   fundo pouco contrastado. Mesmos valores do bloco da semana. */
.elo-clima-tabela--escuro {
  --elo-clima-tabela-fundo: rgba(2, 6, 23, 0.32);
  --elo-clima-tabela-fundo-borda: rgba(255, 255, 255, 0.14);
  --elo-clima-tabela-blur: 6px;
  --elo-clima-tabela-fundo-solido: rgba(2, 6, 23, 0.5);
}

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

/* Mapeamento das cores do REALCE no ponteiro - o efeito em si vive em
   elo-clima-realce.css, compartilhado com os cartões do [clima_semana] (mesma
   ampliação, mesma curva, mesmos 650ms nos dois sentidos, sem sombra, restrito
   a ponteiro real e respeitando prefers-reduced-motion). Aqui só se diz o que
   "mais presente" significa neste bloco - os mesmos valores de hover que o
   bloco da semana usa, já que o fundo de repouso também é o mesmo.
   A classe .elo-clima-realce é acrescentada pelo PHP, na linha.
   
   A ESCALA É MENOR QUE A DO CARTÃO, e tem de ser: 1,06 num cartão de ~180px
   cresce 11px no total; numa LINHA de 1168px cresceriam 70px, 35px por lado,
   transbordando a coluna do WPBakery. 1,012 devolve ~14px numa linha larga, na
   ordem de grandeza do cartão - o efeito lê igual, sem estourar a caixa. */
.elo-clima-tabela__linha {
  --elo-clima-realce-escala: 1.012;
  --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);
  /* Contexto de posicionamento pro z-index do realce (a linha ampliada precisa
     passar POR CIMA das vizinhas, senão a borda da seguinte corta a dela). No
     repouso não muda nada. */
  position: relative;
}

/* No tema escuro o realce FECHA mais o fundo em vez de clarear: o texto é
   claro, então mais escuro por baixo é mais contraste, não menos. Mesmos
   valores do bloco da semana. */
.elo-clima-tabela--escuro .elo-clima-tabela__linha {
  --elo-clima-realce-fundo: rgba(2, 6, 23, 0.46);
  --elo-clima-realce-borda: rgba(255, 255, 255, 0.24);
  --elo-clima-realce-fundo-solido: rgba(2, 6, 23, 0.6);
}

.elo-clima-tabela__lista {
  display: flex;
  flex-direction: column;
  gap: var(--elo-clima-tabela-espaco-linhas);
}

/* ---- A linha do dia ----
   CANTOS BEM ARREDONDADOS NAS DUAS PONTAS: raio maior que a metade da altura,
   então as extremidades saem semicirculares em qualquer altura de linha, sem
   depender de a altura ser um número fixo. O padding horizontal é generoso
   justamente por causa disso - dentro da curva não cabe texto. */
.elo-clima-tabela__linha {
  display: grid;
  /* A COLUNA FLEXÍVEL É A DO ÍCONE. Passou por três desenhos até aqui, e a
     razão do atual é o que se quer VER:
       1. barra flexível -> ela engolia toda a sobra (855px de 1168px) e não
          sobrava espaço pro nome do dia por extenso;
       2. dia flexível -> a sobra ia toda pro nome, e o ícone era empurrado pra
          direita, colado no grupo da temperatura, com um vazio enorme depois do
          nome do dia;
       3. ÍCONE flexível (este) -> o nome do dia ocupa o que precisa, o grupo
          mínima-barra-máxima fica à direita, e a folga sobra no meio, com o
          ícone CENTRADO nela. Distância equilibrada dos dois lados em qualquer
          largura, sem nenhuma conta condicional.
     O ícone se centraliza sozinho: a célula é um flex em coluna com
     align-items:center, então ele fica no meio do que a coluna tiver. */
  grid-template-columns:
    var(--elo-clima-tabela-col-dia)
    minmax(var(--elo-clima-tabela-col-condicao), 1fr)
    var(--elo-clima-tabela-col-temp)
    var(--elo-clima-tabela-barra-largura)
    var(--elo-clima-tabela-col-temp);
  align-items: center;
  gap: var(--elo-clima-tabela-gap);
  padding: var(--elo-clima-tabela-padding-y) var(--elo-clima-tabela-padding-x);
  border-radius: 999px;
  background: var(--elo-clima-tabela-fundo);
  border: 1px solid var(--elo-clima-tabela-fundo-borda);
  backdrop-filter: blur(var(--elo-clima-tabela-blur));
  -webkit-backdrop-filter: blur(var(--elo-clima-tabela-blur));
}

/* ---- GRADES ALTERNATIVAS (atributos desligados) ----
   A grade padrão acima tem cinco colunas. Quando um atributo desliga uma delas,
   a coluna não pode ficar como um vão vazio - o template muda junto. São
   CLASSES e não uma variável com o template pronto: variável cujo valor tem
   var() dentro é resolvida no elemento que a DECLARA, e as larguras de coluna
   são trocadas pelos @container lá embaixo; o template sairia congelado nos
   valores do arranjo apertado. Ver a nota correspondente no PHP. */
.elo-clima-tabela--sem-condicao .elo-clima-tabela__linha {
  grid-template-columns:
    minmax(var(--elo-clima-tabela-col-dia), 1fr)
    var(--elo-clima-tabela-col-temp)
    var(--elo-clima-tabela-barra-largura)
    var(--elo-clima-tabela-col-temp);
}

/* Sem a coluna do ícone não há onde a folga ficar no meio, então ela volta pro
   nome do dia - é a única coluna que pode crescer sem virar vão morto. */

/* Sem temperatura não há barra (o atributo da barra depende dela), então sobram
   o dia e a condição - e a condição toma o espaço restante em vez de ficar
   grudada no dia. */
.elo-clima-tabela--sem-temperatura .elo-clima-tabela__linha {
  grid-template-columns: minmax(var(--elo-clima-tabela-col-dia), 1fr) auto;
}

.elo-clima-tabela--sem-temperatura.elo-clima-tabela--sem-condicao .elo-clima-tabela__linha {
  grid-template-columns: 1fr;
}

/* Barra desligada, temperatura ligada: espaçador invisível segurando a coluna
   flexível, pra mínima e máxima ficarem em pontas opostas da linha. */
.elo-clima-tabela__espacador {
  display: block;
  min-width: 0;
}

/* Sem suporte a backdrop-filter: escuro translúcido sólido, mesmo fallback do
   hero, da tira e dos demais blocos. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .elo-clima-tabela__linha {
    background: var(--elo-clima-tabela-fundo-solido);
  }
}

/* A linha inteira dita de uma vez pra leitor de tela, já que as células visuais
   são pedaços soltos e marcados aria-hidden. Fora da tela sem display:none nem
   visibility:hidden, que retirariam o texto da árvore de acessibilidade. */
.elo-clima-tabela__acessivel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 1. O dia ("Sex 21", ou "Hoje" na primeira linha) ----
   text-transform: capitalize porque data_curta() entrega em minúscula ("sex
   21") - a mesma função serve o bloco da semana, que usa maiúscula inteira no
   cartão. Aqui a linha é larga e a maiúscula inteira gritaria ao lado de
   quinze irmãs; capitalize dá o "Sex 21" pedido sem uma segunda função no PHP. */
/* NUNCA TRUNCA, em nenhuma largura. A primeira versão tinha
   `overflow: hidden` com `text-overflow: ellipsis` numa coluna de largura fixa,
   e "Dom 30" saía "Dom 3…" no celular estreito - reticências num rótulo de seis
   caracteres não economizam nada e ainda tiram a informação. Agora a coluna é a
   FLEXÍVEL da grade (ver a nota na linha), com um piso que cabe o rótulo curto
   inteiro, e o recorte saiu junto com o overflow. */
.elo-clima-tabela__dia {
  font-size: var(--elo-clima-tabela-corpo);
  font-weight: 600;
  line-height: 1.15;
  text-transform: capitalize;
  color: var(--elo-clima-tabela-cor-texto-suave);
  white-space: nowrap;
}

/* DOIS FORMATOS, um por faixa de largura. O PHP imprime os dois (não tem como
   saber a largura do bloco) e aqui se escolhe: curto ("Ter 25") no celular, por
   extenso ("Terça-feira 25") de tablet pra cima, onde sobra espaço desde que a
   barra deixou de ser a coluna flexível. */
.elo-clima-tabela__dia-longo {
  display: none;
}

/* "Hoje" é a linha de referência da tabela - fica na cor cheia, como a máxima,
   em vez da suave das outras datas. */
.elo-clima-tabela__dia--hoje {
  color: var(--elo-clima-tabela-cor-texto);
  font-weight: 700;
}

/* ---- 2 e 3. Ícone da condição e a chance de chuva, juntos ----
   Juntos numa célula só porque a chance de chuva é uma qualificação do ícone
   (chove quanto?), não uma quinta informação independente. À esquerda da
   temperatura, na ordem em que se lê a linha. */
/* ÍCONE EM CIMA, PORCENTAGEM EMBAIXO (arranjo do app Tempo do iPhone). Antes
   ficavam lado a lado, o que alargava a coluna e empurrava tudo. Empilhados, a
   coluna fica com a largura do ícone e a porcentagem cabe até na linha estreita.

   A ALTURA MÍNIMA RESERVA O ESPAÇO DA PORCENTAGEM MESMO QUANDO ELA NÃO SAI -
   sem isso, as linhas com chuva ficariam mais altas que as sem, e uma tabela de
   quinze linhas com alturas diferentes perde o alinhamento que é a razão de ela
   existir. Cada linha é um grid próprio, então não há como uma emparelhar a
   altura da outra sozinha. */
.elo-clima-tabela__condicao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: calc(var(--elo-clima-tabela-icone) + 2px + var(--elo-clima-tabela-prob));
}

.elo-clima-tabela__icone {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
  color: var(--elo-clima-tabela-nuvem);
}

.elo-clima-tabela__icone-svg {
  width: var(--elo-clima-tabela-icone);
  height: var(--elo-clima-tabela-icone);
  display: block;
  fill: currentColor;
}

/* Sol e lua dos ícones COMBINADOS só de contorno - o arco aberto do Lucide
   fecha com uma reta quando preenchido, e ela aparece cortando o disco. Mesma
   correção dos demais blocos. */
.elo-clima-tabela__icone-svg .elo-astro {
  fill: none;
}

.elo-clima-tabela__icone--sol {
  color: var(--elo-clima-tabela-amarelo);
}

.elo-clima-tabela__icone--lua {
  color: var(--elo-clima-tabela-lua);
}

.elo-clima-tabela__icone--sol .elo-anim-nuvem,
.elo-clima-tabela__icone--lua .elo-anim-nuvem {
  fill: var(--elo-clima-tabela-nuvem);
  stroke: var(--elo-clima-tabela-nuvem);
}

.elo-clima-tabela__icone .elo-anim-gota,
.elo-clima-tabela__icone .elo-anim-floco {
  stroke: var(--elo-clima-tabela-azul);
}

/* No AZUL DA CHUVA, e não na cor do texto: é o mesmo azul das gotas do ícone
   logo ao lado, então o número se lê como parte do ícone em vez de mais um
   número na linha (já são três). */
/* PESO NORMAL, não semibold. Em 600 o número ficava mais grosso que tudo em
   volta e puxava a atenção pra ele em vez de pro ícone que ele qualifica - e são
   quinze linhas, então o excesso se multiplica. Corpo e cor (o azul das gotas)
   continuam os mesmos: o que muda é só o peso. */
.elo-clima-tabela__prob {
  font-size: var(--elo-clima-tabela-prob);
  font-weight: 400;
  line-height: 1;
  color: var(--elo-clima-tabela-azul);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 4 e 6. Mínima e máxima ----
   Alinhadas pra DENTRO da barra (mínima à direita da sua célula, máxima à
   esquerda da sua): assim os dois números encostam na barra que descrevem, em
   vez de ficarem grudados nas bordas da linha. tabular-nums mantém a coluna
   reta com qualquer dígito. */
.elo-clima-tabela__temp {
  font-size: var(--elo-clima-tabela-corpo);
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.elo-clima-tabela__temp--min {
  text-align: right;
  color: var(--elo-clima-tabela-cor-texto-suave);
}

.elo-clima-tabela__temp--max {
  text-align: left;
  color: var(--elo-clima-tabela-cor-texto);
}

/* ---- 5. A barra de temperatura, com ESCALA COMUM ----
 *
 * A RÉGUA (.elo-clima-tabela__barra) é a célula flexível inteira e representa a
 * amplitude dos QUINZE dias - da mínima mais baixa à máxima mais alta do
 * conjunto exibido. A FATIA de cada dia é recortada dessa régua com as duas
 * porcentagens que o PHP calculou (as mesmas funções do bloco da semana).
 *
 * O GRADIENTE VIVE NA FATIA MAS ESTÁ DIMENSIONADO PELA RÉGUA: a fatia é um
 * elemento absoluto com inset:0, ou seja, ela tem a largura inteira da régua, e
 * só DEPOIS é recortada pelo clip-path. É isso que faz a mesma temperatura ter
 * a mesma cor em todas as quinze linhas. Se o gradiente fosse aplicado ao
 * pedaço visível, cada dia teria seu próprio azul-ao-âmbar e a cor deixaria de
 * significar temperatura - que é justamente o que esta tabela existe pra
 * mostrar, e com quinze dias o erro seria muito mais visível que com seis.
 *
 * Sem suporte a clip-path a fatia some (fica a régua vazia) em vez de mostrar a
 * barra inteira: melhor não informar que informar errado, já que barra cheia
 * diria "este dia cobre a quinzena toda". */
.elo-clima-tabela__barra {
  position: relative;
  display: block;
  /* Grid com coluna minmax() ainda dá min-width:auto ao item; sem isto, um
     conteúdo interno maior que o piso empurraria a linha. Aqui a barra não tem
     conteúdo, mas a regra evita a classe de bug que já apareceu na fila do
     bloco da semana. */
  min-width: 0;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.elo-clima-tabela__barra-fatia {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--elo-clima-tabela-azul) 0%, #7dd3a0 45%, var(--elo-clima-tabela-amarelo) 100%);
  clip-path: inset(0 calc(100% - var(--elo-clima-tabela-fim)) 0 var(--elo-clima-tabela-ini) round 999px);
}

@supports not (clip-path: inset(0 0 0 0 round 999px)) {
  .elo-clima-tabela__barra-fatia {
    display: none;
  }
}

/* Dia sem os dois números (borda do payload): a régua fica lá, vazia, e a linha
   não perde a coluna - sem isto o grid colapsaria só naquela linha e a coluna
   da máxima sairia do lugar. */
.elo-clima-tabela__barra--vazia {
  opacity: 0.4;
}

/* ---- FOLGA CONFORTÁVEL (a partir de 380px do bloco) ----
   Ponto de corte 1 de 2. Abaixo disso vale o base, apertado de propósito.

   ATENÇÃO ao seletor: quem recebe a regra é a LISTA, nunca o bloco. Uma
   @container só alcança os DESCENDENTES do container - o elemento que declara
   container-type não responde à própria consulta. Achado real do bloco da
   semana, que ficou preso em duas colunas sem nenhum erro de CSS. */
@container elo-clima-tabela (min-width: 380px) {
  .elo-clima-tabela__lista {
    /* O CRESCIMENTO DAS COLUNAS FIXAS AQUI É COMEDIDO DE PROPÓSITO. Elas são
       o que sobra pra barra: um salto grande faria a barra ENCOLHER ao cruzar
       o corte, e a coluna flexível diminuir quando o bloco aumenta lê como
       defeito. Medido em navegador (ver o commit): com estes valores a barra
       cresce monotonicamente em todos os cortes. */
    --elo-clima-tabela-col-dia: 4rem;
    --elo-clima-tabela-col-condicao: 2.8rem;
    --elo-clima-tabela-col-temp: 2.35rem;
    --elo-clima-tabela-barra-largura: 28%;
    --elo-clima-tabela-gap: 9px;
    --elo-clima-tabela-espaco-linhas: 8px;
    --elo-clima-tabela-padding-x: 14px;
    --elo-clima-tabela-padding-y: 10px;
    --elo-clima-tabela-icone: 1.75rem;
    --elo-clima-tabela-corpo: 0.95rem;
    --elo-clima-tabela-prob: 0.7rem;
  }
}

/* ---- TIPO E ÍCONE MAIORES (a partir de 620px do bloco) ----
   Ponto de corte 2 de 2. Numa linha larga do WPBakery a tabela ganha corpo: o
   que cresce é o ícone e o número, não a barra (ela já é a coluna flexível e
   cresce sozinha em qualquer largura). */
@container elo-clima-tabela (min-width: 620px) {
  .elo-clima-tabela__lista {
    /* A COLUNA DO DIA cresce muito aqui porque é onde o rótulo passa a ser por
       extenso: "Segunda-feira 30" é o mais largo dos sete, e a coluna precisa
       caber ele inteiro sem truncar. Agora ela é FIXA (a flexível é a do
       ícone), então este número é o que garante que nada seja cortado - medido
       em navegador com os sete nomes, os dias de 1 a 31 e cinco famílias de
       fonte: 163px cabe "Segunda-feira 30" na fonte do site (Open Sans, 141px),
       na do sistema (143px), em Georgia (154px) e em Tahoma (150px). Verdana,
       que é a mais larga que se testou, pediria 168px e passaria 5px do limite
       - e mesmo aí não trunca nem quebra: como não há mais recorte, o excesso
       entra na folga vazia da coluna do ícone, que tem centenas de pixels. */
    --elo-clima-tabela-col-dia: 10.2rem;
    --elo-clima-tabela-col-condicao: 3rem;
    --elo-clima-tabela-col-temp: 2.7rem;
    /* 32% do bloco: numa linha de 1168px dá ~374px. É o meio-termo entre os
       855px do desenho original (barra dominando a linha, 73% dela) e os 132px
       da rodada passada (11%, curta demais - a linha lia como vazia). Em
       porcentagem, uma tela mais larga que 1168px também ganha barra maior, em
       vez de manter um valor fixo que encolhe em proporção. */
    --elo-clima-tabela-barra-largura: 32%;
    --elo-clima-tabela-gap: 12px;
    --elo-clima-tabela-espaco-linhas: 9px;
    --elo-clima-tabela-padding-x: 20px;
    --elo-clima-tabela-padding-y: 12px;
    --elo-clima-tabela-icone: 2rem;
    --elo-clima-tabela-corpo: 1.06rem;
    --elo-clima-tabela-prob: 0.76rem;
  }

  /* DIA DA SEMANA POR EXTENSO daqui pra cima - "de tablet pra cima" na prática:
     um tablet de 768px deixa o bloco em ~736px, bem acima deste corte, e um
     celular de 414px o deixa em ~382px, abaixo. Como o corte é de container, um
     bloco em coluna estreita de um desktop também recebe o formato curto, que é
     o comportamento certo: quem manda é o espaço, não o aparelho. */
  .elo-clima-tabela__dia-curto {
    display: none;
  }

  .elo-clima-tabela__dia-longo {
    display: inline;
  }

  .elo-clima-tabela__barra {
    height: 7px;
  }
}