/* Página inicial: regras próprias da entrada que acertam o que está em site.css («21. Página inicial»).
   Carrega-se só em index.html, depois de site.css. */

/* Computador (≥ 60em): uma só barra de rolamento, a da página.
   O mapa fica preso à esquerda, à altura do ecrã; a faixa do topo e o painel descem com a página; o rodapé volta
   para o fim da página (inicio.mjs tira-o do painel). O painel mantém o aspeto, só deixa de ter rolamento próprio. */
@media (min-width: 60em) {
  .inicio { height: auto; grid-template-rows: auto 1fr; }
  .inicio__mapa {
    position: sticky; top: var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))); align-self: start;
    height: calc(100vh - var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))));
    height: calc(100svh - var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))));
  }
  .inicio .painel, .inicio .painel:not(.folha--ativa), .inicio .painel.folha:not(.folha--ativa) { overflow: visible; overscroll-behavior: auto; }
  /* O painel tem pelo menos a altura do ecrã: um detalhe curto sobe até ao cabeçalho sem o mapa ser cortado pelo rodapé */
  .inicio .painel {
    min-height: calc(100vh - var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))));
    min-height: calc(100svh - var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))));
  }
  body.pagina-inicio > .rodape { display: block; }
  html:has(body.pagina-inicio) { overscroll-behavior-y: auto; }
}

/* Telemóvel deitado: o painel continua a ter rolamento próprio, ao lado do mapa. Com position: relative, o texto
   escondido para leitores de ecrã (.visualmente-oculto, absoluto) fica preso ao painel e não estica a página. */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .inicio .painel { position: relative; }
  /* Painel estreito (280 a 360 px): a frase por cima e o botão a toda a largura, sem sair do ecrã */
  .painel .painel__chamada { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .painel .painel__chamada p { flex: none; }
  .painel .painel__chamada .botao { width: 100%; min-width: 0; }
}

/* Linha ao vivo na faixa do topo (telemóvel e tablet em pé): ao toque, a ligação ocupa a linha inteira com 44 px de
   altura. O ::after prende-se a .ao-vivo (posicionado), por isso o overflow do texto não o corta. */
@media (pointer: coarse) {
  .inicio__topo .ao-vivo { position: relative; }
  .inicio__topo .ao-vivo__texto a::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 44px; }
  /* (começa 8 px acima da linha: chega à pesquisa, que fica por cima, sem lhe tapar nada) */
}

/* Freguesias acesas: no telemóvel em pé (< 30em) não cabem na linha do contador e vão para a primeira secção da folha.
   Nas outras disposições ficam por baixo do contador, e esta secção não aparece. */
.painel__freguesias:not([hidden]) { display: none; }
@media (max-width: 29.99em) and (min-height: 22.5em) { .folha--ativa .painel__freguesias:not([hidden]) { display: block; } }

/* A terra às escuras mais perto: a freguesia e o concelho dela */
.apagado__terra { margin-top: 2px; font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-small); color: var(--c-text-2); }
/* Com rato, «ou procura a tua terra» não cabe ao lado do botão no painel e caía para a linha de baixo, 9 px para dentro
   (o enchimento do botão de texto). Fica sempre por baixo, com o texto alinhado pela margem do painel. */
@media (pointer: fine) {
  #apagado > .acoes { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  #apagado-pesquisa { margin-left: calc(-1 * (var(--s-2) + var(--line))); }
}

/* Folha a espreitar abaixo de 360 px (dobrável fechado, 280 px): a frase não cabe ao lado do botão e ficava cortada.
   O contador da faixa de cima já diz quantos estão acesos; fica só o botão, a toda a largura. */
@media (max-width: 22.49em) {
  .folha--ativa .painel__chamada:has(> a.botao:not([hidden])) p { display: none; }
  .folha--ativa .painel__chamada:has(> a.botao:not([hidden])) .botao { flex: 1; width: 100%; }
}

/* Avisos da entrada (marco atingido, aniversário, «essa pedra ainda não está no mapa»): nunca por cima dos controlos
   do mapa (G14). --inicio-res é a coluna dos controlos (botão de 44 px e as margens à volta), que fica livre à direita. */
body.pagina-inicio { --inicio-res: calc(44px + var(--s-3) * 2 + var(--s-2)); }
/* D-folha: centrados no espaço à esquerda dos controlos, logo acima da folha (a espreitar ou a meio; inicio.mjs mede-a).
   No tablet em pé, inicio.mjs (posicionarAvisos) também foge da legenda e das caixas das ilhas (--inicio-aviso-*). */
html.folha-ativa body.pagina-inicio > .avisos {
  left: var(--inicio-aviso-x, calc((100% - var(--inicio-res) - var(--sa-r)) / 2)); right: auto; transform: translateX(-50%);
  width: var(--inicio-aviso-w, min(560px, calc(100% - var(--inicio-res) - var(--sa-r) - var(--margem-e))));
  bottom: var(--inicio-aviso-b, calc(var(--inicio-folha, calc(var(--folha-espreitar) + var(--sa-b))) + var(--s-3)));
}
/* Computador: só na coluna do mapa. inicio.mjs (posicionarAvisos) procura a faixa livre mais baixa, sem a legenda, as
   caixas das ilhas, «Dados de exemplo» e os controlos, e dá o centro, a largura e a distância ao fundo. Sem essas
   medidas, fica centrado à esquerda dos controlos, acima da marca «Dados de exemplo». */
@media (min-width: 60em) {
  body.pagina-inicio > .avisos {
    left: var(--inicio-aviso-x, calc((100% - var(--panel-w) - var(--inicio-res)) / 2)); right: auto; transform: translateX(-50%);
    width: var(--inicio-aviso-w, min(560px, calc(100% - var(--panel-w) - var(--inicio-res) - var(--s-4))));
    bottom: var(--inicio-aviso-b, calc(var(--s-3) + 2rem));
  }
  /* Mapa baixo: os controlos deitam-se numa linha (ou em grelha) ao fundo, e o aviso sobe acima deles */
  body.pagina-inicio:has(.mapa--controlos-linha) > .avisos { bottom: var(--inicio-aviso-b, calc(var(--s-3) * 2 + 44px + var(--s-2))); }
  body.pagina-inicio:has(.mapa--controlos-grelha) > .avisos { bottom: var(--inicio-aviso-b, calc(var(--s-3) * 2 + 88px + var(--s-2))); }
}
/* Telemóvel deitado: no alto da coluna do mapa, onde não há botões (os controlos estão em baixo, à direita) */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  body.pagina-inicio > .avisos {
    top: calc(var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))) + var(--s-2)); bottom: auto;
    left: calc(var(--s-3) + var(--sa-l)); right: auto; transform: none;
    width: min(22rem, calc(100% - var(--inicio-painel) - var(--s-3) * 2 - var(--sa-l)));
  }
}

/* Telemóvel deitado (e computador com letra a 200 %, que cai nesta disposição): o painel cresce com a letra, até 42 %
   da largura, para a pesquisa e o contador caberem; com a letra normal fica igual (280 a 360 px). */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  body.pagina-inicio { --inicio-painel: calc(clamp(280px, 42vw, max(360px, 22.5rem)) + var(--sa-r)); }
  .inicio { grid-template-columns: minmax(0, 1fr) var(--inicio-painel); }
  /* O contador parte em duas linhas se a etiqueta não couber ao lado do número; nunca sai do painel */
  .inicio__topo .contador { flex-wrap: wrap; column-gap: var(--s-2); row-gap: 0; }
  .inicio__topo .contador__etiqueta { white-space: normal; min-width: 0; }
  .pesquisa__campo { text-overflow: ellipsis; }
  /* As freguesias acesas saem da linha do contador (cortavam o número) e vão para a sua secção no painel */
  .inicio__topo .contador__freguesias { display: none; }
  .painel__freguesias:not([hidden]) { display: block; }
}

/* «Dados de exemplo» (só com ?exemplo): nunca por cima dos controlos nem dos avisos. O mapa conta com ela ao arrumar
   a legenda e os controlos (obstáculo da página, mapa.mjs). Com a folha (telemóvel e tablet em pé), no alto à esquerda
   do mapa, longe dos avisos, que ficam por cima da folha. No telemóvel deitado os controlos deitam-se numa linha ao
   fundo: a etiqueta vai para o alto da coluna do mapa, à direita (os avisos ficam à esquerda). */
html.folha-ativa .inicio__exemplo { top: 72px; bottom: auto; left: var(--margem-e); transform: none; }
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  .inicio__exemplo { top: var(--s-2); bottom: auto; left: auto; right: var(--s-3); transform: none; }
}

/* Linha do contador entre 30em e 59.99em (dobrável aberto, tablet em pé): as freguesias encolhem primeiro, com
   reticências; a linha ao vivo guarda sempre um mínimo legível. Na linha estreita sai primeiro o «de 3 259». */
@media (min-width: 30em) and (max-width: 59.99em) {
  .inicio__estado { container-type: inline-size; }
  .inicio__topo .inicio__estado .ao-vivo { flex: 1 1 0; min-width: min(7.5rem, 40%); }
  @container (max-width: 32em) { .inicio__topo .contador__freguesias-de { display: none; } }
}
/* O texto escondido do número da pedra (absoluto) não pode alargar a página a partir da linha ao vivo */
.inicio__topo .ao-vivo .visualmente-oculto { left: 0; top: 0; }
/* Abaixo de 360 px (ou letra muito grande num ecrã pequeno): a etiqueta do contador parte em duas linhas e
   o botão da chamada passa para baixo da frase (quando ela se vê). Nada empurra a página para o lado. */
@media (max-width: 22.49em) {
  .inicio__topo .contador { flex-wrap: wrap; column-gap: var(--s-2); row-gap: 0; }
  .inicio__topo .contador__etiqueta { white-space: normal; min-width: 0; }
  .painel .painel__chamada { flex-wrap: wrap; }
  .painel .painel__chamada p { flex: 1 1 100%; }
  .painel .painel__chamada .botao { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; }
}
/* Telemóvel deitado com «Dados de exemplo» no alto do mapa: o aviso fica logo abaixo dela, sem a tapar */
@media (min-width: 30em) and (max-height: 35em) and (orientation: landscape) {
  body.pagina-inicio:has(.inicio__exemplo) > .avisos { top: calc(var(--cab-altura, calc(var(--header-h) + 1px + var(--sa-t))) + var(--s-2) * 2 + 1.5rem); }
}