/**
 * Racconto a due colonne — testo a sinistra, fotografia a destra.
 *
 * È la composizione che il riferimento usa sia qui sia su "Chi siamo": due
 * colonne uguali, allineate al centro, con la foto ritagliata in 4:3. Il nome
 * è quello della forma e non della pagina, perché la seconda pagina che la
 * userà non parla di lavoro.
 *
 * Il riferimento prevede anche la versione a specchio, con la foto a sinistra.
 * Non è qui: si aggiunge quando servirà davvero, con il modificatore che le
 * spetta.
 *
 * Come nel resto del tema, le regole che assegnano margini ai figli diretti di
 * un gruppo portano due classi: il layout di flusso di core stampa `> * + *`
 * con la specificità di una classe sola e più avanti nel documento.
 */

.story-split {
	padding-block: clamp( 64px, 8vw, 120px );
}

/* La cornice è la misura esterna del riferimento (1280px, gutter incluso),
   diversa da wideSize che in WordPress è la scatola del contenuto. */
.story-split__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp( 40px, 6vw, 90px );
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

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

/* --- Colonna del testo -------------------------------------------------- */

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

/* Occhiello, titolo e testo hanno un passo loro, più stretto di quello fra le
   sezioni: sono tre righe dello stesso discorso. */
.wp-block-group.story-split__copy > * + * {
	margin-block-start: 20px;
}

/* Blocco largo quanto il testo, e non `inline-block` come nel riferimento: un
   elemento in linea porta con sé la riga che lo contiene, e l'interlinea del
   contenitore — 1,6 in questo tema contro 1,55 nel riferimento — si somma
   sopra e sotto. Bastavano tre pixel per far scendere tutto il resto.
   `fit-content` dà la stessa larghezza al contenuto senza entrare in linea. */
.story-split__eyebrow {
	display: block;
	width: fit-content;
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
}

.story-split__title {
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* La parte in evidenza è <strong>: formato core, quindi il titolo resta
   modificabile nell'editor senza perdere lo stacco di peso e di colore. */
.story-split__title strong {
	font-weight: 700;
	color: var(--wp--preset--color--rosso);
}

.story-split__lede {
	line-height: 1.7;
}

/* Il bottone stacca più del resto: chiude il blocco invece di continuarlo.
   I 28px sono quelli del riferimento, dove però non si leggono in nessuna
   dichiarazione — sono 20px di margine sotto al testo più 8px sopra al
   bottone, che non collassano perché il bottone è `inline-flex`, quindi una
   scatola in linea. Qui il valore si scrive per intero: sommarlo a mano ogni
   volta che si legge il foglio è peggio che dichiararlo. */
.wp-block-group.story-split__copy > .story-split__actions {
	margin-block-start: 28px;
}

/* Maiuscoletto e spaziatura larga: è il bottone principale del riferimento,
   diverso dalle pillole delle fasce d'invito, che restano in tondo. */
.story-split__actions .wp-block-button__link {
	padding: 14px 28px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

.story-split__actions .wp-block-button__link:hover,
.story-split__actions .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--rosso-dark) !important;
}

/* --- Colonna della fotografia ------------------------------------------- */

.story-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	/* Il ritaglio è voluto: la foto riempie la sua colonna in 4:3 qualunque
	   siano le proporzioni del file. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--card);
}

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

@media ( max-width: 900px ) {
	/* Una colonna sola: prima si legge di cosa si tratta, poi si guarda. È
	   l'ordine del markup, quindi non serve riordinare niente. */
	.story-split__inner {
		grid-template-columns: 1fr;
	}

	/* Solo qui, ed è la stessa soglia del riferimento: a questa misura
	   l'interlinea ereditata lascia più aria sotto le maiuscole che sopra, e
	   il padding di 14px non si legge più uguale ai due lati. Sopra i 900px
	   l'etichetta respira e il bottone resta più alto. */
	.story-split__actions .wp-block-button__link {
		line-height: 1;
	}
}