/**
 * Stili per il pattern "Il Festival" (patterns/il-festival-pattern.php).
 *
 * Le 3 card "I nostri valori cardine", più le correzioni di layout della
 * pagina in fondo al file. La galleria/carosello delle
 * sezioni KIDS/SCHOOL riusa già le classi self-contained
 * .carosello-con-descrizione__gallery / __slide (assets/css/carosello-con-descrizione.css),
 * nessuno stile dedicato serve qui per quella parte.
 */

/* Riga delle 3 card, tutte alla stessa altezza (quella della più alta):
   stesso schema di .contatti__row--cards / .contatti__card in
   assets/css/contatti.css, con classi dedicate a questo pattern. */
.il-festival__row--cards {
	align-items: stretch;
}

/* Ogni wp:column della riga deve essere lei stessa un contenitore flex in
   colonna, altrimenti .il-festival__card { flex: 1 } non ha un asse su cui
   crescere e la card più bassa resta alta quanto il proprio contenuto
   (stesso problema/fix di .contatti__col in assets/css/contatti.css). */
.il-festival__row--cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.il-festival__card {
	flex: 1;
	min-height: 230px;
	display: flex;
	flex-direction: column;
	/* Contenuto allineato a sinistra e in alto: paragrafi di 8-10 righe
	   centrati erano faticosi da leggere, soprattutto su mobile. */
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--20);
	text-align: left;
	/* Default senza !important: il padding impostato sul blocco nell'editor
	   (stile inline) deve poterlo sovrascrivere. */
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
	border-radius: 14px; /* --radius-lg */
	box-shadow: 0 1px 3px rgba(33, 42, 84, 0.08), 0 8px 24px rgba(33, 42, 84, 0.08); /* --shadow-card */
	transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}

/* Il lift in hover segnala un elemento cliccabile (design system: Card
   "hoverable"): solo sulle card che contengono un link o un pulsante. */
.il-festival__card:has(a):hover {
	box-shadow: 0 4px 12px rgba(33, 42, 84, 0.14); /* --shadow-raised */
	transform: translateY(-2px);
}

.il-festival__card-title {
	margin: 0;
}

/* Prevale sull'allineamento "centro" salvato sui blocchi della card
   (classe has-text-align-center, specificità più bassa). */
.il-festival__card .has-text-align-center {
	text-align: left;
}

.il-festival__card .wp-block-buttons {
	justify-content: flex-start;
}

@media (max-width: 781px) {
	.il-festival__row--cards {
		flex-direction: column;
	}
}

/* Righe KIDS/SCHOOL: sotto i 782px il wp:columns si impila già in colonna
   (comportamento core), ma nella sezione KIDS la galleria è la prima
   colonna nel markup (a sinistra su desktop) — va comunque sempre sotto
   al testo su mobile/tablet piccolo, in entrambe le sezioni. */
@media (max-width: 781px) {
	.il-festival__col-testo {
		order: 1;
	}

	.il-festival__col-galleria {
		order: 2;
	}
}

/*
 * Correzioni di layout della pagina che usa questo pattern. Il contenuto
 * vive nel database (inserito dall'editor), quindi alcune regole devono
 * prevalere sugli stili inline salvati sui blocchi (!important). Tutto è
 * limitato al post-content che contiene una riga del pattern, per non
 * toccare altre pagine.
 */

/* Il Group che avvolge tutta la pagina aveva un padding laterale (1rem)
   che si sommava al rientro del template: testo a 32px dal bordo su mobile
   invece di 16. Tolto il padding vanno tolti anche i margini negativi che
   WordPress dà ai figli "a tutta larghezza" per compensarlo, altrimenti
   sporgerebbero oltre la pagina. */
.wp-block-post-content:has(.il-festival__row) > .wp-block-group:first-child {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wp-block-post-content:has(.il-festival__row) > .wp-block-group:first-child > .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Testi delle sezioni larghe (es. "Il Festival"): righe da ~180 caratteri
   su desktop. Limitati a ~70 caratteri per riga del testo (43rem, in rem e
   non in ch così titoli e paragrafi hanno la stessa colonna; misura
   tipografica, non la
   larghezza contenuto: negli Stili globali del sito questa è stata portata a
   1200px, uguale alla larghezza ampia) e centrati come in un layout
   "constrained"; titoli e testi già centrati non cambiano aspetto. */
.wp-block-post-content:has(.il-festival__row) .wp-block-group.alignwide > :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	max-width: 43rem;
	margin-left: auto;
	margin-right: auto;
}

/* Cover in testa alla pagina: velo navy primario al 40% tra illustrazione
   e testo, che altrimenti era bianco su azzurro chiaro. */
.wp-block-post-content:has(.il-festival__row) .wp-block-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.4;
	pointer-events: none;
}

.wp-block-post-content:has(.il-festival__row) .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wp-block-post-content:has(.il-festival__row) .wp-block-cover__inner-container > p {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* KIDS/SCHOOL: elenchi puntati allineati a sinistra anche dentro la colonna
   centrata (centrati, i pallini restavano staccati dalle righe). Il blocco
   elenco resta centrato nella colonna. */
.il-festival__col-testo .wp-block-list {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Carosello KIDS/SCHOOL su mobile: 4:3 invece di 16:9, era 230×129px. */
@media (max-width: 781px) {
	.il-festival__col-galleria .carosello-immagini__viewport {
		aspect-ratio: 4 / 3;
	}
}