/* Blu Basilico — stili delle pagine che non sono la home ne' una ricetta.
   Stanno fuori da main.css per tenere la pagina ricetta sotto il budget di 60 KB:
   qui dentro c'e' solo roba che quelle due pagine non usano mai.
   Caricato da inc/enqueue.php. */

/* ---------- Griglia degli ingredienti ---------- */
.ing-griglia { display: grid; gap: var(--sp-4) var(--sp-3); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .ing-griglia { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ing-griglia { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1200px) { .ing-griglia { grid-template-columns: repeat(6, 1fr); } }
.ing-griglia--stretta { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .ing-griglia--stretta { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ing-griglia--stretta { grid-template-columns: repeat(6, 1fr); } }

/* Il mese si sceglie cambiando data-mese sul contenitore: nessuna card viene ricreata. */
.stagione[data-mese="1"] .ing-card:not([data-mese~="1"]),
.stagione[data-mese="2"] .ing-card:not([data-mese~="2"]),
.stagione[data-mese="3"] .ing-card:not([data-mese~="3"]),
.stagione[data-mese="4"] .ing-card:not([data-mese~="4"]),
.stagione[data-mese="5"] .ing-card:not([data-mese~="5"]),
.stagione[data-mese="6"] .ing-card:not([data-mese~="6"]),
.stagione[data-mese="7"] .ing-card:not([data-mese~="7"]),
.stagione[data-mese="8"] .ing-card:not([data-mese~="8"]),
.stagione[data-mese="9"] .ing-card:not([data-mese~="9"]),
.stagione[data-mese="10"] .ing-card:not([data-mese~="10"]),
.stagione[data-mese="11"] .ing-card:not([data-mese~="11"]),
.stagione[data-mese="12"] .ing-card:not([data-mese~="12"]) { display: none; }

.ing-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.ing-card__link { display: block; color: var(--inchiostro); text-decoration: none; }
.ing-card__foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--raggio); background: var(--linea); margin-bottom: var(--sp-2); }
.ing-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.ing-card__nome { display: block; font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: 1.25rem; line-height: 1.2; }
.ing-card__link:hover .ing-card__nome { color: var(--blu-testo); }
.ing-card__badge { display: flex; flex-wrap: wrap; gap: 4px; }
/* `margin-top: auto` tiene i pulsanti allineati in basso anche quando i badge vanno a capo. */
.ing-card__apri {
	align-self: flex-start; margin-top: auto; min-height: var(--tocco); padding: 0 0.7em;
	background: transparent; border: 1px solid var(--linea); border-radius: var(--raggio);
	color: var(--grigio); font-size: var(--meta-card); cursor: pointer;
}
.ing-card__apri:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
.ing-card__apri[aria-expanded="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--carta); }

/* Anteprima: la card si apre a piena riga, foto a sinistra e testo a destra. */
.ing-anteprima { position: relative; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--chiaro); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); }
.ing-anteprima__nome { margin: 0 0 var(--sp-2); font-size: var(--h3); }
.ing-anteprima__testo { margin: var(--sp-2) 0; color: var(--grigio); }
.ing-anteprima__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0 0; }
.ing-anteprima__ricette { font-size: var(--meta); }
.ing-anteprima__chiudi {
	position: absolute; top: var(--sp-2); right: var(--sp-2); width: var(--tocco); height: var(--tocco);
	background: transparent; border: 0; color: var(--grigio); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: var(--raggio);
}
.ing-anteprima__chiudi:hover { color: var(--inchiostro); }
.bottone--piccolo { min-height: 40px; padding: 0.5em 1em; font-size: var(--meta); }

@supports selector(:has(*)) {
	@media (min-width: 600px) {
		.ing-card:has(.ing-anteprima:not([hidden])) { grid-column: 1 / -1; display: grid; grid-template-columns: 160px 1fr; grid-template-areas: "foto testo" "foto azioni"; align-items: start; column-gap: var(--sp-4); }
		.ing-card:has(.ing-anteprima:not([hidden])) .ing-card__link { grid-area: foto; }
		.ing-card:has(.ing-anteprima:not([hidden])) .ing-card__badge { display: none; }
		.ing-card:has(.ing-anteprima:not([hidden])) .ing-card__apri { grid-area: azioni; align-self: start; }
		.ing-card:has(.ing-anteprima:not([hidden])) .ing-anteprima { grid-area: testo; }
	}
}

.stagione__vuoto { color: var(--grigio); }

/* Segnaposto quando la foto manca ancora */
.stagione__segnaposto {
	display: flex; align-items: flex-end; width: 100%; height: 100%; padding: var(--sp-3);
	font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: 1.25rem; color: var(--chiaro);
}
.stagione__segnaposto--mare { background: var(--profondo); }
.stagione__segnaposto--terra { background: var(--basilico); }


/* ---------- Community e ristoranti (fase 5) ---------- */
.bottone--secondario { background: transparent; color: var(--blu-testo); border: 1.5px solid var(--blu); }
.bottone--secondario:hover { background: var(--blu); color: var(--chiaro); }
.bottone--vetro { background: rgba(255, 255, 255, 0.85); color: var(--inchiostro); border: 1.5px solid var(--linea); }
.bottone--vetro:hover { background: var(--chiaro); color: var(--blu-testo); }
.archivio--community { margin-top: var(--sp-6); }
.card__foto--vuota { display: grid; place-items: center; background: var(--profondo); }
.card__iniziale { font-family: var(--font-titoli); font-size: 3rem; color: var(--carta); line-height: 1; }
.segno--community { background: var(--basilico); }
.griglia--una { grid-template-columns: 1fr; }

/* Blocco "chi l'ha mandata": bordo sinistro basilico, iniziale in un cerchio. */
.lettore { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--basilico); background: var(--chiaro); border-radius: 0 var(--raggio) var(--raggio) 0; }
.lettore__iniziale { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--basilico); color: var(--carta); font-family: var(--font-titoli); font-size: 1.75rem; line-height: 1; }
.lettore__testo > * + * { margin-top: var(--sp-2); }
.lettore__nome { font-size: 1.125rem; margin: 0; }
.lettore__citta { color: var(--grigio); }
.lettore__citta::before { content: "\00B7  "; }
.lettore__azioni { margin-top: var(--sp-3); }
@media (max-width: 599px) { .lettore { grid-template-columns: 1fr; } .lettore__iniziale { width: 44px; height: 44px; font-size: 1.375rem; } }

/* Blocco ristorante: stesso disegno, in lista descrittiva. */
.scheda-luogo { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--basilico); background: var(--chiaro); border-radius: 0 var(--raggio) var(--raggio) 0; }
.scheda-luogo__titolo { font-size: var(--h3); margin: 0 0 var(--sp-2); }
.scheda-luogo__lista { margin: 0; display: grid; gap: var(--sp-2); }
.scheda-luogo__lista > div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--sp-2); }
.scheda-luogo__lista dt { color: var(--grigio); font-size: var(--meta); }
.scheda-luogo__lista dd { margin: 0; }
.ricetta__inviata ul, .ricetta__inviata ol { padding-left: 1.25em; }

/* Come si filma */
.guida__video { width: min(100% - 2 * var(--margine), var(--breakout)); margin: 0 auto var(--sp-5); }
.guida__video--segnaposto { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--profondo); border-radius: var(--raggio); color: var(--carta); }
.guida__segnaposto-testo { font-family: var(--font-titoli); font-size: var(--h3); }
.checklist { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.checklist li { position: relative; padding-left: 3rem; counter-increment: passo; min-height: 2.5rem; }
.checklist li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--carta); border: 1.5px solid var(--linea); font-family: var(--font-titoli); font-size: 1.25rem; color: var(--blu-testo); line-height: 1; }
.checklist strong { display: block; font-weight: 600; }
.riquadro { margin: var(--sp-5) 0; padding: var(--sp-4); border: 1.5px solid var(--linea); border-radius: var(--raggio); background: var(--chiaro); }
.riquadro h2 { font-size: var(--h3); margin: 0 0 var(--sp-2); }
.riquadro ul { margin: 0; padding-left: 1.25em; }
.riquadro li + li { margin-top: var(--sp-1); }
.promemoria { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--youtube); background: var(--chiaro); border-radius: 0 var(--raggio) var(--raggio) 0; }
.guida .invio__pulsanti { margin-top: var(--sp-5); }
.guida > * + * { margin-top: var(--sp-4); }
.guida h2 { margin-bottom: var(--sp-3); }


/* ---------- Scheda ingrediente ---------- */
/* ---------- Scheda ingrediente ---------- */
.ingrediente__testa { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-4); }
@media (min-width: 900px) { .ingrediente__testa { grid-template-columns: 1fr 420px; align-items: start; gap: var(--sp-6); } }
.ingrediente__titolo { font-size: var(--h1); line-height: 1.05; margin: 0 0 var(--sp-3); }
.ingrediente__riassunto { font-size: 1.125rem; color: var(--grigio); max-width: 60ch; margin: 0; }
.ingrediente__foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raggio); background: var(--linea); }
@media (min-width: 900px) { .ingrediente__foto { aspect-ratio: 3 / 4; } }
.ingrediente__foto img { width: 100%; height: 100%; object-fit: cover; }
.ingrediente__mesi { max-width: 68ch; }
.ingrediente__colonne { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ingrediente__colonne { grid-template-columns: 1fr 320px; gap: var(--sp-6); align-items: start; } }
.ingrediente__blocco { margin-bottom: var(--sp-5); }
.ingrediente__blocco .sezione__titolo { font-size: var(--h2); margin-bottom: var(--sp-3); }
.ingrediente__blocco h3 { font-size: 1.25rem; margin: var(--sp-4) 0 var(--sp-1); }
.ingrediente__blocco p { max-width: 68ch; }
.ingrediente__bambini { padding: var(--sp-3); border-left: 3px solid var(--basilico); background: var(--chiaro); }
.ingrediente__lato { border-top: 1px solid var(--linea); padding-top: var(--sp-4); }
@media (min-width: 900px) { .ingrediente__lato { border-top: 0; padding-top: 0; } }
.ingrediente__fonte, .nota-fonte { font-size: var(--meta); color: var(--grigio); max-width: 68ch; }
.ingrediente__invito { color: var(--grigio); }
.elenco-punti { max-width: 68ch; padding-left: 1.1em; }
.elenco-punti li { margin-bottom: var(--sp-2); }

/* Stagionalità per zona: 12 mesi per tre zone */
.zone { overflow-x: auto; max-width: 100%; }
.zone__tabella { width: 100%; min-width: 330px; border-collapse: collapse; font-size: var(--meta-card); }
@media (min-width: 600px) { .zone__tabella { min-width: 460px; font-size: var(--meta); } }
.zone__tabella th, .zone__tabella td { padding: 6px 2px; text-align: center; border-bottom: 1px solid var(--linea); }
@media (min-width: 600px) { .zone__tabella th, .zone__tabella td { padding: 6px 4px; } }
.zone__tabella thead th { font-weight: 500; color: var(--grigio); }
.zone__tabella tbody th { text-align: left; font-weight: 500; padding-right: var(--sp-2); }
@media (min-width: 600px) { .zone__tabella tbody th { white-space: nowrap; padding-right: var(--sp-3); } }
.zone__tabella abbr { text-decoration: none; border: 0; }
.zone__cella { color: var(--linea); font-size: 1.125rem; line-height: 1; }
.zone__cella--si { color: var(--blu-testo); }
.zone__ora { background: rgba(31, 111, 235, 0.07); }
.zone__indicativo { display: block; font-size: 0.8125rem; color: var(--grigio); font-weight: 400; }
@media (min-width: 600px) { .zone__indicativo { display: inline; font-size: var(--meta-card); } }

/* Valori nutrizionali */
.nutrizione { width: 100%; border-collapse: collapse; font-size: var(--meta); }
.nutrizione caption { text-align: left; color: var(--grigio); font-size: var(--meta-card); padding-bottom: var(--sp-2); }
.nutrizione th, .nutrizione td { padding: 8px 0; border-bottom: 1px solid var(--linea); text-align: left; }
.nutrizione th { font-weight: 400; color: var(--grigio); }
.nutrizione td { text-align: right; font-variant-numeric: tabular-nums; }
.nutrizione__unita { color: var(--grigio); font-size: var(--meta-card); }

/* Domande frequenti */

/* ---------- Community: l'episodio in evidenza ---------- */
/* Sta sopra la griglia dell'archivio, grande quanto il contenitore: e' l'esempio che spiega
   che cosa succede a una ricetta mandata, e va guardato prima di tutto il resto. */
.community-evidenza { margin-bottom: var(--sp-6); }
.community-evidenza .occhiello { margin-bottom: var(--sp-2); }
.community-evidenza .tessera { aspect-ratio: 16 / 9; }
@media (max-width: 599px) { .community-evidenza .tessera { aspect-ratio: 4 / 3; } }
.invia-episodi__evidenza { margin: var(--sp-2) 0 0; color: var(--grigio); font-size: var(--meta); max-width: 60ch; }