/**
 * Section : Bandeau CTA (texte + image pleine hauteur).
 * D'après le design Figma "Section Content Container" (fond #85ac81).
 */

@layer sections {
	.mm-cta {
		/* Full-bleed : le contenu gère son propre padding-block. */
		--mm-section-pt: 0;
		--mm-section-pb: 0;
		--mm-section-bg: var(--mm-color-tint-2);
		/* Texte le plus foncé de la charte pour garantir le contraste RGAA
		   sur le fond sauge-400 (olive-900 ≈ 3,97:1 ✗ / feuille-950 ≈ 5,55:1 ✓). */
		--mm-section-color: var(--mm-feuille-950);
	}

	/* Gouttière alignée sur le bord intérieur du .container centré du site. */
	.mm-cta__inner {
		--mm-cta-gutter: max((100vw - var(--mm-container-max)) / 2, var(--mm-space-md));
		display: grid;
		grid-template-columns: 1fr;
	}
	@media (min-width: 62rem) {
		.mm-cta__inner {
			grid-template-columns: 1fr 1fr;
			align-items: stretch;
		}
		.mm-cta--img-left .mm-cta__media {
			order: -1;
		}
	}

	/* --- Colonne texte --- */
	.mm-cta__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mm-space-bloc); /* 32px */
		padding-block: clamp(var(--mm-space-large), 12vw, var(--mm-section-space-large)); /* → 192px */
		/* Le padding intérieur (côté image) crée l'écart texte/image. */
		padding-inline: var(--mm-cta-gutter) clamp(var(--mm-space-xl), 6vw, var(--mm-space-big-hero)); /* → 96px */
	}
	@media (min-width: 62rem) {
		/* Image à gauche : la grosse gouttière passe à droite du texte. */
		.mm-cta--img-left .mm-cta__content {
			padding-inline: clamp(var(--mm-space-xl), 6vw, var(--mm-space-big-hero)) var(--mm-cta-gutter);
		}
	}

	.mm-cta__title {
		margin: 0;
		font-size: var(--mm-fs-400); /* → 49px */
		line-height: 1.2;
		color: var(--mm-feuille-950);
	}
	.mm-cta__text {
		font-size: var(--mm-fs-p);
		color: var(--mm-feuille-950);
	}
	.mm-cta__text p {
		margin: 0;
		line-height: 1.5;
		max-width: 46ch;
	}
	.mm-cta .mm-button {
		--mm-btn-color: var(--mm-feuille-950);
		--mm-btn-border: var(--mm-feuille-950);
		--mm-btn-color-hover: var(--mm-neutral-50);
		--mm-btn-bg-hover: var(--mm-feuille-950);
		--mm-btn-border-hover: var(--mm-feuille-950);
	}

	/* --- Colonne image --- */
	.mm-cta__media {
		width: 100%;
	}
	.mm-cta__img {
		display: block;
		width: 100%;
		aspect-ratio: 948 / 560; /* bande sur mobile */
		object-fit: cover;
	}
	@media (min-width: 62rem) {
		/* La hauteur du bloc est dictée par le texte : l'image est étirée par
		   la grille (align-items: stretch) et positionnée en absolu pour ne
		   PAS imposer sa propre hauteur. Elle remplit donc et se recadre. */
		.mm-cta__media {
			position: relative;
		}
		.mm-cta__img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			aspect-ratio: auto;
			object-fit: cover;
		}
	}
}