/**
 * Section : Cartes (bande de 3 panneaux colorés).
 * D'après le design Figma "Main Content Container".
 */

@layer sections {
	/* Espacement par défaut de la section (surchargé par le contrôle ACF). */
	.mm-cards {
		--mm-section-pt: 0;
		--mm-section-pb: var(--mm-section-space-default);
	}

	/* Grille : 3 colonnes égales, flush (pas de gouttière), comme le design. */
	.mm-cards__grid {
		display: grid;
		grid-template-columns: 1fr;
	}
	@media (min-width: 48rem) {
		.mm-cards__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* --- Carte --- */
	.mm-card {
		min-width: 0; /* autorise la piste de grille à rétrécir (évite le débordement horizontal) */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--mm-space-bloc);
		min-height: 20.5rem; /* 328px */
		padding-block: var(--mm-space-page);      /* 56px */
		/* Padding intérieur fluide : jusqu'à 96px sur grand écran, resserré en
		   dessous pour que les 3 colonnes tiennent sans déborder (768–1270px). */
		padding-inline: clamp(var(--mm-space-lg), 4.5vw, var(--mm-space-big-hero));
		background-color: var(--mm-card-bg, var(--mm-color-tint-1));
		color: var(--mm-card-fg, var(--mm-color-brand-dark));
	}

	/* Dégradé de verts par position (repeater max 3).
	   Carte 2 (sauge-400) : fond plus foncé → texte feuille-950 pour garantir
	   le contraste RGAA (printemps-900 n'y atteignait que 4,04:1 sur le corps
	   18px ; feuille-950 → 5,55:1). */
	.mm-cards__grid > :nth-child(1) { --mm-card-bg: var(--mm-color-tint-1); }
	.mm-cards__grid > :nth-child(2) {
		--mm-card-bg: var(--mm-color-tint-2);
		--mm-card-fg: var(--mm-feuille-950);
	}
	.mm-cards__grid > :nth-child(3) { --mm-card-bg: var(--mm-color-tint-3); }

	/* --- Contenu --- */
	.mm-card__header {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-l); /* 20px */
	}

	.mm-card__title {
		margin: 0;
		font-size: var(--mm-fs-400); /* → 49px */
		letter-spacing: 0.04em;
		line-height: 1.2;
		color: var(--mm-card-fg, var(--mm-color-on-tint)); /* olive #334800 (carte 2 : feuille-950) */
	}

	.mm-card__text {
		margin: 0;
		max-width: 24ch;
		font-family: var(--mm-font-body);
		font-size: var(--mm-fs-lg); /* 18px */
		line-height: 1.4; /* 140% */
		letter-spacing: -0.03em;
		color: var(--mm-card-fg, var(--mm-color-brand-dark)); /* primary-900 #304713 (carte 2 : feuille-950) */
	}

	/* --- Tablette (3 colonnes) : padding resserré pour que les boutons ne débordent pas. --- */
	@media (min-width: 48.0625rem) and (max-width: 64rem) {
		.mm-card { padding-inline: var(--mm-space-m); } /* 16px au lieu de ~74px */
		/* Bouton allégé pour tenir dans une colonne étroite (sinon le libellé déborde). */
		.mm-card .mm-button {
			max-width: 100%;
			font-size: var(--mm-fs-p);                            /* 16px au lieu de 18 */
			gap: var(--mm-space-2xs);                             /* 8px */
			padding-inline: var(--mm-space-s) var(--mm-space-m);  /* 12 / 16 */
			white-space: normal;                                  /* repli : passe à la ligne au lieu de déborder */
		}
	}

	/* --- Mobile : texte pleine largeur, bouton ferré à droite, écart réduit --- */
	@media (max-width: 48rem) {
		.mm-card {
			justify-content: flex-start; /* le bouton suit le texte (plus de grand vide) */
			min-height: 0;
			gap: var(--mm-space-list);   /* écart texte ↔ bouton resserré (24px) */
		}
		.mm-card__text { max-width: none; }          /* texte sur toute la largeur */
		.mm-card .mm-button { align-self: flex-end; } /* bouton ferré à droite */
	}
}