/**
 * JS Photo Collage.
 *
 * The overlapping snapshot cluster beside "I Live the Words I Teach"
 * (Figma 22520:7668).
 *
 * Every photo is placed as a percentage of the collage box — width, x, y — so
 * the arrangement scales with its column instead of drifting apart at widths
 * nobody tested. The box's own height comes from a ratio applied with padding,
 * which is why there is no fixed pixel height anywhere here.
 *
 * Below the mobile breakpoint the overlap is dropped for a two-up grid: at
 * 375px a cluster of absolutely-positioned photos is a pile, not a composition.
 *
 * No outer padding is baked in — the Elementor container owns the gutters.
 */

.elementor-widget-js_photo_collage {
	width: 100%;
}

.js-photo-collage {
	--js-collage-ratio: 0.62;
	--js-collage-radius: 16px;

	position: relative;
	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-photo-collage *,
.js-photo-collage *::before,
.js-photo-collage *::after {
	box-sizing: border-box;
}

/* The collage box's height, as a ratio of its width. padding-top rather than
   aspect-ratio so the absolutely-positioned children have a resolved height to
   position against in every browser that reaches this design. */
.js-photo-collage::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(var(--js-collage-ratio) * 100%);
}

/* The five per-photo custom properties are set inline by the widget. */
.js-photo-collage__item {
	position: absolute;
	top: var(--js-collage-y, 0%);
	left: var(--js-collage-x, 0%);
	z-index: var(--js-collage-z, 1);
	width: var(--js-collage-w, 44%);
	margin: 0;
	transform: rotate(var(--js-collage-rotate, 0deg));
}

.js-photo-collage__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--js-collage-radius);
	object-fit: cover;
}

/* -------- Mobile: no overlap -------- */
@media (max-width: 767px) {
	.js-photo-collage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* The ratio spacer only exists to give absolute children a height. */
	.js-photo-collage::before {
		display: none;
	}

	.js-photo-collage__item {
		position: static;
		width: 100%;
		transform: none;
	}

	/* An odd photo out spans the row rather than leaving a hole beside it. */
	.js-photo-collage__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}