/**
 * Apertura dell'articolo — banda con l'immagine in evidenza, titolo in basso.
 *
 * A differenza delle aperture delle pagine interne, qui non c'è niente di
 * scritto nel tema: categoria, titolo, autore e data arrivano dall'articolo che
 * si sta leggendo, e la fotografia è la sua immagine in evidenza. Il blocco è
 * quindi `core/cover` con `useFeaturedImage`, non un gruppo con uno sfondo.
 *
 * Il velo non lo fa `core/cover` con il suo `dimRatio`: quello è una tinta
 * uniforme, mentre qui serve una sfumatura dal basso — il testo sta appoggiato
 * al bordo inferiore — e sotto i 900px va scurita, cosa che un attributo del
 * blocco non sa fare. Il blocco porta la foto, il velo sta qui.
 */

/* Il testo si appoggia in basso. Lo si ottiene qui e non con l'attributo
   `contentPosition` del blocco: quello aggiunge `has-custom-content-position`,
   e core con quella classe porta il contenitore interno a `width: auto` — la
   colonna si stringe attorno al testo invece di tenere la cornice del sito, e
   il titolo scivola a sinistra. `padding: 0` toglie i 16px di serie del
   blocco: lo spazio lo dà il contenitore interno, come nel riferimento. */
.post-hero {
	position: relative;
	/* Il passo fra i blocchi di primo livello — `:where(.wp-site-blocks) > *`,
	   24px — separerebbe la banda dall'header, che nel riferimento invece la
	   tocca. `:where()` non pesa niente, quindi una classe basta. */
	margin-block-start: 0;
	align-items: flex-end;
	min-height: clamp( 320px, 42vw, 520px );
	padding: 0;
	overflow: hidden;
}

/* La sfumatura sale dal basso: densa dove c'è il testo, quasi trasparente in
   cima, così la fotografia resta leggibile nella parte alta della banda.

   I valori del riferimento — 0,74 / 0,38 / 0,12 — sul primo articolo lasciavano
   scoperto un angolo: misurando il contrasto del bianco contro la foto velata,
   la media sul titolo era 14,2 ma l'1,1% dei pixel cadeva sotto 3, dove la
   scritta chiara della tenda taglia la seconda riga. È poca superficie, ed è
   esattamente quella che l'occhio nota.

   Tre è la soglia che conta qui: il titolo è testo grande — 52px, ben oltre i
   24 — e per il testo grande l'AA chiede 3:1, non 4,5. Caricare la sosta di
   mezzo basta, e non spegne la fotografia perché il testo sta fra il fondo e il
   60% dell'altezza: niente resta sotto 3, e in cima il velo passa da 0,15 a
   0,18. Occhiello e riga dei dati sono testo piccolo e vogliono 4,5: stanno a
   11 e 17, quindi non erano loro il problema. */
/* La sfumatura sta sullo strato di velatura di `core/cover`, non in un nostro
   `::after`. Con lo pseudo-elemento il velo copriva il testo: core dà al
   contenitore interno `z-index: 1`, la nostra dichiarazione a 2 non passava, e
   a parità di livello dipinge chi viene dopo nel DOM — `::after` è generato per
   ultimo, quindi vinceva sempre lui. Sembrava testo grigio; era il velo sopra.
   Lo `span` invece core lo mette prima del contenuto e lo tiene sotto per
   costruzione, quindi non c'è nessun ordine da dichiarare. È già lì e con
   `dimRatio: 0` è trasparente: gli si dà la sfumatura e basta. */
/* Il selettore ripete le due classi del dim non per abitudine ma per contare:
   core spegne lo strato con

     .wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0

   che sono quattro classi. `.post-hero .wp-block-cover__background` ne ha due e
   perde comunque, in qualunque ordine arrivino i fogli — l'`opacity: 1` non
   passava e la banda si vedeva senza velo, con il titolo bianco appoggiato alla
   fotografia. Cinque classi tolgono di mezzo l'ordine di caricamento. */
.wp-block-cover.post-hero .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	/* `dimRatio: 0` nel template fa scrivere a core `has-background-dim-0`, che
	   azzera l'opacità dello strato. Serve per la sua velatura a tinta unita, che
	   qui non si usa: le alfa se le porta la sfumatura, una per sosta, quindi lo
	   strato va riacceso o non si vedrebbe niente. */
	opacity: 1;
	/* Insieme all'opacità va spento il nero pieno che core dà allo stesso strato
	   — `.has-background-dim:not([class*=-background-color])` — pensato per la
	   sua velatura a tinta unita. Finché l'opacità era 0 non si vedeva; riaccesa,
	   la sfumatura ci si appoggia sopra e il fondo torna opaco: la fotografia
	   sparirebbe sotto una banda nera. Le alfa stanno tutte nella sfumatura. */
	background-color: transparent;
	background-image: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.80 ) 0%,
		rgba( 0, 0, 0, 0.52 ) 48%,
		rgba( 0, 0, 0, 0.14 ) 100%
	);
}

/* La colonna del testo. L'ordine rispetto al velo non si dichiara più qui:
   lo tiene core, perché il velo ora sta sul suo `__background` — vedi sopra.
   `position: relative` resta perché è core stesso a volerlo.

   L'ombra è la rete che non dipende dall'immagine: il velo si tara su una
   fotografia, ma l'immagine in evidenza la sceglie chi scrive l'articolo e su
   uno scatto più chiaro il conto ricomincia. Seguendo il bordo delle lettere
   vale ovunque cada il punto chiaro, e con questi valori non si legge come
   ombra ma solo come stacco. */
.wp-block-cover.post-hero .wp-block-cover__inner-container {
	position: relative;
	text-shadow:
		0 1px 2px rgba( 0, 0, 0, 0.45 ),
		0 2px 16px rgba( 0, 0, 0, 0.35 );
	width: 100%;
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding: clamp( 40px, 7vw, 96px ) var(--wp--preset--spacing--50);
}

.wp-block-cover.post-hero .wp-block-cover__inner-container > * {
	margin-block-start: 0;
}

/* --- Occhiello, titolo, riga dei dati ---------------------------------- */

/* Blocco largo quanto il testo e non `inline-block`: un elemento in linea si
   porta dietro la riga che lo contiene, e la sua interlinea si somma sopra e
   sotto. È la stessa ragione dell'occhiello di `story-split`. */
/* `core/post-terms` rende le categorie come link: nel riferimento l'occhiello
   è testo semplice, quindi si toglie la sottolineatura e si lascia il colore
   ereditato. Torna al passaggio del puntatore, che è l'unico momento in cui
   serve dire che è cliccabile. */
.post-hero__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.post-hero__eyebrow a:hover,
.post-hero__eyebrow a:focus-visible {
	text-decoration: underline;
}

.post-hero__eyebrow {
	display: block;
	width: fit-content;
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
}

.post-hero__title {
	max-width: 22ch;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.wp-block-cover.post-hero .wp-block-cover__inner-container > .post-hero__title {
	margin-block-start: 16px;
}

/* I dati dell'articolo su una riga sola che va a capo da sé: autore, data e
   tempo di lettura, separati da un punto mediano. */
.post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-weight: 500;
}

.wp-block-cover.post-hero .wp-block-cover__inner-container > .post-hero__meta {
	margin-block-start: 20px;
}

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

/* "di" e il nome dell'autore sono due blocchi ma una frase sola: il loro
   distacco è quello fra due parole, non quello fra due voci della riga. */
.post-hero__author {
	display: flex;
	align-items: center;
	gap: 0.35em;
}

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

.post-hero__author .wp-block-post-author-name {
	font-weight: 600;
}

/* I separatori sono disegnati dal CSS e non sono blocchi: `core/paragraph`
   scarta l'`aria-hidden`, quindi come paragrafi finivano letti ad alta voce —
   "punto" fra l'autore e la data. Da pseudo-elemento restano decorazione, e il
   template perde due blocchi vuoti. */
.post-hero__meta > * + *::before {
	content: "·";
	margin-right: 12px;
	opacity: 0.5;
}

/* --- Sotto i 900px ------------------------------------------------------ */

@media ( max-width: 900px ) {
	/* Il titolo va a capo più volte e arriva a coprire la parte chiara della
	   fotografia: il velo si scurisce per tenerlo leggibile. Stesso selettore
	   lungo di sopra: una media query non aggiunge peso, quindi con due sole
	   classi questa sfumatura perderebbe contro quella del taglio largo e sotto
	   i 900px non cambierebbe niente. */
	.wp-block-cover.post-hero .wp-block-cover__background.has-background-dim.has-background-dim-0 {
		background-image: linear-gradient(
			to top,
			rgba( 0, 0, 0, 0.85 ) 0%,
			rgba( 0, 0, 0, 0.62 ) 55%,
			rgba( 0, 0, 0, 0.42 ) 100%
		);
	}
}