/**
 * MRMVR Elements — Feature Points.
 *
 * A heading for the section, then a centred image flanked by two lists of
 * points, each list under a label of its own. The left column mirrors so its
 * icons face the image, which reads as one composition rather than two
 * unrelated lists.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.3.0
 */

.mrx-points-wrap {
	/* Declared here, not on the grid: in full-bleed mode the wrapper paints
	   the background, and custom properties only inherit downwards. */
	--mrx-p-bg: var(--mrmvr-blush-soft, #f9e9e0);
	--mrx-p-content-max: 1200px;

	container-type: inline-size;
	container-name: mrxp;
	min-height: 0;
}

.mrx-points {
	/* Layout */
	--mrx-p-media-width: 34%;
	--mrx-p-column-gap: clamp(28px, 4cqi, 64px);
	--mrx-p-item-gap: 30px;
	--mrx-p-icon-gap: 16px;
	--mrx-p-valign: start;

	/* Main heading — the section's own title, above both lists. */
	--mrx-p-main-color: var(--mrmvr-navy, #1a2142);
	--mrx-p-main-accent: var(--mrmvr-amber, #f57528);
	--mrx-p-main-align: center;
	--mrx-p-main-gap: 0px;

	/* List labels — the pair is a deliberate black / orange contrast. */
	--mrx-p-heading-left: var(--mrmvr-navy, #1a2142);
	--mrx-p-heading-right: var(--mrmvr-amber, #f57528);
	--mrx-p-arrow: var(--mrmvr-amber, #f57528);
	--mrx-p-heading-gap: clamp(30px, 4cqi, 56px);
	--mrx-p-heading-rule-length: 0px;

	/* Media */
	--mrx-p-media-ratio: 3 / 4;
	--mrx-p-media-radius: 20px;
	--mrx-p-ring-color: rgba(207, 161, 144, 0.55);
	--mrx-p-ring-offset: 14px;

	/* Icon — orange mark on a cream ground */
	--mrx-p-icon-color: var(--mrmvr-amber, #f57528);
	--mrx-p-icon-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-p-icon-border: rgba(245, 117, 40, 0.35);
	--mrx-p-icon-size: 18px;
	--mrx-p-icon-box: 52px;
	--mrx-p-icon-radius: 50%;

	/* Type */
	--mrx-p-title: var(--mrmvr-navy, #1a2142);
	--mrx-p-body: var(--mrmvr-navy, #1a2142);
	--mrx-p-title-gap: 7px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mrx-p-media-width) minmax(0, 1fr);
	/* Row gap sits under the header; column gap separates the three columns. */
	gap: var(--mrx-p-heading-gap) var(--mrx-p-column-gap);
	align-items: var(--mrx-p-valign);
	padding: clamp(24px, 3.4cqi, 56px);
	background-color: var(--mrx-p-bg);
	border-radius: 24px;
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Main heading — the section's own title
 *
 * Its own grid row, so the row gap that separates the labels from the points
 * separates the title from the labels too, and the three read as a hierarchy
 * rather than as three lines of the same weight.
 * ---------------------------------------------------------------------- */

.mrx-points__main {
	grid-column: 1 / -1;
	margin: 0 0 var(--mrx-p-main-gap);
	font-family: var(--mrmvr-font-display);
	font-size: clamp(30px, 4.6cqi, 52px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.6px;
	text-align: var(--mrx-p-main-align, center);
	text-wrap: balance;
	color: var(--mrx-p-main-color);
}

.mrx-points__main em,
.mrx-points__main i {
	font-style: italic;
	color: var(--mrx-p-main-accent);
}

/* -------------------------------------------------------------------------
 * Point columns
 * ---------------------------------------------------------------------- */

.mrx-points__col-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/*
 * Each list is named by a label of its own, inside the column and directly
 * above the points, rather than by a shared line across the top: a label that
 * sits in its own band reads as a second section title, not as the name of
 * the list beneath it.
 */
.mrx-points__col-label {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: clamp(20px, 2.6cqi, 30px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.2px;
	color: var(--mrx-p-heading-left);
}

/* The label follows the edge its own list reads from. */
.mrx-mirror-yes .mrx-points__col-wrap--start .mrx-points__col-label {
	flex-direction: row-reverse;
	text-align: right;
}

.mrx-points__col-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.62em;
	line-height: 1;
	color: var(--mrx-p-arrow);
}

.mrx-points__col-label-icon svg,
.mrx-points__col-label-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-points__col-wrap--end .mrx-points__col-label {
	color: var(--mrx-p-heading-right);
}

/*
 * The label is a flex row, so its rule cannot sit inside it as another line.
 * It is drawn in the gap the column already leaves under the label instead,
 * which also means a length of 0 costs no space at all.
 */
.mrx-points__col-label {
	position: relative;
}

.mrx-points__col-label::after {
	content: "";
	position: absolute;
	bottom: -12px;
	width: var(--mrx-p-heading-rule-length);
	height: 2px;
	background-color: currentColor;
}

.mrx-points__col-wrap--start .mrx-points__col-label::after {
	left: 0;
}

.mrx-mirror-yes .mrx-points__col-wrap--start .mrx-points__col-label::after {
	left: auto;
	right: 0;
}

.mrx-points__col-wrap--end .mrx-points__col-label::after {
	left: 0;
}

.mrx-points__col {
	display: flex;
	flex-direction: column;
	gap: var(--mrx-p-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrx-points__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mrx-p-icon-gap);
	margin: 0;
	text-align: left;
}

/*
 * The left column mirrors so its icons sit nearest the image. Gated on the
 * `mirror_left` prefix class so the stacked guardrail below can outrank it.
 */
.mrx-mirror-yes .mrx-points__col--start .mrx-points__item {
	flex-direction: row-reverse;
	text-align: right;
}

.mrx-points__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mrx-p-icon-box);
	height: var(--mrx-p-icon-box);
	font-size: var(--mrx-p-icon-size);
	line-height: 1;
	color: var(--mrx-p-icon-color);
	background-color: var(--mrx-p-icon-bg);
	border: 1px solid var(--mrx-p-icon-border);
	border-radius: var(--mrx-p-icon-radius);
	transition: background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

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

.mrx-points__item:hover .mrx-points__icon {
	color: var(--mrx-p-icon-bg);
	background-color: var(--mrx-p-icon-color);
	border-color: var(--mrx-p-icon-color);
}

.mrx-points__text {
	min-width: 0;
}

.mrx-points__title {
	margin: 0 0 var(--mrx-p-title-gap);
	font-family: var(--mrmvr-font-body);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--mrx-p-title);
}

.mrx-points__desc {
	margin: 0;
	font-family: var(--mrmvr-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	text-wrap: pretty;
	color: var(--mrx-p-body);
	opacity: 0.75;
}

/* Nothing at the end of a column may push space past it. */
.mrx-points__col > :last-child,
.mrx-points__col-wrap > :last-child {
	margin-bottom: 0;
}

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

/*
 * Centred in its row while the two lists range from the top, so columns of
 * unequal length still start on the same line as each other.
 */
.mrx-points__media {
	position: relative;
	align-self: center;
	aspect-ratio: var(--mrx-p-media-ratio);
}

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

.mrx-points:hover .mrx-points__media-ring {
	transform: translate(calc(var(--mrx-p-ring-offset) * -0.5), calc(var(--mrx-p-ring-offset) * 0.5));
}

/*
 * 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-points__media-frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background-color: var(--mrmvr-cream, #fdf8f5);
	border-radius: var(--mrx-p-media-radius);
}

.mrx-points__media-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* -------------------------------------------------------------------------
 * Full-bleed background
 *
 * The wrapper is what breaks out, not the grid. It is the query container, so
 * bleeding the grid instead would leave every container query measuring the
 * original column width while the layout spanned the screen.
 *
 * `--mrx-sbw` is the scrollbar width, measured by the script. Without it the
 * rule falls back to plain 100vw, which is a hair wide on desktop but still
 * renders; with it the bleed is exact and cannot cause a horizontal scrollbar.
 * ---------------------------------------------------------------------- */

.mrx-bleed-yes .mrx-points-wrap {
	--mrx-bleed-width: calc(100vw - var(--mrx-sbw, 0px));

	width: var(--mrx-bleed-width);
	margin-left: calc(50% - (var(--mrx-bleed-width) / 2));
	margin-right: 0;
	background-color: var(--mrx-p-bg);
}

/* The grid keeps its measure; only the colour runs edge to edge. */
.mrx-bleed-yes .mrx-points-wrap .mrx-points {
	max-width: var(--mrx-p-content-max);
	margin-inline: auto;
	background-color: transparent;
	border-radius: 0;
}

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

/*
 * A boxed page container is often around 780px, which still holds three
 * columns once the image and the icon badges give a little width back to the
 * text.
 */
@container mrxp (min-width: 701px) and (max-width: 900px) {
	.mrx-points-wrap .mrx-points {
		grid-template-columns: minmax(0, 1fr) 30% minmax(0, 1fr);
		column-gap: 26px;
	}

	.mrx-points-wrap .mrx-points__item {
		gap: 12px;
	}

	.mrx-points-wrap .mrx-points__icon {
		width: 42px;
		height: 42px;
		font-size: 15px;
	}

	.mrx-points-wrap .mrx-points__col {
		gap: 24px;
	}
}

@container mrxp (max-width: 700px) {
	/*
	 * Below this the text columns are too narrow to read. The header leads,
	 * then the image, then both point lists side by side beneath it.
	 */
	.mrx-points-wrap .mrx-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * No three-column composition left to sit over, so the labels return to
	 * one centred line above the image.
	 */
	.mrx-points-wrap .mrx-points__main {
		order: -2;
	}

	.mrx-points-wrap .mrx-points__media {
		order: -1;
		grid-column: 1 / -1;
		justify-self: center;
		width: min(360px, 100%);
	}

	/*
	 * Mirroring only reads correctly either side of the image. The extra
	 * `.mrx-points` in the selector is deliberate: it has to outrank the
	 * `.mrx-mirror-yes ...` rule above.
	 */
	.mrx-points-wrap .mrx-points .mrx-points__col--start .mrx-points__item {
		flex-direction: row;
		text-align: left;
	}

	.mrx-points-wrap .mrx-points .mrx-points__col-label {
		flex-direction: row;
		text-align: left;
	}
}

@container mrxp (max-width: 560px) {
	.mrx-points-wrap .mrx-points {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrx-points-wrap .mrx-points__media {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

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