/**
 * MH Photos (mh-photos): strip, four-column grid, mosaic and collection layouts.
 * Figma: Home "V3 Photo strip" and "V7 Gallery", apartment page "Settle in for the week",
 * Apartments "Lisbon around your stay", apartment photo pages.
 *
 * Heights are CSS variables so the Elementor "Photo sizes" controls can change them:
 * --mh-photo-h (strip), --mh-row1-h / --mh-row2-h (mosaic). Per photo, the widget writes
 * --mh-ratio (strip: width / 380), --mh-grow (flex share) and --mh-w (design width in px).
 */

.mh-photos {
	--mh-photo-h: 380px;
	--mh-row1-h: 380px;
	--mh-row2-h: 280px;
	--mh-photo-scale: 1;
	--mh-photo-gap: 24px;
}

.mh-photos--caption-muted .mh-figure__caption {
	color: var(--mh-muted);
}

/* ------------------------------------------------------------------ */
/* Strip: starts on the container edge, runs past the viewport edge     */
/* ------------------------------------------------------------------ */

.mh-photos__strip.mh-scroll {
	gap: var(--mh-photo-gap);
	padding-left: max(var(--mh-gutter), (100% - var(--mh-max)) / 2);
	padding-right: var(--mh-gutter);
	scroll-padding-inline: max(var(--mh-gutter), (100% - var(--mh-max)) / 2);
}

.mh-photos__strip .mh-photos__item {
	width: calc(var(--mh-photo-h) * var(--mh-ratio, 0.8));
}

/* Desktop (Figma 1440): the strip scrolls inside the 1200 column and stops at its right edge. */
@media (min-width: 1025px) {
	.mh-photos__strip.mh-scroll {
		width: min(var(--mh-max), 100% - 2 * var(--mh-gutter));
		margin-inline: auto;
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

.mh-photos__strip .mh-figure__media {
	height: var(--mh-photo-h);
}

.mh-photos__strip:focus-visible {
	outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Grid: four equal photos (282 × 352)                                 */
/* ------------------------------------------------------------------ */

.mh-photos__grid .mh-figure__media {
	aspect-ratio: 282 / 352;
}

@media (min-width: 768px) {
	.mh-photos__grid.mh-scroll {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--mh-photo-gap);
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mosaic: two rows, widths in proportion to "width"                    */
/* ------------------------------------------------------------------ */

.mh-photos__mosaic .mh-photos__row + .mh-photos__row {
	margin-top: 40px;
}

.mh-photos__mosaic .mh-photos__row--1 .mh-figure__media {
	height: var(--mh-row1-h);
}

.mh-photos__mosaic .mh-photos__row--2 .mh-figure__media {
	height: var(--mh-row2-h);
}

@media (min-width: 1025px) {
	.mh-photos__mosaic .mh-photos__row.mh-scroll {
		gap: var(--mh-photo-gap);
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.mh-photos__mosaic .mh-photos__item {
		flex: var(--mh-grow, 1) 1 0%;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Collection: 776 + 400 (520 high), then equal photos (376 high)       */
/* ------------------------------------------------------------------ */

.mh-photos--collection.mh-pad {
	padding-top: var(--mh-pad-t, 72px);
	padding-bottom: var(--mh-pad-b, 96px);
}

.mh-photos--collection .mh-heading__text {
	margin-top: 12px;
}

.mh-photos__collection .mh-photos__row {
	display: flex;
	gap: var(--mh-photo-gap);
}

.mh-photos__collection .mh-photos__row + .mh-photos__row {
	margin-top: 24px;
}

.mh-photos__collection .mh-photos__item {
	flex: var(--mh-grow, 1) 1 0%;
	min-width: 0;
}

.mh-photos__collection .mh-photos__row--1 .mh-figure__media {
	height: 520px;
}

.mh-photos__collection .mh-photos__row--2 .mh-figure__media {
	height: 376px;
}

.mh-photos__actions {
	margin-top: 40px;
}

.mh-photos__button {
	min-width: 260px;
}

/* ------------------------------------------------------------------ */
/* Tablet                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.mh-photos {
		--mh-photo-h: 320px;
		--mh-row1-h: 320px;
		--mh-row2-h: 260px;
		--mh-photo-scale: 0.857;
		--mh-photo-gap: 16px;
	}

	/* Mosaic rows become scroll rows; widths follow the design widths. */
	.mh-photos__mosaic .mh-photos__row.mh-scroll {
		gap: var(--mh-photo-gap);
	}

	.mh-photos__mosaic .mh-photos__item {
		width: calc(var(--mh-w, 296) * var(--mh-photo-scale) * 1px);
	}

	/* Collection: first photo full width, the others in pairs, an unpaired last one full width. */
	.mh-photos__collection {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.mh-photos__collection .mh-photos__row {
		display: contents;
	}

	.mh-photos__collection .mh-photos__row--1 .mh-figure__media,
	.mh-photos__collection .mh-photos__row--2 .mh-figure__media {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.mh-photos__collection .is-first,
	.mh-photos__collection .is-unpaired {
		grid-column: 1 / -1;
	}

	.mh-photos__collection .is-first .mh-figure__media,
	.mh-photos__collection .is-unpaired .mh-figure__media {
		aspect-ratio: 770 / 442;
	}

	.mh-photos--collection.mh-pad {
		padding-top: var(--mh-pad-t, 56px);
		padding-bottom: var(--mh-pad-b, 72px);
	}
}

/* ------------------------------------------------------------------ */
/* Phone                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.mh-photos {
		--mh-photo-h: 340px;
		--mh-row1-h: 320px;
		--mh-row2-h: 280px;
		--mh-photo-scale: 0.6;
		--mh-photo-gap: 12px;
	}

	.mh-photos__grid.mh-scroll {
		gap: var(--mh-photo-gap);
	}

	.mh-photos__grid .mh-photos__item {
		width: 240px;
	}

	.mh-photos__grid .mh-figure__media {
		aspect-ratio: 240 / 300;
	}

	/* Collection: one column; landscape photos 260 high, the second and last portrait. */
	.mh-photos__collection {
		grid-template-columns: minmax(0, 1fr);
	}

	.mh-photos__collection .is-first,
	.mh-photos__collection .is-unpaired {
		grid-column: auto;
	}

	.mh-photos__collection .mh-photos__row--1 .mh-figure__media,
	.mh-photos__collection .mh-photos__row--2 .mh-figure__media,
	.mh-photos__collection .is-first .mh-figure__media,
	.mh-photos__collection .is-unpaired .mh-figure__media {
		height: 260px;
		aspect-ratio: auto;
	}

	.mh-photos__collection .is-second .mh-figure__media,
	.mh-photos__collection .is-last .mh-figure__media {
		height: 440px;
	}

	.mh-photos__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.mh-photos__button {
		width: 100%;
		min-width: 0;
	}

	.mh-photos--collection.mh-pad {
		padding-top: var(--mh-pad-t, 40px);
		padding-bottom: var(--mh-pad-b, 56px);
	}
}