/**
 * "La cremina della nonna" — banda divisa: fotografia a sinistra, pannello
 * rosso col racconto a destra.
 *
 * Stessa impaginazione della banda Cremoso della stessa pagina — due metà
 * esatte, la foto che riempie la sua — ma le classi restano separate: le due
 * sezioni si somigliano oggi e non c'è motivo per cui debbano cambiare
 * insieme domani.
 *
 * Il markup a blocchi porta struttura, contenuto, colori (gradiente da preset)
 * e scala tipografica. Qui restano la griglia, il riempimento della foto,
 * l'alternanza fra le due immagini e il ritmo verticale del pannello.
 */

.cremina {
	background-color: var(--wp--preset--color--burgundy-deep);
	overflow: hidden;
}

/* Fra una fascia a piena larghezza e la successiva il fondo pagina non deve
   poter passare. Tutta la pagina è impaginata su una frazione di pixel —
   `entry-content` parte da 122,14 e le sezioni più in alto hanno altezze non
   intere (porta 829,97, pillars 698,72, cremoso 927,19) — così il confine fra
   due fasce cade a metà pixel: il browser arrotonda le due superfici una per
   una e, a certi livelli di zoom, resta scoperta una riga del crema di `body`.

   Un pixel di sovrapposizione la chiude a qualsiasi zoom e senza dipendere dal
   colore, che qui sarebbe comunque impossibile indovinare: sulla stessa riga
   ci sono la foto a sinistra e il pannello a destra. Due classi perché il
   layout di flusso di core stampa i margini dei fratelli a una classe sola. */
.wp-block-group.cremina {
	margin-block: -1px;
	/* La sovrapposizione da sola non basta a ogni ingrandimento: a zoom sotto
	   il 100% un pixel CSS vale meno di un pixel fisico e l'arrotondamento può
	   mangiarsela. Queste due fasce stanno *dietro* alle sezioni vicine — la
	   successiva ha `z-index: 1` — e non spostano niente, perché un box-shadow
	   non occupa spazio. Se una riga resta scoperta, mostra il bordeaux della
	   sezione invece del crema della pagina, e sparisce alla vista.
	   Solo verticali: con lo spread uscirebbero anche di lato, oltre il bordo
	   della finestra, e comparirebbe una barra di scorrimento orizzontale. */
	box-shadow:
		0 2px 0 0 var(--wp--preset--color--burgundy-deep),
		0 -2px 0 0 var(--wp--preset--color--burgundy-deep);
}

/* Le due metà sono esattamente metà: è una banda divisa, non un contenitore
   con margini, quindi niente gutter e niente contenitore wide. */
.cremina__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp( 560px, 62vw, 820px );
}

/* Il gruppo ha layout di flusso lato blocco e qui diventa una griglia: senza
   questo i margini fra fratelli che core stampa per il blockGap si sommano
   alla riga. */
.wp-block-group.cremina__split > * + * {
	margin-block-start: 0;
}

/* --- La fotografia ---------------------------------------------------- */

/* Le due foto sono sovrapposte, non affiancate: la seconda sta sopra la prima
   e compare sfumando. Serve un contesto posizionato, e serve che la colonna
   abbia un'altezza propria — gliela dà `align-items: stretch` della griglia. */
.cremina__media {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--custom--hero--deep);
}

.wp-block-group.cremina__media > * {
	margin-block-start: 0;
}

.cremina__shot {
	position: absolute;
	inset: 0;
	margin: 0;
	/* Le due foto sono decorazione, non contenuto da manipolare. Senza questo
	   il browser le tratta come immagini trascinabili: provando a spostarle
	   parte il drag nativo, che resta appeso finché non si clicca, e nel
	   frattempo il `:hover` si perde e si riprende di continuo — la
	   dissolvenza scatta avanti e indietro senza motivo apparente.

	   Il puntatore lo raccoglie il contenitore, che è già il bersaglio
	   dell'hover: renderle inerti non toglie niente a nessuno. */
	pointer-events: none;
}

.cremina__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ancorata in basso, non al centro. La colonna cambia molto di forma: a
	   1440px è verticale (0,88) e a 2199px orizzontale (1,34), quindi `cover`
	   deve per forza tagliare qualcosa. Le due foto sono 0,800 come le
	   originali — così ai lati non si perde niente a nessuna larghezza — e
	   quello che avanza si toglie in alto, dove c'è solo la parete: il 25% più
	   alto di entrambe è sfondo vuoto. L'82% invece del 100% lascia comunque
	   un filo di pavimento sotto la tazzina. */
	object-position: center 82%;
}

/* Il cambio avviene solo al passaggio del mouse. Senza un'alternanza a tempo
   che riscriva l'opacità a ogni fotogramma, la dissolvenza torna a essere una
   `transition` normale: nella versione con il ciclo non poteva esserlo, perché
   l'animazione la faceva ripartire da capo di continuo e non avanzava mai.

   Mezzo secondo: abbastanza per leggersi come un cambio morbido, poco
   abbastanza da non far aspettare chi passa e va. */
.cremina__shot--b {
	opacity: 0;
	/* Curva simmetrica e lenta in entrata e in uscita: un `ease` normale parte
	   di scatto, e su due fotografie a piena banda lo scatto si vede. */
	transition: opacity 0.8s cubic-bezier( 0.4, 0, 0.2, 1 );
	/* Due ragioni, non una precauzione generica. La prima: qui si dissolvono
	   due fotografie da 1092×820 sovrapposte, e senza un livello proprio il
	   browser le ridisegna a ogni fotogramma invece di limitarsi a comporle.
	   La seconda: WordPress stampa `decoding="async"` sulle immagini, e una
	   che sta a opacità zero può non essere ancora stata rasterizzata — al
	   primo passaggio del mouse comparirebbe di colpo a metà dissolvenza.
	   Promuoverla la fa preparare prima, così la prima volta è come le altre. */
	will-change: opacity;
}

.cremina__media:hover .cremina__shot--b {
	opacity: 1;
}

/* --- Il pannello ------------------------------------------------------ */

.cremina__panel {
	display: flex;
	align-items: center;
	padding: clamp( 40px, 5vw, 88px ) clamp( 28px, 4.5vw, 96px );
}

/* Misurata sul riferimento: a pagina 1920 il pannello è ~975px e la colonna di
   testo ~740, non 620. Sotto quella misura il claim non ci sta su una riga. */
.cremina__stack {
	width: 100%;
	max-width: 740px;
}

/* Il ritmo verticale del pannello è fatto di margini espliciti, uno diverso
   dall'altro, quindi il blockGap del gruppo va azzerato — ma le due classi che
   battono il blockGap battono anche i margini voluti se questi restano a una
   classe sola. Per questo reset e valori stanno alla stessa specificità. */
.wp-block-group.cremina__stack > * {
	margin-block-start: 0;
}

/* Due righe strette una sull'altra. Nel riferimento sono due `span` in
   colonna; qui è un'interruzione di riga dentro al titolo, che nell'editor si
   ottiene con Maiusc+Invio e resta un solo titolo per chi legge con uno
   screen reader. L'interlinea sotto l'unità fa il resto. */
.cremina__title {
	margin: 0;
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.01em;
}

/* Nella prima riga solo "cremina" è in grassetto: è il grassetto del rich
   text, così resta modificabile dall'editor. */
.cremina__title strong {
	font-weight: 700;
}

/* Nel riferimento il claim sta su una riga sola. È lungo 44 caratteri, quindi
   la misura va lasciata larga abbastanza da contenerlo: a 30ch andava a capo
   dopo "d' 'a", spezzando l'espressione dialettale a metà. */
.cremina__claim {
	max-width: 46ch;
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
}

.wp-block-group.cremina__stack > .cremina__claim {
	margin-block-start: clamp( 14px, 1.6vw, 22px );
}

.cremina__desc {
	line-height: 1.55;
}

.wp-block-group.cremina__stack > .cremina__desc {
	margin-block-start: clamp( 18px, 2vw, 28px );
}

/* I passaggi sono l'unico elemento che non è testo: staccarli di più li
   riconosce come didascalia della sezione e non come coda del paragrafo. */
.cremina__steps {
	width: clamp( 260px, 26vw, 380px );
	margin: 0;
}

.wp-block-group.cremina__stack > .cremina__steps {
	margin-block-start: clamp( 26px, 3.4vw, 48px );
}

/* --- Schermi stretti -------------------------------------------------- */

@media ( max-width: 900px ) {
	/* Le due metà si impilano: la foto perde lo stiramento della griglia e
	   prende un'altezza propria, altrimenti collasserebbe a zero. */
	.cremina__split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.cremina__media {
		min-height: clamp( 300px, 62vw, 460px );
	}
}

/* Chi ha chiesto meno animazioni perde la dissolvenza, non il cambio: la foto
   si scambia lo stesso, di netto. Spegnere anche quello sarebbe togliere una
   funzione invece che una distrazione. */
@media ( prefers-reduced-motion: reduce ) {
	.cremina__shot--b {
		transition: none;
	}
}