/**
 * eBoots — Sezione "Cosa indossano gli eBoots players"
 * ----------------------------------------------------
 * Stile della parte condivisa templates/parts/players-section.php.
 * Estratto da home.css perché ora la sezione è riusata anche sugli archivi
 * prodotto (incastrata dopo le prime 4 card della collezione, vedi mockup).
 * Enqueued su home + archivi prodotto (inc/enqueue.php).
 *
 * Dipende dai token (tokens.css).
 */

/* ========================================================================
   COSA INDOSSANO I PLAYERS — carosello dal CPT eboots_player
   ======================================================================== */
.eb-players {
	/* gutter orizzontale sulla sezione (vedi nota .eb-news): il track taglia la 4ª. */
	padding: var(--space-7) var(--space-5);
	background: var(--surface);
	border-top: 1px solid var(--line);
}
.eb-players__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-d);
	font-weight: 800;
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--txt);
}
.eb-players__title-line {
	display: block;
}
.eb-players__title-accent {
	color: var(--volt);
}

.eb-players__track {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--space-2);
}
.eb-players__track::-webkit-scrollbar {
	display: none;
}

.eb-players__card {
	position: relative;
	container-type: inline-size; /* testo proporzionale alla larghezza della card (cqi) */
	/* esattamente 3 card: 3×basis + 2×gap = larghezza del track */
	flex: 0 0 calc((100% - 2 * var(--space-2)) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	aspect-ratio: 1 / 2;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* Header: avatar tondo + nickname (link IG) — sovrapposto in alto sulla foto */
.eb-players__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 3cqi;
	padding: clamp(0.4rem, 5cqi, 0.75rem);
}
.eb-players__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	width: clamp(24px, 26cqi, 36px);
	height: clamp(24px, 26cqi, 36px);
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line-strong);
}
.eb-players__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eb-players__nick {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; /* handle lunghi: 1 riga + … */
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: clamp(0.72rem, 8cqi, 0.95rem);
	color: var(--txt);
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.eb-players__nick:hover,
.eb-players__nick:focus-visible {
	color: var(--volt);
}

/* Foto = sfondo dell'intera card (head e info sono sovrapposti) */
.eb-players__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--surface);
}
/* absolute + inset:0 → riempie sempre, immune al `img{height:auto}` di Blocksy */
.eb-players__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
.eb-players__img--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(120% 120% at 50% 0%, rgba(199, 247, 63, 0.12), transparent 60%), var(--surface);
}
/* Scrim: scurisce alto (per avatar/nick) e basso (per categoria/squadra/modello). */
.eb-players__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.88) 100%);
	pointer-events: none;
}

/* Footer: categoria (⚽) · squadra (volt) · modello (👟) — sovrapposto in basso */
.eb-players__info {
	position: relative;
	z-index: 1;
	margin-top: auto; /* spinge il blocco in fondo alla card */
	display: flex;
	flex-direction: column;
	gap: 1.5cqi;
	padding: clamp(0.5rem, 5cqi, 0.75rem) clamp(0.6rem, 6cqi, 1rem) clamp(0.7rem, 6cqi, 1rem);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.eb-players__cat {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 2cqi;
	font-family: var(--font-ui);
	font-size: clamp(0.7rem, 7.5cqi, 0.9rem);
	color: var(--txt);
}
.eb-players__boot {
	margin: 0;
	display: flex;
	align-items: flex-start; /* icona allineata alla 1ª riga del testo (può andare a 2 righe) */
	gap: 2cqi;
	font-family: var(--font-ui);
	font-size: clamp(0.7rem, 7.5cqi, 0.9rem);
	color: var(--txt);
}
.eb-players__ico {
	flex: 0 0 auto;
}
/* categoria: 1 riga + … */
.eb-players__cat-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* modello: max 2 righe + … */
.eb-players__boot-text {
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eb-players__team {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(0.95rem, 12cqi, 1.35rem);
	line-height: 1.05;
	color: var(--volt);
	/* squadre lunghe: max 2 righe + … */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eb-players__empty {
	margin: 0;
	font-family: var(--font-ui);
	color: var(--muted);
}

/* Immagine segnaposto (Customizer → "eBoots — Players (segnaposto)"):
   banner mostrato al posto del carosello finché non ci sono players. */
.eb-players__placeholder-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.eb-players__join {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
	margin-top: var(--space-6);
}
.eb-players__join-text {
	margin: 0;
	max-width: 36ch;
	font-family: var(--font-ui);
	font-size: 1rem;
	color: var(--txt);
}
/* Bottone "Taggaci": stile pill = utility .eb-btn--volt (base.css). */

@media (min-width: 1024px) {
	.eb-players {
		padding-block: var(--space-8);
		padding-inline: max(var(--space-8), calc((100% - 1200px) / 2));
	}
	.eb-players__title {
		margin: 0 0 var(--space-6);
		font-size: 2.75rem;
	}
	.eb-players__track {
		padding: 0 0 var(--space-2);
		gap: var(--space-4);
	}
	.eb-players__card {
		flex-basis: calc((100% - 3 * var(--space-4)) / 4); /* esattamente 4 card */
	}
}