/* ==========================================================================
   MyBoxOffice — la pagina di una rassegna.

   Due sorgenti, e non si mescolano:
     • il COLORE della rassegna arriva dalla sua scheda, come variabile
       --mybo-series-accent stampata sul contenitore (mybo_series_assets());
     • tutto il resto — misure, colori, caratteri della testata e dei due
       blocchi — arriva dai comandi della linguetta «Rassegna» di Personalizza,
       che emette le altre var(--mybo-series-*) in :root.

   I valori dopo la virgola dentro var() sono i ripieghi di fabbrica e devono
   restare identici a quelli dichiarati nello schema della linguetta: sul sito
   vince sempre il pannello, e questi entrano in gioco solo prima che l'admin
   abbia toccato qualcosa.

   Il cartellone NON si veste qui: è la Griglia Eventi, e la sua linguetta è
   già la sua.
   ========================================================================== */

.mybo-series {
	--mybo-series-accent: var(--mybo-color-primary, #e0ae5a);
	background: var(--mybo-series-bg, transparent);
	color: var(--mybo-series-text, inherit);
	/* Tiene dentro la testata che esce dalla colonna (vedi .mybo-series-hero).
	   Senza, quella larga quanto lo schermo sporgerebbe della larghezza della
	   barra di scorrimento e comparirebbe una barra ORIZZONTALE su tutta la
	   pagina: il difetto classico di questo effetto, e si vede solo su Windows,
	   dove la barra occupa spazio.
	   `hidden` prima e `clip` dopo: i browser vecchi capiscono il primo, i nuovi
	   prendono il secondo, che non crea un contenitore di scorrimento e quindi
	   non rompe nulla di quello che sta dentro. */
	overflow-x: hidden;
	overflow-x: clip;
}

.mybo-series__article {
	max-width: var(--mybo-series-max-width, 1280px);
	margin: 0 auto;
	padding: 0;
}

.mybo-series__body {
	padding: var(--mybo-series-body-padding, 0 20px 60px);
}

/* ===== TESTATA ===== */

/* LA TESTATA ARRIVA AI DUE BORDI DELLO SCHERMO, anche se sta dentro una colonna
   larga 1280px. Il trucco: margini negativi che valgono metà della differenza
   fra la colonna e lo schermo, e larghezza pari allo schermo.

   Si allarga lo SFONDO, non la riga di testo: il contenuto resta incolonnato
   dentro .mybo-series-hero__inner. Una riga di testo lunga quanto uno schermo
   grande non si legge — l'occhio perde il capo riga.

   `margin-inline` sta DOPO la scorciatoia `margin`: quella porta il comando di
   Personalizza (sopra e sotto), questa riscrive solo destra e sinistra. Se
   qualcuno mette un margine laterale nel pannello, qui non arriva — ed è
   giusto, una testata a tutta larghezza margini laterali non ne ha. */
.mybo-series-hero {
	position: relative;
	overflow: hidden;
	min-height: var(--mybo-series-hero-min-height, 420px);
	display: flex;
	align-items: center;
	background: var(--mybo-series-hero-bg, #111111);
	border-radius: var(--mybo-series-hero-radius, 0px);
	margin: var(--mybo-series-hero-margin, 0 0 40px);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.mybo-series-hero__cover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Il banner al posto della copertina: largo quanto la fascia e intero, con la
   fascia che si alza quanto serve per contenerlo.

   Perché una griglia e non la posizione assoluta: un'immagine assoluta non
   occupa spazio, quindi non può dettare l'altezza della fascia — resterebbe
   quella minima di fabbrica, e il banner si rimpicciolirebbe fino a starci
   dentro (è il motivo per cui prima non arrivava ai bordi). In griglia
   banner e contenuto stanno nella STESSA cella, uno sopra l'altro: l'altezza
   la detta il più alto dei due, e il testo resta sopra il banner.

   `min-height: 0` toglie di mezzo l'altezza minima: qui la misura giusta è
   quella che chiede il banner, non un numero deciso altrove. */
.mybo-series-hero.has-banner {
	display: grid;
	min-height: 0;
	align-items: center;
}

.mybo-series-hero.has-banner > * {
	grid-area: 1 / 1;
}

/* `width: 100%` con `height: auto` tiene le proporzioni: il banner arriva ai
   bordi e non si deforma mai. Il tetto arriva in linea dalla scheda e in
   linea è SEMPRE una larghezza, anche quando l'amministratore ha scritto
   un'altezza: PHP la converte con le proporzioni vere dell'immagine.

   ⚠️ Non aggiungere qui `max-height`. Con la larghezza già dichiarata al 100%
   il browser non ricalcola più la larghezza: schiaccia l'immagine e basta —
   misurato dal vivo, un banner 4:1 esce 4,8:1 e niente lo segnala. */
.mybo-series-hero__banner {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--mybo-series-banner-radius, 0);
}

/* Senza velo il testo sta sopra il banner così com'è: l'ombra è l'unica cosa
   che lo tiene leggibile anche su un banner chiaro. */
/* Il velo del banner: quanto scuro lo dice la scheda, in linea. Sta nella
   stessa cella del banner, dopo di lui e prima del testo, quindi lo copre
   senza toccare le scritte. `align-self: stretch` gli fa prendere l'altezza
   della fascia: senza, una riga vuota alta zero. */
.mybo-series-hero__banner-veil {
	align-self: stretch;
	width: 100%;
	margin-inline: auto;
	pointer-events: none;
	/* Gli stessi angoli del banner che copre: senza, su un banner smussato il
	   velo resterebbe squadrato e sborderebbe negli angoli. */
	border-radius: var(--mybo-series-banner-radius, 0);
}

/* L'ombra delle scritte: due strati, e servono tutti e due. Quello stretto e
   quasi nero ritaglia le lettere contro un dettaglio chiaro del banner —
   senza, la sola ombra larga si limita a sporcare lo sfondo. Quello largo
   stacca il blocco dal resto dell'immagine. */
.mybo-series-hero.has-banner .mybo-series-hero__inner {
	text-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.95 ),
		0 2px 18px rgba( 0, 0, 0, 0.85 );
}

/* Le pillole non sono testo su un'immagine: sono riquadri, e un bordo sottile
   con l'ombra sbava invece di staccarsi. Un fondo appena pieno le regge — e
   resta un valore scritto qui, non una variabile: un comando che nel pannello
   non esiste sarebbe solo un'altra riga da tenere allineata. */
.mybo-series-hero.has-banner .mybo-series-pill {
	background: rgba( 0, 0, 0, 0.35 );
}

/* Il velo tiene leggibile il testo su qualunque copertina: senza, una foto
   chiara mangia il titolo bianco e non c'è comando che possa salvarla. */
.mybo-series-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--mybo-series-veil-from, rgba(17, 17, 17, 0.92)) 0%,
		var(--mybo-series-veil-to, rgba(17, 17, 17, 0.35)) 100%
	);
}

/* Il contenuto della testata resta nella colonna, centrato: e' la meta' che
   rende leggibile una testata larga quanto lo schermo. La misura e' la stessa
   del resto della pagina (--mybo-series-max-width), cosi' titolo e testo sotto
   partono dalla stessa riga verticale. */
.mybo-series-hero__inner {
	width: 100%;
	max-width: var(--mybo-series-max-width, 1280px);
	margin-inline: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mybo-series-hero-gap, 18px);
	padding: var(--mybo-series-hero-padding, 56px 48px);
}

.mybo-series-hero__brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mybo-series-hero__logo img {
	display: block;
	max-width: var(--mybo-series-logo-width, 120px);
	max-height: var(--mybo-series-logo-height, 90px);
	width: auto;
	height: auto;
}

.mybo-series-hero__icon {
	font-size: var(--mybo-series-icon-size, 40px);
	line-height: 1;
}

.mybo-series-hero__season {
	font-size: var(--mybo-series-season-size, 14px);
	font-weight: var(--mybo-series-season-weight, 600);
	letter-spacing: var(--mybo-series-season-letter, 3px);
	text-transform: uppercase;
	color: var(--mybo-series-season-color, var(--mybo-series-accent));
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mybo-series-hero__closed {
	border: var(--mybo-series-closed-border-width, 1px) solid var(--mybo-series-closed-border, currentColor);
	background: var(--mybo-series-closed-bg, transparent);
	color: var(--mybo-series-closed-color, inherit);
	border-radius: var(--mybo-series-closed-radius, 999px);
	padding: var(--mybo-series-closed-padding, 3px 12px);
	letter-spacing: 1.5px;
	font-size: var(--mybo-series-closed-size, 12px);
}

.mybo-series-hero__title {
	margin: 0;
	font-size: var(--mybo-series-title-size, 56px);
	font-weight: var(--mybo-series-title-weight, 800);
	line-height: var(--mybo-series-title-line, 1.05);
	color: var(--mybo-series-title-color, #ffffff);
	max-width: 20ch;
	text-wrap: balance;
}

.mybo-series-hero__rule {
	width: var(--mybo-series-rule-width, 96px);
	height: var(--mybo-series-rule-height, 2px);
	background: var(--mybo-series-accent);
}

.mybo-series-hero__excerpt {
	margin: 0;
	max-width: var(--mybo-series-excerpt-max-width, 620px);
	font-size: var(--mybo-series-excerpt-size, 19px);
	line-height: var(--mybo-series-excerpt-line, 1.55);
	color: var(--mybo-series-excerpt-color, rgba(255, 255, 255, 0.86));
}

.mybo-series-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mybo-series-pill {
	border: 1px solid var(--mybo-series-pill-border, rgba(255, 255, 255, 0.22));
	background: var(--mybo-series-pill-bg, transparent);
	color: var(--mybo-series-pill-color, rgba(255, 255, 255, 0.82));
	border-radius: var(--mybo-series-pill-radius, 999px);
	padding: var(--mybo-series-pill-padding, 7px 16px);
	font-size: var(--mybo-series-pill-size, 14px);
	letter-spacing: 0.5px;
}

.mybo-series-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mybo-series-actions-gap, 14px);
	margin: var(--mybo-series-actions-margin, 6px 0 0);
	justify-content: var(--mybo-series-actions-align, flex-start);
}

.mybo-series-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 46px: sotto i 44 il dito sbaglia bersaglio, ed è la misura che il resto
	   del plugin usa sui pulsanti del sito. */
	min-height: 46px;
	padding: var(--mybo-series-btn-padding, 14px 32px);
	border-radius: var(--mybo-series-btn-radius, 999px);
	font-size: var(--mybo-series-btn-size, 16px);
	font-weight: var(--mybo-series-btn-weight, 600);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.mybo-series-btn:hover {
	opacity: 0.88;
}

.mybo-series-btn--primary {
	background: var(--mybo-series-accent);
	color: var(--mybo-series-btn-text, #111111);
	border: 1px solid var(--mybo-series-accent);
}

.mybo-series-btn--ghost {
	background: transparent;
	color: var(--mybo-series-btn-ghost-text, #ffffff);
	border: 1px solid var(--mybo-series-btn-ghost-border, rgba(255, 255, 255, 0.35));
}

/* ===== SEZIONI ===== */

.mybo-series-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid var(--mybo-series-section-rule, rgba(128, 128, 128, 0.25));
	padding-bottom: 16px;
	margin: var(--mybo-series-section-head-margin, 48px 0 24px);
}

.mybo-series-section__title {
	margin: 0;
	font-size: var(--mybo-series-section-title-size, 34px);
	font-weight: var(--mybo-series-section-title-weight, 700);
	line-height: 1.1;
	color: var(--mybo-series-section-title-color, inherit);
}

.mybo-series-description {
	font-size: var(--mybo-series-desc-size, 17px);
	line-height: var(--mybo-series-desc-line, 1.7);
	color: var(--mybo-series-desc-color, inherit);
	max-width: var(--mybo-series-desc-max-width, 800px);
	padding-top: var(--mybo-series-desc-padding-top, 8px);
}

/* ===== FOTO DI REPERTORIO =====

   Ci sono solo quando l'amministratore ne ha scelte: senza, la descrizione
   resta il blocco unico di sopra e questa parte non tocca niente.

   Il testo tiene la SUA larghezza massima — quella del comando, che esiste
   perche' una riga lunga quanto lo schermo non si legge — e le foto prendono
   quello che avanza. Per questo il contenitore perde il max-width: se lo
   tenesse, le due colonne dovrebbero dividersi quegli 800px e il testo
   diventerebbe una strisciolina. */
.mybo-series-description.has-gallery {
	display: grid;
	grid-template-columns: minmax(0, var(--mybo-series-desc-max-width, 800px)) minmax(0, 1fr);
	gap: var(--mybo-series-gallery-gap, 32px);
	max-width: none;
	align-items: start;
}

/* Un mosaico di miniature, non una colonna di foto. Sono decorative: devono
   starci tutte accanto al testo senza allungare la pagina.

   `auto-fill` con un minimo decide da solo quante ne stanno per riga: nella
   colonna di destra ne entrano tre o quattro, su una pagina stretta di piu' —
   nessun numero di colonne scritto a mano da rincorrere a ogni schermo. */
.mybo-series-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var(--mybo-series-gallery-thumb, 104px), 1fr ) );
	gap: var(--mybo-series-gallery-thumb-gap, 8px);
	align-content: start;
	margin: var(--mybo-series-gallery-margin, 0);
}

/* Le foto che non stanno nella colonna: una fascia sotto la descrizione, a
   tutta la larghezza della griglia. Cosi' la colonna di destra resta corta
   quanto il testo e le altre non allungano la pagina di lato. */
.mybo-series-gallery--rest {
	grid-column: 1 / -1;
}

/* Nessun `position` qui, ed e' voluto: l'ingrandimento si ancora al mosaico,
   non alla singola miniatura. Bastava un `relative` su questa riga per
   riportarlo appeso alla foto sotto il puntatore. */
.mybo-series-gallery__item {
	/* Lo 0 è il ripristino del margine che il browser dà a ogni <figure>. */
	margin: var(--mybo-series-gallery-item-margin, 0);
}

/* Il quadrato e' quello che tiene in riga foto verticali e orizzontali
   insieme: senza, una foto in piedi alza la sua riga e il mosaico diventa una
   scala. `cover` ritaglia i bordi, ed e' il compromesso giusto per una
   miniatura decorativa — la foto intera qui non si guarda comunque. */
.mybo-series-gallery__img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--mybo-series-gallery-radius, 8px);
}

/* L'ingrandimento al passaggio del mouse: niente finestra, niente
   JavaScript, niente da chiudere.

   Si apre al CENTRO DELLA FINESTRA, non accanto alla foto. Le due prove
   precedenti sbagliavano lo stesso bersaglio: appeso alla miniatura usciva
   dallo schermo sulle foto della prima riga (501px a partire da 559, con 950
   di altezza); ancorato al mosaico restava tagliato quando il mosaico era
   mezzo fuori. `position: fixed` misura sulla finestra, non sulla pagina:
   centrato li', l'ingrandimento e' intero per costruzione, qualunque foto si
   guardi e comunque sia scorsa la pagina.

   `pointer-events: none` e' quello che lo tiene onesto: un riquadro che
   intercetta il mouse si mangerebbe il passaggio sulle miniature che copre, e
   l'ingrandimento sfarfallerebbe.

   ⚠️ Larghezza e altezza sono ENTRAMBE massimi, con `width`/`height` auto:
   e' la sola forma in cui il browser ricalcola le proporzioni invece di
   schiacciare l'immagine (la stessa trappola del banner). */

.mybo-series-gallery__zoom {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 9999;
	width: auto;
	height: auto;
	max-width: min( var(--mybo-series-gallery-zoom, 560px), 86vw );
	max-height: 82vh;
	border-radius: var(--mybo-series-gallery-radius, 8px);
	box-shadow: 0 24px 70px rgba( 0, 0, 0, 0.7 );
	opacity: 0;
	visibility: hidden;
	transform: translate( -50%, -50% ) scale( 0.97 );
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.mybo-series-gallery__item:hover .mybo-series-gallery__zoom,
.mybo-series-gallery__item:focus-within .mybo-series-gallery__zoom {
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, -50% ) scale( 1 );
}

/* Il passaggio del mouse non esiste sul dito: sui dispositivi che toccano
   l'ingrandimento non si mostra mai, e la miniatura resta quello che e'. */
@media ( hover: none ) {
	.mybo-series-gallery__zoom {
		display: none;
	}
}

/* Sotto i 1024px le due colonne non ci stanno: 800px di testo piu' il mosaico
   vogliono un desktop. Le miniature vanno sotto la descrizione, e restano
   miniature: e' la stessa griglia, con piu' spazio a disposizione. */
@media ( max-width: 1023px ) {
	.mybo-series-description.has-gallery {
		grid-template-columns: 1fr;
		max-width: var(--mybo-series-desc-max-width, 800px);
	}
}

/* ===== SPONSOR ===== */

.mybo-series-sponsors {
	margin-top: var(--mybo-series-sponsors-margin-top, 56px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.mybo-series-sponsors__label {
	font-size: var(--mybo-series-sponsors-label-size, 13px);
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mybo-series-sponsors-label-color, rgba(128, 128, 128, 0.9));
}

.mybo-series-sponsors__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--mybo-series-sponsors-gap, 22px);
}

.mybo-series-sponsor img {
	display: block;
	max-width: var(--mybo-series-sponsor-width, 180px);
	max-height: var(--mybo-series-sponsor-height, 80px);
	width: auto;
	height: auto;
	/* I loghi arrivano con fondi e colori diversi: senza questo la fila
	   sembra un collage. Il comando può riportarli a colori pieni. */
	filter: var(--mybo-series-sponsor-filter, grayscale(100%));
	opacity: var(--mybo-series-sponsor-opacity, 0.75);
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.mybo-series-sponsor img:hover {
	filter: none;
	opacity: 1;
}

.mybo-series-sponsor__name {
	font-size: 14px;
	color: var(--mybo-series-sponsors-label-color, rgba(128, 128, 128, 0.9));
}

/* ===== SCHERMI STRETTI ===== */
/* 767px è il confine che usa Personalizza (mybo_customize_breakpoints): stesso
   punto di rottura ovunque, o la testata cambia forma prima delle schede.

   ⚠️ QUI DENTRO SOLO STRUTTURA, nessuna misura di testo. Le misure per telefono
   le decide il pannello, che riemette LE STESSE variabili dentro la sua @media
   con il valore scelto per quello schermo. Scriverle qui con una variabile
   diversa (--…-size-mobile) le renderebbe irraggiungibili dai comandi: il
   telefono resterebbe fisso su un numero deciso nel foglio, e nel pannello
   quel comando sembrerebbe non fare niente. */

@media ( max-width: 767px ) {
	/* La fascia non ha più un'altezza da riempire: su una colonna sola la
	   detta il contenuto. */
	.mybo-series-hero {
		min-height: 0;
	}

	/* I due pulsanti uno sotto l'altro, a tutta larghezza: affiancati su 360px
	   diventano due bersagli da 150px, sotto la misura del dito. */
	.mybo-series-hero__actions .mybo-series-btn {
		flex: 1 1 100%;
	}

	/* Il nome non è più tenuto a 20 caratteri: su una colonna stretta quel
	   limite lo spezzerebbe a metà parola. */
	.mybo-series-hero__title {
		max-width: none;
	}

	/* I titoli di sezione e la loro riga: su schermo stretto la data a destra
	   non ci sta accanto al titolo e va sotto. */
	.mybo-series-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* =========================================================================
   L'ELENCO A MANIFESTI — [mybo_series_list]
   =========================================================================

   La pagina «Rassegne»: una card per rassegna, banner (o copertina, o
   pannello col colore identificativo), titolo, stagione e la riga dei fatti.
   Prima le rassegne in corso, poi le «Edizioni concluse». Il colore della
   rassegna entra come --mybo-series-accent sulla singola card. */

.mybo-series-directory {
	margin: var(--mybo-series-list-margin, 24px 0);
}

.mybo-series-directory__grid {
	display: grid;
	grid-template-columns: repeat(var(--mybo-series-list-cols, 3), 1fr);
	gap: var(--mybo-series-list-gap, 28px);
	/* Lo 0 è il ripristino del margine che il browser dà a ogni <ul>. */
	margin: var(--mybo-series-list-grid-margin, 0);
	padding: 0;
	list-style: none;
}

.mybo-series-card {
	border-radius: var(--mybo-series-list-radius, 14px);
	overflow: hidden;
	background: var(--mybo-series-list-card-bg, #fff);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
	/* Il filo del colore identificativo: sottile, sul bordo alto.
	   Il ripiego finale e' #f19300 = il valore di fabbrica del pannello per
	   --mybo-color-primary: uguale apposta, cosi' il valore di fabbrica non
	   «muove» il sito (verify-nessun-movimento). */
	border-top: 4px solid var(--mybo-series-accent, var(--mybo-color-primary, #f19300));
	transition: transform .18s ease, box-shadow .18s ease;
}

.mybo-series-card:hover,
.mybo-series-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}

.mybo-series-card__link {
	display: block;
	/* La STESSA variabile del corpo della card, una fonte sola: il comando
	   «Colore del testo» veste tutte e due. `currentColor` sul color vale
	   `inherit` (CSS Color 3) e tiene fuori i colori-link del tema, come lo
	   `inherit` che c'era prima — ma dentro var() `inherit` non si può scrivere. */
	color: var(--mybo-series-list-text, currentColor);
	text-decoration: none;
}

/* La finestra dell'immagine: proporzione fissa così la griglia resta una
   griglia anche con banner di misure diverse; il ritaglio prende il centro. */
.mybo-series-card__media {
	display: block;
	aspect-ratio: var(--mybo-series-list-media-ratio, 16 / 9);
	/* Stesso ripiego del filo qui sopra: il valore di fabbrica del pannello. */
	background: var(--mybo-series-accent, var(--mybo-color-primary, #f19300));
	overflow: hidden;
}

.mybo-series-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Gli angoli ALTI seguono il comando «Angoli delle card» (stessa variabile,
	   una fonte sola): a riposo è identico al ritaglio dell'overflow della card,
	   ma tiene l'angolo pulito anche durante la transizione del sollevamento.
	   Quelli bassi restano vivi: lì l'immagine incontra il corpo, dritta. */
	border-radius: var(--mybo-series-list-radius, 14px) var(--mybo-series-list-radius, 14px) 0 0;
}

/* Senza immagine: il pannello col colore della rassegna e il titolo grande.
   aria-hidden, perché lo stesso titolo sta già scritto sotto. */
.mybo-series-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 18px;
	box-sizing: border-box;
	text-align: center;
	font-size: var(--mybo-series-list-placeholder-size, 26px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mybo-series-list-placeholder-color, #fff);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.mybo-series-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--mybo-series-list-body-padding, 16px 18px 18px);
	color: var(--mybo-series-list-text, #1f2430);
}

.mybo-series-card__title {
	font-size: var(--mybo-series-list-title-size, 20px);
	font-weight: var(--mybo-series-list-title-weight, 700);
	line-height: 1.25;
}

.mybo-series-card__season {
	font-size: var(--mybo-series-list-season-size, 14px);
	color: var(--mybo-series-list-muted, #6b7280);
}

.mybo-series-card__meta {
	font-size: var(--mybo-series-list-meta-size, 14px);
	color: var(--mybo-series-list-muted, #6b7280);
}

/* Le edizioni concluse: presenti ma in seconda fila, un filo spente. */
.mybo-series-directory__past-title {
	margin: var(--mybo-series-list-past-margin, 44px 0 18px);
	font-size: var(--mybo-series-list-past-title-size, 24px);
}

/* Lo stato della card conclusa (scheda 14-bis del catalogo): comandi solo
   sulle proprietà che lo stato scrive. Il ritorno a colori pieni al passaggio
   del mouse, qui sotto, è comportamento e resta scolpito. */
.mybo-series-card--closed {
	filter: var(--mybo-series-list-closed-filter, saturate(.65));
	opacity: var(--mybo-series-list-closed-opacity, .85);
}

.mybo-series-card--closed:hover,
.mybo-series-card--closed:focus-within {
	filter: none;
	opacity: 1;
}

@media (max-width: 1024px) {
	.mybo-series-directory__grid {
		grid-template-columns: repeat(var(--mybo-series-list-cols-tablet, 2), 1fr);
	}
}

@media (max-width: 600px) {
	.mybo-series-directory__grid {
		grid-template-columns: repeat(var(--mybo-series-list-cols-mobile, 1), 1fr);
	}
}