/*
 * Tira das próximas 24 horas ([clima_tira]). Módulo com fundo próprio SUTIL,
 * pensado pra ficar logo abaixo do hero numa linha de FUNDO ESCURO do WPBakery.
 * Referência: a tira horária do app Tempo do iPhone. O plugin nunca desenha o
 * fundo da linha - só este módulo translúcido discreto (eco bem mais leve das
 * pílulas do hero), sobre o escuro que o WPBakery já pinta.
 *
 * COR: hora e temperatura quase brancas sobre o escuro; a cor entra só onde há
 * informação - AZUL na probabilidade de chuva; AMARELO nos ícones de nascer/pôr
 * do sol e no SOL dos ícones diurnos; a NUVEM em cinza claro; a LUA num tom
 * claro distinto. A separação dos ícones combinados (sol/lua atrás de nuvem) é
 * por COR, não por contorno - a nuvem cobre parte da forma de trás, o resto
 * fica visível (raios do sol / arco da lua para fora da nuvem).
 *
 * ÍCONES PREENCHIDOS (só na tira): as formas principais (nuvem, disco do sol,
 * lua) são SÓLIDAS, não só contorno - mesma técnica do glifo da fase lunar
 * (fill via classe escopada). O hero mantém os ícones de contorno, intocados.
 *
 * ROLAGEM: sem barra visível. No CELULAR, o scroll nativo do sistema entrega
 * inércia e elástico (rubber band) sozinho - o JS não sobrepõe. No DESKTOP,
 * arrasto de mouse e roda do mouse são do JS, que adiciona a inércia (glide com
 * desaceleração) e o elástico nas pontas que o arrasto de mouse não teria.
 * Desvanecer nas bordas sugere mais conteúdo pro lado - some na ponta onde não
 * há mais (classes is-inicio/is-fim, alternadas pelo JS).
 *
 * LARGURA: coluna de largura FIXA; o número de colunas visíveis varia com a
 * tela (nunca estica). ~6 no celular; no desktop cabem mais naturalmente, mas o
 * módulo tem largura máxima pra as 24 nunca caberem de uma vez (senão vira
 * tabela, não tira).
 */

.elo-clima-tira {
  /* Largura fixa da coluna - no celular (~340px úteis) dá ~6 colunas visíveis,
     próximo da proporção da referência do iPhone. */
  --elo-clima-tira-col: 3.5rem;
  /* Tamanho do ícone - reduzido de 26px pra 22px (teste, ver rodada 3). Ajuste
     aqui num lugar só. */
  --elo-clima-tira-icone: 22px;
  /* Espaçamento vertical DENTRO da coluna. O "vertical" separa hora <-> ícone
     <-> temperatura (o maior, pra dar respiro). O "grupo" separa ícone <->
     probabilidade dentro do miolo: menor de propósito, porque ícone e prob
     formam um grupo visual. Ajuste os dois aqui. */
  --elo-clima-tira-gap-vertical: 16px;
  --elo-clima-tira-gap-grupo: 5px;

  /* Claro sobre escuro. Hora e temperatura quase brancas. */
  --elo-clima-tira-cor-clara: rgba(255, 255, 255, 0.95);
  --elo-clima-tira-cor-suave: rgba(255, 255, 255, 0.72);
  --elo-clima-tira-azul: #7fb8ff;    /* probabilidade de chuva */
  --elo-clima-tira-amarelo: #ffd166; /* sol / nascer / pôr do sol */
  /* Cores das FORMAS dos ícones cheios (separação por cor nos combinados):
     nuvem cinza claro (também a cor padrão dos ícones sem sol/lua), lua num
     tom claro distinto do cinza da nuvem. */
  --elo-clima-tira-nuvem: #cbd5e1;
  --elo-clima-tira-lua: #eef2f8;

  /* Fundo do módulo: eco DISCRETO da pílula translúcida do hero (que usa 0.14
     de fundo + blur 8px) - aqui bem mais leve, pra não competir com o hero. */
  --elo-clima-tira-fundo: rgba(255, 255, 255, 0.06);
  --elo-clima-tira-borda: rgba(255, 255, 255, 0.12);
  --elo-clima-tira-raio: 16px;
  --elo-clima-tira-fade: 30px; /* largura do desvanecer das bordas */

  --elo-clima-tira-fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  box-sizing: border-box;
  /* Ocupa 100% da largura disponível dentro da linha do WPBakery - a margem e o
     padding externos são da própria linha. O módulo NÃO tem teto de largura: a
     proteção de "as 24 colunas nunca caberem de uma vez" vem da largura FIXA da
     coluna (3.5rem x 24 = 84rem, mais que qualquer tela comum), não de um teto
     aqui. Numa tela larguíssima em que tudo couber, a tira só não rola -
     aceitável. */
  width: 100%;
  padding: 12px;
  border-radius: var(--elo-clima-tira-raio);
  background: var(--elo-clima-tira-fundo);
  border: 1px solid var(--elo-clima-tira-borda);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--elo-clima-tira-cor-clara);
  font-family: var(--elo-clima-tira-fonte);
  -webkit-font-smoothing: antialiased;
}

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

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

/* Texto de apoio (atributo texto="") - cabeçalho FIXO acima das colunas, fora do
   viewport rolável (é irmão dele, não filho), então não desliza junto. Só existe
   no DOM quando o atributo trouxe conteúdo; sem ele, nem este bloco nem o filete
   aparecem, e a tira fica idêntica ao comportamento de sempre. Referência: a
   linha de apoio da tira do app Tempo do iPhone. Ocupa a largura do módulo e
   quebra em várias linhas. Fonte pequena, mesma família, cor clara da tira, peso
   normal. O filete é a borda inferior (fino, discreto, cor da borda do módulo),
   com espaço acima (padding) e abaixo (margin) separando texto e colunas. */
.elo-clima-tira__apoio {
  margin: 0 0 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--elo-clima-tira-borda);
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--elo-clima-tira-cor-clara);
}

/* Viewport rolável - sem barra visível, com desvanecer nas bordas via máscara.
   As larguras do fade são variáveis que o JS zera na ponta sem mais conteúdo
   (is-inicio zera a esquerda; is-fim zera a direita). */
.elo-clima-tira__viewport {
  --fade-esq: var(--elo-clima-tira-fade);
  --fade-dir: var(--elo-clima-tira-fade);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge antigo */
  overscroll-behavior-x: contain;
  /* Toque no celular: horizontal é da tira (scroll nativo com inércia +
     elástico do iOS); vertical passa pra página. O JS NÃO intercepta toque. */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
}

.elo-clima-tira__viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.elo-clima-tira__viewport.is-inicio {
  --fade-esq: 0px;
}

.elo-clima-tira__viewport.is-fim {
  --fade-dir: 0px;
}

.elo-clima-tira__viewport.is-arrastando {
  cursor: grabbing;
  user-select: none;
}

/* Trilha: largura pelo conteúdo (as colunas empurram), pra a rolagem existir.
   O JS aplica translateX aqui no ELÁSTICO das pontas (desktop) - por isso o
   will-change. Em repouso, sem transform. */
.elo-clima-tira__trilha {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
}

/* Altura IGUAL entre colunas por align-items:stretch da trilha - a coluna mais
   alta (a que tem probabilidade) define a altura, as demais esticam pra ela.
   Assim hora (topo) e temperatura (base) alinham horizontalmente em todas. */
.elo-clima-tira__col {
  flex: 0 0 var(--elo-clima-tira-col);
  width: var(--elo-clima-tira-col);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--elo-clima-tira-gap-vertical);
  padding: 6px 2px;
  text-align: center;
}

/* Miolo entre a hora e a temperatura: cresce pra ocupar o espaço restante e
   CENTRALIZA o ícone (+ a probabilidade, quando houver) verticalmente. Sem
   probabilidade, só o ícone -> fica no centro. Com probabilidade, o grupo
   ícone+prob é centralizado -> o ícone sobe o necessário e a prob ocupa o
   espaço aberto. O espaço da prob NÃO é reservado quando ela não existe. */
.elo-clima-tira__meio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--elo-clima-tira-gap-grupo);
}

/* Hora no topo (curta: 15, 16, 17) - "Agora" na primeira, em destaque. */
.elo-clima-tira__hora {
  font-size: 0.8rem;
  line-height: 1.1;
  color: var(--elo-clima-tira-cor-clara);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.elo-clima-tira__col--agora .elo-clima-tira__hora {
  font-weight: 700;
}

/* Ícone no meio. Cor PADRÃO = cinza da nuvem (a maioria dos ícones tem nuvem;
   sol/lua trocam a cor via modificador abaixo). */
.elo-clima-tira__icone {
  display: inline-flex;
  line-height: 0;
  color: var(--elo-clima-tira-nuvem);
}

/* ÍCONES CHEIOS (só na tira, escopado a esta classe - o hero usa
   .elo-clima-hero__icone-svg, intocado). fill:currentColor preenche as formas
   FECHADAS (nuvem, disco do sol, lua); as formas abertas (raios, gotas, linhas
   de neblina, arco parcial) não têm área e continuam só traço. */
.elo-clima-tira__icone-svg {
  width: var(--elo-clima-tira-icone);
  height: var(--elo-clima-tira-icone);
  display: block;
  fill: currentColor;
}

/* SOL dos ícones diurnos em amarelo; LUA dos noturnos num tom claro distinto.
   Como o modificador troca a cor do ícone inteiro (currentColor), a NUVEM dos
   combinados (cloud-sun / cloud-moon) precisa ser devolvida ao cinza - senão
   ficaria amarela/clara junto. A nuvem cobre parte da forma de trás; o resto
   (raios do sol, arco da lua) fica pra fora, visível, na sua cor. */
.elo-clima-tira__icone--sol {
  color: var(--elo-clima-tira-amarelo);
}

.elo-clima-tira__icone--lua {
  color: var(--elo-clima-tira-lua);
}

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

/* Probabilidade de chuva logo abaixo do ícone, em azul. NÃO reserva espaço:
   só existe no DOM quando a coluna tem probabilidade (o alinhamento de hora e
   temperatura entre colunas vem do stretch da coluna, não de um espaço fixo). */
.elo-clima-tira__chuva {
  font-size: 0.72rem;
  line-height: 1;
  color: var(--elo-clima-tira-azul);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Temperatura embaixo (inteira, sem casa decimal). */
.elo-clima-tira__temp {
  font-size: 0.9rem;
  line-height: 1.1;
  color: var(--elo-clima-tira-cor-clara);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Colunas de marcador solar: ícone amarelo, texto "Nascer/Pôr do sol" no lugar
   da temperatura, sem probabilidade. */
.elo-clima-tira__col--marcador .elo-clima-tira__icone {
  color: var(--elo-clima-tira-amarelo);
}

.elo-clima-tira__sollabel {
  font-size: 0.62rem;
  line-height: 1.15;
  color: var(--elo-clima-tira-cor-suave);
  white-space: nowrap;
}

/* Quem pediu menos movimento: nada aqui anima, mas mantém a coerência com o
   hero (a tira não tem animação de ícone; se algum dia tiver, respeitar isto). */
@media (prefers-reduced-motion: reduce) {
  .elo-clima-tira__viewport {
    scroll-behavior: auto;
  }
}