/**
 * MRMVR Elements — Feature Cards.
 *
 * A heading over a row of cards, each holding an icon badge, a display-serif
 * title and a line of supporting text. Built for a white ground, so the cards
 * are held by a hairline and a shadow rather than by a fill.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.22.0
 */

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

.mrx-cards {
	/* Layout */
	--mrx-c-cols: 4;
	--mrx-c-gap: clamp(18px, 2.2cqi, 30px);
	--mrx-c-head-gap: clamp(30px, 3.8cqi, 60px);
	--mrx-c-align: center;
	--mrx-c-measure: 62ch;

	/* Card */
	--mrx-c-card-bg: #ffffff;
	--mrx-c-card-border: rgba(207, 161, 144, 0.4);
	--mrx-c-card-border-hover: var(--mrmvr-amber, #f57528);
	--mrx-c-card-radius: 18px;
	--mrx-c-card-pad: clamp(24px, 2.6cqi, 36px);
	--mrx-c-card-shadow: 0 1px 2px rgba(26, 33, 66, 0.04);
	--mrx-c-card-shadow-hover: 0 22px 44px -26px rgba(26, 33, 66, 0.45);
	--mrx-c-lift: 6px;

	/* Icon badge */
	--mrx-c-icon: var(--mrmvr-amber, #f57528);
	--mrx-c-icon-bg: var(--mrmvr-blush-soft, #f9e9e0);
	--mrx-c-icon-hover: #ffffff;
	--mrx-c-icon-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-c-icon-box: 56px;
	--mrx-c-icon-size: 22px;
	--mrx-c-icon-radius: 16px;

	/* Button */
	--mrx-c-btn-bg: var(--mrmvr-navy, #1a2142);
	--mrx-c-btn-color: #ffffff;
	--mrx-c-btn-border: var(--mrmvr-navy, #1a2142);
	--mrx-c-btn-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-c-btn-color-hover: #ffffff;
	--mrx-c-btn-border-hover: var(--mrmvr-amber, #f57528);
	--mrx-c-btn-radius: 999px;
	--mrx-c-btn-gap: clamp(28px, 3.4cqi, 48px);

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

	text-align: var(--mrx-c-align);
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */

.mrx-cards__head {
	margin: 0 0 var(--mrx-c-head-gap);
}

.mrx-cards__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-c-eyebrow);
}

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

.mrx-cards__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-c-heading);
}

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

.mrx-cards__intro {
	max-width: var(--mrx-c-measure);
	margin: 16px auto 0;
	font-size: 17px;
	line-height: 1.7;
	text-wrap: pretty;
	color: var(--mrx-c-body);
	opacity: 0.82;
}

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

.mrx-calign-left .mrx-cards__intro { margin-inline: 0 auto; }
.mrx-calign-right .mrx-cards__intro { margin-inline: auto 0; }

/* -------------------------------------------------------------------------
 * The row of cards
 * ---------------------------------------------------------------------- */

/*
 * Flex rather than grid, so a row that does not fill can centre itself.
 * Grid pins an incomplete final row to the left, which leaves five cards
 * sitting three-then-two-hard-left; flex-wrap with `justify-content: center`
 * gives three over a centred two, which is what a balanced row should look
 * like. Each card's basis is one share of the width once the gaps are taken
 * out, so the columns stay exact.
 */
.mrx-cards__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mrx-c-gap);
	/* Cards on the same row take that row's height, so their edges line up
	   however uneven the copy is. */
	align-items: stretch;
}

.mrx-cards__card {
	flex: 0 1 calc((100% - (var(--mrx-c-cols) - 1) * var(--mrx-c-gap)) / var(--mrx-c-cols));
	/*
	 * A floor, so asking for five across never squeezes the cards past
	 * legibility: if the row cannot hold them at this width they wrap on their
	 * own rather than shrinking indefinitely.
	 */
	min-width: min(100%, 190px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: var(--mrx-c-items, center);
	gap: 16px;
	/*
	 * No `height: 100%` here. A flex item only stretches to its line while its
	 * cross size is auto, and a percentage height against a row of no fixed
	 * height is not that: it left every card standing at its own copy's height
	 * and the row's feet ragged.
	 */
	margin: 0;
	padding: var(--mrx-c-card-pad);
	background-color: var(--mrx-c-card-bg);
	border: 1px solid var(--mrx-c-card-border);
	border-radius: var(--mrx-c-card-radius);
	box-shadow: var(--mrx-c-card-shadow);
	text-align: var(--mrx-c-align);
	text-decoration: none;
	transition: transform 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);
}

/*
 * Equal height.
 *
 * Cards on one line already stretch to that line's height. What this adds is
 * the line above matching the line below: the script measures the tallest card
 * on the whole row set and publishes it as `--mrx-c-card-min`, which every
 * card then takes as a floor. It is a floor rather than a fixed height, so a
 * card whose copy needs more room than the measurement still grows instead of
 * spilling out of its box.
 *
 * Without the script nothing is published and the fallback is 0 — each line
 * keeps its own height, which is the same as the toggle being off.
 */
.mrx-ceq-yes .mrx-cards__card {
	min-height: var(--mrx-c-card-min, 0px);
}

/* Alignment drives both the text and the icon's place above it. */
.mrx-calign-left .mrx-cards__card { --mrx-c-items: flex-start; }
.mrx-calign-right .mrx-cards__card { --mrx-c-items: flex-end; }

.mrx-cards__card:hover,
.mrx-cards__card:focus-visible {
	transform: translateY(calc(var(--mrx-c-lift) * -1));
	border-color: var(--mrx-c-card-border-hover);
	box-shadow: var(--mrx-c-card-shadow-hover);
}

.mrx-cards__card:focus-visible {
	outline: 2px solid var(--mrx-c-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Icon badge
 * ---------------------------------------------------------------------- */

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

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

.mrx-cards__card:hover .mrx-cards__icon,
.mrx-cards__card:focus-visible .mrx-cards__icon {
	color: var(--mrx-c-icon-hover);
	background-color: var(--mrx-c-icon-bg-hover);
	transform: scale(1.06);
}

/* -------------------------------------------------------------------------
 * Card text
 * ---------------------------------------------------------------------- */

.mrx-cards__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.2px;
	text-wrap: balance;
	color: var(--mrx-c-title);
}

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

/* -------------------------------------------------------------------------
 * Button
 * ---------------------------------------------------------------------- */

/*
 * A block, so the inline-flex button is placed by the inherited `text-align`
 * rather than by `justify-content: left | right`.
 */
.mrx-cards__actions {
	display: block;
	margin-top: var(--mrx-c-btn-gap);
}

.mrx-cards__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	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-c-btn-color);
	background-color: var(--mrx-c-btn-bg);
	border: 1px solid var(--mrx-c-btn-border);
	border-radius: var(--mrx-c-btn-radius);
	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),
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-cards__button:hover,
.mrx-cards__button:focus-visible {
	color: var(--mrx-c-btn-color-hover);
	background-color: var(--mrx-c-btn-bg-hover);
	border-color: var(--mrx-c-btn-border-hover);
	transform: translateY(-2px);
}

.mrx-cards__button:focus-visible {
	outline: 2px solid var(--mrx-c-accent);
	outline-offset: 3px;
}

.mrx-cards__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-cards__button-icon svg,
.mrx-cards__button-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

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

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

@container mrxc (max-width: 900px) {
	.mrx-cards-wrap .mrx-cards__card {
		flex-basis: calc((100% - var(--mrx-c-gap)) / 2);
	}
}

@container mrxc (max-width: 520px) {
	.mrx-cards-wrap .mrx-cards__card {
		flex-basis: 100%;
	}

	/*
	 * One card per line: there is nothing beside a card to line its foot up
	 * with, so matching them all to the tallest would only pad short cards
	 * with empty space down the page.
	 */
	.mrx-ceq-yes .mrx-cards-wrap .mrx-cards__card {
		min-height: 0;
	}

	.mrx-cards-wrap .mrx-cards__button {
		width: 100%;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.mrx-cards__card,
	.mrx-cards__icon {
		transition: none !important;
		transform: none !important;
	}
}

@media print {
	.mrx-cards__card {
		box-shadow: none;
	}
}