/**
 * MRMVR Elements — Section Heading.
 *
 * An editorial section intro: an eyebrow set between hairlines, a fluid
 * display heading with accent emphasis, an ornamental divider and a measured
 * description. Stacks or splits into two magazine columns.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.2.0
 */

.mrx-heading-wrap {
	container-type: inline-size;
	container-name: mrxh;

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

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

.mrx-heading {
	/* Layout */
	--mrx-h-align: center;
	--mrx-h-max-width: 760px;
	--mrx-h-split-gap: clamp(32px, 6cqi, 88px);
	--mrx-h-title-width: 1fr;

	/* Type colour */
	--mrx-h-eyebrow: var(--mrmvr-clay, #cfa190);
	--mrx-h-title: var(--mrmvr-navy, #1a2142);
	--mrx-h-accent: var(--mrmvr-amber, #f57528);
	--mrx-h-body: var(--mrmvr-navy, #1a2142);

	/* Ornament */
	--mrx-h-rule: rgba(207, 161, 144, 0.55);
	--mrx-h-rule-length: 46px;
	--mrx-h-divider-length: 128px;
	--mrx-h-divider-thickness: 1px;
	--mrx-h-mark: var(--mrmvr-clay, #cfa190);
	--mrx-h-mark-size: 6px;

	/* Rhythm */
	--mrx-h-eyebrow-gap: 22px;
	--mrx-h-divider-gap: 26px;
	--mrx-h-description-gap: 26px;
	--mrx-h-measure: 62ch;
	--mrx-h-columns: 1;
	--mrx-h-column-gap: 44px;

	max-width: var(--mrx-h-max-width);
	margin-inline: auto;
	text-align: var(--mrx-h-align);
	font-family: var(--mrmvr-font-body);
}

/* A left- or right-aligned block should sit against its edge, not stay centred. */
.mrx-align-left .mrx-heading {
	margin-inline: 0 auto;
}

.mrx-align-right .mrx-heading {
	margin-inline: auto 0;
}

/* -------------------------------------------------------------------------
 * Eyebrow — set between hairlines
 * ---------------------------------------------------------------------- */

.mrx-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 var(--mrx-h-eyebrow-gap);
	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-h-eyebrow);
}

.mrx-heading__eyebrow::before,
.mrx-heading__eyebrow::after {
	content: "";
	flex: 0 0 auto;
	width: var(--mrx-h-rule-length);
	height: 1px;
	background-color: var(--mrx-h-rule);
}

/* One rule when the text is ranged, two when it is centred. */
.mrx-heading__eyebrow::after {
	display: none;
}

.mrx-align-center .mrx-heading__eyebrow::after {
	display: block;
}

.mrx-align-right .mrx-heading__eyebrow::before {
	display: none;
}

.mrx-align-right .mrx-heading__eyebrow::after {
	display: block;
}

/* -------------------------------------------------------------------------
 * Title
 * ---------------------------------------------------------------------- */

.mrx-heading__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(30px, 4vw, 56px);
	font-size: clamp(30px, 6.4cqi, 56px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.6px;
	text-wrap: balance;
	color: var(--mrx-h-title);
}

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

/* -------------------------------------------------------------------------
 * Divider ornament
 * ---------------------------------------------------------------------- */

.mrx-heading__divider {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	width: var(--mrx-h-divider-length);
	max-width: 100%;
	margin-top: var(--mrx-h-divider-gap);
}

.mrx-heading__divider-line {
	flex: 1 1 auto;
	height: var(--mrx-h-divider-thickness);
	background-color: var(--mrx-h-rule);
}

.mrx-heading__divider-mark {
	flex: 0 0 auto;
	width: var(--mrx-h-mark-size);
	height: var(--mrx-h-mark-size);
	background-color: var(--mrx-h-mark);
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * Description
 * ---------------------------------------------------------------------- */

.mrx-heading__description {
	max-width: var(--mrx-h-measure);
	margin-top: var(--mrx-h-description-gap);
	font-family: var(--mrmvr-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	text-wrap: pretty;
	color: var(--mrx-h-body);
	opacity: 0.82;
}

/* The measure has to be centred too, or a centred block drifts left. */
.mrx-align-center .mrx-heading__description {
	margin-inline: auto;
}

.mrx-align-right .mrx-heading__description {
	margin-inline: auto 0;
}

.mrx-heading__description.mrx-heading__description--columns {
	columns: var(--mrx-h-columns);
	column-gap: var(--mrx-h-column-gap);
}

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

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

/* -------------------------------------------------------------------------
 * Split layout — heading against description, magazine style
 * ---------------------------------------------------------------------- */

.mrx-hlayout-split .mrx-heading {
	display: grid;
	grid-template-columns: var(--mrx-h-title-width) minmax(0, 1fr);
	gap: var(--mrx-h-split-gap);
	align-items: start;
	max-width: var(--mrx-h-max-width);
	text-align: left;
}

/* Ranged left regardless of the alignment control, which governs the stacked
   form; a split intro reads as two columns of flush-left text. */
.mrx-hlayout-split .mrx-heading__description,
.mrx-hlayout-split .mrx-heading__divider {
	margin-inline: 0;
}

.mrx-hlayout-split .mrx-heading__eyebrow::after {
	display: none;
}

.mrx-hlayout-split .mrx-heading__eyebrow::before {
	display: block;
}

.mrx-hlayout-split .mrx-heading__body {
	/* Optical alignment: nudge the body to the heading's first baseline. */
	padding-top: 6px;
}

.mrx-hlayout-split .mrx-heading__description {
	margin-top: 0;
}

.mrx-hlayout-split .mrx-heading__divider {
	margin-top: 0;
	margin-bottom: var(--mrx-h-description-gap);
}

/* Nothing at the end of either column should push space past the block. */
.mrx-heading__lead > :last-child,
.mrx-heading__body > :last-child {
	margin-bottom: 0;
}

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

@container mrxh (max-width: 700px) {
	/* Two columns of text stop working before the type does. */
	.mrx-heading-wrap .mrx-heading {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrx-heading-wrap .mrx-heading__body {
		padding-top: 0;
	}

	.mrx-heading-wrap .mrx-heading__description {
		columns: 1;
	}
}

@container mrxh (max-width: 480px) {
	.mrx-heading-wrap .mrx-heading__eyebrow {
		gap: 12px;
	}

	.mrx-heading-wrap .mrx-heading__eyebrow::before,
	.mrx-heading-wrap .mrx-heading__eyebrow::after {
		width: 24px;
	}
}

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

@media print {
	.mrx-heading__divider-mark {
		transform: none;
	}
}