/*
 * "Why Masader" — child-theme refinement of the client's section.
 * Structure (Elementor):
 *   .mx-why › .mx-why__intro  › eyebrow · .mx-title · .mx-values › .mx-value--1|2|3 (num · title · text)
 *           › .mx-why__visual › .mx-logo-stack › Image widgets:
 *                 .mx-logo-full (logo-icon-full — static fallback, editor, reduced motion)
 *                 .mx-logo-seg-1 … .mx-logo-seg-6 (the six hexagon pieces) · .mx-logo-drop (gold drop)
 * All layers are the client's own images on one 744×858 canvas, stacked at 0,0. Nothing is drawn;
 * pieces are only dimmed with opacity.
 *
 * Colours: the shared section variables from loop.css (--mxl-*), loaded before this file.
 *
 * States
 *   calm — default (Elementor editor, reduced motion, no JS): only logo-icon-full is shown, static.
 *   live — .mx-why.is-live, added by assets/js/why.js on the real site: the pieces replace the full logo.
 */

.elementor .e-con.mx-why { background: var(--mxl-bg); }

@media (min-width: 1025px) {
	.elementor .e-con.mx-why {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: clamp(3rem, 7vw, 8rem);
		align-items: start;
	}
}

/* ---- Intro + list -------------------------------------------------------------------------- */
.elementor .e-con.mx-why__intro { --gap: 1.4rem; --row-gap: 1.4rem; }

.elementor .mx-why .elementor-element.mx-eyebrow .elementor-heading-title {
	display: inline-block;
	font-family: var(--mx-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mxl-sub);
}
.elementor .mx-why .elementor-element.mx-eyebrow .elementor-heading-title::before { content: none; }
.elementor .mx-why .elementor-element.mx-eyebrow .elementor-heading-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--mxl-gold);
}
.elementor .mx-why .elementor-element.mx-title .elementor-heading-title {
	max-width: 14ch;
	font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.75rem);
	line-height: 1.04;
	color: var(--mxl-ink);
}

.elementor .e-con.mx-values {
	--gap: 0;
	--row-gap: 0;
	margin-top: 1rem;
	border-top: 0;
}

.elementor .e-con.mx-value {
	--display: grid;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	grid-template-areas: "num title" "num text";
	column-gap: 0.5rem;
	row-gap: 0.45rem;
	position: relative;
	padding: 1.6rem 0;
	border-bottom: 0;
}
/* Divider above each item (drawn left → right on the live site) */
.elementor .e-con.mx-value::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: auto;
	width: auto;
	height: 1px;
	border-radius: 0;
	opacity: 1;
	mix-blend-mode: normal;
	background: var(--mxl-line);
	transform: scaleX(var(--mxw-line, 1));
	transform-origin: left center;
	font-size: 0;
}
.elementor .e-con.mx-value:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	width: auto;
	height: 1px;
	background: var(--mxl-line);
	transform: scaleX(var(--mxw-line, 1));
	transform-origin: left center;
	transition: none;
}
.elementor .e-con.mx-value:not(:last-child)::after { content: none; }

.elementor .mx-value > .elementor-element.mx-value__num { grid-area: num; width: auto; }
.elementor .mx-value > .elementor-element.mx-value__title { grid-area: title; }
.elementor .mx-value > .elementor-element.mx-value__text { grid-area: text; }

.elementor .mx-value .elementor-element.mx-value__num .elementor-heading-title {
	padding-top: 0.45rem;
	font-family: var(--mx-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--mxl-sub);
	transition: color 0.5s var(--mxl-ease);
}
.elementor .mx-value .elementor-element.mx-value__title .elementor-heading-title {
	font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem);
	line-height: 1.15;
	color: var(--mxl-ink);
}
.elementor .mx-value .elementor-element.mx-value__text { max-width: 52ch; color: var(--mxl-body); font-size: 1rem; line-height: 1.65; }
.elementor .mx-value .elementor-element.mx-value__text a { color: var(--mxl-ink); text-decoration-color: var(--mxl-gold); text-underline-offset: 0.2em; }

/* ---- Logo stack ------------------------------------------------------------------------------ */
.elementor .e-con.mx-why__visual { display: grid; place-items: center; }

.elementor .e-con.mx-logo-stack {
	--display: block;
	display: block;
	position: relative;
	width: min(100%, 420px);
	aspect-ratio: 744 / 858;
	margin-inline: auto;
	transform-style: preserve-3d;
	transition: none;
}
.elementor .mx-logo-stack > .elementor-element {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
}
.elementor .mx-logo-stack > .elementor-element img { display: block; width: 100%; height: auto; }

/* Calm: only the full logo */
.elementor .mx-logo-stack > .mx-logo-seg,
.elementor .mx-logo-stack > .mx-logo-drop { visibility: hidden; }

/* =========================================================================================
 * LIVE — real site only
 * ========================================================================================= */
.elementor .mx-why.is-live .mx-logo-stack > .mx-logo-full { visibility: hidden; }
.elementor .mx-why.is-live .mx-logo-stack > .mx-logo-seg,
.elementor .mx-why.is-live .mx-logo-stack > .mx-logo-drop { visibility: visible; will-change: transform, opacity; }

/* One-time gold sheen over the drop, masked by the drop image itself (added by JS) */
.mx-logo-sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 200, 0.85) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	background-position: calc(100% - var(--sheen, 0) * 100%) 0;
	mix-blend-mode: screen;
	opacity: 0;
}

/* The home page's own HTML sets `html, body { overflow-x: hidden }`, which turns <body> into a
   scroll box and stops every sticky element (the logo here stayed put instead of following the
   list, unlike About Us). `clip` still hides sideways overflow without creating that scroll box. */
html:has(> body.home),
html body.home {
	overflow-x: clip !important; /* the home page's rule is !important too */
	overflow-y: visible !important;
}

@media (min-width: 1025px) {
	.elementor .mx-why.is-live .e-con.mx-why__visual {
		position: sticky;
		top: clamp(5rem, 16vh, 9rem);
		align-self: start;
		perspective: 1200px;
	}
	.elementor .mx-why.is-live .e-con.mx-value { padding-block: clamp(2rem, 8vh, 4.5rem); }
	.elementor .mx-why.is-live .e-con.mx-value > .elementor-element { transition: opacity 0.5s var(--mxl-ease); }
	.elementor .mx-why.is-live .mx-values.has-active .e-con.mx-value:not(.is-active) > .elementor-element { opacity: 0.42; }
	.elementor .mx-why.is-live .e-con.mx-value.is-active .elementor-element.mx-value__num .elementor-heading-title { color: var(--mxl-ink); }
}

/* Mobile/tablet: logo above the list, no sticky, entrance only */
@media (max-width: 1024px) {
	.elementor .e-con.mx-why__visual { order: -1; }
	.elementor .e-con.mx-logo-stack { width: min(62%, 300px); }
}