/**
 * "Scrivono di noi" — banda rossa con due fregi floreali ai lati.
 *
 * Il markup a blocchi porta struttura, gradiente e scala tipografica, tutti da
 * preset. Qui resta ciò che i supports non esprimono: il respiro della banda,
 * il ritmo fra titolo e occhiello, e i due fregi, che sono decorazione e per
 * questo pseudo-elementi.
 */

.scrivono {
	position: relative;
	/* Il fianco è quello della cornice di pagina, `--wp--preset--spacing--50`;
	   l'altezza no, ed è la curva del riferimento. */
	padding: clamp( 56px, 9vw, 110px ) var(--wp--preset--spacing--50);
	overflow: hidden;
}

/* Il contenuto sta sopra ai fregi. */
.wp-block-group.scrivono > * {
	position: relative;
	z-index: 1;
	margin-block-start: 0;
}

.scrivono__title {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.wp-block-group.scrivono > .scrivono__lede {
	max-width: 760px;
	margin-inline: auto;
	margin-block-start: clamp( 14px, 1.4vw, 22px );
	font-weight: 500;
	line-height: 1.55;
}

/* --- Fregi ------------------------------------------------------------
   Due file diversi — sono l'uno il riflesso dell'altro — quindi due
   pseudo-elementi e non uno solo ribaltato. La forma arriva come maschera e
   non come immagine: il colore resta un preset, e a un cambio di marchio si
   sposta con la tavolozza invece di restare nel file. */

.scrivono::before,
.scrivono::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 0;
	width: clamp( 120px, 13vw, 200px );
	/* I due fregi sono quadrati (208,64 × 206,34): il rapporto tiene
	   l'altezza legata alla larghezza fluida senza doverla dichiarare. */
	aspect-ratio: 208.64 / 206.34;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

.scrivono::before {
	left: clamp( 40px, 10vw, 180px );
	-webkit-mask-image: var(--cn-media-deco-left);
	mask-image: var(--cn-media-deco-left);
}

.scrivono::after {
	right: clamp( 40px, 10vw, 180px );
	-webkit-mask-image: var(--cn-media-deco-right);
	mask-image: var(--cn-media-deco-right);
}

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

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

	/* La colonna è troppo stretta perché la spezzatura scritta nel testo cada
	   dove serve: si lascia andare a capo il paragrafo per conto suo. */
	.scrivono__lede br {
		display: none;
	}

	/* I fregi si stringono e si attenuano: a questa larghezza finirebbero
	   sotto al testo, e devono restare fondo. */
	.scrivono::before,
	.scrivono::after {
		width: clamp( 70px, 16vw, 110px );
		opacity: 0.55;
	}
}