/* ==========================================================================
   NEXT MATCHES — "Prossime partite"
   ========================================================================== */

.match-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.match-card {
	background: var(--ev-card);
	border-radius: 10px;
	border-left: 3px solid var(--ev-acqua);
	overflow: hidden;
}

/* ── Fascia campionato ── */
.match-cat {
	font-family: var(--ev-font-body);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ev-acqua);
	background: rgba(124, 200, 220, .1);
	padding: 9px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	align-items: center;
	display: flex;
	justify-content: space-between;
}

/* ── Fascia squadre ──
   Il contenuto NON si allarga a piena card: resta raggruppato e
   centrato, così anche su una card a piena larghezza pagina il
   blocco "squadra vs squadra" non si spezza in due estremi lontani. */
.match-content {
	display: grid;
	grid-template-columns: minmax(0, 300px) 56px minmax(0, 300px);
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 20px 24px 14px;
	max-width: 900px;
	margin: 0 auto;
}

.match-side {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	/* permette all'ellissi di funzionare dentro grid */
}

.match-side--home {
	align-items: flex-start;
	text-align: left;
}

.match-side--away {
	align-items: flex-end;
	text-align: right;
}

.match-team,
.match-opponent {
	font-family: var(--ev-font-display);
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	color: #E2E8F0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.match-vs {
	font-family: var(--ev-font-display);
	font-weight: 800;
	font-size: 18px;
	color: var(--ev-orange);
	text-align: center;
}

.badge-orange {
	display: inline-block;
	align-self: inherit;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 3px;
	background: rgba(249, 115, 22, .12);
	color: var(--ev-orange);
	border: 1px solid rgba(249, 115, 22, .3);
	margin: 0;
}

/* ── Fascia orario/luogo ──
   Stessa logica: contenuto raggruppato e centrato, non ai due estremi. */
.match-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding: 12px 24px 18px;
	border-top: 1px solid rgba(255, 255, 255, .05);
}

.match-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ev-font-body);
	font-size: 13px;
	font-weight: 500;
	color: #94A3B8;
}

.match-meta-item svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: .85;
	color: var(--ev-acqua);
}

.match-date {
	color: var(--ev-acqua);
	font-weight: 700;
}

.match-loc a {
	color: #94A3B8;
	text-decoration: none;
	border-bottom: 1px dotted rgba(148, 163, 184, .4);
}

.match-loc a:hover {
	color: var(--ev-acqua);
	border-bottom-color: var(--ev-acqua);
}

.match-empty {
	font-size: 13px;
}

/* ── Mobile ── */
@media (max-width: 640px) {
	.match-content {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 10px;
		padding: 18px 20px 12px;
	}

	.match-side--home,
	.match-side--away {
		align-items: center;
		text-align: center;
	}

	.match-team,
	.match-opponent {
		white-space: normal;
	}

	.match-meta {
		justify-content: center;
		text-align: center;
	}
}