/**
 * MRMVR Elements — Signature Panels.
 *
 * The editorial counterpart to Feature Cards, and deliberately its opposite in
 * every respect: one cream slab divided by clay hairlines instead of separate
 * white boxes, an oversized serif index numeral instead of a centred icon
 * badge, ranged-left copy instead of centred, and an accent rule that draws
 * itself across the top of a panel on hover instead of the whole card lifting.
 *
 * The palette is warm and light by default. Three presets are supplied and
 * every colour is still a control, so the same composition can be run as a
 * cream slab, a plain ivory one, or inverted into a dark band.
 *
 * The two are meant to sit on the same page without reading as the same
 * component used twice.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.26.0
 */

.mrx-sig-wrap {
	/* Declared on the wrapper: in full-bleed mode this is what paints the
	   background, and custom properties only inherit downwards. */
	--mrx-s-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-s-content-max: 1240px;

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

.mrx-sig {
	/* Section */
	--mrx-s-radius: 28px;
	--mrx-s-pad: clamp(28px, 4cqi, 72px);
	--mrx-s-frame: rgba(207, 161, 144, 0.4);
	--mrx-s-glow: rgba(251, 230, 221, 0.75);
	--mrx-s-head-gap: clamp(32px, 4cqi, 64px);

	/* Panels — the row set writes its own counts inline, per breakpoint. */
	--mrx-s-cols: 3;
	--mrx-s-cols-md: 3;
	--mrx-s-cols-sm: 2;
	--mrx-s-panel-pad: clamp(24px, 2.8cqi, 42px);
	--mrx-s-panel-min: 0px;
	--mrx-s-panel-hover: rgba(251, 230, 221, 0.5);
	--mrx-s-divider: rgba(207, 161, 144, 0.42);
	--mrx-s-accent: var(--mrmvr-amber, #f57528);
	--mrx-s-rule-height: 2px;

	/* Index numeral */
	--mrx-s-index: rgba(207, 161, 144, 0.75);
	--mrx-s-index-hover: var(--mrmvr-amber, #f57528);
	--mrx-s-index-size: clamp(32px, 4cqi, 50px);

	/* Icon — a line mark, not a filled badge. It stands where the numeral
	   would, so it is sized to hold that place rather than to trim a line. */
	--mrx-s-icon: var(--mrmvr-clay-deep, #c08e82);
	--mrx-s-icon-hover: var(--mrmvr-amber, #f57528);
	--mrx-s-icon-size: 30px;

	/* Type */
	--mrx-s-eyebrow: var(--mrmvr-clay-deep, #c08e82);
	--mrx-s-heading: var(--mrmvr-navy, #1a2142);
	--mrx-s-heading-accent: var(--mrmvr-amber, #f57528);
	--mrx-s-intro: rgba(26, 33, 66, 0.68);
	--mrx-s-title: var(--mrmvr-navy, #1a2142);
	--mrx-s-body: rgba(26, 33, 66, 0.66);
	--mrx-s-link: var(--mrmvr-navy, #1a2142);
	--mrx-s-link-hover: var(--mrmvr-amber, #f57528);

	/* Description — the line under the panels. Its colour follows the panel
	   body copy unless one is set, so every palette carries it already. */
	--mrx-s-note: var(--mrx-s-body);
	--mrx-s-note-gap: clamp(20px, 2.6cqi, 34px);
	--mrx-s-note-max: 72ch;
	--mrx-s-note-align: left;
	--mrx-s-note-ms: 0;
	--mrx-s-note-me: auto;

	position: relative;
	isolation: isolate;
	padding: var(--mrx-s-pad);
	background-color: var(--mrx-s-bg);
	/* A cream slab on a cream page needs an edge of its own; a dark one does
	   not, and its preset quietens this to almost nothing. */
	border: 1px solid var(--mrx-s-frame);
	border-radius: var(--mrx-s-radius);
	font-family: var(--mrmvr-font-body);
}

/*
 * A single soft light source in one corner. It is what stops a large flat
 * rectangle reading as a plain block of colour, and it is drawn rather than
 * layered on the background so the colour control stays a plain colour.
 */
.mrx-sig::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(120% 85% at 88% 0%, var(--mrx-s-glow), transparent 62%);
	border-radius: inherit;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Palettes
 *
 * Whole sets rather than single colours, because these values only work
 * together: a divider, a numeral and a hover wash all have to sit at the same
 * distance from the ground or the composition comes apart. Every one of them
 * is still an Elementor control, and a colour set there outranks the preset.
 * ---------------------------------------------------------------------- */

/* Ivory — the same composition on plain white, for a page already carrying
   colour elsewhere. */
.mrx-spal-ivory .mrx-sig-wrap {
	--mrx-s-bg: #ffffff;
}

.mrx-spal-ivory .mrx-sig {
	--mrx-s-frame: rgba(26, 33, 66, 0.12);
	--mrx-s-divider: rgba(26, 33, 66, 0.12);
	--mrx-s-panel-hover: rgba(207, 161, 144, 0.12);
	--mrx-s-glow: rgba(251, 230, 221, 0.6);
	--mrx-s-index: rgba(26, 33, 66, 0.2);
}

/* Midnight — inverted, for one dark band set between light sections. */
.mrx-spal-midnight .mrx-sig-wrap {
	--mrx-s-bg: #141a33;
}

.mrx-spal-midnight .mrx-sig {
	--mrx-s-frame: rgba(255, 255, 255, 0.1);
	--mrx-s-divider: rgba(255, 255, 255, 0.14);
	--mrx-s-panel-hover: rgba(255, 255, 255, 0.05);
	--mrx-s-glow: rgba(245, 117, 40, 0.16);
	--mrx-s-index: rgba(255, 255, 255, 0.22);
	--mrx-s-icon: rgba(255, 255, 255, 0.55);
	--mrx-s-eyebrow: var(--mrmvr-clay, #cfa190);
	--mrx-s-heading: #ffffff;
	--mrx-s-intro: rgba(255, 255, 255, 0.66);
	--mrx-s-title: #ffffff;
	--mrx-s-body: rgba(255, 255, 255, 0.62);
	--mrx-s-link: #ffffff;
}

/* -------------------------------------------------------------------------
 * Header
 *
 * Ranged left with the intro set beside it rather than centred beneath, which
 * is the arrangement Feature Cards uses.
 * ---------------------------------------------------------------------- */

.mrx-sig__head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: end;
	gap: clamp(18px, 2.4cqi, 44px);
	margin-bottom: var(--mrx-s-head-gap);
}

/* Stacked: the intro drops under the heading and both range left. */
.mrx-shead-stacked .mrx-sig__head {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	max-width: 760px;
}

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

/* The rule before the eyebrow, not under it: a masthead mark rather than a
   centred divider. */
.mrx-sig__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
	background-color: currentColor;
}

.mrx-sig__heading {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: clamp(30px, 4.6cqi, 54px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: var(--mrx-s-heading);
}

.mrx-sig__heading em {
	font-style: italic;
	color: var(--mrx-s-heading-accent);
}

.mrx-sig__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	text-wrap: pretty;
	color: var(--mrx-s-intro);
}

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

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

/* -------------------------------------------------------------------------
 * Panel row
 *
 * The hairlines between panels are drawn by each panel as a shadow on its own
 * top and left edge, which costs no layout space, and the row clips whatever
 * falls outside it. That leaves the outer edges to the row's own rules, so an
 * incomplete final row cannot leave a stub of divider hanging in mid-air.
 * ---------------------------------------------------------------------- */

.mrx-sig__row {
	display: grid;
	grid-template-columns: repeat(var(--mrx-s-cols), minmax(0, 1fr));
	/*
	 * Every row as deep as the deepest, so the hairlines run straight across
	 * the slab whatever length the copy in each panel runs to.
	 *
	 * That only earns its keep while a row holds more than one panel. At a
	 * single column every panel is its own row, and equalising them pads each
	 * one out to the longest panel's height — dead space under the short ones,
	 * with no hairline left to align to. The row therefore switches back to
	 * `auto` wherever the column count reaches one.
	 */
	grid-auto-rows: var(--mrx-s-rows, 1fr);
	overflow: hidden;
	border-top: 1px solid var(--mrx-s-divider);
	border-bottom: 1px solid var(--mrx-s-divider);
}

.mrx-sig__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-height: var(--mrx-s-panel-min);
	margin: 0;
	padding: var(--mrx-s-panel-pad);
	color: inherit;
	text-align: left;
	text-decoration: none;
	/* Left and top hairlines. The topmost and leftmost land outside the row
	   and are clipped, so only the internal divisions show. */
	box-shadow: -1px 0 0 0 var(--mrx-s-divider), 0 -1px 0 0 var(--mrx-s-divider);
	transition: background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

/*
 * A final row that does not fill closes itself: the last panel runs on across
 * whatever columns are left over, so the slab never ends on a hole. The spans
 * are counted per breakpoint and written inline, since how much is left over
 * depends on how many columns the row is currently showing.
 */
.mrx-sig__panel:last-child {
	grid-column: span var(--mrx-s-span, 1);
}

.mrx-sig__panel:hover,
.mrx-sig__panel:focus-visible {
	background-color: var(--mrx-s-panel-hover);
}

.mrx-sig__panel:focus-visible {
	outline: 2px solid var(--mrx-s-accent);
	outline-offset: -2px;
}

/*
 * The accent rule draws itself across the top of the panel being read. It
 * replaces the card lift entirely: on a dark ground a raised box reads as a
 * mistake, while a line being drawn reads as attention.
 */
.mrx-sig__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--mrx-s-rule-height);
	background-color: var(--mrx-s-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
	pointer-events: none;
}

.mrx-sig__panel:hover::before,
.mrx-sig__panel:focus-visible::before {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
 * Index numeral
 * ---------------------------------------------------------------------- */

.mrx-sig__index {
	display: block;
	font-family: var(--mrmvr-font-display);
	font-size: var(--mrx-s-index-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--mrx-s-index);
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-sig__panel:hover .mrx-sig__index,
.mrx-sig__panel:focus-visible .mrx-sig__index {
	color: var(--mrx-s-index-hover);
}

/* -------------------------------------------------------------------------
 * Icon — the alternative mark to the numeral, never a badge
 *
 * Only one of the two is ever rendered, so both are written to sit in the
 * same place at the head of the panel.
 * ---------------------------------------------------------------------- */

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

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

.mrx-sig__panel:hover .mrx-sig__icon,
.mrx-sig__panel:focus-visible .mrx-sig__icon {
	color: var(--mrx-s-icon-hover);
}

/* -------------------------------------------------------------------------
 * Panel copy
 * ---------------------------------------------------------------------- */

.mrx-sig__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: var(--mrx-s-title);
}

.mrx-sig__text {
	margin: 0;
	font-family: var(--mrmvr-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	text-wrap: pretty;
	color: var(--mrx-s-body);
}

/* Pushed to the foot so the cue sits on the same line in every panel of a row
   whose copy runs to different lengths. */
.mrx-sig__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mrx-s-link);
	transition: color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-sig__link-icon {
	display: inline-flex;
	font-size: 12px;
	line-height: 1;
	transition: transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

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

.mrx-sig__panel:hover .mrx-sig__link,
.mrx-sig__panel:focus-visible .mrx-sig__link {
	color: var(--mrx-s-link-hover);
}

.mrx-sig__panel:hover .mrx-sig__link-icon,
.mrx-sig__panel:focus-visible .mrx-sig__link-icon {
	transform: translateX(5px);
}

/* -------------------------------------------------------------------------
 * Description
 *
 * Held to a measure rather than run the full width of the slab: at this size
 * a line spanning 1240px is read by hunting for where the next one starts.
 * The two margin properties are written together by the alignment control, so
 * the block travels with the words instead of staying pinned left.
 * ---------------------------------------------------------------------- */

.mrx-sig__note {
	max-width: var(--mrx-s-note-max);
	margin: var(--mrx-s-note-gap) var(--mrx-s-note-me) 0 var(--mrx-s-note-ms);
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	text-align: var(--mrx-s-note-align);
	text-wrap: pretty;
	color: var(--mrx-s-note);
}

/*
 * The editor writes its own paragraphs. Their outer margins would double the
 * space set above and hang the rest off the foot of the slab, so the ends are
 * flattened and the gaps between paragraphs left alone.
 */
.mrx-sig__note > :first-child {
	margin-top: 0;
}

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

/*
 * A theme styling `p` directly outranks anything inherited from the div, which
 * would leave the typography control apparently doing nothing. Handing the
 * paragraph its parent's values settles that without reaching for !important.
 */
.mrx-sig__note p {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.mrx-sig__note a {
	color: var(--mrx-s-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

.mrx-sig__note a:hover,
.mrx-sig__note a:focus-visible {
	color: var(--mrx-s-link-hover);
}

/* -------------------------------------------------------------------------
 * Full-bleed background
 *
 * The wrapper is what breaks out, not the slab. It is the query container, so
 * bleeding the slab 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-sbleed-yes .mrx-sig-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-s-bg);
}

/* The slab keeps its measure; only the colour runs edge to edge. */
.mrx-sbleed-yes .mrx-sig-wrap .mrx-sig {
	max-width: var(--mrx-s-content-max);
	margin-inline: auto;
	background-color: transparent;
	/* An edge-to-edge band has no edges of its own to draw. */
	border: 0;
	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.
 * ---------------------------------------------------------------------- */

@container mrxs (max-width: 1000px) {
	/*
	 * Four across stops being readable well before three does. The counts are
	 * capped rather than set, so a section built as two columns stays two.
	 */
	.mrx-sig-wrap .mrx-sig__row {
		grid-template-columns: repeat(var(--mrx-s-cols-md), minmax(0, 1fr));
	}

	.mrx-sig-wrap .mrx-sig__panel:last-child {
		grid-column: span var(--mrx-s-span-md, 1);
	}
}

@container mrxs (max-width: 820px) {
	.mrx-sig-wrap .mrx-sig__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.mrx-sig-wrap .mrx-sig__row {
		grid-template-columns: repeat(var(--mrx-s-cols-sm), minmax(0, 1fr));
	}

	.mrx-sig-wrap .mrx-sig__panel:last-child {
		grid-column: span var(--mrx-s-span-sm, 1);
	}
}

@container mrxs (max-width: 520px) {
	.mrx-sig-wrap .mrx-sig__row {
		grid-template-columns: minmax(0, 1fr);
		/* One panel to a row: each takes its own height, so no panel is padded
		   out to match another it no longer sits beside. */
		grid-auto-rows: auto;
	}

	/* One column: there is nothing left over for the last panel to run into. */
	.mrx-sig-wrap .mrx-sig__panel:last-child {
		grid-column: auto;
	}

	/*
	 * One panel per line: the index numeral now carries the whole left edge on
	 * its own, so it steps down to sit with the title rather than above it.
	 */
	.mrx-sig-wrap .mrx-sig__index {
		font-size: clamp(28px, 9cqi, 40px);
	}

	.mrx-sig-wrap .mrx-sig__panel {
		min-height: 0;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.mrx-sig__panel,
	.mrx-sig__panel::before,
	.mrx-sig__index,
	.mrx-sig__icon,
	.mrx-sig__link,
	.mrx-sig__link-icon {
		transition: none !important;
	}

	.mrx-sig__panel::before {
		transform: none;
		opacity: 0;
	}

	.mrx-sig__panel:hover::before,
	.mrx-sig__panel:focus-visible::before {
		opacity: 1;
	}
}

@media print {
	.mrx-sig {
		background-color: #ffffff;
	}

	.mrx-sig::before {
		display: none;
	}

	/* Whichever palette is on screen, print is ink on white paper. */
	.mrx-sig__heading,
	.mrx-sig__title,
	.mrx-sig__text,
	.mrx-sig__intro,
	.mrx-sig__note,
	.mrx-sig__index {
		color: #1a2142;
	}
}