/**
 * MyBoxOffice — La pagina pubblica dell'artista.
 *
 * Solo struttura e ripieghi. Ogni misura e ogni colore passano da una variabile
 * `--mybo-artist-*`: i valori scritti qui sono quelli di fabbrica, e quando
 * arriverà la linguetta Personalizza → Artista sarà quella a comandare, senza
 * che questo file cambi di una riga.
 *
 * MOBILE PRIMA: le misure di base sono di uno schermo stretto, i @media
 * aggiungono spazio quando ce n'è.
 *
 * I paragrafi nominano anche il tag (`.mybo-artist-page p.classe`) dove serve:
 * una riga di azzeramento come `.mybo-artist-page p { margin: 0 }` pesa più di
 * una classe sola e le annullerebbe. È lo stesso inciampo già pagato sul modulo
 * pubblico — qui si evita alla nascita non scrivendo nessun azzeramento cieco.
 */

.mybo-artist-page {
	--mybo-artist-accent: var(--mybo-color-primary, #e0ae5a);
	--mybo-artist-max-width: 1080px;
	--mybo-artist-gap: 34px;
	--mybo-artist-radius: 14px;
	--mybo-artist-muted: color-mix(in srgb, currentColor 62%, transparent);

	box-sizing: border-box;
	background: var(--mybo-artist-bg, transparent);
	color: var(--mybo-artist-text, inherit);
}

.mybo-artist-page *,
.mybo-artist-page *::before,
.mybo-artist-page *::after {
	box-sizing: border-box;
}

.mybo-artist-page__article {
	max-width: var(--mybo-artist-max-width);
	margin: 0 auto;
	padding: var(--mybo-artist-page-padding, 28px 18px 64px);
}

/* ------------------------------------------------------------------ testata */

.mybo-artist-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	margin: 0 0 var(--mybo-artist-gap);
}

.mybo-artist-hero__photo {
	flex: 0 0 auto;
	width: var(--mybo-artist-photo-size, 190px);
	height: var(--mybo-artist-photo-size, 190px);
	border-radius: var(--mybo-artist-photo-radius, 50%);
	overflow: hidden;
	background: var(--mybo-artist-photo-bg, rgba(127, 127, 127, .18));
}

/* IL RITAGLIO PARTE DALL'ALTO, non dal centro. In un ritratto in piedi il
   centro dell'immagine e' la pancia: un cerchio ritagliato al centro taglia via
   la faccia, che e' l'unica cosa per cui quella foto sta li'. Il 25% e' il
   punto dove sta la testa nella grande maggioranza dei ritratti; chi ha foto
   diverse lo sposta dal pannello. */
.mybo-artist-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mybo-artist-photo-focus, 50% 25%);
	/* L'ingrandimento gira attorno allo STESSO punto dell'inquadratura: se
	   girasse attorno al centro, alzando lo zoom la faccia scapperebbe fuori
	   proprio mentre si cerca di centrarla. */
	transform: scale(var(--mybo-artist-photo-zoom, 1));
	transform-origin: var(--mybo-artist-photo-focus, 50% 25%);
}

.mybo-artist-hero__name {
	margin: 0;
	font-family: var(--mybo-font-heading, inherit);
	font-size: var(--mybo-artist-name-size, 32px);
	line-height: 1.15;
	font-weight: 700;
}

.mybo-artist-page p.mybo-artist-hero__aliases {
	margin: 6px 0 0;
	font-size: var(--mybo-artist-aliases-size, 15px);
	color: var(--mybo-artist-aliases-color, var(--mybo-artist-muted));
}

/* --------------------------------------------------------------- i link */

.mybo-artist-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.mybo-artist-links__item {
	margin: 0;
}

.mybo-artist-links__item a {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--mybo-artist-chip-border, currentColor);
	border-radius: 999px;
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
	opacity: .85;
	transition: opacity .15s ease, border-color .15s ease;
}

.mybo-artist-links__item a:hover,
.mybo-artist-links__item a:focus-visible {
	opacity: 1;
	border-color: var(--mybo-artist-accent);
}

/* ------------------------------------------------------------- le sezioni */

.mybo-artist-section {
	margin: 0 0 var(--mybo-artist-gap);
}

.mybo-artist-section__title {
	margin: 0 0 14px;
	font-family: var(--mybo-font-heading, inherit);
	font-size: var(--mybo-artist-title-size, 21px);
	line-height: 1.25;
	font-weight: 700;
}

/* Il testo arriva fino in fondo al riquadro. C'era un tetto di 68 caratteri
   per riga — la misura che si legge meglio — ma dentro una colonna gia' stretta
   quel tetto mandava il testo a capo molto prima del bordo, e sembrava un
   difetto. Il comando resta, per chi voglia rimetterlo. */
.mybo-artist-bio {
	font-size: var(--mybo-artist-bio-size, 17px);
	line-height: 1.65;
	max-width: var(--mybo-artist-bio-width, none);
}

.mybo-artist-curiosities__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.mybo-artist-curiosities__list li {
	position: relative;
	padding-left: 26px;
	line-height: 1.55;
}

.mybo-artist-curiosities__list li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--mybo-artist-accent);
	font-size: 12px;
	line-height: 1.7;
}

.mybo-artist-quote {
	margin: 0 0 var(--mybo-artist-quote-gap, 16px);
	padding: 0 0 0 18px;
	border-left: var(--mybo-artist-quote-bar, 3px) solid var(--mybo-artist-quote-border, var(--mybo-artist-accent));
}

.mybo-artist-page .mybo-artist-quote p {
	margin: 0;
	font-size: var(--mybo-artist-quote-size, 17px);
	line-height: 1.55;
	font-style: italic;
}

.mybo-artist-quote cite {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	font-style: normal;
	color: var(--mybo-artist-muted);
}

/* ------------------------------------------------- racconto e foto affiancati */

/* Su schermo stretto: una colonna sola, le foto subito sotto il racconto.
   La griglia vera comincia dal @media piu' sotto. */
.mybo-artist-cols {
	display: grid;
	gap: var(--mybo-artist-cols-gap, 28px);
	margin: 0 0 var(--mybo-artist-gap);
}

.mybo-artist-cols__main > .mybo-artist-section:last-child,
.mybo-artist-cols__side > .mybo-artist-section:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------- gli spettacoli */

.mybo-artist-events__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mybo-artist-events-gap, 14px);
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.mybo-artist-event__link {
	display: flex;
	flex-direction: column;
	gap: var(--mybo-artist-event-gap, 8px);
	text-decoration: none;
	color: inherit;
}

.mybo-artist-event__thumb {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--mybo-artist-radius);
	background: var(--mybo-artist-photo-bg, rgba(127, 127, 127, .18));
}

.mybo-artist-event__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.mybo-artist-event__link:hover .mybo-artist-event__thumb img,
.mybo-artist-event__link:focus-visible .mybo-artist-event__thumb img {
	transform: scale(1.04);
}

.mybo-artist-event__name {
	font-size: var(--mybo-artist-event-name-size, inherit);
	font-weight: 600;
	line-height: 1.3;
}

.mybo-artist-event__date {
	font-size: var(--mybo-artist-event-date-size, 13px);
	color: var(--mybo-artist-event-date-color, var(--mybo-artist-muted));
}

/* --------------------------------------------------------------- le foto */

.mybo-artist-gallery__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mybo-artist-gallery-gap, 10px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Bottone e non riquadro: ci si arriva col tasto Tab. Va spogliato dei suoi
   connotati, o il tema gli mette sfondo, bordo e imbottitura sue.

   IL SELETTORE NOMINA IL TAG DI PROPOSITO. Il tema scrive
   `[type="button"], [type="submit"], button { display: inline-block }`, che
   pesa quanto una classe sola e arriva DOPO il nostro foglio: a parita' di
   peso vince l'ultimo, quindi il bottone restava largo 33 px e la foto dentro
   spariva. Nominando l'elemento padre e il tag si pesa di piu' senza ricorrere
   a !important, che toglierebbe la parola a chiunque voglia rivestirlo dopo.
   Si nomina il TAG e non un antenato: aggiungere un antenato avrebbe pesato
   uguale, ma avrebbe fatto comparire una classe in piu' fra i pezzi da
   vestire in Personalizza — un pezzo che nessuno vestira' mai. */
button.mybo-artist-gallery__btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

/* IL QUADRATO VALE SOLO PER LE MINIATURE, e il selettore lo dice: nomina il
   bottone, non tutto l'elemento. Prendendo anche la foto grande bisognava poi
   disdirlo con «aspect-ratio: auto» — e quella riga cancella la regola del
   browser che ricava le proporzioni dal tag dell'immagine, l'unica cosa che
   sa quanto sarà alta una foto PRIMA che arrivi. Risultato: il riquadro si
   apriva alto 20 px, cioè vuoto, e si riempiva a scaricamento finito. */
.mybo-artist-gallery__btn img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mybo-artist-radius);
}

/* --------------------------------- la foto a comparsa (come nella fascia) */

/* Stessa veste della scheda che si apre sulle facce sotto il banner della
   rassegna — stesse variabili, quindi cambiando i colori là cambiano anche
   qui — ma dentro c'è la foto grande invece del testo. */
.mybo-artist-shot {
	/* SI APRE AL CENTRO DELLA PAGINA, sempre nello stesso punto. Appesa alla
	   miniatura andava dove capita: le foto stanno in una colonna stretta di
	   lato, quindi il riquadro sbucava a destra o a sinistra a seconda di
	   quale foto si guardava, e su quelle in fondo usciva dallo schermo. Al
	   centro l'occhio sa gia' dove guardare prima ancora che si apra, e non
	   c'e' nessun bordo da cui possa uscire.

	   `fixed` e non `absolute`: il riferimento e' la finestra, non la colonna.
	   Con `absolute` il centro sarebbe il centro della colonna, cioe' di nuovo
	   di lato. */
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 100;
	transform: translate(-50%, -50%);
	display: block;
	/* LARGHEZZA DECISA DA NOI, non «quanto è larga la foto». La foto grande
	   ha loading=lazy e sta in un ramo nascosto: quando il riquadro si apre
	   non è ancora scaricata, e finché non lo è il browser non sa quanto è
	   grande — quindi zero. Con una larghezza «a seconda del contenuto» il
	   riquadro nasceva di 16 px, cioè vuoto, e scattava alla misura giusta un
	   attimo dopo: proprio mentre la persona sta guardando. Con una larghezza
	   fissa la scatola c'è subito, e l'altezza la calcola il browser dalle
	   proporzioni scritte nel tag. */
	width: min(420px, 86vw);
	padding: 10px;
	border-radius: 12px;
	background: var(--mybo-artist-card-bg, #1c1f26);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	/* Non intercetta il mouse: uscendo dalla miniatura il riquadro si chiude,
	   e un riquadro che si mette in mezzo al puntatore lo terrebbe aperto per
	   sbaglio proprio mentre si cerca di uscirne. */
	pointer-events: none;
}

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

.mybo-artist-shot img {
	display: block;
	width: 100%;
	height: auto;
	/* NIENTE aspect-ratio qui, di proposito: le proporzioni le mette il
	   browser leggendole dal tag dell'immagine, e sono l'unica cosa che sa
	   quanto sarà alta la foto prima che arrivi. Scriverne una qualunque —
	   «auto» compreso — cancella quella regola e il riquadro nasce vuoto. */
	/* Rete per i ritratti molto alti su schermi bassi: la foto si rimpicciolisce
	   dentro il riquadro invece di uscire dallo schermo. Le bande che restano
	   sono del colore del riquadro, quindi si leggono come cornice. */
	max-height: 78vh;
	object-fit: contain;
	border-radius: 6px;
}

/* 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.
   Il riconoscimento è «sa passare col mouse», non «che larghezza ha»: un
   portatile con lo schermo touch sa fare tutti e due, un tablet nessuno dei
   due, e la larghezza non c'entra niente. */
@media (hover: hover) and (pointer: fine) {
	.mybo-artist-gallery__item:hover .mybo-artist-shot,
	.mybo-artist-gallery__item:focus-within .mybo-artist-shot {
		display: block;
	}
}

.mybo-artist-gallery__item.is-open .mybo-artist-shot {
	display: block;
}

/* --------------------------------------------------- schermi più larghi */

@media (min-width: 700px) {
	.mybo-artist-page {
		--mybo-artist-gap: 48px;
	}

	.mybo-artist-page__article {
		padding: var(--mybo-artist-page-padding, 44px 24px 84px);
	}

	/* Da qui la faccia sta ACCANTO al nome e non sopra: su uno schermo largo
	   una colonna centrata stretta lascia due deserti ai lati. */
	.mybo-artist-hero {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 30px;
	}

	.mybo-artist-hero__photo {
		width: var(--mybo-artist-photo-size-wide, 230px);
		height: var(--mybo-artist-photo-size-wide, 230px);
	}

	.mybo-artist-hero__name {
		font-size: var(--mybo-artist-name-size-wide, 44px);
	}

	.mybo-artist-links {
		justify-content: flex-start;
	}

	.mybo-artist-bio {
		margin-inline: 0;
	}

	.mybo-artist-events__list {
		grid-template-columns: repeat(var(--mybo-artist-events-cols, 4), 1fr);
	}

	/* Da qui il racconto e le foto stanno affiancati. La colonna delle foto ha
	   una misura fissa e non una frazione: cosi' le foto restano della stessa
	   grandezza qualunque sia la larghezza dello schermo, e il racconto si
	   prende tutto quello che avanza. */
	.mybo-artist-cols {
		grid-template-columns: 1fr var(--mybo-artist-side-width, 300px);
		align-items: start;
	}

	/* Senza foto la colonna non esiste e il racconto si prende tutto: una
	   colonna vuota lascerebbe mezza pagina bianca sugli artisti con una foto
	   sola. */
	.mybo-artist-cols:not(:has(.mybo-artist-cols__side)) {
		grid-template-columns: 1fr;
	}

	.mybo-artist-gallery__list {
		grid-template-columns: repeat(var(--mybo-artist-gallery-cols, 2), 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mybo-artist-page * {
		transition-duration: .01ms !important;
	}
}