/* ============================================================================
   SELECTOR DE DESTINO — folha própria enquanto a peça se refaz.

   Carrega DEPOIS da `estilo.css`, e é de propósito: mesma especificidade, a
   última ganha. Quando a peça assentar, isto funde-se lá e este ficheiro sai
   — como está escrito na nota das folhas paralelas, em `molde.blade.php`.

   ============================================================================
   ISTO É UM ORÇAMENTO DE ALTURA, E ESTÁ CONTADO.

   Medido numa janela de 390x664, que é o telemóvel do cliente:

                            ANTES                DEPOIS
     topo do selector       347 px               347 px   (não é desta peça)
     altura                 577 px               ~260 px
     fim do botão           800 px               ~590 px
     abaixo da dobra        136 px               nenhum

   O grosso veio de tirar duas perguntas — ver a nota no partial. O resto
   veio destes quatro cortes, e quem lhes mexer está a mexer na dobra:

     1. o rótulo do campo passou a `so-leitores`         -24 px
     2. o espaço entre campos era contado duas vezes     -16 px
     3. o resumo era um parágrafo de instruções e
        passou a uma linha                               -20 px
     4. a folga do bloco encolheu em ecrã estreito       -16 px

   Meça antes e depois. O botão tem de acabar dentro dos 664 px.
   ============================================================================ */

/* -------- o bloco --------

   A folga de 18 px em ecrã estreito não é aperto de estilo: com uma pergunta
   só, 24 px em cima e em baixo faziam a caixa parecer maior do que o que tem
   lá dentro. A partir dos 560 px volta ao respiro de sempre. */
.selector {
  padding: clamp(18px, 2.4vw, 24px);
}

.selector__cabeca { margin-bottom: 12px; }

/* -------- o campo e o botão --------

   Duas coisas na grelha e mais nenhuma: o campo e o botão. A regra
   `.campo + .campo` da folha principal somava 16 px de margem POR CIMA do
   `gap` de 16 px do próprio grelhado — 32 px entre campos, contados duas
   vezes. Com um campo só a regra deixou de disparar, mas fica anulada aqui
   para o dia em que alguém acrescentar outro. */
.selector__campos { gap: 16px; }
.selector__campos .campo + .campo { margin-top: 0; }

/* O rótulo saiu da vista e a grelha do campo ficou com um filho só. O `gap`
   de 8 px não tem entre o que abrir, mas escrevemo-lo a zero para o campo não
   ficar dependente de um detalhe do posicionamento absoluto. */
.selector .campo { gap: 0; }

/* O botão é um alvo de dedo e ocupa a largura toda no telemóvel — não há
   nada ao lado dele por onde falhar. */
.selector__campos .botao { width: 100%; }

/* -------- a saída para a lista completa --------

   Uma linha e não um parágrafo. A frase convida, a ligação leva; juntas cabem
   numa linha em ecrã largo e em duas no telemóvel, e nenhuma delas repete o
   que o botão já diz. */
.selector__resumo {
  margin-top: 14px; padding-top: 14px;
  font-size: 13.5px;
  align-items: baseline;
  gap: 4px 8px;
}

/* -------- a partir dos 560 px o campo e o botão ficam lado a lado --------

   Com três perguntas o selector precisava de linhas próprias e a folha
   principal dava-lhas — duas colunas aos 560 px, três aos 1000 px, e uma
   disposição à parte dentro do herói. Com uma pergunta só, isso é uma barra
   de procura: campo comprido, botão ao lado, e o gesto inteiro numa linha.

   As quatro regras que se seguem existem para desfazer as quatro da folha
   principal — incluindo a do herói, que é mais específica e por isso tem de
   ser repetida com o mesmo peso. */
@media (min-width: 560px) {
  .selector__campos { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .selector__campos > .campo:first-child { grid-column: auto; }

  .heroi .selector__campos { grid-template-columns: minmax(0, 1fr) auto; }
  .heroi .selector__campos > .campo:first-child { grid-column: auto; }

  .selector__campos .botao { width: auto; }
}