/**
 * Specifications block.
 *
 * @package cab-rail-collection
 */

.cab-spec {
	display: grid;
	gap: var(--wp--preset--spacing--50, 2rem);
}

/*
 * « À PLAT » : LE GROUPE N'EST PAS UNE CARTE. Une partie qui ouvre le texte de
 * la page — « Le modèle réduit », comme « La machine réelle » au-dessus — n'est
 * pas un encart posé dedans : elle EST la page à cet endroit. Son titre garde
 * son filet, elle perd le cadre.
 */
/*
 * Sauf les cartes d'identité : une marque ou une livrée est une mention
 * POSÉE DANS la partie, pas la partie elle-même. Elle garde son cadre là où
 * le groupe qui la porte perd le sien.
 */
.cab-spec--plat .cab-spec__group:not(.cab-spec__group--operateur) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
/*
 * CHAQUE GROUPE EST UNE CARTE. Empilées sans limite visible, les sections
 * d'une fiche de onze mille pixels se lisent comme un seul mur : rien ne dit
 * où « La machine réelle » finit et où « Le modèle réduit » commence. Le filet
 * et les angles sont ceux que le site donne déjà à ses images, pour que la
 * fiche appartienne à la même famille.
 */
.cab-spec__group {
	padding: clamp(1rem, 3vw, 1.75rem);
	border: 2px solid var(--wp--preset--color--brand-blue, #06668c);
	border-radius: 15px;
	background: var(--wp--preset--color--white, #fff);
	/*
	 * Le sommaire du thème se colle sous l'en-tête : l'ancre s'arrête juste
	 * dessous. La hauteur de la barre est mesurée par le script, parce
	 * qu'elle dépend du texte des gélules et de la largeur de l'écran.
	 */
	scroll-margin-top: calc(
		var(--cab-header-bottom, 127px) + var(--cab-sommaire-place, 0px) + 0.75rem
		- var(--cab-sommaire-bandeau, 0px)
	);
}

/*
 * LE TITRE À PLAT RESPIRE COMME CELUI DU THÈME. Hors carte — « Le modèle
 * réduit », qui ouvre sa bande — ce titre est un titre de partie, pas l'en-tête
 * d'un encadré : il prend donc les deux rem que `cab-fiche__section-titre`
 * prend sous son filet. Dans une carte, il garde ses 0,6 rem : là, le cadre
 * tient déjà le titre et son contenu ensemble.
 */
.cab-spec--plat .cab-spec__title {
	margin-block-end: 2rem;
}

/*
 * LE TITRE DEHORS, LE CADRE AUTOUR DU RESTE. La section dépose sa carte — elle
 * n'est plus qu'un conteneur, qui garde l'ancre — et c'est son corps qui la
 * reprend. Le titre se lit donc comme « La machine réelle » et « Le modèle
 * réduit », et prend le même air sous son filet, mais ce qu'il annonce reste
 * encadré.
 */
.cab-spec__group--titre-dehors {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.cab-spec__group--titre-dehors > .cab-spec__title {
	margin-block-end: 2rem;
}

.cab-spec__group--titre-dehors > .cab-spec__corps {
	padding: 19px;
	border: 2px solid var(--wp--preset--color--brand-blue, #06668c);
	border-radius: 15px;
	background: var(--wp--preset--color--white, #fff);
}

/* Ce que le corps reçoit en premier ne rajoute pas sa marge au padding. */
.cab-spec__group--titre-dehors > .cab-spec__corps > :first-child {
	margin-block-start: 0;
}

.cab-spec__group--titre-dehors > .cab-spec__corps > :last-child {
	margin-block-end: 0;
}

/*
 * ET SOUS LA BANDE DE TUILES, le même dégagement. « À propos de mon modèle »
 * ouvre un texte suivi : c'est une autre manière de lire, pas la suite de la
 * précédente. Dix-sept pixels le collaient au cadre des tuiles, dont il n'est
 * pourtant pas la dernière ligne.
 *
 * Deux rem, comme sous le filet du titre : dans cette bande, une partie qui
 * commence prend toujours le même air.
 */
.cab-spec--plat .cab-spec__list + .cab-spec__blocs {
	margin-block-start: 2rem;
}

/*
 * LES SOUS-TITRES DU TEXTE SUIVI. Un titre ecrit dans « A propos de mon
 * modele » n'avait aucune marge a lui : il prenait celle du navigateur, la
 * meme au-dessus qu'au-dessous. Il flottait donc entre le paragraphe qui
 * precede et la liste qu'il annonce, sans appartenir a l'un ni a l'autre.
 *
 * Les deux valeurs ne sont pas choisies ici : ce sont celles que cette bande
 * emploie deja. Deux rem quand une partie commence — comme sous le filet du
 * titre et sous la bande de tuiles — et les 0,6 rem que `.cab-spec__title`
 * laisse sous lui. Un titre appartient a ce qui le suit.
 */
.cab-spec__bloc dd :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 2rem;
	margin-block-end: 0.6rem;
}

/* Ce qui ouvre le texte ne rajoute pas sa marge a celle du bloc. */
.cab-spec__bloc dd > :first-child {
	margin-block-start: 0;
}

.cab-spec__title {
	margin: 0 0 0.6rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid currentColor;
	font-size: var(--wp--preset--font-size--large, 1.5rem);
}

/*
 * LE CORPS SUIT LE NIVEAU. Le titre d'un groupe se pose en h2 quand le groupe
 * est une partie de la page, en h3 quand il est un encart posé dans une autre
 * partie — et la taille doit le dire. Sans cela « Sous les couleurs de
 * Lufthansa Airport Express », en h3, s'écrivait dans les 23 px de « La
 * machine réelle » qui le contient : deux titres du même corps, dont l'un est
 * dans l'autre.
 *
 * Les 18 px sont ceux des sous-titres de même niveau — « Photos de la machine
 * réelle », « Identité » — pour que tout ce qui est h3 se lise pareil.
 */
h3.cab-spec__title {
	font-size: var(--wp--preset--font-size--medium, 1.2rem);
}

h4.cab-spec__title {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.cab-spec__subtitle {
	margin: 1.25rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium, 1.2rem);
}

/*
 * EN TUILES, COMME LE BANDEAU DU HAUT. Les valeurs d'une fiche sont courtes —
 * une échelle, une référence, un mode de commande — et rangées en colonnes
 * d'étiquettes elles se serraient : mesuré sur « Le modèle réduit », trois
 * colonnes de 318 px ne laissaient que 144 px à l'étiquette et 162 à la
 * valeur, et « mes automotrices DB403 005 & DB403 006 » s'y cassait en quatre
 * lignes contre l'étiquette voisine.
 *
 * La bande de chiffres du haut de la fiche résout déjà ce problème : une case
 * par fait, l'étiquette en petit au-dessus, la valeur en grand dessous. C'est
 * la même ici, aux mêmes mesures, pour que la fiche n'ait qu'une manière de
 * présenter un fait.
 *
 * Les cases se touchent par un filet d'un pixel obtenu par le fond du cadre :
 * une bordure par case doublerait les traits intérieurs.
 */
.cab-spec__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0;
	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;
}

.cab-spec__row {
	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-spec__row dt {
	margin: 0;
	color: color-mix(in srgb, currentColor 65%, transparent);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cab-spec__row dd {
	margin: 0;
	color: var(--wp--preset--color--brand-blue, #06668c);
	font-size: var(--wp--preset--font-size--medium, 1.2rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.cab-spec__row dd a {
	color: inherit;
}

/*
 * Une phrase se lit, un chiffre se pose. La même distinction que dans le
 * bandeau du haut, aux mêmes mesures — sans quoi « mes automotrices DB403 005
 * & DB403 006 (EMU 3) », écrit dans le corps réservé aux nombres, remplissait
 * sa case à lui seul.
 */
.cab-spec__row--mot dd {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}
/*
 * UN TEXTE SUIVI N'EST PAS UNE TUILE. « À propos de mon modèle », une liste de
 * références, un tableau : ils sortent de la bande et se posent dessous, à la
 * ligne, alignés à gauche comme tout ce qui se lit.
 */
.cab-spec__blocs {
	display: grid;
	gap: 0.75rem;
	margin: 1.1rem 0 0;
}

.cab-spec__bloc {
	display: grid;
	gap: 0.25rem;
}

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

.cab-spec__bloc dd {
	margin: 0;
}

.cab-spec__bloc dd > :first-child {
	margin-block-start: 0;
}

.cab-spec__bloc dd > :last-child {
	margin-block-end: 0;
}

.cab-spec__bloc dd :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

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

/*
 * Les photographies d'une fiche sont rendues par le bloc galerie du cœur, avec
 * les formes et le survol du thème : il ne reste rien à habiller ici. La liste
 * que ce fichier dessinait avant — une grille de `<li>` et un lien vers le
 * fichier — coupait ces pages de la visionneuse et de tout le reste.
 */

/*
 * L'habillage de la carte de livree — `.cab-operateur*` — est parti avec elle :
 * le logo et le nom sont dans une tuile, qui a le sien.
 */

/* --------------------------------------------------------------------------
   La tuile de la marque

   Une marque se reconnaît à son logo avant de se lire : les deux vont
   ensemble dans la case, le logo devant le nom. La tuile entière mène à
   l'archive de la marque, où sont les autres pièces qui en viennent.
   -------------------------------------------------------------------------- */

.cab-spec__marque {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

/*
 * UNE CASE CARRÉE, ET L'IMAGE DEDANS. Les logos n'ont pas tous la même forme —
 * Lima est presque carré, d'autres sont des bandeaux — et un emplacement qui
 * suivrait chacun ferait danser le nom d'une fiche à l'autre. La case est donc
 * fixe et l'image s'y loge entière, `contain`, centrée sur ce qui reste.
 */
.cab-spec__marque .cab-spec__logo {
	width: 3rem;
	height: 3rem;
	flex: none;
	object-fit: contain;
	object-position: center;
}

/*
 * TOUTE LA TUILE EST LE LIEN. Le lien ne faisait que 112 px de large et 48 de
 * haut dans une case de 174 : on cliquait sur l'étiquette, sur la marge, sur
 * l'espace sous le nom — et rien ne se passait. Rien ne disait non plus que
 * c'en était un, le nom portant le bleu que TOUTES les valeurs portent.
 *
 * Le lien s'étire donc sur la case entière, et la case répond au survol. Le
 * procédé est le « lien étiré » : une couche vide posée en absolu sur le parent
 * positionné. Il ne s'applique qu'aux tuiles qui ont vraiment une adresse —
 * `[href]` — la livrée n'en ayant pas.
 */
.cab-spec__row:has(.cab-spec__marque[href]) {
	position: relative;
	transition: background-color 0.15s ease;
}

.cab-spec__marque[href]::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cab-spec__row:has(.cab-spec__marque[href]):hover,
.cab-spec__row:has(.cab-spec__marque[href]:focus-visible) {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue, #06668c) 7%, var(--wp--preset--color--white, #fff));
}

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

@media (prefers-reduced-motion: reduce) {
	.cab-spec__row:has(.cab-spec__marque[href]) {
		transition: none;
	}
}

/* Dans le panneau, où la ligne est du texte courant, le logo se met au pas. */
.cab-fiche__panneau .cab-spec__marque {
	justify-content: flex-start;
}