/*
 * Modificateur « portrait » du bloc média + texte. NE FAIT QU'ETENDRE bloc-media-texte.css :
 * image verticale étroite à gauche + colonne texte large (contenu long), colonnes centrées verticalement.
 * Tout le reste (fond, primitives, couleurs, animations, empilement de base) vient du bloc générique.
 */

.mx-media-texte.is-format-portrait .mx-media-texte__inner {
	/* Image étroite / texte large (cote Figma : 378 / 798, gouttière 56 déjà héritée). */
	grid-template-columns: 378fr 798fr;
	/* Regle generale des blocs 2 colonnes : la colonne la PLUS COURTE (texte ou image) est centree
	   verticalement face a la plus haute. On herite donc le align-items: center du bloc generique
	   (l'ancien align-items: start supposait un texte toujours plus long que l'image, ce qui n'est pas
	   le cas : ex. « L'histoire de METAL-X » ou l'image est plus haute que le texte). */
	align-items: center;
}

/* Image au FORMAT VERTICAL (le générique est paysage). */
.mx-media-texte.is-format-portrait .mx-media-texte__image {
	aspect-ratio: 378 / 572; /* cote Figma (zéro CLS) */
}

/* ---- Responsive : empilement propre, image verticale bornée (pas énorme sur mobile) ---- */
@media (max-width: 900px) {
	/* Force une seule colonne (bat la regle desktop plus specifique ci-dessus). */
	.mx-media-texte.is-format-portrait .mx-media-texte__inner {
		grid-template-columns: 1fr;
	}
	.mx-media-texte.is-format-portrait .mx-media-texte__image {
		width: 100%;
		max-width: 300px; /* borne la largeur de l'image verticale */
		margin-inline: auto; /* la centre une fois bornée */
	}
}