/**
 * Stili condivisi dai blocchi "programma" (fl/programma, fl/programma-kids,
 * fl/programma-school) e della card di dettaglio evento a tutto schermo
 * (fl-programma-modal, iniettata una sola volta nel DOM da
 * src/blocks/shared/programma-view.js).
 */

.fl-programma {
	font-family: var( --wp--preset--font-family--body, serif );
}

.fl-programma__title {
	font-family: var( --fl-programma-title-family );
	font-size: var( --fl-programma-title-size );
	line-height: var( --fl-programma-title-lineheight );
	color: var( --fl-programma-title-color, var( --wp--preset--color--foreground, #000 ) );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 var( --wp--preset--spacing--40, 24px );
}

.fl-programma__no-events {
	font-family: var( --fl-programma-noevents-family );
	font-size: var( --fl-programma-noevents-size );
	line-height: var( --fl-programma-noevents-lineheight );
	color: var( --fl-programma-noevents-color, var( --wp--preset--color--foreground, #000 ) );
	margin: 0;
}

/* Tab settimane. */
.fl-programma__weeks-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20, 8px );
	border-bottom: var( --border-w, 1px ) solid var( --wp--preset--color--border, #212a54 );
	margin-bottom: var( --wp--preset--spacing--40, 24px );
}

/*
 * Su mobile i tab vanno a capo invece di scorrere in orizzontale con la
 * scrollbar nascosta: con le etichette a date ("10–15 NOV") stanno in una o
 * due righe, e nessuna settimana resta fuori schermo senza che si veda.
 */
.fl-programma__week-tab {
	white-space: nowrap;
}

.fl-programma__week-tab {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var( --wp--preset--spacing--20, 8px ) var( --wp--preset--spacing--30, 12px );
	font-family: var( --fl-programma-weektab-family );
	font-size: var( --fl-programma-weektab-size );
	line-height: var( --fl-programma-weektab-lineheight );
	color: var( --fl-programma-weektab-color, var( --wp--preset--color--foreground-muted, #c2cad7 ) );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 2px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}

.fl-programma__week-tab.is-active {
	color: var( --fl-programma-accent, var( --wp--preset--color--primary, #203668 ) );
	border-bottom-color: var( --fl-programma-accent, var( --wp--preset--color--primary, #203668 ) );
	font-weight: 900;
}

/* Viewport a scorrimento orizzontale (swipe su mobile e desktop). Ogni
   .fl-programma__week occupa il 100% ed è ancorata con scroll-snap: lo
   swipe nativo del browser sostituisce una gestione touch manuale. */
.fl-programma__weeks-viewport {
	display: flex;
	/*
	 * flex-start: ogni settimana ha la propria altezza invece di essere
	 * allungata a quella della settimana con più eventi. Prima lo spazio in
	 * più finiva distribuito tra le righe della griglia della settimana e,
	 * su mobile, i pulsanti dei giorni si allungavano a 176/301px secondo la
	 * settimana. L'altezza del viewport segue quella della settimana visibile
	 * (impostata da programma-view.js), così sotto le settimane corte non
	 * resta un vuoto.
	 */
	align-items: flex-start;
	transition: height 180ms ease-out;
	overflow-x: auto;
	/*
	 * overflow-x: auto da solo porterebbe anche overflow-y ad auto: con
	 * l'altezza impostata in JS (arrotondata all'intero, e in transizione
	 * per 180ms) bastava un px di differenza per avere uno scroll verticale
	 * interno. Il viewport scorre solo in orizzontale.
	 */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fl-programma__weeks-viewport::-webkit-scrollbar {
	display: none;
}

.fl-programma__week {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	align-content: start;
	grid-template-columns: minmax( 120px, 220px ) 1fr;
	gap: var( --wp--preset--spacing--50, 32px );
}

@media ( max-width: 781px ) {
	/* Giorni sopra, eventi sotto: 64px tra le due righe erano troppi. */
	.fl-programma__week {
		grid-template-columns: 1fr;
		gap: var( --wp--preset--spacing--40, 2rem );
	}
}

/* Colonna giorni. */
.fl-programma__days {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--10, 4px );
	border-right: var( --border-w, 1px ) solid var( --wp--preset--color--border, #212a54 );
	padding-right: var( --wp--preset--spacing--30, 12px );
}

@media ( max-width: 781px ) {
	/*
	 * Griglia che va a capo invece di una riga a scorrimento con scrollbar
	 * nascosta: tutti i giorni della settimana sono sempre visibili, e i
	 * pulsanti hanno tutti la stessa larghezza.
	 */
	.fl-programma__days {
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 7.5rem, 1fr ) );
		border-right: none;
		border-bottom: var( --border-w, 1px ) solid var( --wp--preset--color--border, #212a54 );
		padding-right: 0;
		padding-bottom: var( --wp--preset--spacing--30, 12px );
	}

	.fl-programma__day {
		white-space: nowrap;
	}
}

.fl-programma__day {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	padding: var( --wp--preset--spacing--20, 8px ) var( --wp--preset--spacing--30, 12px );
	border-radius: var( --radius-sm, 4px );
	font-family: var( --fl-programma-day-family );
	font-size: var( --fl-programma-day-size );
	line-height: var( --fl-programma-day-lineheight );
	color: var( --fl-programma-day-color, var( --wp--preset--color--foreground, #000 ) );
}

.fl-programma__day-weekday {
	display: block;
	font-weight: 900;
}

.fl-programma__day-date {
	display: block;
	opacity: 0.7;
}

.fl-programma__day.is-active {
	background: var( --fl-programma-accent, var( --wp--preset--color--primary, #203668 ) );
	color: #fff;
}

.fl-programma__day.is-active .fl-programma__day-weekday,
.fl-programma__day.is-active .fl-programma__day-date {
	color: #fff;
}

/* Colonna eventi. */
.fl-programma__events-wrap {
	position: relative;
}

.fl-programma__events {
	display: none;
	flex-direction: column;
	gap: var( --wp--preset--spacing--40, 24px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.fl-programma__events.is-active {
	display: flex;
}

.fl-programma__event {
	border-left: 3px solid var( --fl-programma-accent, var( --wp--preset--color--primary, #203668 ) );
	padding-left: var( --wp--preset--spacing--30, 12px );
}

.fl-programma__event[role="button"] {
	cursor: pointer;
}

.fl-programma__event[role="button"]:hover,
.fl-programma__event[role="button"]:focus-visible {
	background: color-mix( in srgb, var( --fl-programma-accent, #203668 ) 6%, transparent );
	outline: none;
}

.fl-programma__event-time {
	display: block;
	font-family: var( --fl-programma-datetime-family );
	font-size: var( --fl-programma-datetime-size );
	line-height: var( --fl-programma-datetime-lineheight );
	color: var( --fl-programma-datetime-color, var( --fl-programma-accent, var( --wp--preset--color--primary, #203668 ) ) );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var( --wp--preset--spacing--10, 4px );
}

.fl-programma__event-guest {
	font-family: var( --fl-programma-guest-family );
	font-size: var( --fl-programma-guest-size );
	line-height: var( --fl-programma-guest-lineheight );
	color: var( --fl-programma-guest-color, var( --wp--preset--color--foreground, #000 ) );
	margin: 0 0 var( --wp--preset--spacing--10, 4px );
}

.fl-programma__event-title {
	font-family: var( --fl-programma-eventtitle-family );
	font-size: var( --fl-programma-eventtitle-size );
	line-height: var( --fl-programma-eventtitle-lineheight );
	color: var( --fl-programma-eventtitle-color, var( --wp--preset--color--foreground, #000 ) );
	margin: 0 0 var( --wp--preset--spacing--10, 4px );
}

.fl-programma__event-location {
	font-family: var( --fl-programma-location-family );
	font-size: var( --fl-programma-location-size );
	line-height: var( --fl-programma-location-lineheight );
	color: var( --fl-programma-location-color, var( --wp--preset--color--foreground-muted, #c2cad7 ) );
	margin: 0;
}

.fl-programma__event-description {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small, 14px );
	line-height: var( --lh-body, 1.55 );
	color: var( --fl-programma-location-color, var( --wp--preset--color--foreground-muted, #c2cad7 ) );
	margin: var( --wp--preset--spacing--10, 4px ) 0 0;
}

/* Card di dettaglio evento a tutto schermo. */
.fl-programma-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --wp--preset--spacing--40, 24px );
}

/* Su mobile la card occupa tutto lo schermo: niente margini attorno. */
@media ( max-width: 781px ) {
	.fl-programma-modal {
		padding: 0;
	}
}

.fl-programma-modal[hidden] {
	display: none;
}

.fl-programma-modal__scrim {
	position: absolute;
	inset: 0;
	background-color: var( --fl-programma-modal-scrim-color, #203668 );
	opacity: calc( var( --fl-programma-modal-scrim-opacity, 55% ) / 100% );
}

/*
 * Cornice della card: dimensioni/sfondo/bordo, ma non scorre mai — contiene
 * solo la X (sempre in alto a destra) e ".fl-programma-modal__scroll", che
 * è il vero (e unico) elemento scrollabile qui dentro.
 */
.fl-programma-modal__card {
	position: relative;
	background: var( --fl-programma-modal-card-bg, var( --wp--preset--color--base, #fff ) );
	color: var( --wp--preset--color--foreground, #000 );
	border-radius: var( --fl-programma-modal-card-radius, var( --radius-lg, 14px ) );
	box-shadow: var( --shadow-raised, 0 4px 12px rgba( 33, 42, 84, 0.14 ) );
	max-width: 640px;
	width: 100%;
	/*
	 * Altezza fissa, uguale per ogni evento: con o senza foto, testo lungo o
	 * corto, la card non cambia dimensione mentre si scorre con le frecce
	 * (il contenuto in eccesso scorre dentro .fl-programma-modal__scroll).
	 */
	height: min( 90vh, 720px );
	height: min( 90svh, 720px );
	overflow: hidden;
}

@media ( max-width: 781px ) {
	.fl-programma-modal__card {
		max-width: none;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}
}

/*
 * Barra fissa in fondo alla card con le frecce precedente/successivo:
 * prima le frecce stavano a metà altezza sopra il contenuto e su mobile
 * coprivano il testo. Il contenuto scorre sopra la barra (padding-bottom
 * sullo scroll), non sotto.
 */
.fl-programma-modal__card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var( --fl-programma-modal-bar, 4.25rem );
	background: var( --fl-programma-modal-card-bg, var( --wp--preset--color--base, #fff ) );
	border-top: var( --border-w, 1px ) solid var( --wp--preset--color--foreground-muted, #c2cad7 );
	pointer-events: none;
}

/*
 * Unico elemento che scorre quando i contenuti superano l'altezza della
 * card: immagine e testo dentro sono un unico blocco in flusso normale, non
 * due aree indipendenti — scorrono via insieme, l'immagine non è "sticky".
 */
.fl-programma-modal__scroll {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding-bottom: var( --fl-programma-modal-bar, 4.25rem );
}

.fl-programma-modal__close {
	position: absolute;
	top: var( --wp--preset--spacing--30, 12px );
	right: var( --wp--preset--spacing--30, 12px );
	z-index: 1;
	appearance: none;
	background: rgba( 255, 255, 255, 0.85 );
	border: none;
	border-radius: 50%;
	cursor: pointer;
	width: 44px;
	height: 44px;
	line-height: 1;
	font-size: 24px;
	color: var( --wp--preset--color--foreground, #000 );
}

/* Fascia immagine: occupa tutta la larghezza della card, altezza fissa
   su desktop, 4:3 su mobile (segue la larghezza dello schermo). */
.fl-programma-modal__media {
	flex: none;
	width: 100%;
	height: 340px;
}

@media ( max-width: 781px ) {
	.fl-programma-modal__media {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/*
 * Frecce precedente/successivo: sovrapposte ai lati della card, a metà
 * altezza, stesso stile del pulsante di chiusura. Nascoste (attributo
 * hidden) sul primo/ultimo evento del blocco.
 */
.fl-programma-modal__nav {
	position: absolute;
	bottom: calc( ( var( --fl-programma-modal-bar, 4.25rem ) - 44px ) / 2 );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	appearance: none;
	background: var( --wp--preset--color--base, #fff );
	border: none;
	border-radius: 50%;
	box-shadow: var( --shadow-raised, 0 4px 12px rgba( 33, 42, 84, 0.14 ) );
	color: var( --wp--preset--color--primary, #203668 );
	cursor: pointer;
	transition: color 150ms, background-color 150ms;
}

.fl-programma-modal__nav:hover,
.fl-programma-modal__nav:focus-visible {
	background: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--primary-light, #428bca );
}

.fl-programma-modal__nav[hidden] {
	display: none;
}

.fl-programma-modal__nav--prev {
	left: var( --wp--preset--spacing--gutter, 1rem );
}

.fl-programma-modal__nav--next {
	right: var( --wp--preset--spacing--gutter, 1rem );
}

.fl-programma-modal__nav svg {
	width: 20px;
	height: 20px;
}

.fl-programma-modal__media[hidden] {
	display: none;
}

.fl-programma-modal__avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Solo nell'anteprima editor (window.flProgrammaInspector.buildCardPreview): nessuna foto reale disponibile, placeholder testuale al posto del ritratto. */
.fl-programma-modal__media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var( --wp--preset--color--foreground-muted, #c2cad7 );
	color: var( --wp--preset--color--foreground, #000 );
	font-family: var( --wp--preset--font-family--input-mono, monospace );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var( --wp--preset--font-size--small, 14px );
}

/*
 * Prima: spacing--60 = 6rem (96px) per lato — su un telefono da 390px
 * lasciava 134px al testo. Ora fluido, 20px su mobile → 40px su desktop
 * (1,25 × il rientro laterale `gutter` di theme.json).
 */
.fl-programma-modal__body {
	padding: calc( var( --wp--preset--spacing--gutter, 1rem ) * 1.25 );
}

.fl-programma-modal__guest {
	font-family: var( --fl-programma-modalguest-family, var( --wp--preset--font-family--input-mono, monospace ) );
	font-size: var( --fl-programma-modalguest-size, var( --wp--preset--font-size--large, 24px ) );
	line-height: var( --fl-programma-modalguest-lineheight, 1.1 );
	color: var( --fl-programma-modalguest-color, var( --wp--preset--color--foreground, #000 ) );
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 var( --wp--preset--spacing--10, 4px );
}

.fl-programma-modal__title {
	font-family: var( --fl-programma-modaltitle-family, var( --wp--preset--font-family--inria-serif, serif ) );
	font-size: var( --fl-programma-modaltitle-size, var( --wp--preset--font-size--medium, 19px ) );
	line-height: var( --fl-programma-modaltitle-lineheight, 1.3 );
	color: var( --fl-programma-modaltitle-color, var( --wp--preset--color--foreground, #000 ) );
	margin: 0 0 var( --wp--preset--spacing--10, 4px );
}

.fl-programma-modal__subtitle {
	font-family: var( --fl-programma-modalsubtitle-family, var( --wp--preset--font-family--inria-serif, serif ) );
	font-size: var( --fl-programma-modalsubtitle-size, var( --wp--preset--font-size--medium, 19px ) );
	line-height: var( --fl-programma-modalsubtitle-lineheight, 1.3 );
	font-style: italic;
	color: var( --fl-programma-modalsubtitle-color, var( --wp--preset--color--foreground-muted, #c2cad7 ) );
	margin: 0 0 var( --wp--preset--spacing--30, 12px );
}

.fl-programma-modal__meta {
	list-style: none;
	margin: var( --wp--preset--spacing--30, 12px ) 0;
	padding: var( --wp--preset--spacing--30, 12px ) 0;
	border-top: var( --border-w, 1px ) solid var( --wp--preset--color--border, #212a54 );
	border-bottom: var( --border-w, 1px ) solid var( --wp--preset--color--border, #212a54 );
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--20, 8px );
}

.fl-programma-modal__meta-label {
	font-family: var( --fl-programma-modalmetalabel-family, var( --wp--preset--font-family--input-mono, monospace ) );
	font-size: var( --fl-programma-modalmetalabel-size, var( --wp--preset--font-size--small, 14px ) );
	line-height: var( --fl-programma-modalmetalabel-lineheight, 1.4 );
	color: var( --fl-programma-modalmetalabel-color, var( --wp--preset--color--foreground-muted, #c2cad7 ) );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: var( --wp--preset--spacing--10, 4px );
}

.fl-programma-modal__meta-value {
	font-family: var( --fl-programma-modalmetavalue-family, var( --wp--preset--font-family--inria-serif, serif ) );
	font-size: var( --fl-programma-modalmetavalue-size, var( --wp--preset--font-size--small, 14px ) );
	line-height: var( --fl-programma-modalmetavalue-lineheight, 1.4 );
	color: var( --fl-programma-modalmetavalue-color, var( --wp--preset--color--foreground, #000 ) );
}

.fl-programma-modal__meta-value a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 150ms ease;
}

.fl-programma-modal__meta-value a:hover,
.fl-programma-modal__meta-value a:focus-visible {
	color: var( --wp--preset--color--primary-light, #428bca );
}

.fl-programma-modal__book {
	margin-top: var( --wp--preset--spacing--30, 12px );
}

.fl-programma-modal__book-title {
	font-family: var( --wp--preset--font-family--input-mono, monospace );
	font-weight: 900;
	margin: 0 0 4px;
}

.fl-programma-modal__book-publisher {
	font-family: var( --wp--preset--font-family--inria-serif, serif );
	font-style: italic;
	color: var( --wp--preset--color--foreground-muted, #c2cad7 );
	margin: 0 0 var( --wp--preset--spacing--20, 8px );
}

.fl-programma-modal__book-synopsis,
.fl-programma-modal__description {
	font-family: var( --fl-programma-modaldescription-family, var( --wp--preset--font-family--inria-serif, serif ) );
	font-size: var( --fl-programma-modaldescription-size, var( --wp--preset--font-size--medium, 19px ) );
	line-height: var( --fl-programma-modaldescription-lineheight, 1.55 );
	color: var( --fl-programma-modaldescription-color, var( --wp--preset--color--foreground, #000 ) );
	margin: 0 0 var( --wp--preset--spacing--20, 8px );
}

html.fl-programma-modal-open,
body.fl-programma-modal-open {
	overflow: hidden;
}

@media ( prefers-reduced-motion: no-preference ) {
	.fl-programma-modal__card {
		animation: fl-programma-modal-in 180ms ease-out;
	}
}

@keyframes fl-programma-modal-in {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}