/* =============================================================
   Parea Sons — richiesta di informazioni

   Due colonne: il modulo, largo, e accanto una spalla stretta con
   l'indirizzo e le quattro cose che sappiamo fare. Chi arriva qui
   ha già deciso di scrivere: il modulo è la cosa più grande della
   pagina, il resto sta di lato e non chiede niente.

   I campi, le caselle e i messaggi d'errore stanno in panels.css:
   sono gli stessi dell'area personale.
   ============================================================= */

.richiesta {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-96);
  align-items: start;
}

.richiesta__modulo { gap: var(--s-32); }

.richiesta__obbligatori {
  justify-self: end;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
  margin: 0;
}

/* Nome e cognome, email e telefono: due per riga finché c'è spazio.
   Sono coppie che si compilano insieme e occupare due righe intere
   allungherebbe il modulo senza motivo. */
.richiesta__coppia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-32);
}

/* L'avviso che il modulo non parte davvero. Sta in cima, non in
   fondo: si legge prima di compilare, non dopo. */
.modulo__avviso {
  border-left: 2px solid var(--rosso-araldico);
  padding-left: var(--s-24);
  margin: 0;
  font-family: var(--font-dato);
  font-size: var(--t-12);
  line-height: 1.6;
  letter-spacing: var(--tracking-dato);
  color: var(--greige);
}

.modulo__avviso a {
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--oro);
}
.modulo__avviso a:hover { color: var(--rosso); text-decoration-color: currentColor; }

.scelta label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--oro);
}
.scelta label a:hover { color: var(--rosso); text-decoration-color: currentColor; }

/* --- La spalla -------------------------------------------------- */

.richiesta__lato {
  display: grid;
  gap: var(--s-16);
  align-content: start;
  padding-top: var(--s-32);
  border-top: 1px solid var(--filetto);
}

.richiesta__titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-13);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
}

.richiesta__lato .filetto { margin-bottom: var(--s-8); }
.richiesta__lato .destinatari { margin-bottom: var(--s-32); }

/* --- La richiesta d'ordine --------------------------------------
   richiesta.html riusa tutto quello di sopra — è la stessa pagina con
   la borsa nella spalla invece dell'indirizzo. Qui sotto c'è solo
   quello che informazioni.html non ha: i due stati in cui la pagina
   non è un modulo (borsa vuota, richiesta mandata) e le vie d'uscita.
   Le righe dei capi e il totale vengono da panels.css: la borsa è la
   stessa, e una seconda forma della stessa riga sarebbe una seconda
   riga da tenere allineata. */

.richiesta__sola {
  display: grid;
  gap: var(--s-16);
  justify-items: start;
  max-width: 62ch;
}

.richiesta__sola .filetto { width: 100%; margin-bottom: var(--s-8); }

.richiesta__vie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-16);
  margin-top: var(--s-16);
}

.richiesta__lato .totale { margin-top: var(--s-8); }

/* --- Larghezze minori ------------------------------------------- */

@media (max-width: 1024px) {
  .richiesta { gap: var(--s-64); }
}

@media (max-width: 900px) {
  /* La spalla passa sotto: in due colonne strette il modulo
     diventerebbe una fila di campi larghi metà schermo. */
  .richiesta { grid-template-columns: minmax(0, 1fr); }
  .richiesta__lato { margin-top: var(--s-32); }

  /* Su richiesta.html però la spalla va SOPRA, e non è una preferenza:
     lì dentro c'è quello che si sta chiedendo, e si guarda prima di
     mettersi a compilare — non dopo aver dato nome, cognome e email a
     un elenco che non si è ancora visto. Nell'HTML resta dopo il
     modulo, che è l'ordine giusto per chi legge a voce: prima cosa si
     fa, poi cosa contiene. */
  .richiesta[data-parte="modulo"] .richiesta__lato { order: -1; margin-top: 0; }
}

@media (max-width: 560px) {
  .richiesta__coppia { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
}