/* ============================================================
   IMAGES GRID  –  [images_grid]
   Grille 2×2 de 4 images + légende. Source : repeater ACF `images_grid`.
   ============================================================ */

.wc-images-grid {
	width: 100%;
}

.wc-images-grid__titre {
	margin: 0 0 var(--s-xl);
	text-align: center;
	color: var(--c-text);
	font-family: var(--ff-heading);
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
}

.wc-images-grid__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-xl);
}

.wc-images-grid__item {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.wc-images-grid__media {
	overflow: hidden;
	border-radius: var(--br-lg);
	aspect-ratio: 4 / 3;
	background: var(--c-brown-50);
	box-shadow: var(--sh-sm);
}

.wc-images-grid__img {
	/* Hello Elementor force height:auto/max-width sur les img → on impose le plein cadre */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s ease;
}

.wc-images-grid__item:hover .wc-images-grid__img {
	transform: scale(1.05);
}

.wc-images-grid__legende {
	margin-top: var(--s-md);
	text-align: center;
	color: var(--c-text-soft);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
	.wc-images-grid__grid {
		grid-template-columns: 1fr;
		gap: var(--s-xl);
	}
}