/**
 * Key figures: the band under a sheet's title.
 *
 * @package cab-rail-collection
 */

/*
 * EN FLEX ET NON EN GRILLE, pour la dernière rangée. Une grille fige ses
 * pistes sur la première ligne : huit cases sur une bande qui en tient sept
 * laissaient la huitième seule et étroite au début d'une seconde rangée. En
 * flex, les cases de la dernière rangée s'étalent sur ce qui reste, et la
 * bande se referme proprement quel que soit leur nombre — trois sur une
 * vapeur, huit sur une automotrice.
 *
 * Les cases se touchent par un filet d'un pixel obtenu par le fond du cadre
 * qui transparaît dans la gouttière : une bordure par case doublerait les
 * traits intérieurs.
 */
.cab-chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
	border: 2px solid var(--wp--preset--color--brand-blue, #06668c);
	border-radius: 15px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue, #06668c) 22%, transparent);
	overflow: hidden;
}

/*
 * Les cases se touchent par un filet d'un pixel, obtenu par le fond du cadre
 * qui transparaît dans la gouttière : une bordure par case doublerait les
 * traits intérieurs et il faudrait ensuite en retirer un sur deux.
 */
.cab-chiffres__case {
	display: flex;
	flex: 1 1 9rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	padding: 0.85rem 0.75rem;
	background: var(--wp--preset--color--white, #fff);
	text-align: center;
}

.cab-chiffres__nom {
	color: color-mix(in srgb, currentColor 65%, transparent);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cab-chiffres__valeur {
	color: var(--wp--preset--color--brand-blue, #06668c);
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

/*
 * L'IMAGE DU TERME, À CÔTÉ DE SON NOM. Une case de taxinomie peut en porter
 * une : le logo d'une compagnie, le drapeau d'un pays, la vignette d'une
 * époque. Elle se pose à gauche du nom, comme dans la tuile de la marque.
 *
 * La case est CARRÉE et l'image tient dedans, entière : `contain` et non
 * `cover`, parce qu'un logo rogné n'est plus le logo.
 */
.cab-chiffres__ligne {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 0;
}

.cab-chiffres__logo {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	object-position: center;
}

.cab-chiffres__unite {
	color: color-mix(in srgb, currentColor 65%, transparent);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.2;
}

/* Une échelle ou une époque mène à la liste de ce qui les partage. */
.cab-chiffres__lien {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	text-decoration: none;
}

.cab-chiffres__lien:hover .cab-chiffres__valeur,
.cab-chiffres__lien:focus-visible .cab-chiffres__valeur {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Un mot n'est pas un chiffre. Une échelle ou une époque s'écrit en toutes
 * lettres — « Epoque IV – de 1971 à 1990 » — et prise dans le corps réservé
 * aux nombres elle déborde de sa case sans rien dire de plus.
 */
.cab-chiffres__case--mot .cab-chiffres__valeur {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}


/*
 * UNE CASE QUI A QUELQUE CHOSE À DIRE. Rien ne distinguait celle qui ouvre une
 * infobulle de celle qui n'en a pas : elle s'éclaire au survol, du même bleu
 * très pâle que les tuiles de la fiche, pour qu'on sache qu'il y a à lire.
 */
@media (hover: hover) {
	.cab-chiffres__case.cab-bulle-hote {
		transition: background-color 0.15s ease;
	}

	.cab-chiffres__case.cab-bulle-hote:hover {
		background: color-mix(in srgb, var(--wp--preset--color--brand-blue, #06668c) 7%, var(--wp--preset--color--white, #fff));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-chiffres__case.cab-bulle-hote {
		transition: none;
	}
}