/*
 * Bloc « slider de témoignages ». Defilement via la primitive partagee mx-slider (mx-slider.css + .js),
 * mode boucle. Ce fichier ne porte que le layout du bloc : section (fond blanc) + contenu CONTRAINT
 * (pas de bleed), en-tete, rangee fleches flanquantes + viewport, carte temoignage (3 visibles desktop).
 *
 * Carte : reutilise le look .mx-temoignage-card partage (base.css : grey-ultralight, radius, .mx-anta /
 * .mx-meta) mais TEXTE FERRE A GAUCHE, avatar centre (ecart avec la carte Carriere centree, cf. CHARTE).
 *
 * Cible « 3 cartes » : largeur de carte = fraction du VIEWPORT (calc), pour tenir a 3 quelle que soit la
 * largeur du contenu. Pas de --mx-slider-nav-reserve (les fleches flanquent mais le calcul de debordement
 * s'appuie sur la vraie zone visible : pas de boucle largeur-carte <-> presence des fleches).
 */

.mx-temoignages {
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--55); /* 80 */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--grey-dark);
}

/* Contenu contraint et centre. */
.mx-temoignages__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--45); /* 32 : en-tete / carousel */
}

.mx-temoignages__title {
	margin: 0;
	color: var(--wp--preset--color--grey-dark);
}

/* Rangee : le viewport prend TOUTE la largeur ; les fleches sont posees A CHEVAL sur ses bords
   (moitie dehors, moitie sur la 1re / derniere carte). Contexte de positionnement pour les fleches. */
.mx-temoignages__row {
	position: relative;
}

.mx-temoignages__row .mx-slider__viewport {
	width: 100%;
	min-width: 0; /* le viewport occupe 100 % et clippe */
}

.mx-temoignages__row .mx-slider__track {
	gap: var(--wp--preset--spacing--30); /* 16 (cote Figma) */
	align-items: stretch; /* cartes de meme hauteur */
}

/* Fleches sombres carrees (style commun mx-slider.css, grey-dark), centrees verticalement et a cheval sur
   les bords du viewport : ~50 % dehors, ~50 % sur la carte. En mode fini, la fleche gauche est desactivee
   a l'etat initial (opacite attenuee) mais reste visible et chevauche la 1re carte : voulu. */
.mx-temoignages__row .mx-slider__nav-prev,
.mx-temoignages__row .mx-slider__nav-next {
	position: absolute;
	top: 50%;
	z-index: 2; /* au-dessus des cartes */
}

.mx-temoignages__row .mx-slider__nav-prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.mx-temoignages__row .mx-slider__nav-next {
	right: 0;
	transform: translate(50%, -50%);
}

/* ---- Carte temoignage (slider) : 3 par vue. Look de fond/rayon partage depuis base.css. ---- */
.mx-temoignage-card {
	box-sizing: border-box;
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3); /* 3 visibles (gap 16) */
	display: flex;
	flex-direction: column;
	align-items: stretch; /* le texte occupe la largeur -> ferre a gauche */
	gap: var(--wp--preset--spacing--40); /* 24 (cote Figma) */
	text-align: left;
	margin: 0;
}

/* Avatar rond, centre en haut. */
.mx-temoignage-card__avatar {
	align-self: center;
	width: 135px; /* cote Figma */
	aspect-ratio: 135 / 132; /* quasi rond (cote Figma) */
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex: 0 0 auto;
}

/* Citation (blockquote) : Anta 16, ferree a gauche. Reset des marges par defaut du blockquote. */
.mx-temoignage-card__citation {
	margin: 0;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	color: var(--wp--preset--color--grey-dark);
}

.mx-temoignage-card__citation p {
	margin: 0;
}

/* Nom (Anta 16) : le <cite> revient en style normal (pas d'italique). */
.mx-temoignage-card__nom {
	margin: 0;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	color: var(--wp--preset--color--grey-dark);
}

.mx-temoignage-card__nom cite {
	font-style: normal;
}

.mx-temoignage-card__role {
	margin: 0;
}

/* ---- Responsive : 3 -> 2 -> 1 carte visible ---- */
@media (max-width: 1024px) {
	.mx-temoignage-card {
		flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2); /* 2 visibles */
	}
}

@media (max-width: 680px) {
	.mx-temoignages__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}
	.mx-temoignages__row {
		gap: var(--wp--preset--spacing--30); /* 16 */
	}
	.mx-temoignage-card {
		flex-basis: 100%; /* 1 visible */
	}
}