/* ============================================================
   AGGIUNTE AL FOGLIO DI STILE DEL SITO

   Qui stanno solo le regole che il sito attuale non ha. Il resto
   arriva da stile.css, caricato dal dominio: così i due restano
   uguali senza doverli tenere allineati a mano.

   I selettori sono più lunghi del necessario di proposito. Next
   decide da sé dove infilare questo foglio rispetto a quello
   remoto, e a parità di peso vincerebbe l'ultimo caricato. Con un
   selettore più specifico vincono queste regole comunque.
   ============================================================ */


/* ------------------------------------------------------------
   CARD DI ALTEZZA UNIFORME

   Le card avevano tre o quattro righe secondo la lunghezza del
   titolo, e la griglia veniva sbilenca. Ora lo spazio del titolo
   è sempre quello di due righe: i titoli corti lasciano una riga
   vuota, quelli lunghi si fermano a due.
   ------------------------------------------------------------ */
.results-grid .result-card .card-title{
  /* due righe sempre, piene o vuote che siano */
  min-height: calc(2 * 1.3em);

  /* i titoli più lunghi si fermano lì invece di allungare la card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Anche le righe di dettaglio sono sempre due, così il fondo
   delle card si allinea. */
.results-grid .result-card .card-meta{
  min-height: 1.35em;
}

/* La griglia allinea le card della stessa riga in altezza. */
.results-grid{
  align-items: stretch;
}


/* ------------------------------------------------------------
   IL RACCONTO DELLA SETTIMANA

   Nel sito è aperto su schermo largo e richiuso sul telefono, e
   lo decideva il codice leggendo la larghezza. Qui la pagina
   arriva dal server, che la larghezza non la conosce: si apre
   sempre e si richiude con una regola quando lo schermo è
   stretto.
   ------------------------------------------------------------ */
@media (max-width: 820px){
  .stagione .stagione-racconto[open] > *:not(summary){
    display: none;
  }
}


/* ------------------------------------------------------------
   I COLLEGAMENTI CHE NEL SITO SONO PULSANTI

   Nel sito le voci dell'Indice e le card sono <button>, che non
   hanno sottolineatura. Qui sono collegamenti, perché ognuno ha
   un indirizzo proprio da condividere — ma la sottolineatura non
   la vogliamo.
   ------------------------------------------------------------ */
/* La sottolineatura si toglie sia dal collegamento sia da quello
   che contiene: in CSS una sottolineatura messa da un elemento
   scende sui figli e non si può togliere da lì, quindi va tolta
   alla radice. Il selettore è ridondante di proposito, perché
   questo foglio viene caricato prima di quello del sito. */
.wrap a,
.wrap a.stop,
.wrap a.result-card,
.wrap a .dish-name,
.wrap a .stop-meta,
.wrap a .card-title,
.wrap a .card-meta{
  text-decoration: none;
}

.wrap a.stop,
.wrap a.result-card{
  color: inherit;
}

/* I collegamenti veri, quelli scritti nel testo, restano
   sottolineati come nel sito. */
.wrap a.link-btn,
.wrap a.wine-link{
  text-decoration: underline;
}


/* ------------------------------------------------------------
   L'ETICHETTA DELLA RICETTA DELLA SETTIMANA

   Nel sito è a 10 pixel, la stessa misura delle etichette minute
   sparse per la pagina. Ma qui apre il riquadro più importante
   della home, e a quella misura si perde. Cresce a 13, e l'icona
   con lei per restare in proporzione.
   ------------------------------------------------------------ */
.wrap .stagione .stagione-etichetta{
  font-size: 13px;
  letter-spacing: .06em;
  gap: .55rem;
  margin-bottom: 1.1rem;
}
.wrap .stagione .stagione-etichetta svg{
  width: 22px;
  height: 22px;
}


/* ------------------------------------------------------------
   LE ETICHETTE «USA» E «TI SERVE»

   Nel sito sono a 10 pixel, la misura delle etichette minute.
   Ma qui non sono un dettaglio: dicono cosa si può cucinare con
   quello che si ha e cosa manca, ed è la ragione per cui si
   guarda quella card. A quella misura, e in arancione chiaro,
   il testo si legge male.
   ------------------------------------------------------------ */
.wrap .result-card .usa-tag,
.wrap .result-card .manca-tag{
  font-size: 11.5px;
  line-height: 1.5;
  padding: .3rem .6rem;
  margin-top: .35rem;
  display: block;
}

/* Il colore del testo scuro abbastanza da leggersi sul fondo
   chiaro, invece del ruggine su arancione chiarissimo. */
.wrap .result-card .manca-tag{
  color: #8a4a22;
}
.wrap .result-card .usa-tag{
  color: #226044;
}


/* ------------------------------------------------------------
   IL RIQUADRO DELLA RICERCA

   La ricerca è il punto da cui si comincia, in home come
   nell'Indice: chiuderla in un riquadro azzurro la distingue dal
   resto invece di lasciarla galleggiare fra i filtri.

   L'azzurro è quello del sito — la stessa tinta delle onde nel
   disegno in cima — non un colore inventato.
   ------------------------------------------------------------ */
.wrap .ricerca-box{
  background: var(--sea-foam);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
}

/* L'etichetta sopra il campo si scurisce: sul fondo azzurro il
   ruggine chiaro si legge male. */
.wrap .ricerca-box .ricerca-etichetta{
  color: var(--sea-deep);
  margin-bottom: .5rem;
}

/* Il campo resta bianco, così si stacca dal fondo. */
.wrap .ricerca-box .home-search-row{
  margin-bottom: 0;
}
.wrap .ricerca-box input{
  background: #fff;
  border-color: transparent;
}
.wrap .ricerca-box input:focus{
  border-color: var(--sea-mid);
}

@media (max-width: 820px){
  .wrap .ricerca-box{
    padding: .9rem 1rem;
    margin-bottom: 1.1rem;
  }
}


/* ------------------------------------------------------------
   I FILTRI DENTRO IL RIQUADRO

   Stanno ora nello stesso riquadro della ricerca, sotto il campo.
   Le etichette si scuriscono perché sul fondo azzurro il ruggine
   chiaro si legge male, e le pillole diventano bianche per
   staccarsi.
   ------------------------------------------------------------ */
.wrap .ricerca-box .quick-filters{
  margin-top: 1rem;
  margin-bottom: 0;
}

.wrap .ricerca-box .quick-filter-label{
  color: var(--sea-deep);
}

.wrap .ricerca-box .pill,
.wrap .ricerca-box .pill-select{
  background: #fff;
  border-color: transparent;
}
.wrap .ricerca-box .pill:hover{
  border-color: var(--sea-mid);
}

/* La pillola scelta resta scura, come nel sito. */
.wrap .ricerca-box .pill.active{
  background: var(--sea-deep);
  color: #fff;
  border-color: var(--sea-deep);
}

.wrap .ricerca-box .reset-filters{
  color: var(--sea-deep);
}


/* ------------------------------------------------------------
   IL CAMPO DI RICERCA ARROTONDATO

   Tondo come una pillola, in tinta con quelle dei filtri sotto.
   ------------------------------------------------------------ */
/* Il campo: altezza fissa invece di padding, così coincide col
   pulsante qualunque sia la grandezza del testo. */
.wrap .ricerca-box input#cerca,
.wrap .ricerca-box .home-search-row input{
  height: var(--alt-pillola);
  padding: 0 2.8rem 0 1.3rem;
  border-radius: calc(var(--alt-pillola) / 2);
  box-sizing: border-box;
}

/* La crocetta per svuotare segue il bordo tondo. */
.wrap .ricerca-box .ricerca-pulisci{
  right: 1rem;
}


/* ------------------------------------------------------------
   LE TENDINE A SCELTA MULTIPLA

   Un pulsante che apre un elenco di caselle. Occupano molto meno
   spazio delle pillole e permettono di scegliere più valori.
   ------------------------------------------------------------ */
.tendina{
  position: relative;
}

.pill-tendina{
  gap: .5rem;
  white-space: nowrap;
}
.tendina-freccia{
  font-size: 9px;
  opacity: .6;
}

/* L'elenco esce sopra il resto della pagina. */
.tendina-elenco{
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: 30;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(29,78,115,.12);
  padding: .5rem;
}

.tendina-voce{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border-radius: 5px;
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.tendina-voce:hover{
  background: var(--sand);
}
.tendina-voce input{
  width: auto;
  margin: 0;
  accent-color: var(--sea-deep);
}

.tendina-svuota{
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .4rem .6rem;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--sea-mid);
  text-align: left;
  cursor: pointer;
}
.tendina-svuota:hover{
  color: var(--rust);
}

/* I filtri in riga: quattro pulsanti invece di dodici pillole.
   Questa regola sostituisce quelle scritte prima, quando erano
   ancora pillole e chiedevano molto più spazio. */
.wrap .ricerca-box .quick-filters{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  margin-bottom: 0;
}
.wrap .ricerca-box .quick-filter-group{
  flex: 0 0 auto;
  min-width: 0;
}

/* «Azzera i filtri» sta in fondo alla riga e si stacca a destra,
   così non stringe le tendine. */
.wrap .ricerca-box .reset-filters{
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 640px){
  .wrap .ricerca-box .quick-filters{
    flex-wrap: wrap;
  }
  .wrap .ricerca-box .reset-filters{
    margin-left: 0;
  }
}


/* ------------------------------------------------------------
   IL RITORNO IN FONDO ALL'ELENCO

   Chi scorre una lista lunga si ritrova in fondo, e risalire
   fino in cima solo per uscire è scomodo.
   ------------------------------------------------------------ */
.torna-in-fondo{
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}


/* ------------------------------------------------------------
   LA PILLOLA FLOTTANTE

   Nel sito è un pulsante; qui è un collegamento, quindi va tolta
   la sottolineatura. Del nasconderla su schermo largo se ne
   occupa già il foglio del sito: la regola che la mostra vive
   solo dentro la sua media query.
   ------------------------------------------------------------ */
.wrap a.torna-flottante{
  text-decoration: none;
  color: #fff;
}


/* ------------------------------------------------------------
   LA PILLOLA «INDIETRO»

   Arancione con la freccia, la stessa forma della pillola che il
   sito mostra sul telefono: si riconosce a colpo d'occhio senza
   doverla leggere.

   Prima era una scritta sottolineata, che si confondeva con il
   testo attorno.
   ------------------------------------------------------------ */
.wrap a.pillola-indietro{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--rust);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: .6rem 1.15rem .6rem .95rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(201,123,74,.28);
  transition: transform .12s ease;
}
.wrap a.pillola-indietro:hover{
  background: #b96b3d;
}
.wrap a.pillola-indietro:active{
  transform: scale(.97);
}
.wrap a.pillola-indietro svg{
  width: 15px;
  height: 15px;
  flex: none;
}

/* Sopra il blocco di ricerca vuole aria attorno: senza, sembra
   incollata alla barra in alto e al riquadro azzurro. */
.pillola-indietro-sopra{
  margin: 1.4rem 0 1.6rem;
}


/* ------------------------------------------------------------
   LE CARD DEI VINI, TUTTE DELLA STESSA ALTEZZA

   Nel sito le card stanno una sotto l'altra e l'altezza diversa
   non si nota. In griglia sì: nomi su una o due righe,
   degustazioni di lunghezza diversa, uno o tre abbinamenti, e il
   risultato è sbilenco.

   Ogni parte prende uno spazio fisso, e gli abbinamenti si
   allineano in fondo qualunque cosa ci sia sopra.
   ------------------------------------------------------------ */
/* Ogni parte ha un'altezza decisa, quindi la somma è la stessa
   per tutte le schede: non si dipende dallo stiramento della
   griglia, che va storto appena qualcosa nel mezzo cresce. */
.results-grid > a{
  display: flex;
  align-self: stretch;
}

.results-grid .wine-card{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0;
  /* La somma delle parti, arrotondata per eccesso. */
  min-height: 310px;
}

/* La testa non deve crescere: il bicchiere, il nome, la pillola
   del tipo. */
.results-grid .wine-card-head{
  flex: none;
  align-items: flex-start;
}
.results-grid .wine-card-title{
  min-width: 0;
  flex: 1;
}

/* Le misure vengono dal foglio del sito, non stimate: il nome ha
   interlinea 1.3, la degustazione 1.55. Il vitigno non ne dichiara
   una, quindi si fissa qui. */
.results-grid .wine-card-title h3{
  height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.results-grid .wine-card-meta{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  height: calc(2 * 1.45em);
}

.results-grid .wine-card-tasting{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(3 * 1.55em);
  flex: none;
}

/* Gli abbinamenti sono sempre tre, ma vanno a capo in modo diverso
   secondo la lunghezza dei nomi: da una a tre righe. Si riserva lo
   spazio di due e si nasconde quello che eccede, così l'altezza è
   sempre la stessa. */
.results-grid .wine-card-pesci{
  margin-top: auto;
  padding-top: .7rem;
  height: calc(2 * 1.75em + .7rem);
  overflow: hidden;
  align-content: flex-start;
}

/* Su schermo stretto le colonne sono una o due e il testo va a
   capo di più: l'altezza fissa taglierebbe. */
@media (max-width: 820px){
  .results-grid .wine-card{
    min-height: 0;
  }
  .results-grid .wine-card-title h3,
  .results-grid .wine-card-meta,
  .results-grid .wine-card-tasting,
  .results-grid .wine-card-pesci{
    height: auto;
  }
}

/* ------------------------------------------------------------
   E LE CARD DELLE RICETTE, ALLO STESSO MODO
   ------------------------------------------------------------ */
/* Il sito la dispone già in riga con l'icona a sinistra: qui si
   aggiunge solo che riempia l'altezza della sua casella. */
.results-grid .result-card{
  height: 100%;
  margin-bottom: 0;
}
.results-grid .card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.results-grid .card-body .usa-tag{
  margin-top: auto;
}


/* ------------------------------------------------------------
   LA PILLOLA «APRI A TUTTO SCHERMO»

   Sopra la scheda nella colonna destra dell'Indice. È la stessa
   forma di quella per tornare indietro, con la freccia dall'altra
   parte: si va avanti, non indietro.
   ------------------------------------------------------------ */
.apri-intera{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.wrap a.pillola-avanti{
  background: transparent;
  color: var(--rust);
  border: 1px solid var(--rust);
  box-shadow: none;
  padding: .5rem .95rem .5rem 1.15rem;
}
.wrap a.pillola-avanti:hover{
  background: var(--rust);
  color: #fff;
}


/* ------------------------------------------------------------
   LA CAMBUSA

   Due classi che il sito non ha: il posto del contatore dentro
   l'intestazione del menu, e la riga che dice da quali ricette
   viene un ingrediente della spesa.
   ------------------------------------------------------------ */
.posto-persone{
  margin: .6rem 0 1rem;
}

.shop-source{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sea-mid);
  margin-top: .15rem;
}

/* Il titolo del menu, che nel sito è dentro un componente. */
.menu-card-header h3{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--sea-deep);
  margin: 0;
  flex: 1;
}


/* ------------------------------------------------------------
   L'IMMAGINE DI UN ARTICOLO

   Quattro posizioni e tre misure. In cima e in fondo occupa tutta
   la larghezza; ai lati il testo le scorre attorno.

   Sono le stesse regole del sito attuale, portate qui perché il
   foglio remoto potrebbe non averle ancora.
   ------------------------------------------------------------ */
.articolo .ricetta-foto.foto-alto,
.articolo .ricetta-foto.foto-basso{ width: 100%; }
.articolo .ricetta-foto.foto-basso{ margin-top: 1.4rem; }

.articolo .ricetta-foto.foto-sinistra-alto,
.articolo .ricetta-foto.foto-sinistra-basso{ float: left; margin: .3rem 1.4rem .9rem 0; }
.articolo .ricetta-foto.foto-destra-alto,
.articolo .ricetta-foto.foto-destra-basso{ float: right; margin: .3rem 0 .9rem 1.4rem; }

/* «basso» fa partire l'immagine all'altezza del testo invece che
   del titolo. */
.articolo .ricetta-foto.foto-sinistra-basso,
.articolo .ricetta-foto.foto-destra-basso{ margin-top: 3.2rem; }

.articolo .ricetta-foto.foto-piccola{ width: 30%; }
.articolo .ricetta-foto.foto-media{ width: 45%; }
.articolo .ricetta-foto.foto-grande{ width: 60%; }
.articolo .ricetta-foto.foto-alto.foto-piccola,
.articolo .ricetta-foto.foto-alto.foto-media,
.articolo .ricetta-foto.foto-alto.foto-grande,
.articolo .ricetta-foto.foto-basso.foto-piccola,
.articolo .ricetta-foto.foto-basso.foto-media,
.articolo .ricetta-foto.foto-basso.foto-grande{ width: 100%; }

/* Il testo torna a piena larghezza dopo l'immagine. */
.articolo .stagione-racconto,
.articolo .stagione-invito{ clear: both; }
.articolo .articolo-corpo::after{ content: ""; display: block; clear: both; }

/* La data accanto all'etichetta. */
.articolo-data{
  margin-left: auto;
  font-size: 11px;
  color: var(--sea-mid);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 640px){
  /* Su schermo stretto il testo attorno a un'immagine stretta
     diventa illeggibile. */
  .articolo .ricetta-foto{
    float: none !important;
    width: 100% !important;
    margin: .3rem 0 1.2rem !important;
  }
}


/* ------------------------------------------------------------
   IL PIEDE DI PAGINA
   ------------------------------------------------------------ */
/* Sfondo azzurro come il riquadro della ricerca, e la stessa
   larghezza: il piede chiude la pagina come la ricerca la apre. */
.piede-riga{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .6rem;
}
.piede-titolo{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--sea-deep);
}
.piede-nota{
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--sea-deep);
  opacity: .75;
}
.piede-voci{
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}
/* Sul fondo azzurro il grigio-azzurro si legge male: si scurisce,
   come le etichette dei filtri dentro il riquadro della ricerca. */
.wrap a.piede-link{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sea-deep);
  text-decoration: none;
}
.wrap a.piede-link:hover{
  color: var(--rust);
}


/* ------------------------------------------------------------
   LE SCHEDE DEI PESCI

   La foto sopra, poi il nome e la descrizione: la stessa forma
   delle schede dei vini, con l'immagine in più.
   ------------------------------------------------------------ */
.pesce-foto{
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: .9rem;
  aspect-ratio: 3 / 2;
  background: var(--sand);
}
.pesce-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pesce-tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sea-deep);
  background: var(--sand);
  border-radius: 20px;
  padding: .18rem .55rem;
}

/* La pillola di chi si mangia crudo. */
.wine-card-region.tipo-crudo{
  background: #fdf3ec;
  color: var(--rust);
}

/* Le schede dei pesci hanno la foto, quindi sono più alte di
   quelle dei vini: le misure si ricalcolano. */
.results-grid .wine-card:has(.pesce-foto){
  min-height: 0;
}


/* ------------------------------------------------------------
   LA GRIGLIA CHE RIEMPIE LO SCHERMO

   Il sito usa «auto-fill», che crea anche le colonne vuote: con
   tre pesci e spazio per quattro resta un buco a destra, e la
   riga sembra interrotta a metà.

   «auto-fit» fa il contrario: le colonne vuote si chiudono e le
   card si allargano a occupare tutto. Tre card riempiono lo
   schermo come quattro, e restringendo la finestra passano a
   due e poi a una da sé.

   Vale solo per i pesci: nelle ricette una riga incompleta con
   due card larghissime starebbe peggio di un buco.
   ------------------------------------------------------------ */
.results-grid.griglia-piena{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Sotto una certa larghezza due card affiancate diventano troppo
   strette per una foto: si passa a una sola. */
@media (max-width: 560px){
  .results-grid.griglia-piena{
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   CARD DEI PESCI PIÙ BASSE

   Erano troppo alte: la foto in proporzione 3:2 e la descrizione
   su tre righe facevano card lunghe, e in un elenco di
   diciannove gruppi si scorreva parecchio.

   La foto passa a un taglio più largo che basso, la descrizione
   a due righe, e gli spazi si stringono. Il contenuto è lo
   stesso, l'altezza cala di circa un terzo.
   ------------------------------------------------------------ */
.griglia-piena .wine-card{
  padding: .8rem .9rem .9rem;
}

.griglia-piena .pesce-foto{
  aspect-ratio: 16 / 9;
  margin-bottom: .7rem;
}

.griglia-piena .wine-card-head{
  margin-bottom: .4rem;
}

.griglia-piena .wine-card-title h3{
  font-size: 1rem;
  min-height: 0;
  height: auto;
  -webkit-line-clamp: 1;
}

.griglia-piena .wine-card-meta{
  min-height: 0;
  height: auto;
  -webkit-line-clamp: 1;
}

/* La descrizione a due righe invece di tre. */
.griglia-piena .wine-card-tasting{
  font-size: .9rem;
  line-height: 1.45;
  height: calc(2 * 1.45em);
  -webkit-line-clamp: 2;
  margin-bottom: .5rem;
}

.griglia-piena .wine-card-pesci{
  height: auto;
  min-height: 0;
  padding-top: 0;
  gap: .3rem;
}


/* ------------------------------------------------------------
   IL SOTTOMENU DELLA SEZIONE PESCE

   Sotto il titolo, per passare da una pagina all'altra della
   sezione senza tornare indietro.
   ------------------------------------------------------------ */
.sotto-menu{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.2rem 0 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.wrap a.sotto-voce{
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: .4rem .85rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sea-mid);
  text-decoration: none;
  white-space: nowrap;
}
.wrap a.sotto-voce:hover{
  border-color: var(--sea-mid);
  color: var(--sea-deep);
}
.wrap a.sotto-voce.attiva{
  background: var(--sea-deep);
  border-color: var(--sea-deep);
  color: #fff;
}


/* Le tecniche e le nozioni: testo lungo, che vuole aria. */
.tecnica,
.nozione-parte{
  margin-bottom: 2.4rem;
}
.tecnica .extra-note,
.nozione-parte .extra-note{
  margin-top: .6rem;
}
.tecnica-pesci{
  margin-top: .8rem;
  font-family: 'Newsreader', serif;
  font-size: .92rem;
  color: var(--sea-mid);
}
.tecnica-pesci .quick-filter-label{
  display: block;
  margin-bottom: .2rem;
}


/* I sottotitoli e gli elenchi dentro una nozione. */
.nozione-titoletto{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sea-deep);
  margin: 1.4rem 0 .5rem;
}
.nozione-elenco{
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.9;
  color: var(--ink);
}


/* ------------------------------------------------------------
   LA TENDINA NELLA BARRA

   «Il pesce» apre un sottomenu passandoci sopra. Prima quelle
   voci stavano in una riga di pillole sotto il titolo, e
   occupavano spazio su ogni pagina della sezione.
   ------------------------------------------------------------ */
.nav-con-sotto{
  position: relative;
  display: inline-flex;
}

.nav-freccia{
  font-size: 8px;
  margin-left: .3rem;
  opacity: .6;
}

.nav-tendina{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  margin-top: .3rem;
  padding: .4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(29,78,115,.14);
}

/* Una striscia invisibile sopra la tendina: senza, spostando il
   dito dalla voce alla tendina si passa nel vuoto e si richiude. */
.nav-tendina::before{
  content: "";
  position: absolute;
  top: -.4rem;
  left: 0;
  right: 0;
  height: .5rem;
}

.wrap a.nav-tendina-voce{
  padding: .5rem .7rem;
  border-radius: 5px;
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wrap a.nav-tendina-voce:hover{
  background: var(--sand);
}
.wrap a.nav-tendina-voce.attiva{
  color: var(--rust);
}


/* ------------------------------------------------------------
   LE NOZIONI COME CARD

   Nel dizionario le altre pagine della sezione compaiono come
   riquadri con una riga di spiegazione: si vedono tutte, invece
   di stare nascoste in una tendina.
   ------------------------------------------------------------ */
.griglia-nozioni{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .8rem;
  margin: 1.6rem 0 0;
}

.wrap a.card-nozione{
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  transition: border-color .15s;
}
.wrap a.card-nozione:hover{
  border-color: var(--sea-mid);
}

.card-nozione-icona{
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border-radius: 8px;
  color: var(--sea-deep);
}
.card-nozione-icona svg{ width: 19px; height: 19px; }

.card-nozione-corpo{
  flex: 1;
  min-width: 0;
}
.card-nozione-titolo{
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--sea-deep);
  margin-bottom: .25rem;
}
.card-nozione-testo{
  display: block;
  font-family: 'Newsreader', serif;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
}

.card-nozione-freccia{
  flex: none;
  color: var(--rust);
  font-size: 1.1rem;
  line-height: 1;
  margin-top: .2rem;
}


/* ------------------------------------------------------------
   LE PARTI DI TESTO COME CARD

   Le nozioni sono fatte di parti che si leggono una per volta.
   In colonna unica diventano un muro di testo; affiancate si
   vede subito quante sono e di cosa parlano.
   ------------------------------------------------------------ */
.griglia-testi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
  align-items: start;
}

.card-testo{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
}

/* Tutte le card della stessa altezza: la griglia le allunga fino
   alla più alta della riga, e il testo che eccede si nasconde
   dietro «Leggi tutto». */
.griglia-testi{
  align-items: stretch;
}

.card-testo{
  display: flex;
  flex-direction: column;
}

.card-testo-corpo{
  flex: 1;
  position: relative;
}

/* L'altezza si limita solo dove il testo eccede davvero, e solo
   quando la card è chiusa. Limitarla ovunque faceva sembrare
   tagliate anche le card che ci stavano. */
.card-testo.tagliata:not(.aperta) .card-testo-corpo{
  max-height: 11.5em;
  overflow: hidden;
}

/* La sfumatura dice che il testo continua: va messa solo dove
   continua davvero. */
.card-testo.tagliata:not(.aperta) .card-testo-corpo::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.6em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}



.card-testo-apri{
  align-self: flex-start;
  margin-top: .8rem;
  padding: 0;
  background: none;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rust);
  cursor: pointer;
}
.card-testo-apri:hover{
  color: var(--sea-deep);
}

.card-testo-titolo{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rust);
  margin: 0 0 .7rem;
}

.card-testo-sotto{
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: .92rem;
  color: var(--sea-mid);
  margin: -.4rem 0 .8rem;
}

.card-testo-corpo p{
  font-family: 'Newsreader', serif;
  font-size: .97rem;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 .7rem;
}
.card-testo-corpo p:last-child{ margin-bottom: 0; }

.card-testo-titoletto{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sea-deep);
  margin: 1.1rem 0 .4rem;
}
.card-testo-corpo > .card-testo-titoletto:first-child{ margin-top: 0; }

.card-testo-elenco{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .8rem !important;
  line-height: 1.95 !important;
}


/* ------------------------------------------------------------
   LA MAPPA DELLE ZONE FAO

   I confini sono quelli veri della FAO. Le zone si accendono al
   passaggio e si possono toccare per leggerne il nome.
   ------------------------------------------------------------ */
.mappa-fao{
  margin: 1.6rem 0 0;
}
.mappa-fao-tela{
  position: relative;
  background: var(--sea-foam);
  border-radius: 8px;
  overflow: hidden;
}
.mappa-fao svg{
  width: 100%;
  height: auto;
  display: block;
}

.fao-zona{
  fill: #fff;
  stroke: var(--sea-mid);
  stroke-width: .8;
  cursor: pointer;
  transition: fill .12s;
}
.fao-zona:hover{
  fill: var(--sand);
}

/* Le zone da cui arriva davvero il nostro pesce. */
.fao-zona.nostra{
  fill: rgba(201,123,74,.28);
  stroke: var(--rust);
  stroke-width: 1.1;
}
.fao-zona.nostra:hover{
  fill: rgba(201,123,74,.42);
}

.fao-zona.scelta{
  fill: var(--sea-deep);
  stroke: var(--sea-deep);
}
.fao-zona.nostra.scelta{
  fill: var(--rust);
  stroke: var(--rust);
}

.fao-etichetta{
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  padding: .35rem .7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.fao-etichetta strong{
  color: var(--sand);
  margin-right: .35rem;
}

.mappa-fao-attesa{
  margin: 1.6rem 0 0;
  padding: 3rem 1rem;
  text-align: center;
  background: var(--sea-foam);
  border-radius: 8px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  color: var(--sea-mid);
}

.mappa-fao figcaption{
  margin-top: .8rem;
  font-family: 'Newsreader', serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--sea-mid);
}
.mappa-fao figcaption strong{
  color: var(--rust);
}


/* ------------------------------------------------------------
   LE FONTI

   Dichiarare da dove viene un'informazione è quello che la
   distingue da un'opinione. Sta in fondo, discreta, ma c'è.
   ------------------------------------------------------------ */
.fonti{
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.fonti ul{
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
}
.fonti li{
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: .9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--sea-foam);
}
.fonte-nota{
  display: block;
  font-style: italic;
  font-size: .88rem;
  color: var(--sea-mid);
  margin-top: .15rem;
}


/* La nota che dichiara il metodo, sotto gli abbinamenti. */
.nota-metodo{
  margin-top: 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--sea-mid);
}
.wrap .nota-metodo a{
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ------------------------------------------------------------
   L'ACCESSO
   ------------------------------------------------------------ */
.modulo-accesso{
  max-width: 460px;
  margin-top: 1.6rem;
}
.modulo-accesso .field{
  margin-bottom: 1rem;
}
.nota-campo{
  margin: .3rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--sea-mid);
}
.modulo-accesso .msg{
  margin: 1rem 0;
}
.modulo-accesso .cucina-nav-btn{
  width: 100%;
  margin-top: .4rem;
}

/* Il nome nella barra, con la tendina per uscire. */
.account-nome{
  cursor: default;
}
.nav-tendina button.nav-tendina-voce{
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  color: var(--ink);
  padding: .5rem .7rem;
  border-radius: 5px;
}
.nav-tendina button.nav-tendina-voce:hover{
  background: var(--sand);
}


/* La casella con l'etichetta accanto, per accettare i termini. */
.etichetta-inline{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.etichetta-inline input{
  width: auto;
  margin: .2rem 0 0;
  flex: none;
  accent-color: var(--sea-deep);
}


/* ------------------------------------------------------------
   LA LISTA DELLA SPESA PER REPARTO
   ------------------------------------------------------------ */
.reparto{
  margin-bottom: 1.8rem;
}
.reparto .shop-list{
  margin-top: .5rem;
}

.spesa-azioni{
  margin-top: 1.2rem;
}

/* Quello che si ha in casa: chiuso, perché serve solo quando
   qualcosa finisce. */
.gia-in-casa{
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.gia-in-casa summary{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sea-mid);
  cursor: pointer;
}
.gia-in-casa .shop-list{
  margin-top: .8rem;
}
.gia-in-casa li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  padding: .35rem 0;
}


/* Il campo per aggiungere qualcosa alla lista. */
.aggiungi-spesa{
  margin-bottom: 1.6rem;
}
.aggiungi-spesa .home-search-row{
  margin-bottom: .3rem;
}
.aggiungi-spesa .ricerca-pulisci{
  font-size: 1.3rem;
  color: var(--rust);
}


/* Il segno di quello che non serve a nessuna ricetta. */
.segno-extra{
  color: var(--rust);
  font-weight: 600;
  margin-left: .25rem;
}

.legenda-spesa{
  margin-top: 1.2rem;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--sea-mid);
}


/* ------------------------------------------------------------
   LA FINESTRELLA PER SCEGLIERE IL MENU

   Si apre dalla scheda di una ricetta: chi decide di cucinarla
   non deve andare in Cambusa, comporre il menu e tornare.
   ------------------------------------------------------------ */
.scegli-menu{
  position: relative;
  background: #fff;
  border: 1px solid var(--sea-mid);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 20px rgba(29,78,115,.14);
}

.scegli-menu-testa{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rust);
  margin-bottom: .8rem;
}
.scegli-menu-testa .cucina-chiudi{
  position: static;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--sea-mid);
  cursor: pointer;
}

.scegli-menu-elenco{
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem;
}

.scegli-menu-voce{
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .6rem .8rem;
  cursor: pointer;
  text-align: left;
}
.scegli-menu-voce:hover{
  border-color: var(--sea-mid);
}
.scegli-menu-voce.dentro{
  background: var(--sand);
  border-color: var(--sea-deep);
}

.scegli-menu-segno{
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sea-foam);
  color: var(--sea-deep);
  font-size: 12px;
}
.scegli-menu-voce.dentro .scegli-menu-segno{
  background: var(--sea-deep);
  color: #fff;
}

.scegli-menu-nome{
  flex: 1;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: .98rem;
  color: var(--sea-deep);
}
.scegli-menu-conta{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sea-mid);
}

.scegli-menu-nuovo{
  display: flex;
  gap: .5rem;
  align-items: center;
}
.scegli-menu-nuovo input{
  flex: 1;
}
.scegli-menu-nuovo .pill{
  flex: none;
  cursor: pointer;
}

.scegli-menu-fatto{
  margin: .8rem 0 0;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--sea-deep);
}


/* ------------------------------------------------------------
   IL MENU DELL'ACCOUNT, SUL LOGO
   ------------------------------------------------------------ */
.menu-account{
  position: relative;
  flex: none;
}
button.logo-account{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  border-radius: 50%;
  transition: box-shadow .15s;
}
button.logo-account:hover{
  box-shadow: 0 0 0 3px var(--sea-foam);
}
/* Un pallino dice che si è entrati. */
button.logo-account.dentro::after{
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2E7D5B;
  border: 2px solid var(--paper);
}

/* Si apre verso destra, allineata al bordo sinistro del logo.
   Su schermo stretto rientra da sé, altrimenti uscirebbe. */
.account-tendina{
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: auto;
  z-index: 95;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(29,78,115,.16);
}

@media (max-width: 520px){
  .account-tendina{
    left: auto;
    right: 0;
  }
}

.account-chi{
  padding: .5rem .7rem .7rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .4rem;
}
.account-nome-grande{
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--sea-deep);
}
.account-email{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--sea-mid);
  margin-top: .15rem;
  word-break: break-all;
}

.account-invito{
  padding: .3rem .7rem .7rem;
  font-family: 'Newsreader', serif;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--sea-mid);
  margin: 0;
}

.wrap a.account-voce,
.account-voce{
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .7rem;
  border: none;
  border-radius: 5px;
  background: none;
  font-family: 'Newsreader', serif;
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.wrap a.account-voce:hover,
.account-voce:hover{
  background: var(--sand);
}
.wrap a.account-voce.primaria{
  color: var(--rust);
  font-weight: 600;
}
.account-voce.esci{
  color: var(--heart);
  border-top: 1px solid var(--line);
  margin-top: .3rem;
  padding-top: .6rem;
  border-radius: 0;
}


/* ------------------------------------------------------------
   IL MODULO DI ACCESSO
   ------------------------------------------------------------ */
.campo-password{
  position: relative;
}
.vedi-password{
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--sea-mid);
  cursor: pointer;
}

.consensi{
  margin: 1.6rem 0;
}
.consensi .etichetta-inline{
  margin-bottom: 1rem;
}
.consensi em{
  color: var(--sea-mid);
  font-size: .88rem;
}

.consensi-che-cosa{
  background: var(--sea-foam);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
}
.consensi-che-cosa ul{
  list-style: none;
  margin: .6rem 0;
  padding: 0;
}
.consensi-che-cosa li{
  font-family: 'Newsreader', serif;
  font-size: .93rem;
  line-height: 1.5;
  margin-bottom: .4rem;
  padding-left: 1rem;
  position: relative;
}
.consensi-che-cosa li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sea-mid);
}
.consensi-che-cosa p{
  font-family: 'Newsreader', serif;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--sea-deep);
  margin: .6rem 0 0;
}


/* ------------------------------------------------------------
   IL PANNELLO DELL'ACCOUNT
   ------------------------------------------------------------ */
.pannello-account{
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
  max-width: 640px;
}
.pannello-account .card-testo{
  display: block;
}
.pannello-account .cucina-nav-btn{
  margin-top: .9rem;
}

.dati-account{
  margin: 0;
}
.dati-account dt{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sea-mid);
  margin-top: .8rem;
}
.dati-account dd{
  margin: .1rem 0 0;
  font-family: 'Newsreader', serif;
  font-size: .98rem;
  color: var(--ink);
}

.card-testo.pericolo{
  border-color: rgba(194,75,92,.35);
}
.card-testo.pericolo .card-testo-titolo{
  color: var(--heart);
}
.conferma-cancella{
  margin-top: .8rem;
  padding: .9rem 1rem;
  background: #fdf2f3;
  border-radius: 6px;
}


/* ------------------------------------------------------------
   CONDIVIDERE
   ------------------------------------------------------------ */
.condividi{
  background: #fff;
  border: 1px solid var(--sea-mid);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 20px rgba(29,78,115,.14);
}
.condividi-indirizzo{
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .9rem;
}
.condividi-indirizzo input{
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.condividi-indirizzo .pill{
  flex: none;
  cursor: pointer;
}
.condividi-vie{
  display: flex;
  gap: .5rem;
}
.wrap a.condividi-via{
  flex: 1;
  text-align: center;
  padding: .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sea-deep);
  text-decoration: none;
}
.wrap a.condividi-via:hover{
  border-color: var(--sea-mid);
  background: var(--sand);
}


/* ------------------------------------------------------------
   LA PAGINA DI ACCESSO

   Raccolta e centrata: chi arriva qui deve fare una cosa sola.
   ------------------------------------------------------------ */
.pagina-accesso{
  max-width: 480px;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.accesso-testa{
  text-align: center;
  margin-bottom: 2rem;
}
.accesso-testa .dish{
  font-size: 1.6rem;
  margin-bottom: .6rem;
}
.accesso-testa .desc{
  max-width: none;
  margin: 0;
}

/* Il pannello: un riquadro bianco staccato dal fondo. */
.pagina-accesso .modulo-accesso{
  max-width: none;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.8rem;
  box-shadow: 0 4px 18px rgba(29,78,115,.08);
}

/* Le due schede occupano metà ciascuna, invece di stringersi
   attorno al testo. */
.pagina-accesso .io-schede{
  border-bottom: none;
  padding-bottom: 0;
  gap: .4rem;
}
.pagina-accesso .io-scheda{
  flex: 1;
  justify-content: center;
}

.accesso-sotto{
  text-align: center;
  margin-top: 1.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wrap .accesso-sotto a{
  color: var(--sea-mid);
  text-decoration: none;
}
.wrap .accesso-sotto a:hover{
  color: var(--rust);
}

@media (max-width: 560px){
  .pagina-accesso{
    padding: 1.6rem 0 3rem;
  }
  .pagina-accesso .modulo-accesso{
    padding: 1.2rem;
  }
}


/* ------------------------------------------------------------
   LA SCHERMATA DI ATTIVAZIONE

   Dopo la registrazione l'account esiste ma non è utilizzabile:
   dirlo con una riga in fondo al modulo sarebbe troppo poco.
   ------------------------------------------------------------ */
.modulo-accesso.attivazione{
  text-align: center;
}
.attivazione-segno{
  width: 56px;
  height: 56px;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sea-foam);
  color: var(--sea-deep);
  font-size: 1.6rem;
}
.attivazione-testo{
  font-family: 'Newsreader', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: .8rem 0 1.2rem;
}
.attivazione-testo strong{
  color: var(--sea-deep);
  word-break: break-all;
}
.attivazione-note{
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--sand);
  border-radius: 8px;
  text-align: left;
}
.attivazione-note li{
  font-family: 'Newsreader', serif;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--sea-deep);
  margin-bottom: .4rem;
  padding-left: 1rem;
  position: relative;
}
.attivazione-note li:last-child{ margin-bottom: 0; }
.attivazione-note li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sea-mid);
}


/* ------------------------------------------------------------
   L'INVITO AD ACCEDERE, IN FONDO ALLA HOME

   Dice cosa si guadagna, non «accedi». E sta dopo le ricette,
   quando chi le ha appena scorse potrebbe volerne salvare una.
   ------------------------------------------------------------ */
.invito-grande{
  margin-top: 3rem;
  padding: 2rem 1.8rem;
  background: var(--sea-foam);
  border-radius: 12px;
  text-align: center;
}

.invito-testo .dish{
  font-size: 1.35rem;
  margin-bottom: .5rem;
}
.invito-testo p{
  font-family: 'Newsreader', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sea-deep);
  max-width: 46ch;
  margin: 0 auto;
}

.invito-cose{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 1.8rem 0;
  padding: 0;
}
.invito-cose li{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sea-deep);
}
.invito-icona{
  display: flex;
  color: var(--rust);
}
.invito-icona svg{ width: 17px; height: 17px; }

.invito-pulsanti{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
.wrap a.invito-btn{
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.5rem;
  border: 1px solid var(--sea-deep);
  border-radius: 24px;
  background: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sea-deep);
  text-decoration: none;
}
.wrap a.invito-btn.primario{
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}
.wrap a.invito-btn.primario:hover{
  background: #b96b3d;
  border-color: #b96b3d;
}
.wrap a.invito-btn:hover{
  border-color: var(--sea-mid);
}

.invito-nota{
  margin: 1.2rem 0 0;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: .88rem;
  color: var(--sea-mid);
}

@media (max-width: 560px){
  .invito-grande{
    padding: 1.6rem 1.2rem;
  }
  .invito-cose{
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    text-align: left;
  }
  .wrap a.invito-btn{
    width: 100%;
    justify-content: center;
  }
}


/* ------------------------------------------------------------
   L'INVITO ACCANTO ALLA RICERCA

   Il campo di ricerca resta la cosa principale e non si stringe:
   l'invito prende lo spazio che avanza, e sotto i 900 pixel
   scende sotto invece di comprimerlo.
   ------------------------------------------------------------ */
.ricerca-box.con-lato{
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}
.ricerca-box.con-lato .ricerca-principale{
  flex: 1;
  min-width: 0;
}

.ricerca-lato{
  flex: 0 0 auto;
  width: 250px;
  padding-left: 1.6rem;
  border-left: 1px solid rgba(29,78,115,.18);
  /* Allineato al campo di ricerca, non all'etichetta sopra: il
     pulsante parte dove comincia il bianco. */
  padding-top: calc(10.5px + .45rem);
}

.invito-lato p{
  font-family: 'Newsreader', serif;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--sea-deep);
  margin: 0 0 .9rem;
}
.invito-lato-pulsanti{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.invito-lato .invito-btn{
  padding: .6rem 1.1rem;
  font-size: 11px;
}
.wrap .invito-lato .link-btn{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sea-deep);
}

@media (max-width: 900px){
  .ricerca-box.con-lato{
    flex-direction: column;
    gap: 1.2rem;
  }
  .ricerca-lato{
    width: 100%;
    padding-left: 0;
    padding-top: 1.1rem;
    border-left: none;
    border-top: 1px solid rgba(29,78,115,.18);
  }
  .invito-lato-pulsanti{
    flex-direction: row;
    align-items: center;
  }
}


/* ------------------------------------------------------------
   I CAMPI DI UN MODULO

   «.field» veniva dal CMS e nel sito non aveva stile: etichette
   e campi si accozzavano senza respiro. Qui prendono la forma
   del resto — etichetta piccola sopra, campo sotto, e aria fra
   uno e l'altro.
   ------------------------------------------------------------ */
.wrap .field{
  margin-bottom: 1.4rem;
}

.wrap .field label{
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sea-deep);
  margin-bottom: .45rem;
}

.wrap .field input[type="text"],
.wrap .field input[type="email"],
.wrap .field input[type="password"],
.wrap .field input[type="url"]{
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: 'Newsreader', serif;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.wrap .field input:focus{
  outline: none;
  border-color: var(--sea-mid);
  box-shadow: 0 0 0 3px var(--sea-foam);
}
.wrap .field input::placeholder{
  color: var(--sea-mid);
  opacity: .65;
}

/* La nota sotto il campo: spiega, non grida. */
.wrap .field .nota-campo{
  margin: .4rem 0 0;
  font-family: 'Newsreader', serif;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--sea-mid);
}

/* «mostra» dentro il campo password, allineato al testo. */
.campo-password input{
  padding-right: 5rem !important;
}


/* ------------------------------------------------------------
   IL MARE E LA RICERCA, UN BLOCCO SOLO

   Il disegno finisce con l'onda e la ricerca ha lo stesso
   azzurro: attaccandoli l'acqua continua dentro il riquadro,
   invece di essere due cose separate da uno stacco.

   Gli angoli si arrotondano solo in basso, così l'incastro non
   si vede.
   ------------------------------------------------------------ */
.wrap .hero-art{
  margin-bottom: 0;
}

/* Il riquadro sale a toccare l'onda. La pagina lo dichiara invece
   di dedurlo dall'ordine nel codice: bastava spostare un blocco
   per perdere l'effetto senza accorgersene. */
.wrap .ricerca-box.attaccata{
  margin-top: -2px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 1.4rem;
}


/* ------------------------------------------------------------
   LE CARD DELLE RICETTE, TUTTE UGUALI

   Si stiravano all'altezza della più alta della riga, ma il
   contenuto dentro restava libero: una card con la descrizione
   lunga e tre pillole cresceva, e trascinava con sé tutta la
   riga. Nelle righe successive succedeva diversamente, e le card
   risultavano di misure diverse.

   Qui ogni parte ha un'altezza decisa, come per i pesci: la
   somma è la stessa per costruzione, non per stiramento.
   ------------------------------------------------------------ */
.results-grid .result-card{
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  height: 100%;
  min-height: 108px;
}

.results-grid .card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Il titolo: due righe sempre. */
.results-grid .result-card .card-title{
  height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

/* La riga con regione, portata, difficoltà e tempo: due righe,
   perché «Friuli-Venezia Giulia» va a capo e le altre no. */
.results-grid .result-card .card-meta{
  height: calc(2 * 1.5em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le etichette della ricerca per ingredienti — «usa», «ti serve» —
   scendono in fondo, allineate fra tutte le card. Il nome vero è
   questo: «card-badges» me l'ero inventato. */
.results-grid .result-card .usa-tag{
  margin-top: auto;
}

/* L'icona del piatto non si deforma quando la card cresce. */
.results-grid .result-card .card-icon{
  flex: none;
  align-self: flex-start;
}

@media (max-width: 480px){
  /* Su una colonna sola l'altezza fissa non serve e taglierebbe. */
  .results-grid .result-card{
    min-height: 0;
  }
  .results-grid .result-card .card-title,
  .results-grid .result-card .card-meta{
    height: auto;
  }
}


/* ------------------------------------------------------------
   IL PIEDE SI DISTINGUE DALL'INVITO

   Avevano lo stesso azzurro e stavano uno sull'altro: si
   fondevano in un blocco solo, e il piede sembrava non esserci.
   Ora è bianco con una riga sopra.
   ------------------------------------------------------------ */
/* Il piede: fondo sabbia, che lo distingue sia dal bianco della
   pagina sia dall'azzurro dell'invito sopra. Era bianco su
   bianco, e quindi invisibile. */


/* ------------------------------------------------------------
   LE CARD LARGHE UGUALI

   La card era un elemento flessibile dentro il collegamento, e
   senza indicazione si restringeva al proprio contenuto: «Alici
   fritte» diventava più stretta di «Acciughe al verde».

   Le colonne erano già uguali: era la card a non riempirle.
   ------------------------------------------------------------ */
.results-grid > a{
  display: flex;
  align-self: stretch;
  width: 100%;
}
.results-grid .result-card,
.results-grid .wine-card{
  width: 100%;
  flex: 1;
}


/* Meno vuoto sopra l'invito. */
.invito-grande{
  margin-top: 1.8rem;
}


/* ------------------------------------------------------------
   LE RICETTE IN EVIDENZA: RIGHE SEMPRE PIENE

   Il numero di colonne cambiava con la finestra — quattro, tre,
   due — e sei ricette facevano righe piene a tre colonne e
   monche a quattro.

   Qui le colonne sono quattro, due o una: tutte divisori di
   otto, che è il numero di ricette. Qualunque sia la finestra,
   l'ultima riga è piena.
   ------------------------------------------------------------ */
.results-grid.griglia-evidenza{
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px){
  .results-grid.griglia-evidenza{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px){
  .results-grid.griglia-evidenza{
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   LA VERSIONE STRETTA

   Il foglio del sito vecchio nasconde parecchie cose sotto gli
   820 pixel, perché là c'erano una barra in basso e un menu a
   scomparsa che qui non ci sono. Quello che serve va rimesso.
   ============================================================ */

@media (max-width: 820px){
  /* Il disegno del mare resta: era nascosto perché nel sito
     vecchio la home su telefono cominciava dalla ricerca. Qui è
     la prima cosa che si vede, e toglierla lascia la pagina
     spoglia. */
  .hero-art{
    display: block !important;
  }

  /* La barra delle sezioni resta, perché il menu a scomparsa del
     sito vecchio qui non c'è: nasconderla lascerebbe senza
     navigazione. Va a capo e scorre invece di sparire. */
  .nav-desktop{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .3rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-desktop::-webkit-scrollbar{ display: none; }
  .nav-desktop-btn{
    white-space: nowrap;
    font-size: 10.5px;
    padding: .4rem .6rem;
  }

  /* Le tendine, su telefono, si aprono sotto senza uscire. */
  .nav-tendina{
    position: fixed;
    left: 1rem;
    right: 1rem;
    transform: none;
    min-width: 0;
  }

  /* La barra in alto si dispone su due righe: titolo e logo
     sopra, sezioni sotto. */
  .topbar{
    flex-wrap: wrap;
  }
  .topbar-title{
    flex: 1;
  }
  .nav-desktop{
    order: 3;
    width: 100%;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
    margin-top: .5rem;
  }

  /* Il ritorno in linea resta: la pillola flottante del sito
     vecchio qui non c'è su tutte le pagine. */
  .back-link,
  .pillola-indietro{
    display: inline-flex !important;
  }

  /* Il piede non deve finire sotto la pillola flottante. */
  .piede{
    margin-bottom: 4rem;
  }
}

@media (max-width: 560px){
  /* Il riquadro della ricerca e l'invito si impilano. */
  .ricerca-box.con-lato{
    flex-direction: column;
  }
  .ricerca-lato{
    padding-top: 1.1rem;
  }
  .invito-lato-pulsanti{
    flex-direction: column;
    align-items: stretch;
  }
  .wrap .invito-lato .invito-btn{
    justify-content: center;
  }
}


/* ------------------------------------------------------------
   IL PIEDE DI PAGINA

   Una definizione sola, in fondo al foglio: ne avevo scritte due
   in momenti diversi, la seconda vinceva e lasciava il piede
   bianco su bianco — quindi invisibile.

   Fondo sabbia: si distingue dal bianco della pagina e
   dall'azzurro dell'invito che gli sta sopra.
   ------------------------------------------------------------ */
.piede{
  display: block;
  margin-top: 2.5rem;
  padding: 1.5rem 1.4rem 1.3rem;
  background: var(--sand);
  border-radius: 10px;
}


/* ------------------------------------------------------------
   IL CAMPO DI RICERCA RESTA TONDO ANCHE DA STRETTO

   Sotto gli 820 pixel il foglio del sito riscrive il campo per
   alzare il carattere a sedici — serve a evitare che il telefono
   ingrandisca la pagina quando ci si scrive dentro — ma così
   perde l'arrotondamento e torna rettangolare.
   ------------------------------------------------------------ */
@media (max-width: 820px){
  .wrap .ricerca-box input#cerca,
  .wrap .ricerca-box input{
    font-size: 16px;
  }
  .wrap .ricerca-box .ricerca-pulisci{
    right: 1rem;
  }
}


/* ------------------------------------------------------------
   LA PILLOLA DELLA RICERCA E QUELLA DI «CREA UN ACCOUNT»

   Devono cominciare alla stessa altezza. Il campo di ricerca ha
   un'etichetta sopra, il pulsante no: senza compensare quello
   spazio, il pulsante parte più in alto.

   L'etichetta è alta 10,5 pixel più 0,45rem di margine: è quello
   che il lato deve scendere.
   ------------------------------------------------------------ */
.ricerca-lato{
  padding-top: 0;
}

/* L'altezza dell'etichetta sopra il campo, dichiarata una volta
   sola. Il campo la usa come margine, il pulsante come discesa:
   così restano allineati anche se un domani cambia.
   Erano due numeri scritti a mano in due posti, e divergevano. */
.wrap .ricerca-box{
  --alt-etichetta: 1.6rem;
  /* L'altezza delle due pillole: il campo di ricerca e il
     pulsante. Una sola misura, così non possono divergere. */
  --alt-pillola: 56px;
}

.wrap .ricerca-box .ricerca-etichetta{
  height: var(--alt-etichetta);
  margin-bottom: 0;
  line-height: var(--alt-etichetta);
}

/* Non scende: «ho già un account» fa da etichetta e occupa lo
   stesso spazio. */
.invito-lato{
  padding-top: 0;
}

.invito-lato-pulsanti{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: .8rem;
}

/* «Ho già un account» sta sopra il pulsante, dove sta l'etichetta
   dell'altra colonna: le due righe si allineano fra loro. */
.wrap .invito-lato .link-btn{
  order: -1;
  height: var(--alt-etichetta);
  line-height: var(--alt-etichetta);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sea-deep);
}

/* L'altezza la decide una misura sola, e vale per tutti e due:
   il campo e il pulsante. Calcolarla dal padding non funzionava,
   perché il padding cambia sotto gli 820 pixel e i due testi
   hanno grandezze diverse — 1,15rem il campo, 11,5px il
   pulsante. */
.wrap .invito-lato .invito-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--alt-pillola);
  padding: 0 1.1rem;
  border-radius: calc(var(--alt-pillola) / 2);
  box-sizing: border-box;
}

.invito-lato p{
  margin: 0;
  font-size: .88rem;
}

.wrap .invito-lato .link-btn{
  text-align: center;
}

@media (max-width: 900px){
  /* Impilati, l'allineamento non serve più. */
  .invito-lato{
    padding-top: 0;
  }
  .invito-lato-pulsanti{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .wrap .invito-lato .invito-btn{
    flex: 0 0 auto;
  }
}


/* I fondi che si possono scegliere dal CMS. */
.invito-grande.fondo-azzurro{ background: var(--sea-foam); }
.invito-grande.fondo-sabbia{ background: var(--sand); }
.invito-grande.fondo-bianco{
  background: #fff;
  border: 1px solid var(--line);
}


/* ------------------------------------------------------------
   LE ANTEPRIME DI DUE ARTICOLI

   Affiancate su schermo largo, una sotto l'altra da stretto. Se
   ne è stato scelto uno solo, prende tutta la larghezza invece
   di lasciare mezza riga vuota.
   ------------------------------------------------------------ */
.anteprime-articoli{
  margin: 2rem 0;
}

.anteprime-griglia{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.anteprime-griglia.una-sola{
  grid-template-columns: 1fr;
}

.anteprima-articolo{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.anteprima-foto{
  aspect-ratio: 16 / 9;
  background: var(--sand);
}
.anteprima-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anteprima-corpo{
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.anteprima-data{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sea-mid);
  margin-bottom: .4rem;
}

.anteprima-titolo{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--sea-deep);
  margin: 0 0 .4rem;
}

.anteprima-occhiello{
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--rust);
  margin: 0 0 .6rem;
}

.anteprima-testo{
  font-family: 'Newsreader', serif;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 .9rem;
}

/* Il collegamento scende in fondo: due anteprime con testi di
   lunghezza diversa restano allineate. */
.anteprima-corpo .link-btn{
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 700px){
  .anteprime-griglia{
    grid-template-columns: 1fr;
  }
}


/* Il titolo dell'anteprima porta all'articolo. */
.wrap .anteprima-titolo a{
  color: var(--sea-deep);
  text-decoration: none;
}
.wrap .anteprima-titolo a:hover{
  color: var(--rust);
}

/* La foto è cliccabile anche lei. */
.wrap a.anteprima-foto{
  display: block;
  text-decoration: none;
}

/* Il collegamento in fondo, con la freccia. */
.wrap a.anteprima-apri{
  margin-top: auto;
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rust);
  text-decoration: none;
}
.wrap a.anteprima-apri:hover{
  color: var(--sea-deep);
}


/* ------------------------------------------------------------
   LE MISURE DEI BLOCCHI

   Larghezza e spazi si scelgono per nome, non per numero:
   «1.8rem» e «1.75rem» convivrebbero senza che nessuno sappia
   quale è quella giusta. Qui le misure sono poche, decise una
   volta, e le stesse in tutto il sito.
   ------------------------------------------------------------ */
.blocco{
  min-width: 0;
}

.blocco.larga-stretta{
  max-width: 34%;
}
.blocco.larga-meta{
  max-width: 50%;
}
.blocco.larga-piena{
  max-width: none;
}

.blocco.sopra-nessuno{ margin-top: 0; }
.blocco.sopra-poco{    margin-top: 1rem; }
.blocco.sopra-normale{ margin-top: 2rem; }
.blocco.sopra-molto{   margin-top: 3.5rem; }

.blocco.sotto-nessuno{ margin-bottom: 0; }
.blocco.sotto-poco{    margin-bottom: 1rem; }
.blocco.sotto-normale{ margin-bottom: 2rem; }
.blocco.sotto-molto{   margin-bottom: 3.5rem; }

@media (max-width: 820px){
  /* Su schermo stretto le larghezze non si applicano: una
     colonna a un terzo diventa illeggibile. */
  .blocco.larga-stretta,
  .blocco.larga-meta{
    max-width: none;
  }
}


/* ------------------------------------------------------------
   IL RIASSUNTO DI UN CONTENUTO
   ------------------------------------------------------------ */
.contenuto-riassunto{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.wrap a.riassunto-foto{
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--sand);
}
.riassunto-foto img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.riassunto-corpo{
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
}


/* La fascia: foto a sinistra, testo a destra. Occupa poca
   altezza, e serve a richiamare un articolo senza fermare la
   lettura della pagina. */
.contenuto-fascia{
  display: flex;
  gap: 1.2rem;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.wrap a.fascia-foto{
  flex: 0 0 34%;
  display: block;
  background: var(--sand);
}
.fascia-foto img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fascia-corpo{
  flex: 1;
  min-width: 0;
  padding: 1.1rem 1.2rem 1.1rem 0;
  display: flex;
  flex-direction: column;
}
.fascia-corpo .anteprima-testo{
  margin-bottom: .7rem;
}

@media (max-width: 620px){
  .contenuto-fascia{
    flex-direction: column;
  }
  .wrap a.fascia-foto{
    flex: none;
    aspect-ratio: 16 / 9;
  }
  .fascia-corpo{
    padding: 1rem 1.2rem 1.2rem;
  }
}


/* La riga: il minimo, per un richiamo dentro un elenco. */
.contenuto-riga{
  font-family: 'Newsreader', serif;
  font-size: 1rem;
  margin: .3rem 0;
}
.wrap .contenuto-riga a{
  color: var(--sea-deep);
  text-decoration: none;
}
.wrap .contenuto-riga a:hover{
  color: var(--rust);
}
.contenuto-riga-dove{
  color: var(--sea-mid);
  font-size: .9rem;
}


/* ------------------------------------------------------------
   TUTTO INSIEME, ACCANTO ALLA FOTO

   L'introduzione, «perché proprio adesso» e l'invito a cucinare
   stavano in tre punti diversi della pagina — l'ultimo dopo un
   racconto che va aperto con un tocco. Chi guardava la scheda una
   volta sola vedeva solo l'introduzione, il resto poteva restare
   invisibile.

   Ora sono nello stesso riquadro, quello a fianco della foto: si
   leggono in fila, senza aprire nulla.
   ------------------------------------------------------------ */
.stagione-adesso{
  font-family: 'Newsreader', serif;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--sea-deep);
  background: var(--sea-foam);
  border-radius: 8px;
  padding: .8rem 1rem;
  margin: 0 0 1.1rem;
}

/* Dentro il riquadro stretto accanto alla foto, non in fondo a
   tutta la pagina: niente riga sopra, un po' meno distanza. */
.stagione-intro .stagione-invito{
  border-top: none;
  padding-top: 0;
  margin-top: .3rem;
}


/* ------------------------------------------------------------
   L'ARTICOLO: IL TITOLO IN CIMA, IL TESTO SUBITO SOTTO

   La disposizione a due colonne centrava il testo rispetto alla
   foto: con una foto alta e un titolo breve restava un vuoto
   sopra e sotto il titolo, e il testo cominciava solo più in
   basso, dopo tutta la foto.

   Qui il titolo si allinea al bordo superiore della foto, e il
   testo comincia subito sotto il sottotitolo, salendo accanto
   alla foto invece di aspettare che finisca.
   ------------------------------------------------------------ */
.stagione.articolo .stagione-testa{
  align-items: start;
  margin-bottom: 0;
}

/* Il corpo non aspetta la fine della foto: comincia attaccato al
   sottotitolo. La colonna del testo resta quella di sinistra. */
.stagione.articolo .stagione-corpo{
  margin-top: .9rem;
}

/* Sotto gli 820 pixel le due colonne si impilano: la foto sopra,
   il testo sotto, senza allineamenti da rispettare. */
@media (max-width: 820px){
  .stagione.articolo .stagione-testa{
    margin-bottom: 1.2rem;
  }
}


/* Il testo di un articolo comincia attaccato al sottotitolo, non
   dopo lo spazio che serviva a staccarlo dal riquadro apribile —
   che per gli articoli non c'è più. */
.stagione.articolo .articolo-corpo{
  margin-top: .2rem;
}


/* ------------------------------------------------------------
   L'ARTICOLO SU DUE COLONNE, SOTTO LA FOTO

   Accanto alla foto una colonna sola — due colonne in metà
   pagina sarebbero strette e faticose. Superata la foto la
   pagina torna intera, e il testo prosegue su due colonne come
   su un giornale.
   ------------------------------------------------------------ */

/* La parte accanto alla foto scorre attorno a lei: nessuna
   colonna, nessun clear. */
.articolo-accanto p{
  margin: 0 0 .9rem;
}

/* Le regole di questo blocco stanno più in basso, nella versione
   a griglia: quelle di qui servivano alla foto che galleggiava e
   sono state sostituite. */

@media (max-width: 820px){
  /* Su schermo stretto la foto sta sopra a tutta larghezza e le
     colonne non hanno senso: una sola, come si legge al telefono. */
  .articolo-due-colonne{
    column-count: 1;
    column-rule: none;
  }
}


/* ------------------------------------------------------------
   L'ARTICOLO SU DUE COLONNE, CON LA FOTO IN CIMA A DESTRA

   Due colonne per tutta l'altezza. A sinistra titolo,
   sottotitolo e il testo che scende fino in fondo; a destra la
   foto e poi il seguito, che riprende sotto di lei.

   Non sono le colonne automatiche del foglio di stile: quelle
   dividono il testo in due parti uguali e non sanno che a destra
   i primi trecento pixel sono presi dalla foto — il fondo delle
   due colonne finirebbe sfalsato. Qui sono due contenitori, e
   quanto testo va da una parte lo decide il componente.
   ------------------------------------------------------------ */
.articolo-colonne{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: start;
}

.articolo-colonna{
  min-width: 0;
}
.articolo-colonna .stagione-intro{
  padding-right: 0;
}
.articolo-colonna p{
  margin: 0 0 .9rem;
}

/* La foto riempie la sua colonna. Porta una classe sua, non
   quelle di posizione e misura: così non c'è nessuna regola del
   foglio del sito da superare. */
.ricetta-foto.foto-colonna{
  width: 100%;
  float: none;
  margin: 0 0 1.2rem;
}

/* Una riga sottile fra le due colonne, come su un giornale. */
.articolo-colonne .articolo-colonna:first-child{
  padding-right: 2.2rem;
  border-right: 1px solid var(--line);
}

@media (max-width: 820px){
  /* Su schermo stretto una colonna sola: la foto sale in cima,
     poi tutto il testo di seguito. */
  .articolo-colonne{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .articolo-colonne .articolo-colonna:first-child{
    padding-right: 0;
    border-right: none;
  }
  /* La foto prima del testo, non in mezzo. */
  .articolo-colonne .articolo-colonna:last-child{
    display: contents;
  }
  .articolo-colonne .ricetta-foto{
    order: -1;
    margin-bottom: 1.2rem;
  }
}



/* ------------------------------------------------------------
   IL SOTTOTITOLO DI UN ARTICOLO

   Corsivo e un po' più piccolo del testo: si distingue
   dall'articolo che comincia subito sotto, senza sembrare il
   primo paragrafo.

   Vale solo per gli articoli. Nella ricetta della settimana
   quella stessa riga è l'occhiello del piatto, e lì il tondo
   alla misura del testo va bene com'è.
   ------------------------------------------------------------ */
.stagione.articolo .stagione-occhiello{
  font-style: italic;
  font-size: .98rem;
  color: var(--sea-mid);
}

@media (min-width: 900px){
  /* Il foglio del sito lo porta a 1.1rem su schermo largo: qui
     resta più piccolo del testo, che è il punto. */
  .stagione.articolo .stagione-occhiello{
    font-size: 1rem;
  }
}


/* ============================================================
   LA VERSIONE PER TELEFONO

   Non un adattamento di quella per schermo grande: quello che su
   telefono non funziona viene sostituito, non ristretto.
   ============================================================ */

@media (max-width: 820px){
  /* ---- Il menu ---- */

  /* Le sezioni diventano un menu a scomparsa. La barra che
     scorreva chiedeva due tocchi per voce e non dava modo di
     raggiungere i sottomenu. */
  .nav-desktop{
    display: none !important;
  }
  /* Il foglio del sito lo nasconde proprio sotto gli 820 pixel:
     là c'era una barra in basso con le sezioni, e il menu a
     panino non serviva più. Qui quella barra non c'è, quindi
     serve — ed è l'unico modo per raggiungere i sottomenu. */
  .hamburger-btn{
    display: flex !important;
  }

  /* Nel menu aperto i sottomenu sono già lì, rientrati: aprirli
     con un altro tocco non serve a niente. */
  .drawer-gruppo{
    margin-bottom: .4rem;
  }
  .wrap .nav-drawer .drawer-link{
    display: block;
    text-align: left;
    border: none;
    background: none;
    color: var(--sea-deep);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }
  .wrap .nav-drawer .drawer-sotto{
    padding-left: 1.6rem;
    font-family: 'Newsreader', serif;
    font-weight: 400;
    font-size: .95rem;
    color: var(--sea-mid);
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  /* ---- La ricerca ---- */

  /* Via il riquadro azzurro attorno al campo: su schermo largo
     raccoglie campo e filtri e ha senso, su telefono diventa un
     rettangolo chiaro attorno a una pillola. */
  .wrap .ricerca-box{
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .wrap .ricerca-box.attaccata{
    margin-top: 1rem;
    border-radius: 0;
    padding-top: 0;
  }

  /* ---- L'invito ad accedere ---- */

  /* I due pulsanti uno sotto l'altro, non affiancati: «ho già un
     account» e «crea un account» sulla stessa riga non si
     distinguevano. */
  .ricerca-lato{
    width: 100%;
    padding-left: 0;
    padding-top: 1.2rem;
    border-left: none;
    border-top: 1px solid var(--line);
    margin-top: 1.2rem;
  }
  .invito-lato{
    padding-top: 0;
  }
  .invito-lato-pulsanti{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  /* Il pulsante alla misura del testo, non alto come il campo di
     ricerca: quell'altezza serviva ad allinearlo, e qui non c'è
     più niente da allineare. */
  .wrap .invito-lato .invito-btn{
    height: auto;
    padding: .8rem 1.1rem;
    font-size: 11px;
    border-radius: 22px;
    order: 0;
  }
  .wrap .invito-lato .link-btn{
    order: 1;
    height: auto;
    line-height: 1.4;
    padding: .2rem 0;
  }
}


/* Su schermo grande le sezioni stanno nella barra: il menu a
   scomparsa non serve e il suo pulsante nemmeno. */
@media (min-width: 821px){
  .hamburger-btn,
  .nav-drawer,
  .nav-drawer-backdrop{
    display: none !important;
  }
}


/* ------------------------------------------------------------
   LA BARRA IN BASSO

   Gli stili veri stanno nel foglio del sito, che li aveva già.
   Qui solo quello che in Next è diverso.
   ------------------------------------------------------------ */
@media (max-width: 820px){
  /* Nel sito vecchio erano <button>: qui sono collegamenti, e un
     collegamento porta con sé il colore e la sottolineatura. */
  .wrap a.basso-btn,
  a.basso-btn{
    text-decoration: none;
    color: var(--sea-mid);
  }
  .wrap a.basso-btn.attivo,
  a.basso-btn.attivo{
    color: var(--rust);
  }

  .basso-icona{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .basso-icona svg{
    width: 22px;
    height: 22px;
  }

  /* Il pallino con quante cose ci sono in cambusa: nel sito
     vecchio lo accendeva il codice, qui compare solo se c'è
     qualcosa — quindi va mostrato quando esiste. */
  .basso-btn .basso-badge{
    display: flex;
  }

  /* Il piede non deve finire sotto la barra. Il sito vecchio
     misurava l'altezza vera a ogni apertura; qui il valore fisso
     basta, perché la barra ha una misura sola. */
  .piede{
    margin-bottom: calc(var(--altezza-barra) + 1rem);
  }

  /* La pillola per tornare indietro sale sopra la barra. */
  .torna-flottante{
    bottom: calc(var(--altezza-barra) + .8rem);
  }
}

/* Su schermo grande le sezioni stanno nella barra in alto. */
@media (min-width: 821px){
  .barra-basso{
    display: none !important;
  }
}