@import url("govinda-tokens.css");

/* ============================================================
   /calendario — O QUADRO DAS SAÍDAS
   Design System v2. Adaptado de layouts/instagram/calendario-saidas.html.

   O que mudou em relacao aquela arte, e por que:

   - Tipografia: Plano B (Source Serif 4 + Source Sans 3). A arte pedia
     SangBleu Republic e Shapiro; os .ttf estao na maquina, mas o Design
     System diz que o Plano B esta ativo ENQUANTO a licenca nao confirma.
     Ter o arquivo nao e ter a licenca.

   - Cor do marcador: vem da coluna cor_token do roteiro, e nao de um mapa
     pais->cor escrito a mao. A arte usava acafrao/terracota/ouro/navy, que
     sao cores de MARCA — o Design System reserva cor de destino para os
     tokens --dest-*, e proibe cor de destino no chrome. O marcador de 3px
     e o unico lugar permitido fora da fotografia.

   Tudo sob .cal para nao colidir com o CSS herdado do clone.
   ============================================================ */

/* O clone nao define border-box global — medi content-box. Sem isto, no
   celular o cartao soma width:100% + 32px de padding + 4px de borda e estoura
   a janela em 31px. */
.cal, .cal *, .cal *::before, .cal *::after { box-sizing: border-box; }

.cal {
  font-family: var(--f-pagina);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background: radial-gradient(120% 90% at 50% -10%, var(--fundo-alto) 0%, var(--fundo) 55%, var(--fundo-baixo) 100%);
  position: relative;
  isolation: isolate;
}
/* Grao de papel — 3,2%, fixo, nunca intercepta clique. */
.cal::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: .032; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cal__caixa {
  max-width: 1080px;
  margin: 0 auto;
  /* margens assimetricas — externa maior que interna */
  padding-inline: clamp(20px, 5vw, 64px) clamp(20px, 5vw, 48px);
  position: relative; z-index: 1;
}

/* ---------------------------  ABERTURA  --------------------------- */
/* Respiro assimetrico ~2:1: o ar acima do titulo e o dobro do de baixo. */
.cal__abertura {
  text-align: center;
  padding-block: clamp(56px, 9vh, 128px) clamp(28px, 4vh, 64px);
}
.cal__selo {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .42em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}
.cal__titulo {
  font-family: var(--f-pagina); font-weight: 400;   /* titulo nunca engorda */
  font-size: var(--t-display);
  line-height: 1.04; letter-spacing: -.015em;
  margin: var(--e-4) 0 0;
  text-wrap: balance;
}
.cal__titulo em { font-style: italic; color: var(--acento); }  /* acafrao e display */
/* A regua da marca, aqui centrada e com as duas pontas transparentes —
   a unica excecao que o Design System abre para gradiente em ouro. */
.cal__regua {
  width: 56px; height: 1px; margin: var(--e-5) auto 0;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
}
.cal__frase {
  max-width: 46ch; margin: var(--e-5) auto 0;
  font-size: var(--t-corpo-ed); line-height: 1.95;
}
.cal__frase em { font-style: italic; color: var(--acento-forte); }

/* ---------------------------  O QUADRO  --------------------------- */
.cal__quadro {
  background: var(--superficie);
  border: 1px solid var(--superficie-2);
  border-radius: var(--raio);
  /* profundidade por moldura e sombra longa e baixa, nao por sombra generica */
  box-shadow: 0 30px 70px -40px rgba(51, 38, 26, .45);
  overflow: hidden;
}
.cal__tabela { width: 100%; border-collapse: collapse; }

.cal__tabela thead th {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tinta-suave);
  text-align: left; white-space: nowrap;
  padding: var(--e-4) var(--e-4) var(--e-3);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--superficie-2);
}
.cal__tabela thead th:first-child { padding-left: var(--e-6); }
.cal__tabela thead th:last-child  { padding-right: var(--e-6); }

/* A faixa de ano parte o calendario em temporadas. */
.cal__ano td {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-rotulo); letter-spacing: .38em; text-transform: uppercase;
  color: var(--ouro-claro);           /* ouro-claro/navy = 7,44:1 */
  background: var(--navy);
  padding: var(--e-3) var(--e-6);
}
.cal__ano span {
  color: rgba(240, 232, 216, .62);
  margin-left: var(--e-4);
  letter-spacing: .24em;
}

.cal__saida { border-bottom: 1px solid rgba(51, 38, 26, .09); transition: background var(--dur-normal) var(--ease); }
.cal__saida:last-child { border-bottom: 0; }
.cal__saida:hover { background: rgba(240, 232, 216, .5); }
.cal__saida td { padding: var(--e-4); vertical-align: middle; }
.cal__saida td:first-child { padding-left: var(--e-6); }
.cal__saida td:last-child  { padding-right: var(--e-6); }

/* ── pais, com o marcador de 3px na cor do destino ── */
.cal__pais { width: 1%; white-space: nowrap; }
.cal__pais-nome {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-legenda); letter-spacing: .20em; text-transform: uppercase;
  color: var(--tinta);
  display: flex; align-items: center; gap: var(--e-2);
}
.cal__pais-nome::before {
  content: ""; flex: none;
  width: 3px; height: 15px;
  background: var(--cor, var(--tinta-suave));
  /* --dest-neve mede 1,09:1 contra a areia: a linha de 1px da propria cor
     puxada para a tinta da borda ao token palido. Mesma tecnica de /roteiros. */
  box-shadow: 1px 0 0 color-mix(in srgb, var(--cor, var(--tinta-suave)) 45%, var(--tinta));
}
.cal__pais-mais {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 4px; padding-left: calc(3px + var(--e-2));
}

/* ── datas ── */
.cal__data { font-size: 1.02rem; white-space: nowrap; }
.cal__dia  { font-variant-numeric: tabular-nums; }   /* as datas alinham na coluna */
.cal__ano-min { color: var(--tinta-suave); }
.cal__data--retorno { color: var(--tinta-suave); }

/* ── roteiro ── */
.cal__roteiro { font-size: 1.09rem; line-height: 1.25; }
.cal__roteiro a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--ouro), var(--ouro));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-normal) var(--ease);
}
.cal__roteiro a:hover { background-size: 100% 1px; }
.cal__noites {
  display: block; margin-top: 5px;
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------------------------  O PÉ DO QUADRO  --------------------------- */
.cal__pe {
  display: flex; flex-wrap: wrap; gap: var(--e-5);
  justify-content: space-between; align-items: center;
  margin-top: var(--e-5);
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .26em; text-transform: uppercase;
  color: var(--tinta);   /* tinta, e nao tinta-suave: neste corpo o suave nao chega a 4,5:1 */
}
.cal__legenda { display: flex; flex-wrap: wrap; gap: var(--e-4); list-style: none; margin: 0; padding: 0; }
.cal__legenda li { display: flex; align-items: center; gap: 7px; }
.cal__legenda i {
  width: 3px; height: 11px; display: block; flex: none;
  background: var(--cor, var(--tinta-suave));
  box-shadow: 1px 0 0 color-mix(in srgb, var(--cor, var(--tinta-suave)) 45%, var(--tinta));
}

/* ---------------------------  O CONVITE  --------------------------- */
.cal__convite {
  border-top: 1px solid var(--ouro);
  margin-top: var(--e-8);
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
  text-align: center;
}
.cal__convite-rotulo {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0;
}
.cal__convite-rotulo::before { content: ""; width: 32px; height: 1px; background: var(--ouro); }
.cal__convite-ancora {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h1); line-height: 1.16;
  max-width: 24ch; margin: var(--e-5) auto;
}
/* Botao-pilula navy: excecao declarada da v2 (§7.2), ainda em ratificacao. */
.cal__botao {
  display: inline-block;
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: .9rem; letter-spacing: .06em;
  color: var(--fundo); background: var(--navy);
  padding: 16px 34px; border-radius: 999px; text-decoration: none;
  transition: background var(--dur-normal) var(--ease);
}
.cal__botao:hover { background: linear-gradient(90deg, var(--acento), var(--acento-forte)); }

.cal__vazio {
  max-width: var(--w-leitura); margin: 0 auto;
  padding-block: clamp(48px, 8vw, 96px);
  font-size: var(--t-corpo-ed); line-height: 1.95; text-align: center;
}

/* Foco visivel: obrigatorio, nunca outline:none. */
.cal a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: var(--raio); }

/* ---------------------------  CELULAR  --------------------------- */
/* A tabela vira lista de cartoes. O cabecalho some da tela mas fica para o
   leitor de tela, e cada data ganha o proprio rotulo. */
@media (max-width: 760px) {
  .cal__quadro { background: none; border: 0; box-shadow: none; overflow: visible; }
  .cal__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cal__tabela, .cal__tabela tbody, .cal__tabela tr, .cal__tabela td { display: block; width: 100%; }

  .cal__ano td { padding: var(--e-2) var(--e-4); margin: var(--e-5) 0 var(--e-3); }

  .cal__saida {
    background: var(--superficie);
    border: 1px solid var(--superficie-2);
    border-left: 3px solid var(--cor, var(--tinta-suave));
    border-radius: var(--raio);
    box-shadow: 0 14px 34px -26px rgba(51, 38, 26, .5);
    margin-bottom: var(--e-3);
    padding: var(--e-4);
  }
  .cal__saida td, .cal__saida td:first-child, .cal__saida td:last-child { padding: 0; }
  .cal__pais-nome::before { display: none; }
  .cal__pais-nome { color: var(--acento-forte); }   /* terracota/marfim 6,19:1 */
  .cal__pais-mais { padding-left: 0; }
  .cal__roteiro { margin-top: var(--e-2); font-size: 1.18rem; }

  /* Embarque e retorno lado a lado.
     O seletor precisa ser td.cal__data, e nao so .cal__data: a regra de blocos
     acima e .cal__tabela td, que tem especificidade (0,1,1) e venceria uma
     classe sozinha (0,1,0) — a data continuaria em bloco e cada uma ocuparia
     a linha inteira. A arte original nao tinha o problema porque usava td
     puro, de especificidade menor que a classe.
     O width:auto tambem e obrigatorio: aquela regra da width:100% a todo td. */
  .cal__tabela td.cal__data { display: inline-block; width: auto; vertical-align: top; margin-top: var(--e-3); font-size: .98rem; }
  .cal__tabela td.cal__data--retorno { margin-left: var(--e-5); }
  .cal__data::before {
    content: attr(data-rotulo); display: block;
    font-family: var(--f-disciplina); font-weight: 300;
    font-size: var(--t-selo); letter-spacing: .24em; text-transform: uppercase;
    color: var(--tinta-suave); margin-bottom: 3px;
  }
}

/* ---------------------------  IMPRESSÃO  --------------------------- */
/* Calendario e peca que se imprime e se leva para a mesa. */
@media print {
  .cal { background: #fff; }
  .cal::after { display: none; }
  .cal__quadro { box-shadow: none; border-color: #ddd; }
  .cal__ano td { background: var(--navy) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cal__convite, .cal__frase { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cal * { transition-duration: .01ms !important; }
}