/* ===========================================================================
   /destinos — a Ásia da Govinda

   Seis regiões em ritmo alternado, e as jornadas sem região no fim.

   Houve um mapa da Ásia em SVG abrindo a página; saiu em 28/08/2026 e o bloco
   de estilo dele está em db/backups/2026-08-28-antes-destinos/removidos.

   Todo valor cita um token de govinda-tokens.css. Onde há número solto, ele
   está explicado.
   =========================================================================== */

/* ===========================================================================
   AS REGIÕES

   Ritmo alternado, não grade. A grade uniforme é o que a página era antes —
   seis cartões iguais, nenhum com precedência. Aqui a foto troca de lado a
   cada bloco, o que dá cadência ao rolar.
   =========================================================================== */

.ds-regioes {
  display: flex;
  flex-direction: column;
  gap: var(--e-secao);
  margin: var(--e-secao) 0;
}

.ds-regiao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

/* O bloco par inverte: a foto vai para a direita. O `order` mexe só na
   pintura — na ordem do documento a foto vem sempre antes do texto, que é
   como um leitor de tela deve ouvir. */
.ds-regiao:nth-child(even) .ds-regiao__foto { order: 2; }

.ds-regiao__foto {
  position: relative;
  margin: 0;
  border-radius: var(--raio-foto);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}

.ds-regiao__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease);
}

.ds-regiao:hover .ds-regiao__foto img { transform: scale(1.03); }

/* A faixa de cor da região, no pé da foto. É o mesmo cor_token do mapa: quem
   viu o país aceso reconhece a região aqui embaixo. */
.ds-regiao__foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--cor, var(--ouro));
}

.ds-regiao__nome {
  margin: 0 0 var(--e-3);
  font-size: var(--t-h2);
  line-height: 1.1;
}

/* ALVO DE TOQUE — não é preciosismo, é o que sustenta o mapa.
   
   No celular o mapa mede 327×209, e nessa escala Nepal, Butão e Camboja ficam
   abaixo dos 24×24 que a WCAG 2.5.8 exige. A norma abre uma exceção quando a
   mesma função existe noutro controle da página que PASSA — e esse controle é
   esta lista. Se ela reprovar, a exceção cai junto, e o mapa vira um problema
   de acessibilidade em vez de um enfeite.
   
   Medido: sem o `min-height` estes links tinham 22px. */
.ds-regiao__nome a {
  display: inline-block;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-rapida) var(--ease);
}
.ds-regiao__nome a:hover,
.ds-regiao__nome a:focus-visible { border-bottom-color: var(--acento-forte); }

.ds-regiao__frase {
  margin: 0 0 var(--e-4);
  font-size: var(--t-corpo-ed);
  color: var(--tinta-media);
  max-width: 46ch;
}

/* Os fatos. Onde o texto é fraco — e aqui ele é: as descrições têm uma frase —
   quem carrega a informação é o número. */
.ds-regiao__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin: 0 0 var(--e-4);
  padding: 0;
  list-style: none;
  font-family: var(--f-disciplina);
  font-size: var(--t-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ds-regiao__fatos li { display: flex; align-items: center; gap: var(--e-2); }
.ds-regiao__fatos li + li::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  /* o ponto separador pertence ao item seguinte, e some na primeira linha
     quando a lista quebra */
  margin-right: var(--e-2);
}

.ds-regiao__links { display: flex; flex-direction: column; gap: var(--e-3); }

/* A SETA NÃO É ENFEITE.
   
   Em "China e Tibete", a jornada tem o mesmo nome da região: sem um sinal
   antes, o bloco dizia o nome duas vezes e o segundo não parecia link. A seta
   é o que diz "isto leva a outro lugar" antes de a pessoa ler a palavra. */
.ds-regiao__jornada,
.ds-regiao__ler {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-2);
  align-self: flex-start;
  /* 24px de altura mínima, pelo mesmo motivo do título acima. O padding sai
     por dentro: crescer o alvo não pode empurrar o desenho. */
  min-height: 24px;
  padding: 2px 0 3px;
  font-size: var(--t-corpo);
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  transition: border-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.ds-regiao__jornada::before,
.ds-regiao__ler::before {
  content: '→';
  color: var(--cor, var(--ouro));
  /* A seta anda ao passar o cursor. É o único movimento do bloco, e serve
     para dizer a direção — não para chamar atenção. */
  transition: transform var(--dur-rapida) var(--ease);
}

.ds-regiao__jornada:hover::before,
.ds-regiao__jornada:focus-visible::before,
.ds-regiao__ler:hover::before,
.ds-regiao__ler:focus-visible::before { transform: translateX(3px); }

.ds-regiao__jornada:hover, .ds-regiao__jornada:focus-visible,
.ds-regiao__ler:hover,     .ds-regiao__ler:focus-visible {
  color: var(--acento-forte);
  border-bottom-color: var(--acento-forte);
}

/* O link do blog é secundário: quem chegou aqui quer a jornada primeiro. */
.ds-regiao__ler {
  color: var(--tinta-media);
  font-size: var(--t-legenda);
  border-bottom-color: transparent;
}
.ds-regiao__ler::before { color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  .ds-regiao__jornada::before,
  .ds-regiao__ler::before { transition: none; }
  .ds-regiao__jornada:hover::before,
  .ds-regiao__ler:hover::before { transform: none; }
}

/* ===========================================================================
   O QUE FICA DE FORA

   As jornadas sem região. Dito em voz baixa, no fim — mas dito: esconder que
   a casa leva a lugares que a página não organiza seria pior.
   =========================================================================== */

.ds-fora {
  margin: var(--e-secao) 0 0;
  padding: var(--e-5) 0 0;
  border-top: 1px solid var(--linha);
}

.ds-fora h2 {
  margin: 0 0 var(--e-3);
  font-family: var(--f-disciplina);
  font-size: var(--t-rotulo);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.ds-fora ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
}

.ds-fora a {
  display: inline-block;
  min-height: 24px;
  font-size: var(--t-corpo);
  color: var(--tinta-media);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  transition: color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease);
}
.ds-fora a:hover, .ds-fora a:focus-visible {
  color: var(--tinta);
  border-bottom-color: var(--acento-forte);
}

/* ===========================================================================
   TELAS ESTREITAS
   =========================================================================== */

@media (max-width: 860px) {
  .ds-regiao {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }
  /* A inversão some: em coluna única, alternar a ordem só confunde. */
  .ds-regiao:nth-child(even) .ds-regiao__foto { order: 0; }
}

/* ===========================================================================
   QUEM PEDIU MENOS MOVIMENTO
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ds-regiao__foto img,
  .ds-regiao__nome a { transition: none; }
  .ds-regiao:hover .ds-regiao__foto img { transform: none; }
}

/* ===========================================================================
   IMPRESSO
   =========================================================================== */

@media print {
  .ds-regiao { grid-template-columns: 1fr; break-inside: avoid; }
  .ds-regiao__foto { box-shadow: none; }
}