/*
 * Bloco da semana ([clima_semana]): seis cartões em fila, começando no
 * terceiro dia a partir de hoje (hoje está no hero, amanhã e depois de amanhã
 * nos cartões grandes). O título da seção é do WPBakery; este arquivo não
 * estiliza título nenhum.
 *
 * ---------------------------------------------------------------------------
 * RELAÇÃO COM O [clima_amanha] - o que é igual e o que é diferente de propósito
 *
 * IGUAL: os ícones de condição (os mesmos preenchidos da tira, via
 * icone_condicao_tira no PHP), a paleta deles, o separador DESENHADO entre
 * mínima e máxima, a ordem mínima-esquerda/máxima-direita, e o tratamento de
 * fundo translúcido com desfoque.
 *
 * DIFERENTE, e esta é a diferença que mais importa:
 *
 *   No [clima_amanha], tema="escuro" troca TUDO - texto, rótulos, ícones e
 *   fundo. Aqui, NÃO: o texto e os ícones são SEMPRE claros, nos dois temas.
 *   O único que muda entre claro e escuro é o FUNDO TRANSLÚCIDO de cada cartão
 *   e as bordas finas.
 *
 *   O motivo é o lugar de cada bloco. O de amanhã pode ir numa linha de fundo
 *   claro (foi pra isso que nasceu) e ali texto claro sumiria. Este vive numa
 *   linha de fundo escuro ou com imagem, junto do hero e da tira - o que varia
 *   não é a claridade do texto, é quanto de escuro o cartão precisa colocar por
 *   baixo pra o texto claro continuar legível. Daí tema="escuro" aqui
 *   significar "puxa o fundo do cartão pra um tom mais fechado", não "inverte
 *   a paleta".
 *
 * Por isso as variáveis de cor de texto e de ícone NÃO são redeclaradas no
 * bloco --escuro lá embaixo: só as quatro de fundo/borda são.
 *
 * ---------------------------------------------------------------------------
 * PALETA (contrato copiado, não referenciado)
 *
 * Os valores são os da TIRA, iguais aos que o [clima_amanha] usa no tema
 * escuro. Ficam copiados aqui pelo mesmo motivo documentado lá: as variáveis da
 * tira são declaradas dentro de .elo-clima-tira e não cascateiam, e uma página
 * pode ter este bloco sem o CSS da tira sequer enfileirado - var() sem valor
 * não cai em fallback, cai em transparente/preto sem aviso.
 *
 *   peça      valor      igual a
 *   nuvem     #cbd5e1    tira / amanhã escuro
 *   lua       #eef2f8    tira / amanhã escuro
 *   sol       #ffd166    tira / amanhã escuro
 *   chuva     #7fb8ff    tira / amanhã escuro
 *
 * ---------------------------------------------------------------------------
 * PONTOS DE CORTE - onde mexer pra testar
 *
 * São DOIS números, cada um aparecendo UMA vez no arquivo, em regras
 * @container (medem a largura do PRÓPRIO bloco, não a da janela):
 *
 *   ~linha 265  @container elo-clima-semana (min-width: 420px) -> 3 colunas
 *   ~linha 280  @container elo-clima-semana (min-width: 880px) -> 6 em fila
 *
 * Abaixo de 420px o bloco fica em 2 colunas, que é o layout base (nenhum
 * @container precisa valer pra ele funcionar - navegador sem suporte fica
 * nele, nunca quebrado).
 *
 * SEIS CARTÕES DIVIDEM BEM NOS TRÊS ARRANJOS: 6, 3+3 e 2+2+2 - nenhum deles
 * deixa cartão sozinho na última linha. Com cinco (a versão anterior deste
 * bloco), o celular ficava 2+2+1, e era esse cartão órfão que motivou a
 * mudança. Se um dia o número de dias mudar de novo, escolher um que divida
 * por 2 e por 3.
 *
 * O CORTE DE 880px NÃO É O MÍNIMO QUE CABE, é o mínimo com folga. Medido: o
 * cartão tem 120px de min-content com a fonte do sistema, mas 128px com uma
 * fonte larga (o bloco herda a fonte da página, e o tema pode trocá-la) - seis
 * colunas caberiam em 848px no pior caso. 880 deixa margem pra fonte mais
 * larga ainda; abaixo disso o arranjo cairia pra 5+1, com o órfão de volta.
 * Conferido com system-ui, Georgia e Verdana, no conteúdo mais largo possível
 * (duas temperaturas negativas de dois dígitos e 100% de chuva).
 *
 * var() não funciona dentro da condição de @container (ela é avaliada antes da
 * cascata), então "um lugar só por número" é este índice aqui em cima - mesma
 * limitação já documentada no CSS do bloco de amanhã.
 *
 * POR QUE QUEBRA EM LINHAS E NÃO ROLAGEM HORIZONTAL (como a tira): o sentido
 * deste bloco é COMPARAR os seis dias - a barra de temperatura só conta a
 * história da frente fria se os dias estiverem visíveis juntos. Rolagem
 * esconde parte do conjunto atrás de um gesto; quebrar em duas ou três linhas
 * mantém os seis na tela ao mesmo tempo. A tira rola porque 24 horas não
 * cabem de outro jeito; seis dias cabem. As colunas têm sempre a mesma
 * largura (flex-basis calculado), então as barras continuam comparáveis entre
 * linhas diferentes.
 */

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

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

  --elo-clima-semana-icone: clamp(2.2rem, 7vw, 3rem);
  --elo-clima-semana-gap: 12px;
  /* Quantas colunas a fila tem AGORA - trocada pelos @container no fim do
     arquivo. Uma variável só, em vez de reescrever o flex-basis em cada corte. */
  --elo-clima-semana-colunas: 2;

  /* Fundo do CARTÃO - as quatro únicas variáveis que o tema escuro troca.
     Padrão (claro): o mesmo tratamento translúcido que o bloco de amanhã usa
     no tema escuro (0.04 de branco, borda 0.09, desfoque 4px). */
  --elo-clima-semana-fundo: rgba(255, 255, 255, 0.04);
  --elo-clima-semana-fundo-borda: rgba(255, 255, 255, 0.09);
  --elo-clima-semana-blur: 4px;
  --elo-clima-semana-fundo-solido: rgba(15, 23, 42, 0.28);
  /* Estado de HOVER (ver o bloco no fim do arquivo). Ficam aqui, ao lado dos
     valores de repouso, porque cada tema precisa do seu par - e é o tema que
     decide o que "mais presente" significa: no claro, mais branco por cima; no
     escuro, mais escuro por baixo. Nos dois o cartão fica mais SÓLIDO, que é o
     que lê como "veio pra frente". */
  --elo-clima-semana-fundo-hover: rgba(255, 255, 255, 0.09);
  --elo-clima-semana-fundo-borda-hover: rgba(255, 255, 255, 0.2);
  --elo-clima-semana-fundo-solido-hover: rgba(15, 23, 42, 0.38);

  box-sizing: border-box;
  width: 100%;
  /* O bloco responde à PRÓPRIA largura (container query), não à da janela -
     mesma razão do bloco de amanhã: numa coluna estreita do WPBakery ele se
     organiza pelo espaço que TEM, não pelo que a página tem. */
  container-type: inline-size;
  container-name: elo-clima-semana;
  color: var(--elo-clima-semana-cor-texto);
}

/* ---- TEMA ESCURO (tema="escuro") ----
   Só o fundo do cartão, nada de texto nem de ícone (ver o cabeçalho): um tom
   mais fechado por baixo, pra o texto claro continuar legível quando a linha
   do WPBakery tiver fundo pouco contrastado (foto clara, degradê médio). */
.elo-clima-semana--escuro {
  --elo-clima-semana-fundo: rgba(2, 6, 23, 0.32);
  --elo-clima-semana-fundo-borda: rgba(255, 255, 255, 0.14);
  --elo-clima-semana-blur: 6px;
  --elo-clima-semana-fundo-solido: rgba(2, 6, 23, 0.5);
  /* No escuro o hover FECHA mais o fundo em vez de clarear: o texto é claro,
     então mais escuro por baixo é mais contraste, não menos. */
  --elo-clima-semana-fundo-hover: rgba(2, 6, 23, 0.46);
  --elo-clima-semana-fundo-borda-hover: rgba(255, 255, 255, 0.24);
  --elo-clima-semana-fundo-solido-hover: rgba(2, 6, 23, 0.6);
}

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

/* ---- A fila ----
   justify-content: center é herança da versão de cinco cartões, onde a última
   linha ficava incompleta. Com seis não há linha incompleta em nenhum dos três
   arranjos - fica como rede de segurança pra um dia com menos dias no payload
   (a lista é filtrada pelos que existem), que aí volta a ter sobra. */
.elo-clima-semana__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--elo-clima-semana-gap);
}

/* Largura da coluna calculada a partir do número de colunas do momento - é o
   que mantém todos os cartões com a MESMA largura em qualquer arranjo (e, por
   consequência, as barras de temperatura comparáveis entre linhas). */
.elo-clima-semana__dia {
  flex: 0 0 calc((100% - (var(--elo-clima-semana-colunas) - 1) * var(--elo-clima-semana-gap)) / var(--elo-clima-semana-colunas));
  /* SEM ISTO A CONTA DE COLUNAS NÃO VALE. Item de flex tem min-width:auto por
     padrão, e não encolhe abaixo do próprio min-content - a linha da
     temperatura (nowrap) empurrava o cartão pra 118px onde o flex-basis pedia
     115px, e os cartões não cabiam mais: a fila caía sozinha pra uma coluna a
     menos, sem nenhum erro de CSS. Achado real, pego medindo em navegador. */
  min-width: 0;
  /* Contexto de posicionamento pro z-index do hover (o cartão ampliado precisa
     passar POR CIMA dos vizinhos, senão a borda do vizinho seguinte corta a
     dele). No repouso não muda nada. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 16px;
  border-radius: 14px;
  background: var(--elo-clima-semana-fundo);
  border: 1px solid var(--elo-clima-semana-fundo-borda);
  backdrop-filter: blur(var(--elo-clima-semana-blur));
  -webkit-backdrop-filter: blur(var(--elo-clima-semana-blur));
  text-align: center;
}

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

/* ---- Data curta ("qui 20") ----
   Só dia da semana abreviado e dia do mês: o cartão é estreito, e a data por
   extenso dos cartões grandes não caberia. Minúscula com espaçamento, no
   tratamento dos rótulos do resto do plugin. */
.elo-clima-semana__data {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--elo-clima-semana-cor-texto-suave);
}

/* ---- Ícone de condição (o destaque do cartão) ----
   Mesma mecânica do bloco de amanhã: cor padrão = cinza da nuvem, e os
   modificadores trocam pra sol/lua. */
.elo-clima-semana__icone {
  display: inline-flex;
  line-height: 0;
  color: var(--elo-clima-semana-nuvem);
}

.elo-clima-semana__icone-svg {
  width: var(--elo-clima-semana-icone);
  height: var(--elo-clima-semana-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 do bloco de amanhã (aqui o ícone é menor, mas ainda grande o
   bastante pra o defeito aparecer). */
.elo-clima-semana__icone-svg .elo-astro {
  fill: none;
}

.elo-clima-semana__icone--sol {
  color: var(--elo-clima-semana-amarelo);
}

.elo-clima-semana__icone--lua {
  color: var(--elo-clima-semana-lua);
}

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

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

/* ---- Rótulo da condição ----
   Duas linhas no máximo em cartão estreito ("Pancada de chuva"), então a
   line-height é apertada como a dos rótulos do bloco de amanhã. */
.elo-clima-semana__condicao {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--elo-clima-semana-cor-texto);
  text-wrap: balance;
}

/* ---- Mínima e máxima ---- */
.elo-clima-semana__temperatura {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 0;
  /* O TAMANHO DO NÚMERO ACOMPANHA O NÚMERO DE COLUNAS (trocado nos @container
     do fim do arquivo), não a largura da janela: é o conteúdo que decide se os
     seis cabem numa fila, e um clamp por vw não sabe quantas colunas o bloco
     está usando. Base = 2 colunas, o cartão mais largo dos três arranjos. */
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A mínima é a informação secundária das duas (a máxima é a que se procura
   primeiro), então vem um pouco mais apagada - a hierarquia que nos cartões
   grandes vinha das legendas "mínima"/"máxima", que aqui não cabem. */
.elo-clima-semana__temp--min {
  color: var(--elo-clima-semana-cor-texto-suave);
}

.elo-clima-semana__temp--max {
  color: var(--elo-clima-semana-cor-texto);
}

/* O MESMO separador desenhado dos cartões de amanhã (elemento inclinado, nunca
   o caractere "/"), em escala menor - altura em em, então acompanha o número
   sozinho. */
.elo-clima-semana__separador {
  flex-shrink: 0;
  width: 2px;
  height: 0.66em;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.25;
  transform: rotate(14deg);
}

/* ---- Barra de temperatura com ESCALA COMUM ----
 *
 * Aqui a barra finalmente compara. A RÉGUA (.elo-clima-semana__barra) é sempre
 * a largura inteira do cartão e representa a amplitude dos seis dias - da
 * mínima mais baixa à máxima mais alta do conjunto. A FATIA de cada dia é
 * recortada dessa régua, com as duas porcentagens que o PHP calculou.
 *
 * O gradiente vive na fatia mas está dimensionado pela RÉGUA (inset: 0 sobre o
 * elemento de largura total, recortado depois) - é isso que faz a mesma
 * temperatura ter a mesma cor em todos os cartões. Se o gradiente fosse
 * aplicado só ao pedaço visível, cada dia teria seu próprio azul-ao-âmbar e a
 * cor deixaria de significar temperatura.
 *
 * O recorte é clip-path com cantos arredondados. Sem suporte, a fatia some
 * (fica só a régua vazia) em vez de mostrar a barra inteira - melhor não
 * informar que informar errado, já que uma barra cheia diria "este dia cobre a
 * semana toda". */
.elo-clima-semana__barra {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  /* ESPAÇAMENTO EQUIDISTANTE, medido pela TINTA e não pela caixa. A caixa do
     texto da temperatura é mais alta que os dígitos (a linha reserva o espaço
     dos descendentes, que "20°" não usa), então uma folga de caixa igual dos
     dois lados deixava ~13px de vazio acima da barra e 10px abaixo: ela parecia
     pertencer à linha de chuva, e sugeria uma relação com a chuva que não
     existe - a barra é da temperatura. Medido em navegador nos três arranjos:
     13,03 / 13,31 / 13,60px acima contra 10px abaixo. Tirar 2px de cima e pôr
     1px embaixo equilibra em ~11px dos dois lados (o resto da diferença entre
     arranjos é o tamanho do número, e fica em menos de 1px).
     Rótulo NÃO entra: a posição já explica a barra, e foi decisão do Robson. */
  margin: 0 0 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

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

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

/* ---- Linha de chance de chuva ----
   Ícone, rótulo e valor em UMA linha (nos cartões grandes cada módulo é
   empilhado; aqui não há espaço nem necessidade - é um número só). */
.elo-clima-semana__chuva {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--elo-clima-semana-cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.elo-clima-semana__chuva-icone {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Contorno, não preenchido: ícone de INTERFACE, como as pílulas do hero. */
.elo-clima-semana__chuva-svg {
  width: 100%;
  height: 100%;
}

.elo-clima-semana__chuva-valor {
  font-weight: 600;
  color: var(--elo-clima-semana-cor-texto);
}

/* ---- TRÊS COLUNAS (a partir de 420px do bloco) ----
   Ponto de corte 1 de 2 (ver o índice no cabeçalho).

   ATENÇÃO ao seletor: quem recebe a regra é a FILA (.elo-clima-semana__fila),
   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, pego na medição: com a regra em .elo-clima-semana, o bloco ficava
   preso em duas colunas em qualquer largura, sem nenhum erro de CSS. Os
   cartões leem a variável da fila por herança. */
@container elo-clima-semana (min-width: 420px) {
  .elo-clima-semana__fila {
    --elo-clima-semana-colunas: 3;
    --elo-clima-semana-gap: 14px;
  }

  .elo-clima-semana__temperatura {
    font-size: 1.25rem;
  }
}

/* ---- SEIS EM FILA (a partir de 880px do bloco) ----
   Ponto de corte 2 de 2. É o arranjo alvo: a semana inteira lado a lado, que é
   onde a barra de temperatura conta a história de uma vez. Sobre o número 880
   (e por que não é o mínimo que cabe), ver o cabeçalho. */
@container elo-clima-semana (min-width: 880px) {
  .elo-clima-semana__fila {
    --elo-clima-semana-colunas: 6;
    --elo-clima-semana-gap: 16px;
  }

  .elo-clima-semana__temperatura {
    font-size: 1.15rem;
  }
}

/* ---- HOVER DO CARTÃO ----
 *
 * O EFEITO EM SI MORA EM elo-clima-realce.css, compartilhado com a tabela de
 * quinze dias - inclusive o histórico das decisões (a versão em dock do macOS
 * descartada, a assimetria entrada/saída desfeita, a ausência de sombra, os
 * 650ms nos dois sentidos, o recorte a ponteiro real e o prefers-reduced-motion).
 * Foi extraído de aqui, não reescrito: o cartão continua com exatamente o mesmo
 * efeito, só que a definição passou a ser de um lugar só.
 *
 * O que sobra aqui é o que é DESTE bloco: o mapeamento das quatro variáveis de
 * cor (o realce não conhece cor nenhuma) e o contexto de posicionamento pro
 * z-index. A classe .elo-clima-realce é acrescentada pelo PHP, no mesmo
 * elemento. */
.elo-clima-semana__dia {
  --elo-clima-realce-fundo: var(--elo-clima-semana-fundo-hover);
  --elo-clima-realce-borda: var(--elo-clima-semana-fundo-borda-hover);
  --elo-clima-realce-fundo-solido: var(--elo-clima-semana-fundo-solido-hover);
}