/* ==========================================================================
   O DIA — a linha das horas
   Prefixo: dia-
   Tokens: --fg --fg-2 --fg-muted --rule --accent --display --sans --ease

   Segunda versão desta dobra. A primeira era um palco pinado com rolagem
   longa; o porquê da troca está no comentário do index.html. Aqui não há
   script, não há estado e não há nada escondido: os cinco momentos do dia
   aparecem juntos, que é como se lê um horário.

   A LINHA é uma borda no topo da lista, e as marcas são pontos sobre ela.
   Desenhar a linha assim, e não como um elemento próprio, tem uma vantagem
   prática: ela quebra junto com a grade. Quando a lista vira duas fileiras em
   tela média, cada fileira ganha a sua linha sozinha, sem cálculo nenhum.
   ========================================================================== */

.dia-apoio{max-width:64ch}

/* TRÊS COLUNAS EM DUAS FILEIRAS desde 25/09, pedido do Gabriel. O cronograma
   do time tem seis paradas, e em seis colunas cada uma ficava com 205px: o
   horário em corpo grande encostava no vizinho e o texto descia em oito
   linhas. Em 3x2 a coluna dobra de largura.

   CADA FILEIRA TEM O PRÓPRIO FIO (são dois .dia-fio no HTML), senão a de baixo
   fica sem linha nenhuma.

   ⚠️ O ROW-GAP CONTINUA ZERO, e isso não é descuido. Cada fio é um item da
   grade que ocupa a fileira inteira, e as paradas dele vêm na fileira debaixo:
   qualquer vão vertical entra ENTRE o fio e os pontos dele, e a linha sobe uns
   46px, descolada das bolinhas. Foi o que aconteceu na primeira tentativa do
   3x2, em 25/09. O respiro entre os dois grupos vem do margin-top do segundo
   fio, que empurra o grupo de baixo inteiro sem separar ninguém da sua linha. */
.dia-linha{
  list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(18px,2.4vw,32px);
  row-gap:0;
}
.dia-fio ~ .dia-fio{margin-top:clamp(34px,4vw,54px)}

/* ---- o fio ----
   UM FIO SÓ atravessando as cinco paradas, e não uma borda por parada. Em
   cima dele, o mesmo fio em verde, encolhido a zero e crescendo com o scroll:
   é o que dá a leitura de linha do tempo sendo percorrida.

   O <li> vazio existe porque a lista é uma grade, e um pseudo-elemento do <ol>
   ficaria fora do fluxo dela. Como é decoração, vai aria-hidden e sem texto:
   leitor de tela lê cinco itens, não seis. */
.dia-fio{
  grid-column:1 / -1;
  position:relative;height:1px;
  background:var(--rule);
  margin-bottom:-1px;
}
/* --fio-p, e não --dia-p: cada fio recebe do dia.js a fatia de progresso que é
   dele (o de cima de 0 a meio, o de baixo do meio ao fim). O --dia-p continua
   existindo na lista e é o que o celular usa, onde a linha é uma só. */
.dia-fio i{
  position:absolute;inset:0;display:block;
  background:var(--accent);
  transform:scaleX(var(--fio-p,0));
  transform-origin:left center;
}

.dia-parada{
  position:relative;
  padding-top:26px;
  /* Nasce apagada e acende quando o verde chega nela. Não é conteúdo
     escondido: em 28% de opacidade o texto continua legível, e o que a
     opacidade diz é "ainda não é a vez desta". */
  opacity:.28;
  transition:opacity .55s var(--ease);
}
.dia-parada.is-on{opacity:1}

/* O ponto fica SOBRE a linha, metade para cada lado, e por isso o translate
   de meio pixel a mais: com 9px de diâmetro sobre 1px de fio, centralizar
   pela conta redonda deixa o ponto um fio acima. */
.dia-marca{
  position:absolute;top:0;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--rule-2);
  transform:translateY(calc(-50% + .5px));
  transition:background .4s var(--ease);
}
.dia-parada.is-on .dia-marca{background:var(--accent)}

/* Tabular-nums: as horas ficam numa grade de dígitos de largura igual, então
   08:00 e 18:00 ocupam exatamente o mesmo espaço e a coluna não dança. Foi o
   que o Gabriel escolheu na primeira versão, e é o que sobrevive dela. */
.dia-hora{
  display:block;
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}

.dia-titulo{
  font-family:var(--display);font-weight:500;
  font-size:clamp(15px,1.3vw,17px);line-height:1.3;letter-spacing:-.01em;
  color:var(--accent);
  margin-top:12px;
}

.dia-texto{
  font-size:14px;line-height:1.55;color:var(--fg-2);
  margin-top:8px;
}

/* Entre 1040 e 680 a grade continua em três, que é o mesmo do desktop: o que
   muda é só o vão, que encolhe junto com a tela. */
@media(max-width:1040px){
  .dia-linha{column-gap:clamp(16px,2vw,24px)}
  .dia-fio ~ .dia-fio{margin-top:clamp(28px,3.4vw,38px)}
}

/* No celular a linha vira vertical: o fio sai da grade e passa a ser uma
   barra à esquerda, com a mesma pintura, só que de cima para baixo.
   O SEGUNDO FIO SOME AQUI. Ele existe para dar linha à fileira de baixo, e no
   celular não há fileira de baixo: são seis paradas empilhadas ao longo de uma
   barra só, que é o primeiro fio. */
@media(max-width:680px){
  .dia-linha{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:0;position:relative;padding-left:22px}
  .dia-fio ~ .dia-fio{display:none}
  /* grid-column:auto NÃO é decoração. Filho posicionado de uma grade que tem
     colocação declarada usa a ÁREA DA GRADE como referência, e não a caixa do
     pai: com o grid-column:1/-1 herdado, o `left:0` caía no início do
     conteúdo, 22px à direita do fio, e os pontos ficavam soltos no vão. */
  .dia-fio{
    grid-column:auto;
    position:absolute;left:0;top:8px;bottom:8px;
    width:1px;height:auto;margin:0;
  }
  .dia-fio i{transform:scaleY(var(--dia-p,0));transform-origin:center top}
  .dia-parada{padding:20px 0}
  .dia-parada:first-child{padding-top:6px}
  .dia-marca{top:26px;left:-22px;transform:translateX(calc(-50% + .5px))}
  .dia-parada:first-child .dia-marca{top:12px}
  .dia-hora{font-size:24px}
}