/*
 * blocks/currency-stats.css — comparatif temporaire, variante C.
 * Grille de "stats" divisées par un filet (inspiré de .grid--stats-divided
 * dans guest.css), code devise en typographie énorme, quasi monochrome.
 */

.currency-stats__count { display: inline-flex; margin-top: var(--s4); }

.currency-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: var(--s12);
}

.currency-stats__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--s2);
	padding: var(--s6) var(--s4);
}
.currency-stats__item:not(:nth-child(4n+1))::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--s4);
	bottom: var(--s4);
	width: 1px;
	background: var(--line);
}

.currency-stats__code-row { display: flex; align-items: center; gap: var(--s2); }
.currency-stats__code { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.currency-stats__flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); align-self: flex-start; }
.currency-stats__name { font-size: .85rem; color: var(--muted); overflow-wrap: break-word; }
.currency-stats__meta { font-size: .72rem; color: var(--teal); font-weight: 700; }

/* Accent — la devise la plus "couverte" (première tuile) guide l'œil. */
.currency-stats__item:first-child .currency-stats__code { color: var(--teal); }
.currency-stats__item:first-child .currency-stats__flag { border-color: var(--signal); }

.currency-stats__foot { text-align: center; margin-top: var(--s10); }

@media (max-width: 900px) {
	.currency-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.currency-stats__item:nth-child(2n+1)::before { content: none; }
	.currency-stats__item:not(:nth-child(2n+1))::before { content: ""; }
}

@media (max-width: 560px) {
	.currency-stats__grid { grid-template-columns: repeat(2, 1fr); }
}