/**
 * Pagina "Indice confronti" (page-templates/indice-confronti.php): tre card
 * affiancate da desktop, in colonna singola da mobile. Stesso linguaggio
 * visivo delle altre card del tema (sfondo superficie, bordo sottile, raggio
 * medio, icona su .btc-icon-chip come negli Hub Tematici).
 */

.btc-indice-confronti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
	margin: var(--space-6) 0;
}

.btc-indice-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-md);
}

.btc-indice-card-icona { width: 44px; height: 44px; }

.btc-indice-card-titolo {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 19px;
	line-height: 1.25;
	color: var(--color-text-primary);
}

.btc-indice-card-descrizione {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-secondary);
}

/* Il pulsante sta sempre in fondo alla card, così le tre restano allineate
   anche con descrizioni di lunghezza diversa. */
.btc-indice-card-pulsante {
	margin-top: auto;
	width: 100%;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}
/* Specificità maggiore di ".btc-content a" (colore link, sottolineatura),
   altrimenti il testo del pulsante verrebbe verde su verde. */
.btc-indice-card .btc-indice-card-pulsante,
.btc-indice-card .btc-indice-card-pulsante:hover {
	color: var(--color-on-action-primary);
	text-decoration: none;
}

@media (max-width: 767px) {
	.btc-indice-confronti { grid-template-columns: 1fr; gap: var(--space-3); }
	.btc-indice-card { padding: var(--space-4); }
}