/* countdown.css: a contagem até ao fim de uma campanha, componente partilhável.
   O que faz, a hora do servidor e a prova estão em
   `docs/HOMEPAGE_GAMA_E_CAMPANHAS.md` §2. O servidor escreve o markup
   (`_ac_homepage_contagem` na `index.php`) e o `countdown.js` enche-o:

     <div class="countdown" data-countdown data-countdown-fim="<ISO com fuso>"
          data-countdown-agora="<hora do servidor, ISO com fuso>">
       <p class="countdown__validade">Válido até 31/12/2026</p>
       <p class="countdown__relogio" data-countdown-relogio aria-hidden="true" hidden>
         <span class="countdown__rotulo">Termina em</span>
         <span class="countdown__partes">
           <span class="countdown__parte countdown__parte--dias">
             <b data-countdown-valor="dias">00</b><small data-countdown-nome="dias">dias</small>
           </span>
           … horas, minutos e segundos, iguais
         </span>
       </p>
     </div>

   A cor é a de quem o recebe (`currentColor`): o componente não traz tinta nem
   fundo, e serve num cartão escuro e numa página clara sem variante. Quem
   quiser outra redefine os três tokens `--countdown-*` no seu âmbito. */

.countdown {
    /* O fundo de cada caixa e o texto secundário, tirados da tinta de quem o
       recebe. A tinta a 72% dá 9,5:1 sobre o preto dos cartões e 8,9:1 sobre o
       branco, acima dos 4,5:1 de texto pequeno nas duas. */
    --countdown-fundo: rgb(127 127 127 / .16);
    --countdown-fundo: color-mix(in srgb, currentColor 12%, transparent);
    --countdown-suave: currentColor;
    --countdown-suave: color-mix(in srgb, currentColor 72%, transparent);
    --countdown-raio: 6px;

    display: flex;
    flex-direction: column;
    gap: 6px;
}

.countdown__validade {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--countdown-suave);
}

/* A campanha acabou com a página aberta: a frase passa a dizê-lo, à tinta
   inteira, e o relógio sai. */
.countdown[data-countdown-estado="terminada"] .countdown__validade {
    color: inherit;
}

.countdown__relogio {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

/* O componente não conta com o `[hidden]` do Bootstrap: sem JavaScript, numa
   página que não o carregue, o relógio de zeros ficava à vista. */
.countdown__relogio[hidden] {
    display: none;
}

.countdown__rotulo {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--countdown-suave);
}

.countdown__partes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Cada caixa tem a largura do número maior que lá cabe (três algarismos de
   dias) e da unidade por extenso, para o relógio não mudar de largura quando os
   dias passam de 100 para 99. Os algarismos são tabulares pela mesma razão. */
.countdown__parte {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.25rem;
    padding: 6px 8px 5px;
    border-radius: var(--countdown-raio);
    background-color: var(--countdown-fundo);
}

.countdown__parte b {
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.countdown__parte small {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--countdown-suave);
}

/* Com o movimento reduzido o relógio acerta ao minuto, e uma caixa de segundos
   parada a mentir seria pior do que nenhuma. */
.countdown[data-countdown-sem-segundos] .countdown__parte--segundos {
    display: none;
}

@media (min-width: 481px) {
    .countdown__relogio {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }
}