/**
 * MRMVR Elements — Mosaic Gallery.
 *
 * A heading over a mosaic of images: a two-by-two block of squares on the
 * left, two wide frames stacked beside it. Extra images past six flow on in
 * the same rhythm.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.13.0
 */

.mrx-mosaic-wrap {
	container-type: inline-size;
	container-name: mrxm;
	min-height: 0;
}

.mrx-mosaic {
	/* Layout */
	--mrx-m-gap: clamp(10px, 1.4cqi, 20px);
	--mrx-m-ratio: 1;
	--mrx-m-radius: 16px;
	--mrx-m-max: 1000px;
	--mrx-m-right: 44%;
	--mrx-m-cols: 4;
	--mrx-m-stack-top: 1;
	--mrx-m-stack-floor: 90px;
	--mrx-m-cols-mobile: 2;

	/*
	 * `cover` fills the frame and crops, which is what a photograph wants.
	 * `contain` fits the whole image inside, which is what a logo or an award
	 * badge needs — cropping one of those destroys the thing being shown.
	 */
	--mrx-m-fit: cover;
	--mrx-m-pad: 0px;
	--mrx-m-head-gap: clamp(26px, 3.4cqi, 52px);
	--mrx-m-align: center;
	--mrx-m-measure: 62ch;

	/* Colour */
	--mrx-m-eyebrow: var(--mrmvr-amber, #f57528);
	--mrx-m-title: var(--mrmvr-navy, #1a2142);
	--mrx-m-accent: var(--mrmvr-amber, #f57528);
	--mrx-m-body: var(--mrmvr-navy, #1a2142);
	--mrx-m-frame-bg: var(--mrmvr-blush-soft, #f9e9e0);

	/* Overlay and caption */
	--mrx-m-overlay: rgba(26, 33, 66, 0.42);
	--mrx-m-caption: #ffffff;
	--mrx-m-zoom: 1.06;

	text-align: var(--mrx-m-align);
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */

.mrx-mosaic__head {
	margin: 0 0 var(--mrx-m-head-gap);
}

.mrx-mosaic__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	font-family: var(--mrmvr-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mrx-m-eyebrow);
}

.mrx-mosaic__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background-color: currentColor;
}

.mrx-mosaic__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(28px, 3.4vw, 46px);
	font-size: clamp(28px, 5cqi, 46px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.4px;
	text-wrap: balance;
	color: var(--mrx-m-title);
}

/* Wrap a word in <em> to pick up the accent colour. */
.mrx-mosaic__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--mrx-m-accent);
}

.mrx-mosaic__description {
	max-width: var(--mrx-m-measure);
	margin: 18px auto 0;
	font-size: 17px;
	line-height: 1.7;
	text-wrap: pretty;
	color: var(--mrx-m-body);
	opacity: 0.82;
}

.mrx-mosaic__description > :first-child { margin-top: 0; }
.mrx-mosaic__description > :last-child { margin-bottom: 0; }

/* A left- or right-ranged heading must not keep its measure centred. */
.mrx-malign-left .mrx-mosaic__description { margin-inline: 0 auto; }
.mrx-malign-right .mrx-mosaic__description { margin-inline: auto 0; }

/* -------------------------------------------------------------------------
 * The mosaic
 *
 * Two areas side by side: a two-by-two block of squares, and a stack holding a
 * square over a rectangle.
 *
 * The two are separate grids on purpose. In one shared grid the right column
 * would share the block's rows, so its lower frame could only ever be another
 * square — there would be no way to give it a different height. As siblings
 * they stretch to a common height, and the stack divides that height itself:
 * `auto 1fr` lets the square take its own width as its height and hands the
 * remainder to the rectangle. The rectangle's proportion therefore follows the
 * column width, and stays a rectangle at every size.
 * ---------------------------------------------------------------------- */

.mrx-mosaic__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mrx-m-right);
	gap: var(--mrx-m-gap);
	align-items: stretch;
	max-width: var(--mrx-m-max);
	margin-inline: auto;
	text-align: left;
}

/* The two-by-two block of squares. */
.mrx-mosaic__block {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mrx-m-gap);
}

/*
 * The square over the rectangle.
 *
 * The upper frame takes its own width as its height, and the lower one is
 * handed whatever is left of the block's height. Widening the column therefore
 * makes the upper frame taller and the lower one flatter, which is the trade
 * the Right Column Width control makes. Two things keep that from going wrong:
 * the upper frame can be given a landscape ratio to free height back up, and
 * the lower one holds a floor so it can never be squeezed to nothing.
 */
.mrx-mosaic__stack {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: var(--mrx-m-gap);
}

.mrx-mosaic__stack .mrx-mosaic__item:first-child .mrx-mosaic__frame {
	aspect-ratio: var(--mrx-m-stack-top);
}

.mrx-mosaic__stack .mrx-mosaic__item:last-child .mrx-mosaic__frame {
	aspect-ratio: auto;
	min-height: var(--mrx-m-stack-floor);
}

/* Anything past six runs on beneath, four to a row. */
.mrx-mosaic__extra {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mrx-m-gap);
}

/* The even grid: three to a row, every frame the same. */
.mrx-mlayout-grid .mrx-mosaic__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* -------------------------------------------------------------------------
 * Custom shapes
 *
 * Every frame is measured in the same unit: one column wide by one column
 * tall. A wide frame takes two of those across, a tall one two down, a large
 * one both. Because each shape is a whole number of units, the rows stay level
 * and nothing can knock the grid out of alignment.
 *
 * Each frame carries two heights. `height: 100%` is the one that normally
 * applies, taking the exact row height the square frames establish, which is
 * what keeps every edge flush. The `aspect-ratio` behind it only comes into
 * play if a row happens to hold no square at all, where there would otherwise
 * be no height to inherit.
 * ---------------------------------------------------------------------- */

.mrx-mlayout-custom .mrx-mosaic__grid {
	grid-template-columns: repeat(var(--mrx-m-cols), minmax(0, 1fr));
	grid-auto-flow: dense;
}

.mrx-mlayout-custom .mrx-mosaic__item--square { grid-column: span 1; grid-row: span 1; }
.mrx-mlayout-custom .mrx-mosaic__item--wide   { grid-column: span 2; grid-row: span 1; }
.mrx-mlayout-custom .mrx-mosaic__item--tall   { grid-column: span 1; grid-row: span 2; }
.mrx-mlayout-custom .mrx-mosaic__item--large  { grid-column: span 2; grid-row: span 2; }

.mrx-mlayout-custom .mrx-mosaic__item--wide .mrx-mosaic__frame {
	aspect-ratio: 2 / 1;
	height: 100%;
}

.mrx-mlayout-custom .mrx-mosaic__item--tall .mrx-mosaic__frame {
	aspect-ratio: 1 / 2;
	height: 100%;
}

.mrx-mlayout-custom .mrx-mosaic__item--large .mrx-mosaic__frame {
	aspect-ratio: 1 / 1;
	height: 100%;
}

/* -------------------------------------------------------------------------
 * Frames
 * ---------------------------------------------------------------------- */

.mrx-mosaic__item {
	position: relative;
	height: 100%;
	margin: 0;
	min-width: 0;
}

.mrx-mosaic__frame {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	aspect-ratio: var(--mrx-m-ratio);
	padding: var(--mrx-m-pad);
	background-color: var(--mrx-m-frame-bg);
	border-radius: var(--mrx-m-radius);
	text-decoration: none;
}

.mrx-mosaic__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mrx-m-fit);
	object-position: center;
	transform: scale(1);
	transition: transform 900ms var(--mrmvr-ease, ease);
	will-change: transform;
}

.mrx-mosaic__frame:hover img,
.mrx-mosaic__frame:focus-visible img {
	transform: scale(var(--mrx-m-zoom));
}

.mrx-mosaic__frame:focus-visible {
	outline: 2px solid var(--mrx-m-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Caption
 * ---------------------------------------------------------------------- */

.mrx-mosaic__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	/* Negative margin pulls the scrim back out over any inner padding. */
	margin: 0 calc(var(--mrx-m-pad) * -1) calc(var(--mrx-m-pad) * -1);
	padding: 34px 18px 16px;
	font-family: var(--mrmvr-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	color: var(--mrx-m-caption);
	background: linear-gradient(to top, var(--mrx-m-overlay), transparent);
	pointer-events: none;
}

/* Revealed on hover unless the panel asks for it always on. */
.mrx-mcaption-hover .mrx-mosaic__caption {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 400ms var(--mrmvr-ease, ease), transform 400ms var(--mrmvr-ease, ease);
}

.mrx-mcaption-hover .mrx-mosaic__item:hover .mrx-mosaic__caption,
.mrx-mcaption-hover .mrx-mosaic__item:focus-within .mrx-mosaic__caption {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These set properties rather than the custom properties the Elementor
 * controls write to, so they stay authoritative without an !important.
 * ---------------------------------------------------------------------- */

@container mrxm (max-width: 820px) {
	/*
	 * The mosaic needs four columns to hold its shape. Below that every frame
	 * becomes an equal square, two to a row, and the explicit placement is
	 * released so the images simply flow.
	 */
	.mrx-mosaic-wrap .mrx-mosaic__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * `display: contents` dissolves the block and the stack, so every figure
	 * becomes a direct child of the one grid and they all size alike.
	 */
	.mrx-mosaic-wrap .mrx-mosaic__block,
	.mrx-mosaic-wrap .mrx-mosaic__stack,
	.mrx-mosaic-wrap .mrx-mosaic__extra {
		display: contents;
	}

	/* Spans are released so nothing reaches across a two-column grid. */
	.mrx-mosaic-wrap .mrx-mosaic__grid .mrx-mosaic__item {
		grid-column: span 1;
		grid-row: span 1;
	}

	.mrx-mosaic-wrap .mrx-mosaic__grid .mrx-mosaic__frame,
	.mrx-mosaic-wrap .mrx-mosaic__stack .mrx-mosaic__item:last-child .mrx-mosaic__frame {
		aspect-ratio: var(--mrx-m-ratio);
		height: auto;
	}
}

/*
 * Two columns are held all the way down by default, so the square block still
 * reads as a proper two-by-two on a phone rather than unrolling into a single
 * tall strip. Set Mobile Columns to 1 for photography, where one large frame
 * to a row usually reads better than two small ones.
 */
@container mrxm (max-width: 460px) {
	.mrx-mosaic-wrap .mrx-mosaic__grid {
		grid-template-columns: repeat(var(--mrx-m-cols-mobile), minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Accessibility & print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mrx-mosaic__frame img,
	.mrx-mosaic__caption {
		transition: none !important;
		transform: none !important;
	}
}

@media print {
	.mrx-mosaic__caption {
		position: static;
		color: var(--mrx-m-body);
		background: none;
	}
}