/* =============================================================
   AFROCHIP — A LISTA DE DESTINOS

   Folha propria enquanto esta peca se refaz em paralelo com as
   outras. Funde-se na `estilo.css` quando assentar.

   A IDEIA: sao duzentos paises, e duzentas caixas brancas com
   sombra sao duzentos objectos a pedir atencao ao mesmo tempo —
   uma parede, nao uma lista. Aqui a linha do pais nao tem fundo
   nem fio: quem faz a cor e o ritmo sao as BANDEIRAS, alinhadas
   numa coluna so, e o olho desce por elas. A caixa branca aparece
   debaixo do rato ou do foco, uma de cada vez, e diz "e esta".

   Tres marcadores de posicao para nao se perder ninguem: a barra
   A-Z colada por baixo do cabecalho, a letra grande e fixa ao
   lado do grupo enquanto ele passa, e o risco amarelo por baixo
   da letra. Sao os unicos amarelos da pagina, e sao SUPERFICIE —
   o amarelo nunca e cor de texto.
   ============================================================= */

.seccao--lista {
  /* Onde a barra A-Z pousa: a altura do cabecalho pegajoso. Uma
     variavel e nao um numero solto porque a barra, a letra fixa e
     o salto das ancoras tem todos de contar a mesma altura. */
  --lp-cabecalho: 68px;
  --lp-barra: 52px;

  /* O topo da seccao encurta. A folga de 104px estava calibrada para
     o que vinha a seguir ser o cartao "Para onde viaja?"; com o
     selector fora, ficava um buraco de dedo e meio entre a contagem
     e a primeira letra, e a lista — que e a pagina toda — comecava
     abaixo da dobra em ecra de portatil. O rodape da seccao mantem-se:
     e ali que ha mesmo mudanca de assunto. */
  padding-top: clamp(8px, 1.6vw, 22px);
}

/* A 1320px a navegacao abre e o cabecalho cresce de 68 para 76 (ver
   `.cabecalho__interior` em estilo.css). Sem isto a barra A-Z colava
   a 68 e os primeiros 8px dela desapareciam por tras do vidro do
   cabecalho — as letras ficavam a metade, desfocadas. */
@media (min-width: 1320px) {
  .seccao--lista { --lp-cabecalho: 76px; }
}

/* -------------------------------------------------------------
   BARRA A-Z

   Colada por baixo do cabecalho, e por isso chega-se a qualquer
   letra a partir de qualquer ponto da pagina, sem rolar de volta
   ao topo. Sao ancoras verdadeiras: funcionam sem JavaScript.

   As margens negativas anulam a goteira do envelope para que o
   fundo e o fio corram de ponta a ponta do conteudo — sem elas
   via-se a lista a passar por tras nos cantos.
   ------------------------------------------------------------- */

.lista-paises__indice {
  position: sticky; top: var(--lp-cabecalho); z-index: 20;
  margin: 0 calc(var(--goteira) * -1) clamp(26px, 3.4vw, 40px);
  padding: 8px var(--goteira);
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.lista-paises__indice ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 5px;
  /* Estreito: uma fila so que se arrasta na horizontal. Larga: da
     a volta e fica tudo a vista. A pagina em si nunca rola de
     lado — quem rola e esta caixa. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.lista-paises__indice ol::-webkit-scrollbar { display: none; }

.lista-paises__indice li { flex: 0 0 auto; scroll-snap-align: center; }

.lista-paises__indice a {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: var(--r2);
  text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--tinta-2);
  transition: background-color .28s var(--suave), color .28s var(--suave),
              transform .35s var(--saida);
}

.lista-paises__indice a:hover,
.lista-paises__indice a:focus-visible {
  background: var(--amarelo); color: var(--tinta);
  transform: translateY(-1px);
}

/* Estreito: as vinte e tres letras nao cabem — 23 x 39px sao quase
   900px de fila e o telemovel tem 350. A fila arrasta-se, e o unico
   problema de uma fila que se arrasta e nao se saber que se arrasta:
   ela acaba a meio de uma letra e parece que a lista acaba no I. O
   apagar a direita e o que diz "ha mais para ca". E mascara e nao
   sombra por cima porque o fundo da barra e o papel e a mascara
   segue-o sem ter de repetir a cor. */
@media (max-width: 759.98px) {
  .lista-paises__indice ol {
    padding-right: 20px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
}

@media (min-width: 760px) {
  .lista-paises__indice ol { flex-wrap: wrap; overflow-x: visible; }
}

/* -------------------------------------------------------------
   OS GRUPOS
   ------------------------------------------------------------- */

.lista-paises { display: grid; gap: clamp(22px, 3vw, 34px); }

.lista-paises__grupo {
  display: grid; gap: 10px;
  /* O `scroll-padding-top` do documento ja vale 88px; isto e o que
     falta para a letra nao ficar debaixo da barra A-Z. */
  scroll-margin-top: 44px;
}

.lista-paises__letra {
  margin: 0;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: 26px; color: var(--tinta);
}

/* O fio a direita da letra em ecra estreito; o risco amarelo por
   baixo dela em ecra largo. Ver a regra do @media. */
.lista-paises__letra::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--linha);
}

/* -------------------------------------------------------------
   ECRA ESTREITO: a letra tambem cola

   No telemovel a lista e uma coluna so — duzentos paises, dez mil
   pixeis de rolagem. A meio do M ninguem sabe onde esta, e a barra
   A-Z diz para onde se pode ir, nao onde se esta. A letra passa a
   colar-se por baixo da barra e viaja com o grupo, como a lista de
   contactos do telefone: ha sempre um rotulo no ecra.

   O grupo tem de deixar de ser grelha para isto funcionar. Um
   elemento pegajoso dentro de uma celula de grelha so viaja dentro
   da propria celula, e a celula da letra tem a altura da letra —
   ou seja, nao viaja nada. Em bloco, a caixa que o prende passa a
   ser a seccao inteira, que e o grupo todo.
   ------------------------------------------------------------- */

@media (max-width: 899.98px) {
  .lista-paises__grupo { display: block; }

  .lista-paises__letra {
    position: sticky; top: calc(var(--lp-cabecalho) + var(--lp-barra));
    z-index: 10;
    /* Sangra ate a margem do envelope: sem isto vem-se os nomes a
       passar pelos lados do rotulo. O fundo e opaco pela mesma razao. */
    margin: 0 calc(var(--goteira) * -1) 8px;
    padding: 7px var(--goteira);
    background: var(--papel);
  }
}

.lista-paises__grelha {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px 10px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}

/* Para que a linha do pais encha a celula: numa fila onde um nome
   comprido passa a duas linhas, os vizinhos acompanham a altura e
   as bandeiras continuam alinhadas. */
.lista-paises__grelha > li { display: grid; }

/* -------------------------------------------------------------
   A LINHA DE UM PAIS
   ------------------------------------------------------------- */

.pais {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 7px 12px 7px 9px;
  border: 1px solid transparent; border-radius: var(--r2);
  background: transparent;
  color: var(--tinta); text-decoration: none;
  transition: background-color .26s var(--suave), border-color .26s var(--suave),
              box-shadow .34s var(--suave), transform .4s var(--saida);
}

.pais:hover,
.pais:focus-visible {
  background: var(--branco);
  border-color: var(--linha);
  box-shadow: var(--sombra-1);
  transform: translateY(-1px);
}

.pais__bandeira {
  position: relative; flex: 0 0 auto;
  width: 32px; height: 24px;
  border-radius: 3px; overflow: hidden;
  background: var(--papel-2);
}

/* O fio por dentro da bandeira. Sem ele, as que sao quase todas
   brancas — Japao, Suica, Israel — desaparecem no cartao branco e
   ficam a parecer um buraco na fila. */
.pais__bandeira::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .16);
}

.pais__bandeira img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* Quando o desenho falta: uma placa com o codigo do pais, do mesmo
   tamanho e feitio da bandeira. A fila nao se desalinha e a falha
   nao parece defeito. */
.pais__bandeira--sem {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; color: var(--tinta-3);
}

.pais__nome {
  flex: 1 1 auto;
  font-size: 15px; font-weight: 500; line-height: 1.28;
}

.pais__seta {
  width: 16px; height: 16px; flex: 0 0 auto; color: var(--tinta-3);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .24s var(--suave), transform .34s var(--saida);
}

.pais:hover .pais__seta,
.pais:focus-visible .pais__seta { opacity: 1; transform: none; }

/* No telemovel nao ha rato: a seta nunca apareceria. Fica sempre,
   apagada, a dizer que a linha se toca. */
@media (hover: none) {
  .pais__seta { opacity: .45; transform: none; }
  .pais { min-height: 52px; }
}

/* -------------------------------------------------------------
   ECRA LARGO: a letra ao lado, e fixa

   A letra sai de cima da grelha e vai para uma coluna propria a
   esquerda, onde fica colada enquanto o grupo passa. Da a pagina
   um sitio permanente para o olho pousar — sabe-se sempre em que
   letra se vai sem olhar para a barra.
   ------------------------------------------------------------- */

@media (min-width: 900px) {
  .lista-paises { gap: clamp(30px, 3.4vw, 44px); }

  .lista-paises__grupo {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0 30px;
    align-items: start;
  }

  .lista-paises__letra {
    position: sticky;
    top: calc(var(--lp-cabecalho) + var(--lp-barra) + 14px);
    display: block; font-size: 42px; padding-top: 2px;
  }

  .lista-paises__letra::after {
    display: block; flex: none;
    width: 26px; height: 3px; margin-top: 12px;
    background: var(--amarelo); border-radius: 2px;
  }
}

/* O grupo para onde se acabou de saltar: o risco amarelo cresce.
   E a confirmacao de que o salto chegou onde devia. */
.lista-paises__grupo:target .lista-paises__letra::after {
  background: var(--amarelo);
}

@media (min-width: 900px) {
  .lista-paises__grupo:target .lista-paises__letra::after { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lista-paises__indice a,
  .pais,
  .pais__seta { transition: none; }

  .lista-paises__indice a:hover,
  .lista-paises__indice a:focus-visible,
  .pais:hover,
  .pais:focus-visible { transform: none; }

  .pais__seta { opacity: 1; transform: none; }
}

/* ==========================================================================
   A PROCURA DE PAISES

   Fica colada ao topo enquanto se rola: com 199 paises e um indice de
   letras, quem esta a meio da lista e quer procurar outra coisa nao devia
   ter de voltar ao cimo.
   ========================================================================== */

.procura-paises {
  position: sticky; top: 0; z-index: 3;
  background: var(--fundo, var(--branco));
  padding: 10px 0 12px;
  margin: 0 0 4px;
}

.procura-paises__caixa {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  background: var(--branco);
  padding: 0 13px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.procura-paises__caixa:focus-within {
  border-color: var(--tinta);
  box-shadow: 0 0 0 4px rgba(255, 212, 0, .28);
}

.procura-paises__caixa svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  color: var(--tinta-suave);
}

.procura-paises__campo {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  padding: 13px 0; font: inherit; color: inherit;
}

/* O X que o browser desenha num type=search muda de forma conforme o
   sistema. Fora — o Escape limpa, e ha um teclado para toda a gente. */
.procura-paises__campo::-webkit-search-cancel-button { display: none; }

.procura-paises__resposta {
  margin: 7px 2px 0; font-size: .84rem;
  color: var(--tinta-media); min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .procura-paises__caixa { transition: none; }
}

/* O PAR DE `so-sem-js`, QUE FALTAVA.

   A folha principal ja escondia o que so serve sem JavaScript
   (`html.com-js .so-sem-js`), mas nao havia o contrario — e a procura de
   paises e a primeira coisa neste site que so funciona COM script.

   Sem esta regra o campo era servido a toda a gente e, com o JavaScript
   desligado, ficava la a nao filtrar nada: um campo morto, que e o defeito
   que este projecto passou o dia a corrigir noutros sitios. Escrever nele e
   nao acontecer nada e pior do que ele nao existir — quem tem a rede fraca
   pensa que o site esta avariado.

   Sem script fica a lista inteira e o indice das letras, que chegam a
   qualquer um dos 199 paises. */
html:not(.com-js) .so-com-js { display: none; }

/* ==========================================================================
   O `hidden` TEM DE GANHAR AO `display`, E NAO GANHAVA.

   Defeito encontrado pelo dono: "eu escrevo angola e ele so mostra todos
   paises de letra A".

   O filtro estava certo. Medido no browser: escrevendo "angola", 198 dos 199
   paises ficavam com o atributo `hidden` — e os 199 continuavam a ver-se.

   A causa e uma regra de tres linhas acima. O `hidden` do HTML nao e magia:
   e uma linha na folha do browser que diz `display: none`. Basta uma regra
   NOSSA a dizer `display: grid` no mesmo elemento para o browser preferir a
   nossa — o atributo fica la, verdadeiro, sem efeito nenhum.

   `.lista-paises__grelha > li { display: grid }` e
   `.lista-paises__grupo { display: grid }` eram as duas culpadas.

   E foi por isso que o dono viu o grupo do A inteiro: os grupos escondiam-se
   pelo mesmo atributo e falhavam da mesma maneira, mas o do A tinha de ficar
   — Angola esta la dentro — e trouxe consigo os cento e tal vizinhos.

   A correccao e por ESPECIFICIDADE e nao por `!important`: um selector com o
   atributo no fim pesa mais do que a regra que define o display, e nao deixa
   divida para quem vier a seguir.
   ========================================================================== */

.lista-paises__grelha > li[hidden],
.lista-paises .lista-paises__grupo[hidden] { display: none; }

/* ==========================================================================
   AS REGIOES DENTRO DA LISTA

   Pedido do dono: "os eSIMs internacionais que pedi no destinos nao e pra
   ficarem separados, ficam mesmo junto dos paises, mas em primeiro e
   destacados e falando que tem x paises inclusos e dar pra ver quais sao,
   mas ficam mesmo nas suas letras".

   DESTACADO SEM SER AMARELO. O amarelo forte da loja e a faixa dos pacotes
   com chamadas; duas superficies amarelas na mesma pagina apagam-se uma a
   outra e nenhuma das duas diz nada. Aqui o destaque e feito com o que a
   lista NAO tem: a linha de um pais nao tem fundo nem fio nenhum ate se lhe
   tocar, portanto uma caixa branca com fio, sombra e um risco de tinta na
   ilharga ja e visivelmente outra coisa — e ocupa a largura toda da grelha,
   que e o gesto mais barato para dizer "isto nao e um dos duzentos".

   O risco da esquerda e TINTA. Preto so como tinta, e uma barra de 3px de
   tinta e o unico acento forte que esta paleta permite sem ir buscar o
   amarelo.
   ========================================================================== */

/* A largura toda da grelha. Nao se toca no `display` desta `li`: quem o
   define e `.lista-paises__grelha > li`, e a regra que faz o `hidden` ganhar
   ao `display` esta escrita contra ESSE selector. Uma regra nova aqui a
   dizer `display` voltava a partir o filtro da procura. */
.lista-paises__regiao { grid-column: 1 / -1; }

.regiao-linha {
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--tinta);
  border-radius: var(--r2);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  margin-bottom: 8px;
}

.regiao-linha__ir {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  color: var(--tinta); text-decoration: none;
  transition: background-color .22s var(--suave);
}

.regiao-linha__ir:hover,
.regiao-linha__ir:focus-visible { background: var(--papel); }

/* A marca redonda de tinta. E o unico sitio da lista com uma superficie
   escura, e e por ela que o olho apanha a linha a descer a pagina. */
.regiao-linha__marca {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tinta); color: var(--tinta-inv);
}
.regiao-linha__marca svg { width: 19px; height: 19px; }

.regiao-linha__texto {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}

.regiao-linha__etiqueta {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-3);
}

.regiao-linha__nome {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  line-height: 1.2; color: var(--tinta);
}

/* Quantos paises. O numero e de PAISES e nunca de pacotes — uma loja nao
   anuncia o tamanho do armazem. */
.regiao-linha__conta {
  flex: 0 0 auto;
  font-size: 12px; color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.regiao-linha__seta {
  flex: 0 0 auto; width: 16px; height: 16px;
  color: var(--tinta-3); opacity: .55;
  transition: transform .34s var(--saida);
}

.regiao-linha__ir:hover .regiao-linha__seta,
.regiao-linha__ir:focus-visible .regiao-linha__seta { transform: translateX(3px); }

/* -------------------------------------------------------------
   QUAIS SAO OS PAISES

   Um `details`, e por isso abre com o JavaScript desligado. Vem
   fechado: quarenta e nove nomes abertos empurram a letra seguinte
   para fora do ecra, e quem so quer o pais dele nao pediu isto.
   ------------------------------------------------------------- */

.regiao-linha__cobertura { border-top: 1px solid var(--linha); }

.regiao-linha__cobertura summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px;
  font-size: .84rem; color: var(--tinta-2);
  cursor: pointer;
  list-style: none;
}

/* O triangulo que o browser desenha sozinho muda de forma conforme o
   sistema; o nosso e o mesmo em todos. */
.regiao-linha__cobertura summary::-webkit-details-marker { display: none; }
.regiao-linha__cobertura summary::marker { content: ""; }

.regiao-linha__cobertura summary:hover { color: var(--tinta); }

.regiao-linha__cobertura summary svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  transition: transform .26s var(--suave);
}

.regiao-linha__cobertura[open] summary svg { transform: rotate(180deg); }

.regiao-linha__corpo { padding: 0 13px 13px; }

/* O aviso vem ANTES da lista e nao depois. "Europa" nao quer dizer a Europa
   toda, e quem le a lista primeiro ja leu quarenta e nove nomes como se
   fossem uma promessa. */
.regiao-linha__nota {
  margin: 0 0 10px;
  font-size: .8rem; line-height: 1.45; color: var(--tinta-3);
}

.regiao-linha__paises {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}

.regiao-linha__paises li {
  font-size: 12.5px; line-height: 1.2; color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: var(--r1);
  padding: 4px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .regiao-linha__ir,
  .regiao-linha__seta,
  .regiao-linha__cobertura summary svg { transition: none; }
  .regiao-linha__ir:hover .regiao-linha__seta { transform: none; }
}

/* A linha que explica as caixas destacadas, no cabecalho da pagina. E uma
   frase e nao um bloco: o bloco era o que o dono mandou tirar. */
.destinos__nota-regioes {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: .95rem; line-height: 1.5;
  color: var(--tinta-2);
}

/* E o `hidden` tambem tem de ganhar aqui. A regiao e uma `li` da mesma
   grelha, o filtro esconde-a pelo mesmo atributo, e `grid-column` nao
   desliga `display: grid`. Sem esta linha, escrever "angola" deixava as
   regioes todas no ecra. */
.lista-paises__grelha > li.lista-paises__regiao[hidden] { display: none; }