/**
 * ILPA — Momenti
 *
 * Default presi dai nodi Figma "ILPA/Desktop/Momenti archivio" (261:5927) e
 * "ILPA/Mobile/Momenti archivio" (327:3682) del file ILPA-Website.
 *
 * HERO (261:6754), container 1328:
 *   immagine 1103x600 radius 20 · card 542x250 a filo del bordo destro (1328)
 *   e della base della foto · ritaglio = card + 40px in alto e a sinistra,
 *   toglie l'INTERO angolo in basso a destra · tutti e cinque gli angoli del
 *   risultato a 20px · frecce 72px appoggiate al bordo superiore del ritaglio,
 *   a filo destro · dots 14px con gap 16, centrati, 40px sotto la foto.
 *   Mobile (327:3937): foto a piena larghezza 353x255, ritaglio con padding
 *   16/12, frecce 48px DENTRO il ritaglio, dots a fine card.
 *
 * ARCHIVIO (261:6834 + 261:6878):
 *   barra filtri: conteggio + pill categoria (gap 20) + select ordinamento
 *   359x48 · griglia 3 colonne, gap 20 / 60 · card: foto 429x240 radius 16
 *   con Shadow/s, gap 24, contenuto gap 8 · bottone 206x48 centrato, 60 sopra.
 *
 * Ogni misura è un custom property sovrascritto dai controlli Elementor.
 */

.ilpa-hc,
.ilpa-mo {
	--ilpa-blue: #276a95; /* Blue/Blueprint Blue */
	--ilpa-ink: #1d2833; /* Blue/700 */
	--ilpa-blue-300: #52677c; /* Blue/300 */
	--ilpa-grey-500: #6d6f71; /* Greys/500 Primary */
	--ilpa-page-bg: #f2f7fc;
}

.ilpa-hc *,
.ilpa-hc *::before,
.ilpa-hc *::after,
.ilpa-mo *,
.ilpa-mo *::before,
.ilpa-mo *::after {
	box-sizing: border-box;
}

/* =========================================================================
 * HERO CAROUSEL
 * ====================================================================== */

.ilpa-hc {
	--ilpa-hc-ratio: 1103 / 600;
	--ilpa-hc-media-w: 83.0572%; /* 1103 / 1328 */
	--ilpa-hc-radius: 20px;

	--ilpa-hc-panel-w: 43.8253%; /* 582 / 1328: 542 di card + 40 di maschera */
	--ilpa-hc-mask-pt: 40px;
	--ilpa-hc-mask-px: 40px;
	--ilpa-hc-panel-pull: 0px; /* quanto il pannello risale sulla foto (mobile) */
	--ilpa-hc-panel-pos: absolute;

	--ilpa-hc-arrow-size: 72px;
	--ilpa-hc-arrow-gap: 24px;
	--ilpa-hc-arrow-bg: #ffffff;
	--ilpa-hc-arrow-color: var(--ilpa-blue);
	--ilpa-hc-arrow-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18); /* Shadow/xl */
	--ilpa-hc-arrow-pos: absolute;
	--ilpa-hc-arrow-mb: 0px;

	--ilpa-hc-card-gap: 8px;
	--ilpa-hc-card-foot-gap: 18px;
	--ilpa-hc-eyebrow-size: 16px;
	--ilpa-hc-text-size: 16px;

	/*
	 * Righe massime di titolo e testo. Sono loro a tenere la card dentro al
	 * ritaglio: la maschera non può essere più alta di `h - 2r`, quindi un
	 * titolo che va a capo tre o quattro volte spingerebbe il pannello oltre
	 * quel tetto e il testo uscirebbe sulla foto. Con 2 + 3 la card misura
	 * esattamente i 250px del mockup: 24 di occhiello + 8 + 96 di titolo su due
	 * righe + 8 + 72 di testo su tre + 18 + 24 di link.
	 */
	--ilpa-hc-title-lines: 2;
	--ilpa-hc-text-lines: 3;

	/*
	 * Titolo fluido fra i due estremi, guidato dalla larghezza REALE del widget
	 * (container query) e non della finestra: dentro una colonna Elementor
	 * stretta scala lo stesso. Il mockup dà 40px sul container da 1328 e 28px
	 * sul mobile; in mezzo il titolo restava a 40 e in una card larga 282px
	 * (widget 768) le due righe consentite non bastavano più a contenerlo.
	 *
	 * Gli estremi sono numeri senza unità perché in calc() il fattore di
	 * interpolazione dev'essere tale: `numero * lunghezza / numero`.
	 * `--ilpa-hc-fluid-from` lo scrive il PHP sulla soglia di impilamento
	 * scelta nel widget, così la rampa copre esattamente le larghezze in cui il
	 * layout affiancato è in uso.
	 */
	--ilpa-hc-title-min: 28;
	--ilpa-hc-title-max: 40;
	--ilpa-hc-fluid-from: 768;
	--ilpa-hc-fluid-to: 1328;
	--ilpa-hc-title-size: clamp(
		calc(var(--ilpa-hc-title-min) * 1px),
		calc(
			var(--ilpa-hc-title-min) * 1px +
			(var(--ilpa-hc-title-max) - var(--ilpa-hc-title-min)) *
			(100cqw - var(--ilpa-hc-fluid-from) * 1px) /
			(var(--ilpa-hc-fluid-to) - var(--ilpa-hc-fluid-from))
		),
		calc(var(--ilpa-hc-title-max) * 1px)
	);

	--ilpa-hc-dot-size: 14px;
	--ilpa-hc-dot-gap: 16px;
	--ilpa-hc-dot-color: rgba(39, 106, 149, 0.3); /* Opacity/Blueprint Blue 30% */
	--ilpa-hc-dot-active: var(--ilpa-blue);
	--ilpa-hc-dots-gap: 40px;
	--ilpa-hc-dots-justify: center;
	--ilpa-hc-dots-ml: 0px;

	--ilpa-hc-morph: 0.5s;

	position: relative;
	color: var(--ilpa-ink);

	/*
	 * Contenitore di riferimento per le `cqw` del titolo. Un elemento non può
	 * interrogare sé stesso, quindi la misura la leggono i discendenti: la
	 * custom property qui sopra è solo una sequenza di token e le sue unità si
	 * risolvono dove viene usata, cioè su `.ilpa-hc__title`.
	 */
	container-type: inline-size;
}

.ilpa-hc__viewport {
	position: relative;
}

/*
 * Il riquadro della foto è UNO e non cambia mai: le immagini delle slide si
 * dissolvono al suo interno. È questo che toglie il salto di proporzioni fra
 * una slide e l'altra.
 */
.ilpa-hc__media {
	position: relative;
	margin: 0;
	width: var(--ilpa-hc-media-w);
	aspect-ratio: var(--ilpa-hc-ratio);
	border-radius: var(--ilpa-hc-radius);
	overflow: hidden;
	background: rgba(39, 106, 149, 0.08);
	/* i path generati hanno sempre gli stessi comandi nello stesso ordine,
	   quindi il browser sa interpolarli e il ritaglio fa il morphing */
	transition: clip-path var(--ilpa-hc-morph) ease;
}

.ilpa-hc__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--ilpa-hc-morph) ease;
}

.ilpa-hc__slide.is-active {
	opacity: 1;
}

.ilpa-hc__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Il padding del pannello è lo spessore della maschera, quindi il suo box
 * coincide col rettangolo sottratto alla foto: il JS lo misura e da lì
 * costruisce il clip-path.
 */
.ilpa-hc__panel {
	position: var(--ilpa-hc-panel-pos);
	right: 0;
	bottom: 0;
	width: var(--ilpa-hc-panel-w);
	margin-top: calc(-1 * var(--ilpa-hc-panel-pull));
	margin-left: auto;
	padding: var(--ilpa-hc-mask-pt) 0 0 var(--ilpa-hc-mask-px);
}

/* Ripiego senza clip-path: path(): placca del colore di fondo pagina. */
.ilpa-hc:not(.is-clipped) .ilpa-hc__panel {
	background: var(--ilpa-hc-plate-bg, var(--ilpa-page-bg));
	border-top-left-radius: var(--ilpa-hc-radius);
}

/* --- frecce ------------------------------------------------------------ */

/*
 * Su desktop bottom:100% le appoggia esattamente al bordo superiore del
 * pannello, cioè al top del ritaglio: quando la maschera fa il morphing le
 * frecce la seguono senza che il JS le tocchi.
 */
.ilpa-hc__nav {
	position: var(--ilpa-hc-arrow-pos);
	right: 0;
	bottom: 100%;
	display: flex;
	gap: var(--ilpa-hc-arrow-gap);
	margin-bottom: var(--ilpa-hc-arrow-mb);
}

.ilpa-hc__arrow {
	width: var(--ilpa-hc-arrow-size);
	height: var(--ilpa-hc-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilpa-hc-arrow-bg);
	color: var(--ilpa-hc-arrow-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--ilpa-hc-arrow-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ilpa-hc__arrow svg {
	display: block;
	width: calc(var(--ilpa-hc-arrow-size) / 3);
	height: calc(var(--ilpa-hc-arrow-size) / 3);
}

.ilpa-hc__arrow:hover,
.ilpa-hc__arrow:focus,
.ilpa-hc__arrow:active,
.ilpa-hc__arrow:visited {
	background: var(--ilpa-hc-arrow-bg);
	color: var(--ilpa-hc-arrow-color);
	border: 0;
	text-decoration: none;
}

.ilpa-hc__arrow:hover {
	transform: translateY(-2px);
}

.ilpa-hc__arrow:focus {
	outline: none;
}

.ilpa-hc__arrow:focus-visible {
	outline: 2px solid var(--ilpa-blue);
	outline-offset: 3px;
}

/* --- card -------------------------------------------------------------- */

/*
 * L'altezza la scrive il JS sulla card attiva: è quella a guidare il ritaglio,
 * ed è in transizione insieme al clip-path.
 */
.ilpa-hc__cards {
	position: relative;
	transition: height var(--ilpa-hc-morph) ease;
}

.ilpa-hc__card {
	position: absolute;
	inset: 0 0 auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--ilpa-hc-card-foot-gap);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ilpa-hc-morph) ease, visibility var(--ilpa-hc-morph) ease;
}

.ilpa-hc__card.is-active {
	opacity: 1;
	visibility: visible;
}

.ilpa-hc__body {
	display: flex;
	flex-direction: column;
	gap: var(--ilpa-hc-card-gap);
}

.ilpa-hc__eyebrow {
	margin: 0;
	font-size: var(--ilpa-hc-eyebrow-size);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ilpa-blue);
}

/*
 * Titolo e testo troncati a un numero fisso di righe. È il tetto della maschera
 * a imporlo: il ritaglio non può superare `h - 2r`, e senza limite un articolo
 * dal titolo lungo faceva crescere il pannello oltre quel bordo.
 *
 * La classe del widget è ripetuta di proposito: il titolo è un heading, e il
 * kit di Elementor lo veste con `.elementor-kit-N h2` (0,1,1). Da solo
 * `.ilpa-hc__title` (0,1,0) perde, e la dimensione qui sotto non arriverebbe
 * mai a destinazione. Due classi bastano, senza !important.
 */
.ilpa-hc .ilpa-hc__title,
.ilpa-hc .ilpa-hc__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ilpa-hc .ilpa-hc__title {
	margin: 0;
	font-size: var(--ilpa-hc-title-size);
	font-weight: 400; /* Heading/H3: Open Sans Regular, non bold */
	line-height: 1.2;
	color: var(--ilpa-ink);
	-webkit-line-clamp: var(--ilpa-hc-title-lines);
	line-clamp: var(--ilpa-hc-title-lines);
}

.ilpa-hc__title a {
	color: inherit;
	text-decoration: none;
}

.ilpa-hc__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ilpa-hc .ilpa-hc__text {
	margin: 0;
	font-size: var(--ilpa-hc-text-size);
	line-height: 1.5;
	color: var(--ilpa-ink);
	-webkit-line-clamp: var(--ilpa-hc-text-lines);
	line-clamp: var(--ilpa-hc-text-lines);
}

.ilpa-hc__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ilpa-blue);
	text-decoration: none;
}

.ilpa-hc__more:hover,
.ilpa-hc__more:focus,
.ilpa-hc__more:active,
.ilpa-hc__more:visited {
	color: var(--ilpa-blue);
	text-decoration: none;
}

.ilpa-hc__more svg {
	width: 24px;
	height: 24px;
	transition: transform 0.25s ease;
}

.ilpa-hc__more:hover svg {
	transform: translateX(3px);
}

/* --- dots -------------------------------------------------------------- */

.ilpa-hc__dots {
	display: flex;
	justify-content: var(--ilpa-hc-dots-justify);
	gap: var(--ilpa-hc-dot-gap);
	margin-top: var(--ilpa-hc-dots-gap);
	margin-left: var(--ilpa-hc-dots-ml);
}

.ilpa-hc__dot {
	width: var(--ilpa-hc-dot-size);
	height: var(--ilpa-hc-dot-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ilpa-hc-dot-color);
	cursor: pointer;
	transition: background-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ilpa-hc__dot.is-active {
	background: var(--ilpa-hc-dot-active);
}

.ilpa-hc__dot:focus {
	outline: none;
}

.ilpa-hc__dot:focus-visible {
	outline: 2px solid var(--ilpa-blue);
	outline-offset: 3px;
}

/* --- hero impilato ------------------------------------------------------
 * Sotto la soglia: foto a piena larghezza, frecce DENTRO il ritaglio in cima
 * al pannello, pannello tirato su sulla foto e dots a fine card allineati al
 * bordo sinistro del testo.
 * -------------------------------------------------------------------- */

.ilpa-hc--is-stacked {
	--ilpa-hc-ratio: 353 / 255;
	--ilpa-hc-media-w: 100%;
	--ilpa-hc-panel-w: 86.119%; /* 304 / 353 */
	--ilpa-hc-mask-pt: 16px;
	--ilpa-hc-mask-px: 12px;
	--ilpa-hc-panel-pos: static;
	--ilpa-hc-panel-pull: 100px;

	--ilpa-hc-arrow-pos: static;
	--ilpa-hc-arrow-size: 48px;
	--ilpa-hc-arrow-mb: 12px;

	/* impilato: il titolo si ferma all'estremo basso della rampa fluida */
	--ilpa-hc-title-size: calc(var(--ilpa-hc-title-min) * 1px);
	--ilpa-hc-dots-justify: flex-start;
	--ilpa-hc-dots-gap: 38px;
	/* allinea i dots al bordo sinistro del testo, non del widget */
	--ilpa-hc-dots-ml: calc(100% - var(--ilpa-hc-panel-w) + var(--ilpa-hc-mask-px));
}

/* nel layout impilato la card torna nel flusso: niente altezza scritta dal JS */
.ilpa-hc--is-stacked .ilpa-hc__cards {
	height: auto !important;
}

.ilpa-hc--is-stacked .ilpa-hc__card {
	position: absolute;
}

.ilpa-hc--is-stacked .ilpa-hc__card.is-active {
	position: relative;
}

/* =========================================================================
 * ARCHIVIO
 * ====================================================================== */

.ilpa-mo {
	--ilpa-mo-cols: 3;
	--ilpa-mo-col-gap: 20px;
	--ilpa-mo-row-gap: 60px;

	--ilpa-mo-card-ratio: 429 / 240;
	--ilpa-mo-card-radius: 16px;
	--ilpa-mo-card-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.06), 0 4px 8px -2px rgba(0, 0, 0, 0.1); /* Shadow/s */
	--ilpa-mo-card-gap: 24px;
	--ilpa-mo-card-body-gap: 8px;
	--ilpa-mo-cat-size: 14px;
	--ilpa-mo-card-title-size: 24px;
	--ilpa-mo-card-text-size: 16px;

	/*
	 * Righe massime delle card. Nel mockup sono tutte alte uguali perché
	 * titolo e testo stanno su una e due righe; senza un limite, coi
	 * contenuti veri ogni card cresce per conto suo e la griglia perde il
	 * ritmo. Due righe di titolo: una sola taglierebbe quasi ogni titolo.
	 */
	--ilpa-mo-card-title-lines: 2;
	--ilpa-mo-card-text-lines: 2;

	--ilpa-mo-bar-gap: 20px;
	--ilpa-mo-bar-mb: 60px;
	--ilpa-mo-pill-radius: 20px;
	--ilpa-mo-pill-pad: 4px 16px;
	--ilpa-mo-select-w: 359px;
	--ilpa-mo-select-h: 48px;

	--ilpa-mo-btn-mt: 60px;

	--ilpa-mo-bar-dir: row;
	--ilpa-mo-bar-align: center;
	--ilpa-mo-filters-display: flex;
	--ilpa-mo-trigger-display: none;

	position: relative;
	color: var(--ilpa-ink);
}

/* --- barra filtri ------------------------------------------------------- */

/*
 * Ordine nel DOM: trigger, conteggio, filtri. Su desktop il trigger è nascosto
 * e i filtri prendono lo spazio residuo con justify-between, così le pill
 * restano a sinistra accanto al conteggio e l'ordinamento va a filo destro —
 * senza bisogno di riordinare nulla. Nel layout stretto la barra diventa una
 * colonna e l'ordine del DOM è già quello giusto.
 */
.ilpa-mo__bar {
	display: flex;
	flex-direction: var(--ilpa-mo-bar-dir);
	align-items: var(--ilpa-mo-bar-align);
	gap: var(--ilpa-mo-bar-gap);
	margin-bottom: var(--ilpa-mo-bar-mb);
}

.ilpa-mo__filters {
	display: var(--ilpa-mo-filters-display);
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ilpa-mo-bar-gap);
	min-width: 0;
}

.ilpa-mo__count {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ilpa-blue-300);
	white-space: nowrap;
}

.ilpa-mo__pill {
	padding: var(--ilpa-mo-pill-pad);
	border: 1px solid var(--ilpa-blue);
	border-radius: var(--ilpa-mo-pill-radius);
	background: transparent;
	color: var(--ilpa-blue);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Reset esplicito su tutti gli stati: senza, il tema ridipinge il bottone. */
.ilpa-mo__pill:hover,
.ilpa-mo__pill:focus,
.ilpa-mo__pill:active,
.ilpa-mo__pill:visited {
	border-color: var(--ilpa-blue);
	text-decoration: none;
	box-shadow: none;
}

.ilpa-mo__pill:hover {
	background: rgba(39, 106, 149, 0.1);
	color: var(--ilpa-blue);
}

.ilpa-mo__pill.is-active {
	background: var(--ilpa-blue);
	color: #fff;
	font-weight: 400; /* nel mockup la pill attiva è Regular, le altre SemiBold */
}

.ilpa-mo__pill:focus {
	outline: none;
}

.ilpa-mo__pill:focus-visible {
	outline: 2px solid var(--ilpa-blue);
	outline-offset: 2px;
}

.ilpa-mo__select-wrap {
	position: relative;
	flex: 0 0 auto;
	width: var(--ilpa-mo-select-w);
	max-width: 100%;
}

.ilpa-mo__select {
	width: 100%;
	height: var(--ilpa-mo-select-h);
	padding: 8px 44px 8px 12px;
	border: 1px solid var(--ilpa-ink);
	border-radius: 4px;
	background: transparent;
	color: var(--ilpa-grey-500);
	font-size: 16px;
	line-height: 1.5;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ilpa-mo__select:focus-visible {
	outline: 2px solid var(--ilpa-blue);
	outline-offset: 2px;
}

.ilpa-mo__select-icon {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	color: var(--ilpa-ink);
	pointer-events: none;
}

/* trigger dei filtri nel layout stretto */
.ilpa-mo__trigger {
	display: var(--ilpa-mo-trigger-display);
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	height: var(--ilpa-mo-select-h);
	padding: 8px 12px;
	border: 1px solid var(--ilpa-ink);
	border-radius: 4px;
	background: transparent;
	color: var(--ilpa-grey-500);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ilpa-mo__trigger svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--ilpa-ink);
}

/* --- griglia ------------------------------------------------------------ */

.ilpa-mo__grid {
	display: grid;
	grid-template-columns: repeat(var(--ilpa-mo-cols), minmax(0, 1fr));
	column-gap: var(--ilpa-mo-col-gap);
	row-gap: var(--ilpa-mo-row-gap);
}

.ilpa-mo__card {
	margin: 0;
}

.ilpa-mo__card-link {
	display: flex;
	flex-direction: column;
	gap: var(--ilpa-mo-card-gap);
	color: inherit;
	text-decoration: none;
}

.ilpa-mo__card-link:hover,
.ilpa-mo__card-link:focus,
.ilpa-mo__card-link:active,
.ilpa-mo__card-link:visited {
	color: inherit;
	text-decoration: none;
}

.ilpa-mo__card-media {
	display: block;
	aspect-ratio: var(--ilpa-mo-card-ratio);
	border-radius: var(--ilpa-mo-card-radius);
	overflow: hidden;
	box-shadow: var(--ilpa-mo-card-shadow);
	background: rgba(39, 106, 149, 0.08);
}

.ilpa-mo__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ilpa-mo__card-link:hover .ilpa-mo__card-img {
	transform: scale(1.03);
}

.ilpa-mo__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--ilpa-mo-card-body-gap);
}

.ilpa-mo__card-cat {
	font-size: var(--ilpa-mo-cat-size);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ilpa-blue);
}

.ilpa-mo__card-title,
.ilpa-mo__card-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ilpa-mo__card-title {
	font-size: var(--ilpa-mo-card-title-size);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ilpa-ink);
	-webkit-line-clamp: var(--ilpa-mo-card-title-lines);
	line-clamp: var(--ilpa-mo-card-title-lines);
}

.ilpa-mo__card-link:hover .ilpa-mo__card-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ilpa-mo__card-text {
	font-size: var(--ilpa-mo-card-text-size);
	line-height: 1.5;
	color: var(--ilpa-ink);
	-webkit-line-clamp: var(--ilpa-mo-card-text-lines);
	line-clamp: var(--ilpa-mo-card-text-lines);
}

/* --- carica altri ------------------------------------------------------- */

.ilpa-mo__more {
	display: flex;
	justify-content: center;
	margin-top: var(--ilpa-mo-btn-mt);
}

.ilpa-mo__more-btn {
	min-width: 206px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid var(--ilpa-blue);
	border-radius: 24px;
	background: transparent;
	color: var(--ilpa-blue);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ilpa-mo__more-btn:hover,
.ilpa-mo__more-btn:focus,
.ilpa-mo__more-btn:active,
.ilpa-mo__more-btn:visited {
	border-color: var(--ilpa-blue);
	text-decoration: none;
}

.ilpa-mo__more-btn:hover {
	background: var(--ilpa-blue);
	color: #fff;
}

.ilpa-mo__more-btn[hidden] {
	display: none;
}

.ilpa-mo__more-btn:focus {
	outline: none;
}

.ilpa-mo__more-btn:focus-visible {
	outline: 2px solid var(--ilpa-blue);
	outline-offset: 3px;
}

.ilpa-mo.is-loading .ilpa-mo__grid {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.ilpa-mo__empty {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ilpa-blue-300);
}

/* --- archivio impilato --------------------------------------------------- */

.ilpa-mo--is-stacked {
	--ilpa-mo-cols: 1;
	--ilpa-mo-row-gap: 24px;
	--ilpa-mo-card-ratio: 353 / 180;
	--ilpa-mo-card-gap: 12px;
	--ilpa-mo-card-body-gap: 4px;
	--ilpa-mo-card-title-size: 20px;
	--ilpa-mo-card-text-size: 14px;
	--ilpa-mo-bar-dir: column;
	--ilpa-mo-bar-align: stretch;
	--ilpa-mo-bar-gap: 24px;
	--ilpa-mo-bar-mb: 24px;
	--ilpa-mo-btn-mt: 24px;
	--ilpa-mo-select-w: 100%;
	--ilpa-mo-filters-display: none;
	--ilpa-mo-trigger-display: flex;
}

.ilpa-mo--is-stacked .ilpa-mo__more-btn {
	width: 100%;
}

/*
 * Pannello dei filtri nel layout stretto: nel file Figma esiste solo il
 * trigger chiuso ("Filtra i Momenti (2)"), lo stato aperto non è disegnato.
 * Qui è un pannello che scende sotto al trigger con le stesse pill e lo
 * stesso select del desktop.
 */
.ilpa-mo--is-stacked .ilpa-mo__filters.is-open {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	padding: 16px;
	border: 1px solid rgba(39, 106, 149, 0.3);
	border-radius: 12px;
}

.ilpa-mo--is-stacked .ilpa-mo__filters.is-open .ilpa-mo__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ilpa-mo__pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ilpa-mo-bar-gap);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ilpa-hc__media,
	.ilpa-hc__slide,
	.ilpa-hc__card,
	.ilpa-hc__cards,
	.ilpa-hc__arrow,
	.ilpa-hc__dot,
	.ilpa-mo__card-img,
	.ilpa-mo__pill,
	.ilpa-mo__more-btn {
		transition: none;
	}
}