/*
 * Componente: pacchetti sponsor.
 *
 * Flex e non grid, come la griglia del team: con due pacchetti, o con l'ultima
 * riga incompleta su tablet, le card restano centrate.
 */

.sh-pricing-plans {
	--plan-cols: 1;
	--plan-gap: var(--sh-space-md);
}

@media (min-width: 768px) {
	.sh-pricing-plans { --plan-cols: 2; }
}

@media (min-width: 1024px) {
	.sh-pricing-plans--cols-3 { --plan-cols: 3; }
	.sh-pricing-plans--cols-4 { --plan-cols: 4; }
}

.sh-pricing-plans__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--plan-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-pricing-plans__item {
	flex: 0 0 calc((100% - (var(--plan-cols) - 1) * var(--plan-gap)) / var(--plan-cols));
	min-width: 0;
}

/* ==== Card ==== */

.sh-plan {
	/* Colore del nome: ogni variante ridefinisce solo questa variabile. */
	--plan-accent: var(--sh-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sh-space-md);
	height: 100%;
	padding: var(--sh-space-lg) var(--sh-space-md);
	background-color: var(--sh-card);
	border: 1px solid var(--sh-line);
	color: var(--sh-ink);
	text-align: center;
}

.sh-plan--featured {
	border-color: var(--sh-red);
	/* Un secondo filo interno: il bordo si legge anche sul fondo quasi nero. */
	box-shadow: inset 0 0 0 1px var(--sh-red);
}

.sh-plan__head {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-3xs);
}

.sh-plan__name {
	margin: 0;
	color: var(--plan-accent);
}

.sh-plan__subtitle {
	margin: 0;
	color: var(--sh-ink);
	font-weight: 500;
}

/*
 * Bronzo e oro non esistono nella palette e non si ottengono mescolando rosso,
 * neri e grigi: la tinta resterebbe rossa. Si derivano dal rosso del brand
 * cambiando luminosità, saturazione e tinta con la sintassi relativa dei
 * colori; dove non è supportata il nome resta nel colore del testo.
 * Se il brand fisserà i propri valori, vanno promossi a token.
 */
.sh-plan--red { --plan-accent: var(--sh-red-text); }

.sh-plan--platinum {
	--plan-accent: color-mix(in srgb, var(--sh-muted) 80%, var(--sh-ink));
}

@supports (color: oklch(from red l c h)) {
	.sh-plan--bronze { --plan-accent: oklch(from var(--sh-red) 0.7 0.11 55); }
	.sh-plan--gold { --plan-accent: oklch(from var(--sh-red) 0.8 0.13 80); }

	/* Su fondo chiaro le stesse tinte vanno scurite per restare leggibili. */
	.sh-scheme--light .sh-plan--bronze { --plan-accent: oklch(from var(--sh-red) 0.52 0.11 55); }
	.sh-scheme--light .sh-plan--gold { --plan-accent: oklch(from var(--sh-red) 0.58 0.12 80); }
}

/* ==== Vantaggi ==== */

/* Blocco centrato nella card, testo allineato a sinistra: si legge come elenco. */
.sh-plan__features {
	display: grid;
	gap: var(--sh-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: start;
}

.sh-plan__feature {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	align-items: start;
	gap: var(--sh-space-2xs);
}

.sh-plan__check {
	margin-block-start: 0.15em;
	color: var(--sh-ink);
}

.sh-plan--featured .sh-plan__check {
	color: var(--sh-red-text);
}

/* ==== Prezzo e bottone ==== */

/* In fondo alla card: i prezzi restano allineati anche con elenchi di lunghezza diversa. */
.sh-plan__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sh-space-sm);
	width: 100%;
	margin-block-start: auto;
	padding-block-start: var(--sh-space-sm);
}

.sh-plan__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sh-space-3xs);
	margin: 0;
}

.sh-plan__price-value {
	text-transform: uppercase;
}

.sh-plan__price-note {
	color: var(--sh-muted);
	font-size: 0.8125rem;
}

.sh-plan__cta {
	justify-content: center;
	min-width: min(100%, 12rem);
}