/* ============================================================================
   MDC — Rolagem por seção (o que sobrou aqui)
   ----------------------------------------------------------------------------
   Este arquivo já foi o encaixe da rolagem em CSS (scroll-snap). Não é mais:
   depois que cada seção passou a caber numa tela, os pontos de parada ficaram
   a cada tela e o navegador passou a puxar de volta qualquer movimento curto —
   medido, pedindo 100px a página andava ZERO, oito vezes seguidas; no trackpad
   não andava nada. O snap foi removido daqui.

   Quem assenta a rolagem agora é o encaixe.js, com uma regra diferente: só
   depois de um movimento grande, e só se a seção estiver perto. Rolagem curta
   passa livre.

   O que continua neste arquivo:

   1. scroll-padding-top, para o link âncora não parar escondido atrás da
      navbar, que é fixa.

   2. A variante "cada seção ocupa a tela inteira" (.tela-cheia), usada seção a
      seção pelas páginas. A altura em si é ajustada no encaixe.css, que
      desconta a navbar.

   Para desligar: retire o <link> deste arquivo das páginas.
   ========================================================================== */

@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {

    /* O encaixe do CSS saiu daqui: com cada seção do tamanho da tela, os
       pontos de parada ficaram a cada tela e o navegador passava a puxar de
       volta qualquer movimento curto — pedindo 100px, a página andava zero, e
       no trackpad não andava nada. Quem assenta a rolagem agora é o
       encaixe.js, e só depois de um movimento grande: rolagem curta passa
       livre, rolagem de tela inteira termina com a seção enquadrada.

       scroll-padding-top continua no encaixe.css, para o link âncora não
       parar embaixo da navbar. */
    html {
        scroll-padding-top: 67px;   /* altura da navbar fixa */
    }

    /* ── variante "uma seção por tela" ────────────────────────────────────────
       Basta marcar a seção no HTML com class="tela-cheia". A seção passa a ter
       pelo menos uma tela de altura e centra o conteúdo; se o conteúdo passar
       de uma tela, ela cresce normalmente.
       svh, e não vh, porque no celular a barra de endereço entra e sai. */
    body > section.tela-cheia {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Sem svh (navegador antigo), vh resolve o suficiente. */
@supports not (height: 100svh) {
    @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
        body > section.tela-cheia { min-height: 100vh; }
    }
}