/*
 * Linha do tempo (etapa F5) -- os 16 marcos da home, um uso só.
 *
 * **A navegação é CSS puro**, com a construção da F4: radio, rótulo e cartão. As setas também
 * -- elas são `<label for>` do marco vizinho. O que restou de JavaScript é o destaque do ano na
 * faixa, e a razão está no model: a faixa rola na horizontal no celular, então ela precisa ser
 * o próprio contêiner, e aí o rótulo deixa de ser irmão do radio.
 *
 * Transcrito de `main.css:1433-1553` (desktop) e `1610-1676` (celular).
 */

/*
 * O `margin-bottom` é o espaço entre a faixa de anos e o cartão (`main.css`, `.timeline-nav`).
 * **Ele é do componente, e não da página**, porque é espaço *dentro* do componente -- a F5 o
 * deixou de fora e a G12c, que é o primeiro uso montado, deu por falta dele.
 */
.linha-do-tempo__faixa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 62px;
}

/*
 * A linha atrás das bolinhas, em `::before` e não no `<div class="line">` do estático --
 * elemento vazio para desenhar um traço é o que a E2 desfez nas linhas decorativas.
 *
 * `top: 10px` alinha com o centro das bolinhas de 18px, e é medido: metade de 18 menos a
 * metade de 1px de traço.
 */
.linha-do-tempo__faixa::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--seb-azul);
}

.linha-do-tempo__rotulo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 1px 6px;
  cursor: pointer;
}

/*
 * A bolinha vazia é o estado normal; cheia, o ativo. O fundo branco não é enfeite: é o que
 * cobre a linha que passa atrás dela.
 */
.linha-do-tempo__bolinha {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--seb-azul);
  border-radius: 100%;
  background-color: var(--seb-branco);
}

.linha-do-tempo__ano {
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 400;
  color: var(--seb-azul);
}

/*
 * O estado ativo do rótulo vem da classe que o script põe, e não de `:checked` -- ver o
 * comentário do topo. O halo é o `::before` de 30px do original, atrás da bolinha.
 */
.linha-do-tempo__rotulo--ativo .linha-do-tempo__bolinha {
  background-color: var(--seb-azul);
}

.linha-do-tempo__rotulo--ativo .linha-do-tempo__bolinha::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(var(--seb-azul-rgb) / 0.25);
  transform: translate(-50%, -50%);
  z-index: -1;
}

/*
 * **O foco aparece no cartão**, e não no rótulo -- diferente das abas da F4, e por causa da
 * mesma separação: o radio é irmão do cartão, não do rótulo, então é o cartão que o CSS
 * alcança. E funciona: num grupo de radios as setas do teclado **mudam a seleção junto com o
 * foco**, então o rótulo destacado na faixa é sempre o do radio focado -- o script que espelha
 * o estado marcado já cuida dessa metade.
 */
.linha-do-tempo__radio:focus-visible ~ .linha-do-tempo__cartao {
  outline: 2px solid var(--seb-azul);
  outline-offset: 4px;
}

/* ------------------------------------------------------------------ o palco */

/*
 * A fila seta-cartão-seta do estático, e é por isso que as setas são irmãs do cartão em vez de
 * filhas dele: assim elas ficam no fluxo, sem posicionamento absoluto, e o `<article>` guarda
 * só o conteúdo do marco.
 */
.linha-do-tempo__palco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.linha-do-tempo__item {
  display: contents;
}

.linha-do-tempo__cartao {
  display: none;
  align-items: center;
  gap: 42px;
  width: 742px;
  padding: 16px 42px;
  background-color: var(--seb-branco);
  box-shadow: 0 4px 25px 0 rgb(0 0 0 / 0.25);
}

.linha-do-tempo__radio:checked ~ .linha-do-tempo__cartao {
  display: flex;
}

.linha-do-tempo__cartao-ano {
  font-family: var(--seb-fonte-titulo);
  font-size: 80px;
  font-weight: 800;
  color: var(--seb-azul);
  text-align: center;
}

.linha-do-tempo__cartao-linha {
  width: 2px;
  height: 150px;
  background-color: var(--seb-azul);
}

/*
 * **O `margin-top` que o navegador dá ao `<ul>`, anulado aqui.** O reset do site zera o recuo e
 * a margem de baixo da lista, mas não a de cima (`base.css`), e num cartão que é contêiner flex
 * ela não colapsa com nada -- sobra 1em (16px) entre a linha e o primeiro marco. O original
 * declara exatamente isto na `.timeline-card-text`, e por isso a anulação é do componente e não
 * da página: achado na G12c, montando o primeiro cartão de verdade.
 *
 * A pergunta maior -- se o reset do site deveria zerar a margem de cima de todo `<ul>` -- é a
 * que a G8 registrou para a G13, e continua lá.
 */
.linha-do-tempo__lista {
  margin-top: 0;
}

/*
 * O marcador é o caractere `•`, e não a bolinha desenhada dos tópicos da E6 -- e um item
 * sozinho **não leva marcador**, que é o `li:only-child` do original.
 */
.linha-do-tempo__marco {
  position: relative;
  padding-left: 20px;
  font-family: var(--seb-fonte-corpo);
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: var(--seb-azul);
}

.linha-do-tempo__marco::before {
  content: '•';
  position: absolute;
  top: 0;
  left: 0;
}

.linha-do-tempo__marco:only-child {
  padding-left: 0;
}

.linha-do-tempo__marco:only-child::before {
  content: none;
}

/*
 * A seta é um rótulo com o `<img>` do ícone dentro -- o mesmo padrão das setas do carrossel da
 * F3, com os mesmos dois arquivos. A primeira versão usava `mask` para poder tingir o ícone
 * pelo token, e a revisão mostrou o preço: num navegador sem `mask`, a regra pinta um quadrado
 * azul de 73px no lugar da seta. Um padrão de seta no repositório, e nenhum risco desses.
 *
 * Só a seta ativa aparece, como o cartão: elas são irmãs do radio.
 */
.linha-do-tempo__seta {
  display: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.linha-do-tempo__radio:checked ~ .linha-do-tempo__seta {
  display: block;
}

.linha-do-tempo__seta:hover {
  opacity: 0.7;
}

.linha-do-tempo__seta img {
  display: block;
}

/*
 * A seta da ponta fica apagada e sem clique, e não `display: none`: sumir com ela deslocaria o
 * cartão, porque a fila do estático é seta-cartão-seta. Mesma decisão do carrossel da F3.
 */
.linha-do-tempo__seta--fim {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/*
 * O `<span>` da ponta não é irmão de um radio marcado por acaso -- ele é irmão do mesmo radio
 * que os outros --, então a regra de cima vale para ele igual. Esta linha existe só para dizer
 * que a ponta continua ocupando o lugar dela: sumir com a seta deslocaria o cartão, e é a
 * mesma decisão da F3.
 */

@media (min-width: 768.02px) and (max-width: 1199px) {
  .linha-do-tempo__faixa {
    justify-content: flex-start;
    padding: 6px 0;
    margin-top: -6px;
    margin-bottom: 56px;
    overflow-x: auto;
    scrollbar-width: thin;
    background: linear-gradient(var(--seb-azul), var(--seb-azul)) 0 16px / 100% 1px no-repeat local;
  }

  .linha-do-tempo__faixa::before {
    display: none;
  }

  .linha-do-tempo__rotulo {
    flex: 0 0 auto;
  }

  .linha-do-tempo__rotulo:first-child {
    margin-left: auto;
  }

  .linha-do-tempo__rotulo:last-child {
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  /*
   * A faixa passa a rolar -- é o que o site pede em texto ("Deslize e clique nos anos") e o
   * que obriga faixa e palco a serem contêineres separados. `scrollbar-width: none` como no
   * original, e com o mesmo motivo do carrossel: os anos já dizem onde se está.
   */
  .linha-do-tempo__faixa {
    justify-content: flex-start;
    gap: 28px;
    /* Os 40px de folga são do original (`width: calc(100% - 40px)`): a faixa que rola não vai
     * até a borda do contêiner, e é isso que mostra que ela continua. */
    width: calc(100% - 40px);
    padding: 15px 14px 20px;
    margin-bottom: 40px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .linha-do-tempo__faixa::-webkit-scrollbar {
    display: none;
  }

  .linha-do-tempo__faixa::before {
    display: none;
  }

  .linha-do-tempo__rotulo {
    flex: 0 0 auto;
    min-width: 50px;
    padding-left: 0;
    padding-right: 0;
  }

  .linha-do-tempo__rotulo::after {
    content: '';
    position: absolute;
    top: 10px;
    left: -14px;
    right: -14px;
    height: 1px;
    background-color: var(--seb-azul);
    z-index: -1;
  }

  /*
   * As setas somem no celular -- medido no original, e coerente: quem navega ali usa a faixa
   * que rola.
   *
   * **O seletor é o do estado marcado, e não `.linha-do-tempo__seta` sozinho.** Media query
   * não acrescenta especificidade: escrito como `.linha-do-tempo__seta { display: none }`, ele
   * pesa (0,1,0) contra os (0,3,0) da regra que revela a seta do marco aberto, e perde -- as
   * setas continuavam na tela no celular. Achado na G12c, montando a faixa e medindo a 375px.
   */
  .linha-do-tempo__radio:checked ~ .linha-do-tempo__seta {
    display: none;
  }

  .linha-do-tempo__cartao {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 24px 32px;
  }

  .linha-do-tempo__cartao-ano {
    font-size: 62px;
    line-height: 52px;
    padding-top: 10px;
  }

  .linha-do-tempo__cartao-linha {
    width: 100%;
    height: 1px;
  }

  /* No celular os marcos ganham respiro entre si, e é o original -- ali o cartão empilha e a
   * lista fica larga. */
  .linha-do-tempo__marco {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 8px;
  }
}