/**
 * Rassegne — la fascia con le facce degli artisti fissi.
 *
 * Solo struttura. Forma, misura, colori e spazi passano tutti da una variabile
 * `--mybo-series-artist-*`: i valori scritti qui sono il ripiego di partenza, e
 * chi comanda davvero è la pagina Personalizza → Rassegna.
 */

/* Un allineamento solo per tutta la fascia: la fila dei cerchi e la riga «In
   passato» si appoggiano allo stesso lato, e il comando nel pannello e' uno. */
.mybo-series-artists {
	margin: var(--mybo-series-artist-margin, 24px 0);
	display: flex;
	flex-direction: column;
	align-items: var(--mybo-series-artist-justify, center);
}

.mybo-series-artists__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mybo-series-artist-justify, center);
	gap: var(--mybo-series-artist-gap, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mybo-series-artist {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: var(--mybo-series-artist-max-width, 150px);
}

.mybo-series-artist__photo {
	width: var(--mybo-series-artist-size, 110px);
	height: var(--mybo-series-artist-size, 110px);
	border-radius: var(--mybo-series-artist-radius, 50%);
	overflow: hidden;
	background: var(--mybo-series-artist-placeholder-bg, #eceff1);
	border: var(--mybo-series-artist-border-width, 0) solid var(--mybo-series-artist-border-color, currentColor);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mybo-series-artist__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Il ritaglio parte dall'alto e non dal centro: in un ritratto in piedi il
	   centro dell'immagine e' la pancia, e un cerchio ritagliato al centro
	   taglia via proprio la faccia. Stesso valore della pagina dell'artista. */
	object-position: var(--mybo-artist-photo-focus, 50% 25%);
	/* Come sulla pagina dell'artista: l'ingrandimento gira attorno al punto
	   dell'inquadratura, non attorno al centro. */
	transform: scale(var(--mybo-artist-photo-zoom, 1));
	transform-origin: var(--mybo-artist-photo-focus, 50% 25%);
	display: block;
}

.mybo-series-artist__initials {
	font-size: var(--mybo-series-artist-initials-size, 30px);
	font-weight: 600;
	color: var(--mybo-series-artist-initials-color, #607d8b);
	letter-spacing: 1px;
}

.mybo-series-artist__name {
	font-family: var(--mybo-series-artist-name-font, inherit);
	font-size: var(--mybo-series-artist-name-size, 16px);
	font-weight: var(--mybo-series-artist-name-weight, 600);
	color: var(--mybo-series-artist-name-color, inherit);
	line-height: 1.25;
}

.mybo-series-artist__role {
	/* Il ruolo si puo' togliere lasciando solo il nome: e' una scelta di
	   aspetto, quindi la parola resta nel codice della pagina e la leggono i
	   lettori di schermo. Il valore di ripiego e' `block` perche' in una
	   colonna flessibile e' quello che il browser gli darebbe comunque. */
	display: var(--mybo-series-artist-role-display, block);
	font-family: var(--mybo-series-artist-role-font, inherit);
	font-size: var(--mybo-series-artist-role-size, 13px);
	color: var(--mybo-series-artist-role-color, #6b7280);
	line-height: 1.25;
}

.mybo-series-artists__past {
	margin: var(--mybo-series-artist-past-margin, 14px 0 0);
	font-size: var(--mybo-series-artist-past-size, 13px);
	color: var(--mybo-series-artist-past-color, #6b7280);
}

/* =========================================================================
   A CAVALLO DEL BORDO, CLICCABILE, CON LA SCHEDA BREVE
   ========================================================================= */

/* I cerchi salgono SOPRA il bordo inferiore della testata. Il margine negativo
   vale metà del cerchio: così il bordo passa esattamente in mezzo alle facce,
   che è l'effetto voluto e non «un po' più su».

   Su .mybo-series-artists e non su un contenitore nuovo, perché la fascia della
   rassegna e quella del codice breve devono comportarsi uguale. */
.mybo-series-artists {
	position: relative;
	z-index: 2;
	/* Il rialzo vale meta' del cerchio PIU' GRANDE, non di quello normale: se no
	   il protagonista resterebbe piu' in alto della linea invece che a cavallo.
	   Ogni cerchio piu' piccolo si riabbassa poi da solo (vedi
	   .mybo-series-artist), cosi' il bordo del banner passa nel mezzo di TUTTE
	   le facce, quale che sia la loro misura. */
	margin-top: var(--mybo-series-artist-overlap, calc(var(--mybo-series-artist-size-lead, 150px) / -2));
}

/* IL MARGINE SOTTO LA TESTATA SI ANNULLA quando subito dopo c'è la fascia.
   Senza, quei 40px di respiro (che sono un comando di Personalizza) si sommano
   al rialzo negativo e i cerchi scavalcano di quattro pixel invece che di mezza
   faccia: misurato dal vivo, 534 contro 530.

   Il respiro serve ancora quando la fascia non c'è, quindi non si toglie dal
   comando: si annulla SOLO in presenza della fascia. Un browser che non
   conosce `:has()` (Safari prima della 15.4) tiene il margine e vede un
   sovrapposto piccolo — meno bello, mai rotto. */
.mybo-series-hero:has( + .mybo-series-artists ) {
	margin-bottom: 0;
}

/* Il codice breve dentro una pagina non scavalca niente per conto suo: lo fa
   solo se glielo si chiede con overlap="si". */
.mybo-artist-strip {
	margin-top: var(--mybo-series-artist-margin-top, 24px);
}

.mybo-artist-strip.mybo-series-artists--overlap {
	margin-top: var(--mybo-series-artist-overlap, calc(var(--mybo-series-artist-size-lead, 150px) / -2));
}

/* La fila parte dal CENTRO: con un artista solo il cerchio sta in mezzo, con
   quattro stanno in mezzo tutti e quattro. */
.mybo-series-artists__list {
	justify-content: center;
}

.mybo-series-artist {
	position: relative;
}

.mybo-series-artist__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: inherit;
	color: inherit;
	text-decoration: none;
}

/* Il cerchio si stacca dallo sfondo: passa sopra il bordo fra due zone di
   colore diverso, e senza un contorno una foto scura sul banner scuro
   sparirebbe a metà. */
.mybo-series-artist__photo {
	box-shadow: var(--mybo-series-artist-ring, 0 0 0 4px rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .35));
	transition: transform .18s ease, box-shadow .18s ease;
}

.mybo-series-artist--linked .mybo-series-artist__link:hover .mybo-series-artist__photo,
.mybo-series-artist--linked .mybo-series-artist__link:focus-visible .mybo-series-artist__photo {
	transform: translateY(-4px);
	box-shadow: var(--mybo-series-artist-ring-hover, 0 0 0 4px var(--mybo-color-primary, #e0ae5a), 0 12px 26px rgba(0, 0, 0, .45));
}

/* ------------------------------------------------------------ scheda breve */

.mybo-artist-card {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	z-index: 5;
	width: max-content;
	max-width: min(300px, 78vw);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--mybo-artist-card-bg, #1c1f26);
	color: var(--mybo-artist-card-text, #eef1f6);
	font-family: var(--mybo-artist-card-font, inherit);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	text-align: left;
	font-size: 13.5px;
	line-height: 1.45;
	/* INTERCETTA IL MOUSE. Prima no: la scheda si chiudeva appena il puntatore
	   usciva dal cerchio, e il «Vedi la scheda» era una scritta che non si
	   poteva premere. Ora la si puo' raggiungere — la coda di due secondi che
	   da' il tempo di arrivarci sta in js/mybo-artist-strip.js. */
	pointer-events: auto;
}

.mybo-artist-card[hidden] {
	display: none;
}

/* La punta che lega la scheda al cerchio: senza, sembra un riquadro che
   galleggia e non si capisce a quale faccia appartenga. */
.mybo-artist-card::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: var(--mybo-artist-card-bg, #1c1f26);
}

.mybo-artist-card__name {
	font-weight: 700;
	font-size: var(--mybo-artist-card-name-size, 15px);
}

.mybo-artist-card__role,
.mybo-artist-card__more {
	font-size: var(--mybo-artist-card-role-size, 12.5px);
	opacity: .75;
}

/* È un collegamento vero: si può premere, e si vede che si può. */
.mybo-artist-card__more {
	margin-top: 2px;
	font-weight: 600;
	opacity: 1;
	color: var(--mybo-color-primary, #e0ae5a);
	text-decoration: none;
	align-self: flex-start;
}

.mybo-artist-card__more:hover,
.mybo-artist-card__more:focus-visible {
	text-decoration: underline;
}

/* Col mouse: si apre passandoci sopra o arrivandoci da tastiera. Sul telefono
   ci pensa js/mybo-artist-strip.js, che aggiunge is-open al primo tocco. */
@media (hover: hover) and (pointer: fine) {
	.mybo-series-artist--linked:hover .mybo-artist-card,
	.mybo-series-artist--linked:focus-within .mybo-artist-card {
		display: flex;
	}
}

.mybo-series-artist.is-open .mybo-artist-card {
	display: flex;
}

@media (prefers-reduced-motion: reduce) {
	.mybo-series-artist__photo {
		transition-duration: .01ms;
	}
}

/* ------------------------------------------------------- il protagonista */

/* Più grande degli altri, e messo in mezzo alla fila. Il POSTO lo decide il
   PHP (mybo_artist_strip_lead_center): `order` sposta un elemento di una
   posizione, non lo mette in mezzo a un numero di fratelli che si conosce solo
   al momento del disegno. Qui c'è solo la misura.

   La fila si allinea in ALTO, e ogni cerchio si riabbassa di quanto gli manca
   per arrivare alla misura del più grande: così i CENTRI stanno tutti sulla
   stessa linea — quella del bordo del banner — invece dei bordi inferiori. È la
   differenza fra facce «appoggiate» e facce «a cavallo».

   Il conto torna anche quando nessuno è protagonista: (150 − 110) / 2 = 20 di
   discesa per tutti, che sommati al rialzo di 75 fanno esattamente mezza
   faccia. */
.mybo-series-artists__list {
	align-items: flex-start;
}

.mybo-series-artist {
	padding-top: calc( ( var(--mybo-series-artist-size-lead, 150px) - var(--mybo-series-artist-size, 110px) ) / 2 );
}

.mybo-series-artist--lead {
	padding-top: 0;
}

.mybo-series-artist--lead .mybo-series-artist__photo {
	width: var(--mybo-series-artist-size-lead, 150px);
	height: var(--mybo-series-artist-size-lead, 150px);
}

.mybo-series-artist--lead .mybo-series-artist__name {
	font-size: var(--mybo-series-artist-name-size-lead, 16px);
	font-weight: 700;
}

/* =========================================================================
   IN COLONNA — [mybo_artist_strip layout="colonna"]
   =========================================================================

   Stessa fascia, girata di novanta gradi: gli stessi cerchi, la stessa scheda
   a comparsa, lo stesso collegamento. Cambia solo la direzione, la misura di
   partenza (più piccola: qui si sta di fianco al testo di una pagina, non
   sotto un banner largo) e il lato da cui esce la scheda. */

.mybo-series-artists--column .mybo-series-artists__list {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: var(--mybo-series-artist-justify, center);
	gap: var(--mybo-series-artist-column-gap, 18px);
}

/* La discesa che allinea i CENTRI sulla linea del banner non ha senso in
   colonna: lì i cerchi sono incolonnati, non a cavallo di un bordo, e quel
   mezzo spazio in cima sballerebbe solo la distanza fra il primo e il secondo. */
.mybo-series-artists--column .mybo-series-artist {
	padding-top: 0;
	max-width: var(--mybo-series-artist-column-max-width, 260px);
	text-align: center;
}

/* Al passaggio si ingrandisce, non solo si alza: in una fila il rialzo si vede
   perché i vicini restano fermi, in una colonna quattro pixel più su
   sembrerebbero un errore di allineamento. */
.mybo-series-artists--column .mybo-series-artist--linked .mybo-series-artist__link:hover .mybo-series-artist__photo,
.mybo-series-artists--column .mybo-series-artist--linked .mybo-series-artist__link:focus-visible .mybo-series-artist__photo {
	transform: scale(1.12);
}

/* La scheda esce DI FIANCO. Sopra coprirebbe la faccia di chi sta sopra: in
   fila il posto sopra è vuoto, in colonna è occupato. */
.mybo-series-artists--column .mybo-artist-card {
	left: calc(100% + 14px);
	right: auto;
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
}

.mybo-series-artists--column .mybo-artist-card::after {
	top: 50%;
	left: auto;
	right: 100%;
	transform: translateY(-50%);
	border-top-color: transparent;
	border-right-color: var(--mybo-artist-card-bg, #1c1f26);
}

/* Su schermo stretto di fianco non ci sta: la scheda torna sopra il cerchio,
   dove al massimo copre una faccia già vista. */
@media (max-width: 640px) {
	.mybo-series-artists--column .mybo-artist-card {
		left: 50%;
		top: auto;
		bottom: calc(100% + 12px);
		transform: translateX(-50%);
	}

	.mybo-series-artists--column .mybo-artist-card::after {
		top: 100%;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		border-top-color: var(--mybo-artist-card-bg, #1c1f26);
		border-right-color: transparent;
	}
}

/* =========================================================================
   L'ELENCO DEGLI ARTISTI — [mybo_artist_list]
   =========================================================================

   La pagina «Artisti»: tutti i cerchi in ordine alfabetico, su più colonne
   che si leggono dall'alto in basso, come un elenco telefonico. Ogni voce è
   lo stesso <li> della fascia — stessa scheda breve, stessi comandi di
   Personalizza — disposta in riga: foto a sinistra, nome a fianco. */

.mybo-artist-directory {
	/* La fascia parte con il rialzo negativo che la porta a cavallo del
	   banner; un elenco dentro una pagina non scavalca niente. */
	display: block;
	margin-top: var(--mybo-artist-directory-margin-top, 24px);
	/* Misura scelta da Fabio (2026-09-01). Chi scrive size="" nel codice
	   breve vince comunque: l'attributo style batte la classe. */
	--mybo-series-artist-size: 150px;
	/* Nomi un filo più grandi dei 16px della fascia: accanto a un cerchio
	   da 150 il testo base sembrava piccolo. Scelta di Fabio. */
	--mybo-series-artist-name-size: 19px;
}

/* Il numero di colonne lo scrive il codice breve come variabile
   sull'elemento (columns / columns_tablet / columns_mobile); qui stanno
   solo i punti di rottura e i valori di ripiego. */
.mybo-artist-directory .mybo-series-artists__list {
	display: block;
	columns: var(--mybo-artist-directory-cols, 3);
	column-gap: var(--mybo-artist-directory-col-gap, 28px);
}

.mybo-artist-directory .mybo-series-artist {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	max-width: none;
	/* La discesa che in fascia allinea i centri sulla linea del banner:
	   in un elenco sballerebbe solo la distanza fra le righe. */
	padding-top: 0;
	text-align: left;
	/* Una voce non si spezza mai a cavallo di due colonne. */
	break-inside: avoid;
	/* 40px d'aria fra una faccia e l'altra: misura chiesta da Fabio
	   (2026-09-01) con i cerchi da 150. */
	margin: 0 0 var(--mybo-artist-directory-row-gap, 40px);
}

.mybo-artist-directory .mybo-series-artist__link {
	flex-direction: row;
	align-items: center;
}

.mybo-artist-directory .mybo-series-artist__photo {
	flex: 0 0 auto;
}

/* Al passaggio si ingrandisce invece di alzarsi, come in colonna: in una
   riga il rialzo sembrerebbe un errore di allineamento. */
.mybo-artist-directory .mybo-series-artist--linked .mybo-series-artist__link:hover .mybo-series-artist__photo,
.mybo-artist-directory .mybo-series-artist--linked .mybo-series-artist__link:focus-visible .mybo-series-artist__photo {
	transform: scale(1.08);
}

/* LA SCHEDINA SI APRE SEMPRE A DESTRA DEL CERCHIO, centrata in verticale
   su di lui — mai sopra, mai a sinistra (scelta di Fabio, 2026-09-01).
   Sopra coprirebbe la riga precedente; l'aggancio è al cerchio e non alla
   riga intera, così la schedina spunta accanto alla faccia e non in fondo
   al nome. Copre il nome della propria riga: dentro c'è già, in grassetto. */
.mybo-artist-directory .mybo-artist-card {
	left: calc(var(--mybo-series-artist-size, 150px) + 14px);
	right: auto;
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
}

.mybo-artist-directory .mybo-artist-card::after {
	top: 50%;
	left: auto;
	right: 100%;
	transform: translateY(-50%);
	border-top-color: transparent;
	border-right-color: var(--mybo-artist-card-bg, #1c1f26);
}

/* Su telefono lo spazio a destra è poco: la schedina resta lì (mai sopra),
   ma si stringe fino a starci — mai oltre il bordo dello schermo. Gli 88px
   coprono lo scarto fra cerchio e schedina più il margine interno della
   pagina, che da qui non si può misurare. */
@media (max-width: 600px) {
	.mybo-artist-directory .mybo-artist-card {
		max-width: calc(100vw - var(--mybo-series-artist-size, 150px) - 88px);
	}
}

@media (max-width: 1024px) {
	.mybo-artist-directory .mybo-series-artists__list {
		columns: var(--mybo-artist-directory-cols-tablet, 2);
	}
}

@media (max-width: 600px) {
	.mybo-artist-directory .mybo-series-artists__list {
		columns: var(--mybo-artist-directory-cols-mobile, 1);
	}
}