/**
 * Bloc : Mosaïque photos (ri-mosaique)
 * Layout : 1 grande à gauche | 2 petites + 1 large à droite
 */

.ri-mosaique {
	width: 100%;
	padding-block: var(--ri-block-padding-xl);
}

/* ========================================
   Grille mosaïque
   ======================================== */

.ri-mosaique .mosaique-grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 540px;
	gap: 8px;
	width: min(var(--ri-container-width), 100% - var(--ri-container-padding) * 2);
	margin-inline: auto;
}

.ri-mosaique .colonne-droite {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
}

.ri-mosaique .ligne-haute {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* ========================================
   Photos
   ======================================== */

.ri-mosaique .photo {
	overflow: hidden;
}

.ri-mosaique .photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ri-mosaique .photo--grande,
.ri-mosaique .photo--large-bas {
	height: 100%;
}

/* ========================================
   Placeholder éditeur
   ======================================== */

.ri-mosaique.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-soft);
	border: 2px dashed var(--ri-color-grey);
	text-align: center;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 782px) {

	/*
	 * display: contents « aplatit » .colonne-droite et .ligne-haute :
	 * les 4 photos deviennent grid items directs dans cet ordre DOM :
	 * photo_1, photo_2, photo_3, photo_4.
	 * On les place via grid-area :
	 *   p1 p2  →  photo_1 (1fr) | photo_2 (2fr)
	 *   p3 p4  →  photo_3 (2fr) | photo_4 (1fr)
	 */
	.ri-mosaique .colonne-droite,
	.ri-mosaique .ligne-haute {
		display: contents;
	}

	/*
	 * 3 colonnes égales — chaque photo occupe 1 ou 2 colonnes :
	 * Ligne 1 : photo_1 col 1     (1fr)    | photo_2 col 2-3 (2fr)
	 * Ligne 2 : photo_3 col 1-2   (2fr)    | photo_4 col 3   (1fr)
	 */
	.ri-mosaique .mosaique-grille {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 124px 124px;
	}

	.ri-mosaique .photo--grande {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: unset;
		height: 100%;
	}

	.ri-mosaique .ligne-haute .photo:first-child {
		grid-column: 2 / 4;
		grid-row: 1;
		aspect-ratio: unset;
		height: 100%;
	}

	.ri-mosaique .ligne-haute .photo:last-child {
		grid-column: 1 / 3;
		grid-row: 2;
		aspect-ratio: unset;
		height: 100%;
	}

	.ri-mosaique .photo--large-bas {
		grid-column: 3;
		grid-row: 2;
		aspect-ratio: unset;
		height: 100%;
	}
}