/**
 * Sei buoni motivi per aprire — griglia 2×3.
 *
 * Il markup a blocchi porta il colore di fondo, la scala tipografica e il
 * testo. Qui restano le due griglie — quella dei motivi e quella interna al
 * singolo motivo — e il riquadro decorato, che non dice niente e quindi è uno
 * pseudo-elemento invece di un'immagine senza testo alternativo.
 *
 * Il prefisso è `aprire` e non `motivi` come nel riferimento: quelle classi le
 * ha già la fascia della pagina Loyalty, il cui foglio è caricato ovunque e
 * dichiara `.wp-block-group.motivi__grid` a due classi. Riusarle qui voleva
 * dire che le due sezioni si scavalcavano a vicenda — con l'aggravante che è
 * l'ordine di caricamento a decidere quale, quindi il danno cadeva sulla
 * pagina che non stavi guardando.
 */

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

.aprire__inner {
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

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

/* Il selettore passa dal contenitore per la stessa ragione della nota qui sotto:
   il reset del blockGap di core — `:root :where(.is-layout-flow) > *`, che porta
   `margin-block-end: 0` — vale quanto una classe sola, quindi contro
   `.aprire__title` non vinceva la specificità ma l'ordine dei fogli. Sul fronte
   l'ordine ci dava ragione, nell'editor no: lì i due margini sotto al titolo e
   sotto al nome sparivano, e il titolo finiva appiccicato ai riquadri. */
.wp-block-group.aprire__inner > .aprire__title {
	margin: 0 0 clamp( 48px, 6vw, 88px );
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-align: center;
}

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

.aprire__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 36px, 4vw, 64px ) clamp( 40px, 5vw, 80px );
}

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

/* --- Il singolo motivo -------------------------------------------------
   Due colonne: il riquadro decorato e il testo. Il riquadro è lo pseudo-
   elemento, che nella griglia vale come qualunque figlio. */

.aprire__motivo {
	display: grid;
	grid-template-columns: clamp( 80px, 9vw, 120px ) 1fr;
	gap: clamp( 20px, 2vw, 32px );
	align-items: start;
}

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

.aprire__motivo::before {
	content: "";
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--sm);
	background-image: var(--cn-media-deco-4);
	background-repeat: no-repeat;
	background-position: center;
	/* Nel riferimento il fregio è un'immagine larga e alta l'88% del riquadro,
	   adattata per intero: su un fondo quadrato è la stessa cosa che dare la
	   larghezza e lasciar seguire l'altezza. */
	background-size: 88% auto;
}

/* I due colori si alternano a scacchiera sulla griglia a due colonne: il primo
   e il quarto motivo di ogni gruppo di quattro sono blu, il secondo e il terzo
   rossi. È una regola e non sei classi cablate nel contenuto, così un settimo
   motivo prende da sé il colore giusto. */
.aprire__motivo:nth-child( 4n + 1 )::before,
.aprire__motivo:nth-child( 4n + 4 )::before {
	background-color: var(--wp--preset--color--petrol);
}

.aprire__motivo:nth-child( 4n + 2 )::before,
.aprire__motivo:nth-child( 4n + 3 )::before {
	background-color: var(--wp--preset--color--rosso);
}

.wp-block-group.aprire__testo-blocco > * {
	margin-block-start: 0;
}

.wp-block-group.aprire__testo-blocco > .aprire__nome {
	margin: 0 0 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.aprire__testo {
	margin: 0;
	line-height: 1.6;
	overflow-wrap: break-word;
}

/* Il margine sopra alla nota va dichiarato alla stessa specificità del reset
   del blockGap qui sopra, altrimenti il reset se lo porta via. */
.wp-block-group.aprire__inner > .aprire__note {
	margin-block-start: clamp( 32px, 4vw, 56px );
}

.aprire__note {
	margin: 0;
	font-style: italic;
	text-align: end;
}

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

@media ( max-width: 900px ) {
	.aprire__grid {
		grid-template-columns: 1fr;
	}
}