/**
 * MRMVR Elements — Media Split CTA.
 *
 * "Editorial Arch" composition: an arched, offset-framed photograph with a
 * floating badge, set beside a typographic panel on a warm card surface.
 *
 * Layout is driven entirely by custom properties so that Elementor controls
 * can retarget a single variable instead of duplicating rule blocks.
 *
 * @package MRMVR\Elements
 * @since   1.0.0
 */

/*
 * The widget sizes itself against its own width, not the viewport: an
 * Elementor container can be far narrower than the screen, and a viewport
 * media query cannot see that. `.mrx-split-wrap` exists purely to be the
 * query container, since an element cannot query itself.
 */
.mrx-split-wrap {
	container-type: inline-size;
	container-name: mrx;

	/*
	 * The wrapper must contribute no height of its own: any floor or trailing
	 * margin here reads as unexplained space beneath the card.
	 */
	min-height: 0;
	margin-bottom: 0;
}

.mrx-split-wrap > .mrx-split {
	margin-bottom: 0;
}

.mrx-split {
	/* Layout */
	--mrx-media-width: 44%;
	--mrx-media-ratio: 4 / 5;
	--mrx-media-min-height: 0px;
	--mrx-min-height: 0px;
	--mrx-gap: clamp(28px, 5cqi, 72px);
	--mrx-content-align: left;
	--mrx-content-valign: center;
	--mrx-content-max-width: 100%;

	/* Surface */
	--mrx-panel-bg: var(--mrmvr-blush-soft, #f9e9e0);

	/* Media */
	--mrx-arch: 999px;
	--mrx-media-radius-bottom: 24px;
	--mrx-overlay: rgba(85, 44, 29, 0.18);
	--mrx-overlay-hover: rgba(85, 44, 29, 0.06);
	--mrx-media-transition: 1200ms;
	--mrx-media-scale: 1.06;

	/* Offset outline frame */
	--mrx-outline-color: rgba(207, 161, 144, 0.55);
	--mrx-outline-offset: 16px;

	/* Floating badge */
	--mrx-badge-x: -22px;
	--mrx-badge-y: 40px;
	--mrx-badge-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-badge-value: var(--mrmvr-navy, #1a2142);
	--mrx-badge-label: var(--mrmvr-clay, #cfa190);
	--mrx-badge-border: rgba(207, 161, 144, 0.4);

	/* Accents */
	--mrx-rule: var(--mrmvr-clay, #cfa190);
	--mrx-accent: var(--mrmvr-amber, #f57528);

	/* Icon */
	--mrx-icon-primary: var(--mrmvr-clay, #cfa190);
	--mrx-icon-secondary: var(--mrmvr-white, #ffffff);
	--mrx-icon-size: 15px;
	--mrx-icon-padding: 10px;
	--mrx-icon-border-width: 2px;

	/* Button */
	--mrx-button-bg: var(--mrmvr-navy, #1a2142);
	--mrx-button-color: var(--mrmvr-white, #ffffff);
	--mrx-button-border: var(--mrmvr-navy, #1a2142);
	--mrx-button-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-button-color-hover: var(--mrmvr-white, #ffffff);
	--mrx-button-border-hover: var(--mrmvr-amber, #f57528);
	--mrx-button-border-width: 1px;

	position: relative;
	display: grid;
	grid-template-columns: var(--mrx-media-width) minmax(0, 1fr);
	grid-template-areas: "media panel";
	gap: var(--mrx-gap);
	align-items: center;
	padding: clamp(22px, 4cqi, 56px);
	background-color: var(--mrx-panel-bg);
	border-radius: 24px;

	/* Visible so the floating badge can break the media edge. */
	overflow: visible;
	isolation: isolate;
}

/* -------------------------------------------------------------------------
 * Media — arched frame, offset outline, floating badge
 * ---------------------------------------------------------------------- */

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

/* The offset hairline that sits behind the photograph. */
.mrx-split__media-outline {
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--mrx-outline-color);
	border-radius: var(--mrx-arch) var(--mrx-arch) var(--mrx-media-radius-bottom) var(--mrx-media-radius-bottom);
	transform: translate(calc(var(--mrx-outline-offset) * -1), var(--mrx-outline-offset));
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
	pointer-events: none;
}

.mrx-split:hover .mrx-split__media-outline {
	transform: translate(calc(var(--mrx-outline-offset) * -0.55), calc(var(--mrx-outline-offset) * 0.55));
}

/*
 * 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 to the image's own height, leaving the frame's background
 * showing beneath a photograph whose proportions differ from the ratio.
 * Pinning to all four edges makes the frame exactly the media box, so the
 * image always fills it corner to corner.
 */
.mrx-split__media-frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background-color: var(--mrmvr-cocoa, #552c1d);
	border-radius: var(--mrx-arch) var(--mrx-arch) var(--mrx-media-radius-bottom) var(--mrx-media-radius-bottom);
}

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

.mrx-split__media-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--mrx-overlay);
	transition: background-color var(--mrx-media-transition) var(--mrmvr-ease, ease);
	pointer-events: none;
}

.mrx-split:hover .mrx-split__media-overlay,
.mrx-split:focus-within .mrx-split__media-overlay {
	background-color: var(--mrx-overlay-hover);
}

.mrx-split--hover-zoom-in:hover .mrx-split__media-frame img,
.mrx-split--hover-zoom-in:focus-within .mrx-split__media-frame img {
	transform: scale(var(--mrx-media-scale));
}

.mrx-split--hover-zoom-out .mrx-split__media-frame img {
	transform: scale(var(--mrx-media-scale));
}

.mrx-split--hover-zoom-out:hover .mrx-split__media-frame img,
.mrx-split--hover-zoom-out:focus-within .mrx-split__media-frame img {
	transform: scale(1);
}

/* Floating badge overhanging the photograph. */
.mrx-split__badge {
	position: absolute;
	z-index: 3;
	right: var(--mrx-badge-x);
	bottom: var(--mrx-badge-y);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	text-align: left;
	background-color: var(--mrx-badge-bg);
	border: 1px solid var(--mrx-badge-border);
	border-radius: 16px;
	box-shadow: 0 24px 48px -26px rgba(26, 33, 66, 0.55);
}

.mrx-split__badge-value {
	font-family: var(--mrmvr-font-display);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: var(--mrx-badge-value);
}

.mrx-split__badge-label {
	font-family: var(--mrmvr-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mrx-badge-label);
}

/* Mirror the badge when the media sits on the right. */
.mrx-layout-right .mrx-split__badge {
	right: auto;
	left: var(--mrx-badge-x);
}

/* -------------------------------------------------------------------------
 * Content panel
 * ---------------------------------------------------------------------- */

.mrx-split__panel {
	grid-area: panel;
	display: flex;
	align-items: var(--mrx-content-valign);
	min-height: var(--mrx-min-height);
}

.mrx-split__inner {
	width: 100%;
	max-width: var(--mrx-content-max-width);
	text-align: var(--mrx-content-align);
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Icon badge (optional — the eyebrow rule is the default accent)
 * ---------------------------------------------------------------------- */

.mrx-split__icon-wrap {
	display: block;
	margin-bottom: 18px;
	line-height: 0;
}

.mrx-split__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mrx-icon-size);
	line-height: 1;
	color: var(--mrx-icon-primary);
	transition: background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-split__icon svg,
.mrx-split__icon i {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-icon-view-stacked .mrx-split__icon {
	padding: var(--mrx-icon-padding);
	color: var(--mrx-icon-secondary);
	background-color: var(--mrx-icon-primary);
}

.mrx-icon-view-framed .mrx-split__icon {
	padding: var(--mrx-icon-padding);
	color: var(--mrx-icon-primary);
	background-color: var(--mrx-icon-secondary);
	border: var(--mrx-icon-border-width) solid var(--mrx-icon-primary);
}

.mrx-icon-shape-circle .mrx-split__icon {
	border-radius: 50%;
}

.mrx-icon-shape-square .mrx-split__icon {
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Typography
 * ---------------------------------------------------------------------- */

/* inline-flex so the rule follows the inherited text alignment. */
.mrx-split__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font-family: var(--mrmvr-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mrmvr-amber, #f57528);
}

.mrx-split__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 44px;
	height: 1px;
	background-color: var(--mrx-rule);
}

.mrx-split__title {
	margin: 0 0 22px;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(28px, 3.2vw, 46px);
	font-size: clamp(28px, 5.2cqi, 46px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.4px;
	color: var(--mrmvr-navy, #1a2142);
}

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

.mrx-split__description {
	max-width: 52ch;
	margin: 0 0 28px;
	font-family: var(--mrmvr-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--mrmvr-navy, #1a2142);
	opacity: 0.86;
}

.mrx-split__description > :first-child {
	margin-top: 0;
}

.mrx-split__description > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Feature list — separated by an editorial hairline
 * ---------------------------------------------------------------------- */

.mrx-split__list {
	--mrx-list-columns: 2;
	--mrx-list-gap: 14px;
	--mrx-list-color: var(--mrmvr-navy, #1a2142);
	--mrx-list-icon-color: var(--mrmvr-clay, #cfa190);

	display: grid;
	grid-template-columns: repeat(var(--mrx-list-columns), minmax(0, 1fr));
	gap: var(--mrx-list-gap) 28px;
	margin: 0 0 32px;
	padding: 26px 0 0;
	border-top: 1px solid rgba(207, 161, 144, 0.4);
	list-style: none;
}

.mrx-split__list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-align: left;
}

.mrx-split__list-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 9px;
	line-height: 1;
	color: var(--mrx-list-icon-color);
	border: 1px solid currentColor;
	border-radius: 50%;
}

.mrx-split__list-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mrx-split__list-text {
	font-family: var(--mrmvr-font-body);
	font-size: 15px;
	line-height: 1.45;
	color: var(--mrx-list-color);
}

/* -------------------------------------------------------------------------
 * Button and footnote
 * ---------------------------------------------------------------------- */

/*
 * A block so the inline-flex button is positioned by the inherited
 * `text-align`, avoiding reliance on `justify-content: left | right`.
 */
.mrx-split__actions {
	display: block;
}

.mrx-split__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 36px;
	font-family: var(--mrmvr-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-button-color);
	background-color: var(--mrx-button-bg);
	border: var(--mrx-button-border-width) solid var(--mrx-button-border);
	border-radius: 999px;
	cursor: pointer;
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		box-shadow var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-split__button:hover,
.mrx-split__button:focus-visible {
	color: var(--mrx-button-color-hover);
	background-color: var(--mrx-button-bg-hover);
	border-color: var(--mrx-button-border-hover);
	box-shadow: 0 18px 32px -18px rgba(26, 33, 66, 0.55);
	transform: translateY(-2px);
}

.mrx-split__button:focus-visible {
	outline: 2px solid var(--mrmvr-navy, #1a2142);
	outline-offset: 3px;
}

.mrx-split__button-icon {
	display: inline-flex;
	align-items: center;
	font-size: 0.85em;
	line-height: 1;
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-split__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mrx-split__button:hover .mrx-split__button-icon {
	transform: translateX(4px);
}

.mrx-split__note {
	margin: 16px 0 0;
	font-family: var(--mrmvr-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--mrmvr-navy, #1a2142);
	opacity: 0.6;
}

/*
 * Nothing at the end of the panel may push space past it. Several of the
 * spacing controls write a bottom margin, and whichever block happens to be
 * last would otherwise trail it inside the card.
 */
.mrx-split__inner > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Layout variants
 *
 * Class names come from the `layout` control's `prefix_class`, so they land on
 * the Elementor element wrapper rather than on `.mrx-split` itself.
 * ---------------------------------------------------------------------- */

.mrx-layout-left .mrx-split {
	grid-template-columns: var(--mrx-media-width) minmax(0, 1fr);
	grid-template-areas: "media panel";
}

.mrx-layout-right .mrx-split {
	grid-template-columns: minmax(0, 1fr) var(--mrx-media-width);
	grid-template-areas: "panel media";
}

.mrx-layout-top .mrx-split {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "media" "panel";
}

@media (max-width: 1024px) {
	.mrx-layout-tablet-left .mrx-split {
		grid-template-columns: var(--mrx-media-width) minmax(0, 1fr);
		grid-template-areas: "media panel";
	}

	.mrx-layout-tablet-right .mrx-split {
		grid-template-columns: minmax(0, 1fr) var(--mrx-media-width);
		grid-template-areas: "panel media";
	}

	.mrx-layout-tablet-top .mrx-split {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "panel";
	}
}

@media (max-width: 767px) {
	.mrx-layout-mobile-left .mrx-split {
		grid-template-columns: var(--mrx-media-width) minmax(0, 1fr);
		grid-template-areas: "media panel";
	}

	.mrx-layout-mobile-right .mrx-split {
		grid-template-columns: minmax(0, 1fr) var(--mrx-media-width);
		grid-template-areas: "panel media";
	}

	.mrx-layout-mobile-top .mrx-split {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "panel";
	}
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These fire on the widget's own width, so a narrow Elementor container is
 * handled even on a wide screen. They set properties rather than the custom
 * properties the Elementor controls write to, which keeps them authoritative
 * without an !important: a rule like `.mrx-split-wrap .mrx-split__media`
 * outranks the `.mrx-split__media` rule that reads the variable.
 * ---------------------------------------------------------------------- */

@container mrx (max-width: 700px) {
	/* Below this there is no longer room for a display heading beside the image. */
	.mrx-split-wrap .mrx-split {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "panel";
	}

	/*
	 * Once stacked, the panel has nothing to match heights with, so any
	 * minimum height becomes dead space under the text. This also clears a
	 * value left in Elementor's cached page CSS by an earlier release, where
	 * the panel defaulted to 600px.
	 */
	.mrx-split-wrap .mrx-split__panel {
		min-height: 0;
	}

	.mrx-split-wrap .mrx-split__media {
		min-height: 0;
	}

	.mrx-split-wrap .mrx-split__media {
		aspect-ratio: 16 / 10;
	}

	.mrx-split-wrap .mrx-split__media-frame,
	.mrx-split-wrap .mrx-split__media-outline {
		border-radius: 220px 220px var(--mrx-media-radius-bottom) var(--mrx-media-radius-bottom);
	}

	/* Keep the badge inside the card once the media reaches its edges. */
	.mrx-split-wrap .mrx-split__badge {
		right: 18px;
		bottom: 18px;
		left: auto;
	}
}

/*
 * Nested inside a viewport query on purpose: a phone can hand the widget more
 * than 700px while the `layout` control has already stacked it for mobile, and
 * stretching the media in a stacked grid produces an arbitrary 320px band
 * instead of matching a neighbouring column.
 */
@media (min-width: 768px) {
	@container mrx (min-width: 701px) and (max-width: 980px) {
		/*
		 * In this band the panel's text is taller than a 4:5 crop, so a
		 * centred fixed-ratio image would float in dead space. Stretching it
		 * to the row height keeps both columns flush.
		 */
		.mrx-split-wrap .mrx-split__media {
			aspect-ratio: auto;
			align-self: stretch;
			min-height: 320px;
		}
	}
}

@container mrx (max-width: 560px) {
	.mrx-split-wrap .mrx-split__media {
		aspect-ratio: 3 / 2;
	}

	.mrx-split-wrap .mrx-split__media-frame,
	.mrx-split-wrap .mrx-split__media-outline {
		border-radius: 140px 140px var(--mrx-media-radius-bottom) var(--mrx-media-radius-bottom);
	}

	.mrx-split-wrap .mrx-split__media-outline {
		transform: translate(-10px, 10px);
	}

	.mrx-split-wrap .mrx-split__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrx-split-wrap .mrx-split__button {
		width: 100%;
	}

	.mrx-split-wrap .mrx-split__badge {
		right: 12px;
		bottom: 12px;
		padding: 12px 18px;
	}

	.mrx-split-wrap .mrx-split__badge-value {
		font-size: 24px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.mrx-split *,
	.mrx-split *::before,
	.mrx-split *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.mrx-split .mrx-split__media-frame img,
	.mrx-split:hover .mrx-split__media-outline {
		transform: none !important;
	}
}

@media print {
	.mrx-split {
		display: block;
		border: 1px solid #ddd;
	}

	.mrx-split__media-overlay,
	.mrx-split__media-outline {
		display: none;
	}
}