/* =========================================================
   B2 Rocket Layout — Distribuidora Paris
   calendario.css: o calendário comercial.

   Lista informativa, sem interação: os componentes são os do site — rótulo,
   título com marcador — e o que é próprio daqui é só a tabela de datas.

   Esta folha já teve o triplo deste tamanho, quando a página calculava prazo
   de pedido, alternava capital e interior e captava e-mail. Saiu tudo.
   ========================================================= */

/* ---------- abertura ---------- */

/* Centralizada, nas mesmas medidas do topo do FAQ e de Notícias: as três são
   páginas de abertura curta, e alinhamento diferente entre elas aparece na
   navegação de uma para a outra. */
.cal-abertura{
  max-width:var(--paris-larg);
  margin:0 auto;
  padding:clamp(56px, 6vw, 92px) var(--paris-pad) 0;
  text-align:center;
}

/* ---------- a lista ---------- */

.cal-tabela{
  max-width:var(--paris-larg-grade);
  margin:clamp(50px, 5vw, 80px) auto 0;
  padding:0 var(--paris-pad);
}
/* O ano é a única divisão da página, então ele carrega a hierarquia sozinho:
   serifada grande, do tamanho de um título de seção. A 26px ele competia de
   igual para igual com o nome das datas logo abaixo, e a lista parecia uma
   fileira só, sem separação de ano. */
.cal-ano{margin-top:clamp(56px, 5.6vw, 86px)}
.cal-ano:first-child{margin-top:0}
.cal-ano-titulo{
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:2px solid var(--paris-azul);
}
.cal-ano-numero{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:clamp(40px, 4.2vw, 56px);
  line-height:1;
  letter-spacing:-.005em;
  color:var(--paris-azul);
}
.cal-ano-nota{
  font-size:15px;color:var(--paris-cinza);
  /* Sem isto a nota colaria na base do número, que agora é bem mais alto. */
  position:relative;top:-2px;
}

.cal-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:32px;
  align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--paris-linha);
}
.cal-item-nome{
  display:block;
  font-size:23px;font-weight:300;letter-spacing:-.01em;line-height:1.3;
  text-wrap:balance;
}
.cal-item-quando{
  display:block;margin-top:8px;
  font-size:15px;color:var(--paris-cinza);
}

/* A pauta é o que a pessoa lê ao passar o olho; a dica de sortimento vem
   abaixo, com o traço reto no lugar do marcador, igual à lista de valores do
   Sobre Nós. */
.cal-lembrete{text-wrap:pretty}
.cal-lembrete-pauta{
  margin:0;
  font-size:17px;line-height:1.6;color:var(--paris-tinta-2);
}
.cal-lembrete-dica{
  position:relative;
  margin:12px 0 0;
  padding-left:26px;
  font-size:15px;line-height:1.55;color:var(--paris-cinza);
}
.cal-lembrete-dica::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:14px;height:1px;
  background:var(--paris-vermelho);
}

/* ---------- rodapé da página ---------- */

.cal-rodape{
  max-width:var(--paris-larg);margin:0 auto;
  padding:clamp(48px, 5vw, 78px) var(--paris-pad) clamp(60px, 6vw, 96px);
  font-size:14px;line-height:1.7;color:var(--paris-cinza);
}
.cal-rodape strong{color:var(--paris-azul);font-weight:600}

/* ---------- telas menores ---------- */

@media (max-width:980px){
  .cal-ano{margin-top:clamp(44px, 7vw, 60px)}
  .cal-item{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    padding:30px 0;
  }
}