/**
 * "Continua a leggere" — la chiusura della pagina articolo.
 *
 * Le schede non stanno qui: sono le stesse della lista del blog, classi
 * `blog-card__*`, e le veste `blog-list.css`. Questo foglio ha solo quel che è
 * della sezione — la banda, il titolo e la griglia a due — e per questo va
 * caricato dopo `blog-list.css`, così una differenza voluta può scavalcare la
 * scheda di serie. Vedi `style_slugs()` in functions.php.
 */

.post-continua {
	/* Il passo fra i blocchi di primo livello — `:where(.wp-site-blocks) > *`,
	   24px — staccava questa banda dal corpo dell'articolo, e in mezzo si
	   vedeva la carta della pagina: una fascia più scura del crema della
	   sezione, proprio sul suo attacco. Le bande di questo sito si toccano, e
	   l'annullamento c'è già per l'hero, per il `main` e per il footer — in
	   header.css, post-hero.css e footer.css. Questa era l'unica rimasta
	   fuori. `:where()` non pesa niente, quindi una classe basta. */
	margin-block-start: 0;
	/* Simmetrico, e sono i valori del riferimento (`.post-related`): sopra e
	   sotto la stessa quantità. Prima erano due curve diverse, più stretta
	   sopra e più larga sotto, e la banda risultava sbilanciata. */
	padding-block: clamp( 56px, 8vw, 110px );
	padding-inline: var(--wp--preset--spacing--50);
}

.post-continua__inner {
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
}

/* Il gruppo tiene il layout `flow` di core, che dà a ogni figlio dal secondo in
   poi il block gap: qui lo spazio fra titolo e griglia lo decide il titolo, e
   due margini sommati farebbero un vuoto che non c'è in nessun'altra sezione.
   Due classi perché la regola di core pesa quanto una — vedi il commento nella
   griglia qui sotto. */
.wp-block-group.post-continua__inner > * {
	margin-block-start: 0;
}

/* Il titolo era in grassetto pieno e dello stesso petrol dei titoli delle due
   schede sotto: cambiava solo il corpo, quindi non si leggeva come
   l'intestazione della sezione ma come una scheda più grande.

   La veste è quella di `.section-heading` nel riferimento, riga per riga:
   corsivo leggero color `ink`, la seconda metà dritta, grassetta e `rosso`, il
   tutto centrato. Il corsivo è solo sulla prima metà, quindi il `<strong>` deve
   rimetterlo a posto: altrimenti eredita l'inclinazione da qui.

   Nel riferimento è un componente condiviso da tutto il sito — `.section-heading`
   con i suoi `-center`, `-on-dark`, `-upright`. Qui invece ogni sezione si
   riscrive il proprio titolo, ed è per questo che questo era andato per conto
   suo. Vale la pena rifletterci se le sezioni da allineare diventano tre. */
.post-continua__title {
	margin: 0 0 clamp( 32px, 4vw, 56px );
	font-style: italic;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* Niente margine aggiunto prima della parola in rosso: nel riferimento lo
   stacco è il solo spazio scritto nel markup, e `trec` — da cui l'avevo preso —
   è un'altra composizione. Con lo `0.18em` in più la riga si allargava di mezzo
   carattere e, essendo centrata, si spostava anche di lato. */
.post-continua__title strong {
	color: var( --wp--preset--color--rosso );
	font-style: normal;
	font-weight: 700;
}

/* --- La griglia -------------------------------------------------------- */

/* Due classi e non una: `.wp-block-post-template` porta già `display: flex`
   dalla foglia di core, con la stessa specificità di una classe e più avanti
   nell'ordine. Con un solo selettore la griglia non si applicherebbe. È la
   stessa ragione — e la stessa forma — della griglia del blog. */
.post-continua .wp-block-post-template.post-continua__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 40px, 4.5vw, 64px ) clamp( 28px, 3vw, 56px );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La scheda è una colonna: è ciò che permette all'invito in fondo di allinearsi
   fra le due schede quando i titoli hanno un numero di righe diverso — il
   `margin-top: auto` di `.blog-card__cta` lavora solo dentro a un flex. */
.post-continua__cards > li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* --- Quando non c'è nient'altro da leggere ------------------------------ */

/* Il primo articolo di un blog nuovo non ha altri articoli dietro: il Query
   Loop rende "nessun risultato" e resterebbe un titolo "Continua a leggere"
   sopra al vuoto. Meglio niente sezione. La frase dentro al blocco resta la
   rete per i browser senza `:has()`, dove questa regola non scatta. */
.post-continua:has( .wp-block-query-no-results ) {
	display: none;
}

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

@media ( max-width: 768px ) {
	.post-continua .wp-block-post-template.post-continua__cards {
		grid-template-columns: 1fr;
	}
}