/**
 * MyBoxOffice — Crediti extra dell'evento (artisti, ruoli, sponsor).
 *
 * Regola d'oro del progetto: qui NON ci sono valori decisi dal programmatore.
 * Ogni proprietà visiva passa da una variabile `--mybo-credits-*` governata
 * dalla pagina Personalizza; i valori scritti dopo la virgola sono solo il
 * ripiego se l'admin non ha ancora toccato niente.
 *
 * Restano fissi solo i comportamenti strutturali (griglia, allineamenti,
 * a capo su schermo piccolo), che sono layout e non stile.
 */

.mybo-credits {
	background: var(--mybo-credits-bg, transparent);
	color: var(--mybo-credits-color, inherit);
	border: var(--mybo-credits-border-width, 0) solid var(--mybo-credits-border-color, transparent);
	border-radius: var(--mybo-credits-radius, 8px);
	padding: var(--mybo-credits-padding, 0);
	margin: var(--mybo-credits-margin, 24px 0);
	max-width: var(--mybo-credits-max-width, 100%);
	font-family: var(--mybo-credits-font, inherit);
}

/* --- Titolo della sezione ------------------------------------------------ */

.mybo-credits__title {
	font-size: var(--mybo-credits-title-size, 1.25rem);
	font-weight: var(--mybo-credits-title-weight, 700);
	color: var(--mybo-credits-title-color, inherit);
	text-align: var(--mybo-credits-title-align, left);
	text-transform: var(--mybo-credits-title-transform, none);
	letter-spacing: var(--mybo-credits-title-spacing, 0);
	margin: var(--mybo-credits-title-margin, 0 0 12px);
}

/* --- Righe ruolo + nome --------------------------------------------------- */

.mybo-credits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--mybo-credits-cols, 1), minmax(0, 1fr));
	gap: var(--mybo-credits-row-gap, 6px) var(--mybo-credits-col-gap, 24px);
}

.mybo-credits__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mybo-credits-role-gap, 8px);
	padding: var(--mybo-credits-row-padding, 0);
	border-bottom: var(--mybo-credits-row-border-width, 0) solid var(--mybo-credits-row-border-color, transparent);
}

.mybo-credits__role {
	flex: 0 0 var(--mybo-credits-role-width, auto);
	font-size: var(--mybo-credits-role-size, 0.95rem);
	font-weight: var(--mybo-credits-role-weight, 700);
	color: var(--mybo-credits-role-color, inherit);
	text-transform: var(--mybo-credits-role-transform, none);
}

.mybo-credits__name {
	font-size: var(--mybo-credits-name-size, 0.95rem);
	font-weight: var(--mybo-credits-name-weight, 400);
	color: var(--mybo-credits-name-color, inherit);
}

/* --- Sponsor -------------------------------------------------------------- */

.mybo-credits__sponsors {
	margin-top: var(--mybo-credits-sponsors-top, 20px);
	padding-top: var(--mybo-credits-sponsors-padding-top, 0);
	border-top: var(--mybo-credits-sponsors-border-width, 0) solid var(--mybo-credits-sponsors-border-color, transparent);
}

.mybo-credits__sponsors-title {
	font-size: var(--mybo-credits-sponsors-title-size, 0.9rem);
	font-weight: var(--mybo-credits-sponsors-title-weight, 600);
	color: var(--mybo-credits-sponsors-title-color, inherit);
	text-align: var(--mybo-credits-sponsors-title-align, left);
	text-transform: var(--mybo-credits-sponsors-title-transform, uppercase);
	letter-spacing: var(--mybo-credits-sponsors-title-spacing, 0.06em);
	margin: var(--mybo-credits-sponsors-title-margin, 0 0 10px);
}

/* Flex e non griglia: con una griglia a colonne fisse un solo logo resterebbe
 * inchiodato nella prima colonna, cioè spostato a sinistra e sbilanciato. Qui
 * ogni logo occupa la frazione di riga decisa dall'admin ("loghi per riga") ma
 * la fila si dispone secondo la posizione scelta, quindi due sponsor stanno
 * al centro come ci si aspetta. */
.mybo-credits__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--mybo-credits-logo-justify, center);
	gap: var(--mybo-credits-logo-gap, 18px);
}

.mybo-credits__logo {
	flex: 0 1 calc(
		(100% - (var(--mybo-credits-logo-cols, 4) - 1) * var(--mybo-credits-logo-gap, 18px))
		/ var(--mybo-credits-logo-cols, 4)
	);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mybo-credits__logo img {
	display: block;
	max-width: 100%;
	width: auto;
	max-height: var(--mybo-credits-logo-height, 60px);
	height: auto;
	object-fit: contain;
	opacity: var(--mybo-credits-logo-opacity, 1);
	filter: var(--mybo-credits-logo-filter, none);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.mybo-credits__logo a:hover img {
	opacity: var(--mybo-credits-logo-hover-opacity, 1);
	filter: var(--mybo-credits-logo-hover-filter, none);
}

/* Sponsor senza logo caricato: non sparisce, si mostra il nome. */
.mybo-credits__logo-text {
	font-size: var(--mybo-credits-logo-text-size, 0.9rem);
	font-weight: var(--mybo-credits-logo-text-weight, 600);
	color: var(--mybo-credits-logo-text-color, inherit);
}

/* --- Struttura su schermo piccolo ---------------------------------------- *
 * Qui SOLO comportamento: le colonne le decide l'admin per ogni dispositivo
 * (il sistema responsive riemette le stesse variabili dentro le media query),
 * quindi niente `!important` su proprietà che l'admin governa già.          */

@media (max-width: 600px) {
	.mybo-credits__row {
		flex-direction: column;
		gap: 2px;
	}
}