/**
 * MRMVR Elements — Ask CTA.
 *
 * An invitation to get in touch beside a card carrying the questions people
 * actually bring, and the button that answers them.
 *
 * Deliberately carries no email address, phone number or opening hours: those
 * belong on the contact page, and repeating them here would mean editing the
 * same detail in two places every time it changes.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.28.0
 */

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

.mrx-ask {
	/* Layout */
	--mrx-a-card-width: .95fr;
	--mrx-a-gap: clamp(32px, 4.5cqi, 60px);
	--mrx-a-max: 1040px;
	--mrx-a-valign: center;

	/* Surface */
	--mrx-a-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-a-glow: rgba(249, 233, 224, .95);

	/* Type */
	--mrx-a-eyebrow: var(--mrmvr-amber, #f57528);
	--mrx-a-title: var(--mrmvr-navy, #1a2142);
	--mrx-a-accent: var(--mrmvr-amber, #f57528);
	--mrx-a-body: var(--mrmvr-navy, #1a2142);
	--mrx-a-measure: 44ch;
	--mrx-a-rule: rgba(207, 161, 144, .34);
	--mrx-a-ornament: var(--mrmvr-clay, #cfa190);

	/* Card */
	--mrx-a-card-bg: var(--mrmvr-white, #ffffff);
	--mrx-a-card-radius: 16px;
	--mrx-a-card-pad: clamp(26px, 3cqi, 38px);
	--mrx-a-frame-color: rgba(207, 161, 144, .5);
	--mrx-a-frame-offset: 12px;
	--mrx-a-question: var(--mrmvr-navy, #1a2142);
	--mrx-a-quote: var(--mrmvr-amber, #f57528);

	/* Button */
	--mrx-a-btn-bg: var(--mrmvr-navy, #1a2142);
	--mrx-a-btn-text: var(--mrmvr-white, #ffffff);
	--mrx-a-btn-border: var(--mrmvr-navy, #1a2142);
	--mrx-a-btn-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-a-btn-text-hover: var(--mrmvr-white, #ffffff);
	--mrx-a-btn-border-hover: var(--mrmvr-amber, #f57528);
	--mrx-a-btn-radius: 999px;

	position: relative;
	overflow: hidden;
	padding: clamp(44px, 5cqi, 78px) 0;
	background-color: var(--mrx-a-bg);
	font-family: var(--mrmvr-font-body);
	color: var(--mrx-a-body);
}

/*
 * Full bleed: the negative margin pulls the background out to the screen, and
 * the matching padding puts the content back where the container had it.
 *
 * The prefix class sits in :where() so it adds no specificity — the stacking
 * rules at the foot of this file have to stay authoritative without resorting
 * to !important.
 */
:where(.mrx-abl-yes) .mrx-ask {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/*
 * One soft wash in the leading corner, well under the type. It costs no height
 * and keeps a large flat field of colour from reading as unfinished.
 */
:where(.mrx-aglow-yes) .mrx-ask::before {
	content: "";
	position: absolute;
	top: -160px;
	left: -130px;
	width: 540px;
	height: 540px;
	background-image: radial-gradient(circle, var(--mrx-a-glow) 0%, rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
}

.mrx-ask__inner {
	position: relative;
	max-width: var(--mrx-a-max);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Grid
 *
 * The invitation takes the larger share because it carries the sentence; the
 * card only ever needs to be wide enough to hold a button. Sides are swapped
 * by renaming the areas, never by reordering the markup, so a screen reader
 * meets the invitation before the card either way.
 * ---------------------------------------------------------------------- */

.mrx-ask__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, var(--mrx-a-card-width));
	grid-template-areas: "intro card";
	gap: var(--mrx-a-gap);
	align-items: var(--mrx-a-valign);
}

:where(.mrx-acard-left) .mrx-ask__grid {
	grid-template-columns: minmax(0, var(--mrx-a-card-width)) minmax(0, 1.05fr);
	grid-template-areas: "card intro";
}

.mrx-ask__intro {
	grid-area: intro;
	min-width: 0;
}

.mrx-ask__card-wrap {
	position: relative;
	grid-area: card;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Invitation
 * ---------------------------------------------------------------------- */

.mrx-ask__eyebrow {
	display: block;
	margin: 0 0 13px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.9px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mrx-a-eyebrow);
}

.mrx-ask__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(32px, 4vw, 48px);
	font-size: clamp(32px, 4.6cqi, 48px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.45px;
	text-wrap: balance;
	color: var(--mrx-a-title);
}

/* The word the sentence turns on: same face as the rest of the line, marked
   by colour rather than by weight, so the heading keeps one texture. */
.mrx-ask__title em {
	font-style: italic;
	font-weight: 600;
	color: var(--mrx-a-accent);
}

/* The rule-and-diamond used across the rest of the site. */
.mrx-ask__ornament {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 118px;
	margin: 18px 0 20px;
}

.mrx-ask__ornament i {
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--mrx-a-ornament);
	opacity: .55;
}

.mrx-ask__ornament b {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background-color: var(--mrx-a-accent);
	transform: rotate(45deg);
}

.mrx-ask__lede {
	max-width: var(--mrx-a-measure);
	margin: 0;
	font-size: 16.5px;
	line-height: 1.6;
	text-wrap: pretty;
	color: var(--mrx-a-body);
	opacity: .78;
}

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

/* -------------------------------------------------------------------------
 * Card
 *
 * The card is the only white in the section, which is the whole reason it
 * reads as the thing to act on: it is lifted by contrast rather than by a
 * heavy shadow. Behind it sits an offset hairline frame — the motif the
 * arched media blocks already use — giving depth a drop shadow would
 * otherwise have to fake.
 * ---------------------------------------------------------------------- */

:where(.mrx-aframe-yes) .mrx-ask__card-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--mrx-a-frame-color);
	border-radius: var(--mrx-a-card-radius);
	transform: translate(var(--mrx-a-frame-offset), var(--mrx-a-frame-offset));
	pointer-events: none;
}

/* The frame mirrors when the card sits on the left, so it always falls away
   from the text column rather than under it. */
:where(.mrx-aframe-yes.mrx-acard-left) .mrx-ask__card-wrap::before {
	transform: translate(calc(var(--mrx-a-frame-offset) * -1), var(--mrx-a-frame-offset));
}

.mrx-ask__card {
	position: relative;
	z-index: 1;
	padding: var(--mrx-a-card-pad);
	background-color: var(--mrx-a-card-bg);
	border: 1px solid var(--mrx-a-rule);
	border-radius: var(--mrx-a-card-radius);
	box-shadow: 0 16px 34px -26px rgba(26, 33, 66, .32);
}

.mrx-ask__card-label {
	display: block;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mrx-a-eyebrow);
}

/*
 * The questions themselves. A section that says "ask" and then shows nothing
 * being asked is abstract; real questions make the invitation concrete, and
 * someone who recognises their own question already knows the call is for
 * them. Set in the display face, in italic, because they are spoken lines
 * rather than site copy.
 */
.mrx-ask__questions {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mrx-a-rule);
}

.mrx-ask__question {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--mrx-a-rule);
	font-family: var(--mrmvr-font-display);
	font-size: 19px;
	font-style: italic;
	line-height: 1.35;
	text-wrap: pretty;
	color: var(--mrx-a-question);
}

/* An opening quote mark rather than a bullet: these are things people say,
   and the mark says so without a word of explanation. */
.mrx-ask__question::before {
	content: "\201C";
	flex: 0 0 auto;
	font-family: var(--mrmvr-font-display);
	font-size: 26px;
	font-style: normal;
	line-height: .8;
	color: var(--mrx-a-quote);
}

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

.mrx-ask__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 26px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-a-btn-text);
	background-color: var(--mrx-a-btn-bg);
	border: 1px solid var(--mrx-a-btn-border);
	border-radius: var(--mrx-a-btn-radius);
	transition:
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease),
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, ease);
}

.mrx-ask__button:hover,
.mrx-ask__button:focus-visible {
	color: var(--mrx-a-btn-text-hover);
	background-color: var(--mrx-a-btn-bg-hover);
	border-color: var(--mrx-a-btn-border-hover);
}

.mrx-ask__button:focus-visible {
	outline: 2px solid var(--mrx-a-btn-bg);
	outline-offset: 3px;
}

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

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

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

/* Sits directly under the button, which is where the hesitation happens. */
.mrx-ask__fine {
	margin: 13px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: center;
	color: var(--mrx-a-body);
	opacity: .6;
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These set properties rather than the custom properties the Elementor
 * controls write to, so a control never fights them. The wrapper class is
 * repeated to lift them above the layout rules above, whatever those name.
 * ---------------------------------------------------------------------- */

@container mrxa (max-width: 860px) {
	/*
	 * Stacked, and always the invitation over the card, whichever side the
	 * card took on the wide layout: sides mean nothing once there is only one
	 * column.
	 */
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "card";
		gap: 32px;
	}

	/* Centred on one column — and an ornament left of a centred heading reads
	   as a mistake, so it centres with it. */
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__eyebrow,
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__title,
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__lede {
		text-align: center;
	}

	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__ornament,
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__lede {
		margin-inline: auto;
	}

	/* The offset frame needs room a narrow column does not have. */
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__card-wrap::before {
		display: none;
	}
}

@container mrxa (max-width: 520px) {
	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__lede {
		font-size: 15.5px;
	}

	.mrx-ask-wrap.mrx-ask-wrap .mrx-ask__question {
		font-size: 17.5px;
	}
}

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

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

	.mrx-ask__button:hover .mrx-ask__button-icon {
		transform: none;
	}
}

@media print {
	.mrx-ask__card-wrap::before { display: none; }
}