/**
 * Stili shortcode "Prossimi corsi" (M20).
 *
 * Custom properties scopate in `.attam-upcoming` (override theme-friendly); il
 * file resta separato da `attam-frontend.css` (theme-agnostic, zero colori).
 * Card light in elenco + variante `--popup` dark per il popup marker; accento
 * gradiente, stato HQ giallo, barra filtri, chip, paginazione.
 */

.attam-upcoming {
	--attam-up-accent-from: #1fbf8f;
	--attam-up-accent-to: #6a3df0;
	--attam-up-yellow: rgb( 255, 238, 0 ); /* #ffee00 — giallo Alientech (come ATTDL) */
	--attam-up-yellow-hover: rgb( 255, 243, 82 );
	--attam-up-blue: #2f7de1;
	--attam-up-info: rgb( 43, 125, 225 );
	--attam-up-ink: #1d1f24;
	--attam-up-ink-soft: #5b6068;
	--attam-up-surface: #ffffff;
	--attam-up-surface-dark: #d9dbde;
	--attam-up-popup-bg: #1d1f24;
	--attam-up-popup-ink: #f2f3f5;
	/* Token portati da ATTDL (barra filtri / chip / pannello). */
	--attam-up-bar-bg: rgb( 38, 38, 38 );
	--attam-up-panel-bg: rgb( 25, 25, 25 );
	--attam-up-chip-bg: rgb( 63, 68, 67 );
	--attam-up-grey-050: rgb( 240, 240, 240 );
	--attam-up-grey-200: rgb( 230, 230, 230 );
	--attam-up-grey-300: rgb( 192, 193, 192 );
	--attam-up-grey-500: rgb( 149, 152, 150 );
	--attam-up-magenta: rgb( 255, 0, 79 );
	--attam-up-radius: 10px;
	--attam-up-radius-lg: 16px;
	--attam-up-radius-pill: 999px;
	--attam-up-shadow: 0 6px 18px -6px rgba( 0, 0, 0, 0.35 );
	--attam-up-shadow-card: 0 6px 15px -2px rgba( 0, 0, 0, 0.35 );

	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Mappa Leaflet — stesso stile hero di ATTDL: full-height, bordo inferiore giallo,
 * sfondo scuro, niente radius. `min-height` come floor + `svh` (esclude la barra
 * browser mobile, no jump al collasso). Pin magenta sotto. */
.attam-upcoming__map,
.attam-map {
	width: 100%;
	min-height: 480px;
	height: 80vh;
	height: 80svh;
	margin: 0 0 32px; /* spazio fra mappa e elenco corsi. */
	border: 0;
	border-bottom: 1px solid rgb( 255, 238, 0 ); /* giallo Alientech #ffee00 (come ATTDL) */
	border-radius: 0;
	overflow: hidden;
	/* Isola lo stacking context della mappa: i controlli Leaflet (zoom, attribution)
	 * hanno z-index:1000 interno e, senza contesto proprio, bucherebbero il menu
	 * fixed del sito quando lo si apre sopra la sezione. `overflow:hidden` NON crea
	 * uno stacking context, `isolation:isolate` sì (senza effetti su layout/z desktop:
	 * il pill filtri overlay resta sibling a z-index:1000, sopra la mappa). */
	isolation: isolate;
	background: rgb( 25, 25, 25 );
}

/* Attribution Leaflet: trasparente + testo chiaro (default = pill bianca,
 * illeggibile sulla mappa scura). text-shadow per leggibilità sui tile chiari. */
.attam-map .leaflet-control-attribution {
	background: none !important;
	background-color: transparent !important;
	color: #fff;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.8 );
}

.attam-map .leaflet-control-attribution a {
	color: #fff;
}

/* Nasconde la bandiera (Leaflet 1.9 aggiunge un flag SVG prima di "Leaflet"):
 * scelta aziendale, niente implicazioni politiche. */
.attam-map .leaflet-attribution-flag {
	display: none !important;
}

/* Pin custom magenta (divIcon) — stesso markup/anchor di ATTDL. */
.attam-marker {
	width: 16px;
	height: 21px;
	margin-left: -8px;
	margin-top: -21px;
}

.attam-marker svg {
	display: block;
	width: 16px;
	height: 21px;
	filter: drop-shadow( 0 2px 3px rgba( 0, 0, 0, 0.5 ) );
}

/* Il pin è un toggle button: cursore/focus coerenti. */
.attam-marker {
	cursor: pointer;
}

.attam-marker:focus-visible {
	outline: 2px solid var( --attam-up-blue );
	outline-offset: 2px;
	border-radius: 2px;
}

/* Stato selezionato: fill blu (regola CSS > attributo `fill` inline) + z-index
 * per emergere sugli altri pin. */
.attam-marker--selected svg path {
	fill: var( --attam-up-blue );
}

.attam-marker--selected {
	z-index: 1000 !important;
}

.attam-marker--selected svg {
	transform: scale( 1.12 );
	transform-origin: bottom center;
}

/* Hero: barra filtri in overlay sulla mappa (come ATTDL). Il wrapper relativo
 * contiene mappa + filtri; i filtri sono ancorati in basso, centrati. */
.attam-upcoming__hero {
	position: relative;
}

.attam-upcoming__hero .attam-upcoming__filters {
	position: absolute;
	/* Centratura via `left:0; right:0` + `margin-inline:auto` (NON `left:50%` +
	 * `translateX(-50%)`): con `left:50%` senza `right` la larghezza disponibile
	 * shrink-to-fit del box assoluto è solo ~metà contenitore, quindi il contenuto
	 * (font 1rem + icona pin) sforava a destra o andava a capo. Con `left:0;
	 * right:0` la larghezza disponibile è l'intero contenitore: `width:max-content`
	 * tiene il pill compatto su una riga, `max-width` lo cappa al gutter (-24px).
	 * Se il contenitore è più stretto del contenuto (colonna Elementor stretta),
	 * il cap fa rientrare il `flex-wrap:wrap` di base → wrap graceful, mai overflow. */
	left: 0;
	right: 0;
	bottom: 4svh; /* ~4% dal fondo della mappa (= fondo schermo, mappa = 100svh). */
	z-index: 1000;
	margin-inline: auto; /* centra il box shrink-to-fit tra left:0 e right:0. */
	width: max-content;
	max-width: calc( 100% - 24px );
}

/* Mobile: barra in flusso (no overlay) + filtri a capo. */
@media ( max-width: 768px ) {
	/* Mobile reale (viewport stretto): la barra esce dall'overlay e va in flusso
	 * sotto la mappa; barra/elenco/chip con gutter 16px per lato (annullano il
	 * 70% desktop, la mappa resta full-bleed); mappa più bassa (60svh) per non
	 * spingere filtri e card sotto la fold. */
	.attam-upcoming__hero .attam-upcoming__filters {
		/* `relative` (non `static`): resta in flusso sotto la mappa (nessun offset),
		 * ma DEVE restare un antenato posizionato altrimenti il bordo-gradiente
		 * `::before` (absolute; inset:0) risale a `.attam-upcoming__hero` (relative)
		 * e avvolge mappa + filtri invece del solo pill. */
		position: relative;
		left: auto;
		bottom: auto;
		transform: none;
		/* Reset dello z-index:1000 desktop (serviva solo a stare sopra la mappa
		 * Leaflet in overlay): in flusso su mobile creava uno stacking context che
		 * copriva il menu fixed del sito. `auto` = nessun stacking context. */
		z-index: auto;
		width: calc( 100% - 32px ); /* gutter 16px per lato dai bordi schermo (la mappa resta full-bleed). */
		max-width: 100%;
		margin: 16px auto 0;
	}

	/* Scopate con `.attam-upcoming` (specificità 0,2,0): il blocco @media sta
	 * PRIMA delle regole base nel sorgente, quindi un override a pari specificità
	 * (0,1,0) verrebbe battuto dalla regola base `width:70%` più in basso. */
	.attam-upcoming .attam-upcoming__results,
	.attam-upcoming .attam-upcoming__chips,
	.attam-upcoming .attam-upcoming__empty {
		width: calc( 100% - 32px ); /* gutter 16px per lato (margin:0 auto ereditato dalla base centra). */
	}

	.attam-upcoming .attam-upcoming__map,
	.attam-upcoming .attam-map {
		height: 60vh; /* fallback per browser senza svh (come la base 80vh/80svh); senza, la dichiarazione svh viene scartata e l'altezza torna alla base 80vh. */
		height: 60svh;
	}
}

/* Barra filtri — pill scura centrata con bordo gradiente conico (come ATTDL). */
.attam-upcoming__filters {
	position: relative; /* contesto per il ::before bordo-gradiente. */
	display: flex;
	/* Fallback senza container query: resta su una riga quando il contenuto ci
	 * sta (desktop, contenuto ~570px < max-width), va a capo se il contenitore è
	 * più stretto del contenuto (colonna Elementor stretta o mobile) invece di
	 * sforare. `max-width: min(1140px, 100%)` impedisce l'overflow del contenitore. */
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding: 12px 14px;
	max-width: min( 1140px, 100% );
	background: var( --attam-up-bar-bg );
	border-radius: var( --attam-up-radius-lg );
	box-shadow: var( --attam-up-shadow-card );
}

/* Bordo 1px a gradiente conico (tecnica mask). Usa i global color Elementor del
 * tema se presenti, altrimenti fallback ai colori accento. `pointer-events:none`
 * così non intercetta i click sui controlli. */
.attam-upcoming__filters::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	z-index: 1;
	pointer-events: none;
	background: conic-gradient(
		from 270deg,
		var( --e-global-color-ec47253, #1fbf8f ) 0deg,
		var( --e-global-color-a5dcddd, #2f7de1 ) 140deg,
		var( --e-global-color-799abcb, #6a3df0 ) 280deg,
		var( --e-global-color-ec47253, #1fbf8f ) 360deg
	);
	-webkit-mask:
		linear-gradient( #fff 0 0 ) content-box,
		linear-gradient( #fff 0 0 );
	mask:
		linear-gradient( #fff 0 0 ) content-box,
		linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Gruppo label + select inline. */
.attam-upcoming__filter {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.attam-upcoming__filter-label {
	font-weight: 700;
	font-size: 15px;
	color: var( --attam-up-grey-050 );
	white-space: nowrap;
}

/* Select "Livello": pill bianca italica con chevron. */
.attam-upcoming__filter select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 150px;
	height: 40px;
	padding: 0 34px 0 12px;
	font-size: 14px;
	font-style: italic;
	color: var( --attam-up-ink );
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233f4443'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 6px;
	border: 1px solid var( --attam-up-grey-500 );
	border-radius: var( --attam-up-radius );
	cursor: pointer;
}

.attam-upcoming__filter select:focus-visible {
	outline: 2px solid var( --attam-up-yellow );
	outline-offset: 1px;
}

/* Select "Stato": bottone grigio con icona lista a sinistra. */
.attam-upcoming__filter select[name="attam_country"] {
	font-style: normal;
	font-weight: 700;
	color: var( --attam-up-ink );
	background-color: var( --attam-up-grey-200 );
	border: 0;
	padding-left: 40px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23262626'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 12px center, right 12px center;
	background-size: 18px 18px, 10px 6px;
}

.attam-upcoming__filter select[name="attam_country"]:hover {
	background-color: var( --attam-up-grey-300 );
}

/* Bottone "Vicino a me" — giallo (come submit ATTDL). */
/* Scopato sotto `.attam-upcoming` (specificità 0,2,0) per battere lo stile
 * `button`/typography del kit Elementor (0,1,1): senza scope il `font-size:1rem`
 * veniva sovrascritto dal font-size dei bottoni del kit (testo ingrandito). */
.attam-upcoming .attam-upcoming__geolocate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: var( --attam-up-radius );
	background: var( --attam-up-yellow );
	color: var( --attam-up-ink );
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	flex: 0 0 auto;
	cursor: pointer;
}

.attam-upcoming .attam-upcoming__geolocate .attam-upcoming__geo-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.attam-upcoming .attam-upcoming__geolocate:hover {
	background: var( --attam-up-yellow-hover );
}

.attam-upcoming__geo-message {
	flex-basis: 100%;
	margin: 0;
	font-size: 14px;
	color: var( --attam-up-grey-300 );
}

/* Riga "Filtri:" + chip dei filtri attivi (come ATTDL). */
.attam-upcoming__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 70%;
	min-height: 36px;
	margin: 0 auto;
}

.attam-upcoming__chips::before {
	content: "Filtri:";
	font-weight: 700;
	font-size: 16px;
	color: var( --attam-up-grey-500 );
	margin-right: 4px;
}

/* Chip ATTDL: pill scura, testo chiaro, bordo blu, ✕ in badge tondo. Scopata
 * con `.attam-upcoming` per battere lo stile `button` del tema Elementor. */
.attam-upcoming .attam-upcoming__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 8px 0 14px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var( --attam-up-grey-050 );
	background: var( --attam-up-chip-bg );
	border: 1px solid var( --attam-up-info );
	border-radius: var( --attam-up-radius-pill );
	cursor: pointer;
}

.attam-upcoming__chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --attam-up-grey-200 );
	font-size: 13px;
	line-height: 1;
}

.attam-upcoming .attam-upcoming__chip:hover .attam-upcoming__chip-remove {
	background: var( --attam-up-magenta );
	color: #fff;
}

/* Contenitore elenco sessioni — griglia card (pannello scuro fornito dalla
 * sezione Elementor, come ATTDL). */
.attam-upcoming__results {
	display: grid;
	/* `min(400px, 100%)`: la card non forza mai una traccia più larga del
	 * contenitore → niente overflow orizzontale quando il container è < 400px
	 * (mobile o colonna stretta). Su desktop la traccia resta 400px. */
	grid-template-columns: repeat( auto-fill, minmax( min( 400px, 100% ), 1fr ) );
	gap: 24px;
	width: 70%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Stato "nessun corso": box grigio centrato mostrato al posto dell'elenco quando
 * `data-attam-upcoming-empty` non è `hidden` (SSR + toggle JS su `found`). Stessa
 * larghezza/centratura dell'elenco (70% desktop, calc(100%-32px) mobile). */
.attam-upcoming__empty {
	width: 70%;
	margin: 0 auto;
	padding: 48px 24px;
	text-align: center;
	font-size: 16px;
	color: var( --attam-up-grey-500 );
	background: var( --attam-up-chip-bg );
	border-radius: 12px;
}

/* Paginazione stile Find Dealer (ATTDL): bottoni prima/precedente/successiva/ultima quadrati
 * gialli + box bianco centrale con pagina corrente editabile e totale. Le regole sono scopate
 * sotto `.attam-upcoming` (specificità 0,2,0) per battere lo stile globale `button`/`svg`/`input`
 * del kit Elementor (0,1,1) — senza scope l'icona `stroke:currentColor` erediterebbe il colore
 * link giallo del kit (giallo su giallo = invisibile) e il padding input del kit schiaccerebbe il box. */
.attam-upcoming__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.attam-upcoming__pagination[hidden] {
	display: none;
}

.attam-upcoming .attam-upcoming__page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var( --attam-up-ink );
	background: var( --attam-up-yellow );
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.attam-upcoming .attam-upcoming__page-btn:hover {
	background: var( --attam-up-yellow-hover );
}

/* Ai limiti (prima/ultima pagina) i bottoni restano gialli come da mockup, ma inerti. */
.attam-upcoming .attam-upcoming__page-btn.is-disabled {
	pointer-events: none;
}

.attam-upcoming .attam-upcoming__page-icon {
	display: block;
	width: 16px;
	height: 16px;
	color: var( --attam-up-ink );
	stroke: currentColor;
}

/* Box centrale bianco: pagina corrente editabile + totale statico. */
.attam-upcoming .attam-upcoming__page-form {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 8px;
	background: var( --attam-up-surface );
	border: 1px solid var( --attam-up-surface-dark );
	border-radius: 8px;
}

/* `!important` per battere `.elementor-kit-N input:not(...)` (0,3,1) del tema, che forza padding
 * 16px + bordo + sfondo + min-height: senza, il box viene schiacciato e il numero clippato. */
.attam-upcoming .attam-upcoming__page-input {
	width: 3.5ch;
	min-width: 3.5ch;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: var( --attam-up-ink ) !important;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}

.attam-upcoming .attam-upcoming__page-input::-webkit-outer-spin-button,
.attam-upcoming .attam-upcoming__page-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.attam-upcoming .attam-upcoming__page-input:focus-visible {
	outline: 2px solid var( --attam-up-yellow );
	outline-offset: 2px;
	border-radius: 4px;
}

.attam-upcoming .attam-upcoming__page-total {
	font-weight: 400;
	font-size: 16px;
	color: var( --attam-up-ink-soft );
	white-space: nowrap;
}

/* Card "Prossimi corsi" — allineata al mockup. */
.attam-up-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 14px;
	background: #e4e5e8;
	color: var( --attam-up-ink );
}

/* Bordo a gradiente verde→viola (visibile agli angoli), tecnica mask. */
.attam-up-card::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient( 135deg, var( --attam-up-accent-from ), var( --attam-up-accent-to ) );
	-webkit-mask:
		linear-gradient( #fff 0 0 ) content-box,
		linear-gradient( #fff 0 0 );
	mask:
		linear-gradient( #fff 0 0 ) content-box,
		linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.attam-up-card--hq {
	background: var( --attam-up-yellow );
}

/* Riga superiore: info (data + titolo) | bottone chevron. */
.attam-up-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.attam-up-card__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Data: font N27 servito dal tema Elementor. */
.attam-up-card__date {
	display: flex;
	align-items: center;
	gap: 10px;
}

.attam-up-card__day {
	font-family: "N27", sans-serif;
	font-size: 44px;
	font-weight: 800;
	line-height: 0.9;
}

.attam-up-card__monthyear {
	display: flex;
	flex-direction: column;
	font-family: "N27", sans-serif;
	line-height: 1.1;
}

.attam-up-card__month {
	font-weight: 700;
	font-size: 19px;
}

.attam-up-card__year {
	font-weight: 400;
	font-size: 17px;
	color: var( --attam-up-ink-soft );
}

/* Pill livello inline nel flusso del testo del titolo. */
.attam-up-card__title-row {
	display: block;
	margin: 0;
	margin-block-end: 0;
}

.attam-up-card__level {
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	padding: 4px 12px;
	border-radius: var( --attam-up-radius-pill );
	background: var( --attam-up-blue );
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.attam-up-card__title {
	display: inline;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var( --attam-up-blue );
}

.attam-up-card__title-link {
	text-decoration: none;
}

.attam-up-card__title-link:hover {
	text-decoration: underline;
}

/* Bottone chevron → dettaglio sessione. */
.attam-up-card__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var( --attam-up-blue );
	color: #fff;
	text-decoration: none;
}

.attam-up-card__cta:hover {
	background: rgb( 24, 112, 184 );
}

/* Footer: location + bandiera. */
.attam-up-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid rgba( 0, 0, 0, 0.14 );
}

.attam-up-card__location {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 15px;
}

.attam-up-card__pin {
	flex: 0 0 auto;
	color: var( --attam-up-ink );
}

.attam-up-card__hq-label {
	font-weight: 800;
}

/* Logo "ALIENTECH HQ" (SVG) al posto del testo, inline nella riga location. */
.attam-up-card__hq-logo {
	display: inline-block;
	height: 13px;
	width: auto;
	vertical-align: middle;
}

.attam-up-card__meta-icons {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.attam-up-card__signal {
	color: var( --attam-up-ink );
}

.attam-up-card__flag {
	font-size: 18px;
	line-height: 1;
}

.attam-up-card__flag--text {
	padding: 1px 5px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.08 );
	font-size: 12px;
	font-weight: 700;
}

/* Override del tema Elementor (link giallo, margin dei <p>): forzati con
 * specificità `.attam-upcoming`. Titolo blu, chevron bianco su sfondo blu. */
.attam-upcoming .attam-up-card__title-link {
	color: var( --attam-up-blue );
}

.attam-upcoming a.attam-up-card__cta {
	color: #fff;
}

.attam-upcoming .attam-up-card__title-row,
.attam-upcoming .attam-up-card__location {
	margin: 0;
	margin-block-end: 0;
}

/* Contesto/filtro città della selezione marker (v1.8.0): reso nella riga
 * "Filtri:" standard, con lo stesso stile dei filtri. Il restringimento
 * multi-città è una select-pill coordinata al chip standard (pill scura, bordo
 * blu). Scopata con `.attam-upcoming` per battere lo stile select del tema. */
.attam-upcoming .attam-upcoming__city-select {
	height: 36px;
	padding: 0 30px 0 14px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var( --attam-up-grey-050 );
	background-color: var( --attam-up-chip-bg );
	border: 1px solid var( --attam-up-info );
	border-radius: var( --attam-up-radius-pill );
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	/* Caret chiaro inline (nessuna dipendenza asset). */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e6e7ea' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.attam-upcoming .attam-upcoming__city-select:focus-visible {
	outline: 2px solid var( --attam-up-blue );
	outline-offset: 2px;
}

.attam-upcoming__truncated {
	margin: 0 0 12px;
	font-size: 0.9em;
	color: var( --attam-up-ink, #262626 );
	opacity: 0.8;
}

@media ( prefers-reduced-motion: reduce ) {
	.attam-up-card,
	.attam-upcoming__map {
		transition: none;
	}
}