/**
 * Blog intro — banda blu con i due fregi floreali ai lati.
 *
 * Il markup a blocchi porta il colore di fondo e la scala tipografica, che
 * sono preset. Qui sta il resto: il fondo decorativo della banda, i due fregi
 * — che non dicono niente, quindi sono pseudo-elementi e non immagini — e i
 * dettagli di testo che i supports non esprimono (interlinea, tracking,
 * misura della colonna).
 */

.blog-intro {
	position: relative;
	/* I fregi escono dalla banda quando lo schermo si stringe: vanno tagliati
	   sul bordo, altrimenti allargano la pagina. */
	overflow: hidden;
	padding-block: clamp( 56px, 9vw, 110px );
	/* Layout `default`, quindi niente `has-global-padding`: il margine
	   laterale lo dà questa riga. Il preset 50 è, valore per valore, il
	   `--pad` del riferimento. */
	padding-inline: var(--wp--preset--spacing--50);
	background-image: var(--cn-media-bg-novita-dal-mondo);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* --- I due fregi ------------------------------------------------------
   Nel riferimento sono due <img> con `aria-hidden`, `pointer-events: none` e
   `user-select: none`: tre modi di dire che non sono contenuto. Come
   pseudo-elementi lo sono per costruzione, e nell'editor non compaiono due
   immagini senza testo alternativo che si possono cancellare o sostituire
   per sbaglio.

   L'ancoraggio è la sezione a tutta larghezza, non la colonna del testo:
   le distanze partono dal bordo dello schermo, come nel riferimento, dove le
   due <img> sono sorelle del contenitore e non figlie. */

.blog-intro::before,
.blog-intro::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 0;
	width: clamp( 120px, 13vw, 200px );
	/* Il riferimento lascia `height: auto` e la proporzione la dà l'immagine.
	   Un pseudo-elemento non ha misura propria: la proporzione va dichiarata,
	   ed è quella del viewBox dei due SVG. */
	aspect-ratio: 208.64 / 206.34;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.blog-intro::before {
	left: clamp( 40px, 10vw, 180px );
	background-image: var(--cn-media-deco-left);
}

.blog-intro::after {
	right: clamp( 40px, 10vw, 180px );
	background-image: var(--cn-media-deco-right);
}

/* --- La colonna del testo --------------------------------------------- */

.blog-intro__inner {
	position: relative;
	/* Sopra ai fregi: sul desktop la cornice destra arriva a sfiorare le
	   ultime parole del lede. */
	z-index: 1;
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
}

.blog-intro__title {
	margin: 0 0 clamp( 14px, 1.4vw, 20px );
	font-weight: 700;
	/* La radice del tema dà 0,98 a tutti i titoli: qui il riferimento apre a
	   1,15, e su due righe la differenza si vede. */
	line-height: 1.15;
	letter-spacing: -0.01em;
	/* Il titolo sta su una riga sola finché c'è spazio — è la composizione
	   del riferimento, con i fregi ai lati di una riga sola. Sotto i 900px
	   torna a mandare a capo. */
	white-space: nowrap;
}

.blog-intro__lede {
	max-width: 760px;
	/* Il riferimento scrive `margin: 0 auto`. Lo zero verticale va dichiarato:
	   il layout `flow` di core dà al secondo figlio un `margin-block-start`
	   pari al block gap, che qui vale 24px e vince sui 14 del titolo — la
	   banda cresceva di 10px esatti. */
	margin-block: 0;
	margin-inline: auto;
	font-weight: 600;
	line-height: 1.55;
}

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

@media ( max-width: 900px ) {
	.blog-intro__title {
		white-space: normal;
	}
}

@media ( max-width: 720px ) {
	.blog-intro {
		padding-block: clamp( 48px, 10vw, 80px );
		padding-inline: clamp( 16px, 5vw, 28px );
	}

	/* Rimpiccioliti e schiariti: a questa larghezza il testo li attraversa,
	   e a piena opacità le lettere ci si perdono dentro. */
	.blog-intro::before,
	.blog-intro::after {
		width: clamp( 70px, 16vw, 110px );
		opacity: 0.55;
	}
}