/*
 * Componente: blocco campionato con calendario.
 *
 * I tagli obliqui sono fatti con clip-path e sfumature, non con transform:
 * skew — quello deformerebbe anche il testo dentro il contenitore.
 *
 * La radice porta anche la classe .sh-championship: prima il CSS la usava ma
 * il markup non la emetteva, e il blocco usciva senza card né colonne.
 */

.sh-championship {
	position: relative;
	display: grid;
	overflow: hidden;
	background-color: var(--sh-card);
	border: 1px solid var(--sh-line);
	color: var(--sh-ink);
}

/* ==== Colonna del campionato ==== */

.sh-championship__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sh-space-sm);
	padding: var(--sh-space-lg) var(--sh-space-md);
}

@media (min-width: 768px) {
	.sh-championship__intro {
		padding: var(--sh-space-xl) var(--sh-space-lg);
	}
}

.sh-championship__logo img {
	display: block;
	width: auto;
	max-width: min(100%, 300px);
	height: auto;
	max-height: 110px;
	object-fit: contain;
}

.sh-championship__name {
	margin: 0;
}

.sh-championship__description {
	margin: 0;
	max-width: 42ch;
	color: var(--sh-muted);
	line-height: 1.55;
}

/* In fondo alla colonna, allineati alla base della card come nel mockup. */
.sh-championship__sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sh-space-md);
	margin: auto 0 0;
	padding: var(--sh-space-md) 0 0;
	list-style: none;
}

.sh-championship__sponsors img {
	display: block;
	width: auto;
	max-height: 36px;
	object-fit: contain;
}

/* ==== Colonna del calendario ==== */

.sh-championship__calendar {
	position: relative;
	padding: 0 var(--sh-space-md) var(--sh-space-md);
	background-color: color-mix(in srgb, var(--sh-bg) 60%, var(--sh-card));
	border-block-start: 1px solid var(--sh-line);
}

@media (min-width: 1024px) {
	.sh-championship {
		--cut: 3.5rem;
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}

	.sh-championship__calendar {
		padding: 0 calc(var(--sh-space-xl) + var(--sh-space-sm)) var(--sh-space-md) calc(var(--cut) + var(--sh-space-sm));
		border-block-start: 0;
		clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
	}

	/* Filo obliquo lungo il taglio: parte dove comincia la seconda colonna (4 su 11). */
	.sh-championship::before {
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(100% * 4 / 11);
		z-index: 1;
		width: var(--cut);
		background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--sh-line) 50%, transparent calc(50% + 0.5px));
		pointer-events: none;
		content: "";
	}

	/* Filo rosso obliquo sul lato destro. */
	.sh-championship::after {
		position: absolute;
		inset-block: var(--sh-space-lg) 0;
		inset-inline-end: var(--sh-space-sm);
		width: var(--sh-space-lg);
		background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sh-red) 50%, transparent calc(50% + 1px));
		pointer-events: none;
		content: "";
	}
}

.sh-championship__badge {
	display: inline-block;
	margin: 0 0 var(--sh-space-2xs);
	padding: 0.5rem var(--sh-space-lg) 0.5rem var(--sh-space-md);
	background-color: var(--sh-red);
	clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
	color: var(--sh-c-white);
}

.sh-championship__races {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-championship__race {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--sh-space-sm);
	padding-block: var(--sh-space-xs);
	border-block-end: 1px solid var(--sh-line);
}

.sh-championship__race:last-child {
	border-block-end: 0;
}

.sh-championship__race-icon {
	color: var(--sh-red);
}

.sh-championship__race-date {
	min-width: 3.4em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Il filo verticale fra data e circuito. */
.sh-championship__race-circuit {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-inline-start: var(--sh-space-sm);
	border-inline-start: 1px solid var(--sh-line);
	font-family: var(--sh-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sh-championship__race-subtitle {
	color: var(--sh-red-text);
	font-weight: 700;
}

.sh-championship__race-track {
	display: flex;
	color: var(--sh-ink);
}

.sh-championship__race-track svg {
	width: 76px;
	height: 34px;
}

/* Tracciati con viewBox diversi: stesso spessore del tratto per tutti. */
.sh-championship__race-track svg * {
	vector-effect: non-scaling-stroke;
}

.sh-championship__empty {
	color: var(--sh-muted);
}

/* Telefono: data e circuito restano leggibili, il tracciato decorativo lascia spazio. */
@media (max-width: 479px) {
	.sh-championship__race {
		grid-template-columns: auto auto minmax(0, 1fr);
		column-gap: var(--sh-space-xs);
	}

	.sh-championship__race-track {
		display: none;
	}

	.sh-championship__race-circuit {
		padding-inline-start: var(--sh-space-xs);
		font-size: 0.9375rem;
	}
}