/**
 * MRMVR Elements — Media Rows.
 *
 * A stack of rows, each an image beside a heading and a paragraph. Rows can
 * alternate sides so the eye zig-zags down the section instead of running
 * straight down one edge.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.24.0
 */

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

.mrx-rows {
	/* Layout */
	--mrx-r-media: 46%;
	--mrx-r-gap: clamp(28px, 4cqi, 68px);
	--mrx-r-row-gap: clamp(40px, 5cqi, 90px);
	--mrx-r-head-gap: clamp(30px, 3.8cqi, 60px);
	--mrx-r-valign: center;
	--mrx-r-align: left;

	/* Media */
	--mrx-r-ratio: 4 / 3;
	--mrx-r-radius: 20px;
	--mrx-r-frame-bg: var(--mrmvr-blush-soft, #f9e9e0);
	--mrx-r-zoom: 1.05;
	--mrx-r-ring: rgba(207, 161, 144, .55);
	--mrx-r-ring-offset: 14px;

	/* Type */
	--mrx-r-eyebrow: var(--mrmvr-amber, #f57528);
	--mrx-r-heading: var(--mrmvr-navy, #1a2142);
	--mrx-r-accent: var(--mrmvr-amber, #f57528);
	--mrx-r-title: var(--mrmvr-navy, #1a2142);
	--mrx-r-body: var(--mrmvr-navy, #1a2142);
	--mrx-r-measure: 46ch;

	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Section heading
 * ---------------------------------------------------------------------- */

.mrx-rows__head {
	margin: 0 0 var(--mrx-r-head-gap);
	text-align: var(--mrx-r-head-align, center);
}

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

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

.mrx-rows__heading {
	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, 4.8cqi, 46px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.4px;
	text-wrap: balance;
	color: var(--mrx-r-heading);
}

.mrx-rows__heading em {
	font-style: italic;
	font-weight: 500;
	color: var(--mrx-r-accent);
}

/* -------------------------------------------------------------------------
 * The rows
 * ---------------------------------------------------------------------- */

.mrx-rows__list {
	display: flex;
	flex-direction: column;
	gap: var(--mrx-r-row-gap);
}

.mrx-rows__row {
	display: grid;
	grid-template-columns: var(--mrx-r-media) minmax(0, 1fr);
	grid-template-areas: "media text";
	gap: var(--mrx-r-gap);
	align-items: var(--mrx-r-valign);
}

/*
 * Alternating is done by swapping the named areas, not by reordering the
 * markup. The image stays first in the document either way, so the reading
 * order a screen reader follows is the same on every row.
 *
 * The wrapper classes are wrapped in :where() so they add no specificity of
 * their own. Without it these selectors score higher than the stacking rules
 * at the foot of the file, and a reversed row would keep its side-by-side
 * areas on a phone — image right, text left, on that row only.
 */
:where(.mrx-ralt-yes) .mrx-rows__row:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) var(--mrx-r-media);
	grid-template-areas: "text media";
}

/* Every row image on the right, when that is the choice. */
:where(.mrx-rside-right) .mrx-rows__row {
	grid-template-columns: minmax(0, 1fr) var(--mrx-r-media);
	grid-template-areas: "text media";
}

:where(.mrx-rside-right.mrx-ralt-yes) .mrx-rows__row:nth-child(even) {
	grid-template-columns: var(--mrx-r-media) minmax(0, 1fr);
	grid-template-areas: "media text";
}

/* -------------------------------------------------------------------------
 * Media
 * ---------------------------------------------------------------------- */

.mrx-rows__media {
	position: relative;
	grid-area: media;
	align-self: center;
	aspect-ratio: var(--mrx-r-ratio);
}

.mrx-rows__ring {
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--mrx-r-ring);
	border-radius: var(--mrx-r-radius);
	transform: translate(calc(var(--mrx-r-ring-offset) * -1), var(--mrx-r-ring-offset));
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
	pointer-events: none;
}

/* The outline mirrors, so it always sits away from the text column. Same
   :where() treatment, for the same reason. */
:where(.mrx-ralt-yes) .mrx-rows__row:nth-child(even) .mrx-rows__ring,
:where(.mrx-rside-right) .mrx-rows__row .mrx-rows__ring {
	transform: translate(var(--mrx-r-ring-offset), var(--mrx-r-ring-offset));
}

:where(.mrx-rside-right.mrx-ralt-yes) .mrx-rows__row:nth-child(even) .mrx-rows__ring {
	transform: translate(calc(var(--mrx-r-ring-offset) * -1), var(--mrx-r-ring-offset));
}

.mrx-rows__row:hover .mrx-rows__ring {
	transform: translate(0, 0);
}

/*
 * Pinned to the media box rather than sized with `height: 100%`. The parent
 * takes its height from `aspect-ratio`, and a percentage height against that
 * is not reliably resolvable — where it falls back to `auto` the frame
 * collapses onto the image's own height and the frame shows beneath it.
 */
.mrx-rows__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background-color: var(--mrx-r-frame-bg);
	border-radius: var(--mrx-r-radius);
}

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

.mrx-rows__row:hover .mrx-rows__frame img {
	transform: scale(var(--mrx-r-zoom));
}

/* -------------------------------------------------------------------------
 * Text
 * ---------------------------------------------------------------------- */

.mrx-rows__text {
	grid-area: text;
	min-width: 0;
	text-align: var(--mrx-r-align);
}

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

.mrx-rows__index::after {
	content: "";
	width: 34px;
	height: 1px;
	background-color: currentColor;
	opacity: .5;
}

.mrx-rows__title {
	margin: 0 0 14px;
	font-family: var(--mrmvr-font-display);
	font-size: clamp(24px, 3.2cqi, 34px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.3px;
	text-wrap: balance;
	color: var(--mrx-r-title);
}

.mrx-rows__body {
	max-width: var(--mrx-r-measure);
	margin: 0;
	font-size: 16.5px;
	line-height: 1.7;
	text-wrap: pretty;
	color: var(--mrx-r-body);
	opacity: .78;
}

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

.mrx-rows__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-r-accent);
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	transition: gap var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-rows__link:hover { gap: 15px; }

.mrx-rows__link svg,
.mrx-rows__link i {
	width: .9em;
	height: .9em;
	font-size: inherit;
	fill: currentColor;
}

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

@container mrxr (max-width: 700px) {
	/*
	 * Stacked, and always image over text — on every row, whichever side it
	 * took on the desktop layout. Alternating sides means nothing once there
	 * is only one column, and a reversed row would leave the reader guessing
	 * which caption belongs to which picture.
	 *
	 * The wrapper class is repeated to lift these above the side and
	 * alternating rules above, which name two classes each.
	 */
	.mrx-rows-wrap.mrx-rows-wrap .mrx-rows__row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "text";
	}

	.mrx-rows-wrap.mrx-rows-wrap .mrx-rows__media {
		aspect-ratio: 16 / 10;
	}

	/*
	 * At rest the outline pulls in closer, since there is no text column left
	 * for it to sit away from. Scoped to :not(:hover) so the row's own hover
	 * rule still closes it to zero.
	 */
	.mrx-rows-wrap.mrx-rows-wrap .mrx-rows__row:not(:hover) .mrx-rows__ring {
		transform: translate(calc(var(--mrx-r-ring-offset) * -0.6), calc(var(--mrx-r-ring-offset) * 0.6));
	}

	.mrx-rows-wrap.mrx-rows-wrap .mrx-rows__body {
		max-width: none;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.mrx-rows__frame img,
	.mrx-rows__ring,
	.mrx-rows__link {
		transition: none !important;
	}

	.mrx-rows__row:hover .mrx-rows__frame img {
		transform: none;
	}
}

@media print {
	.mrx-rows__ring { display: none; }
}