/* =========================================================================
   Mauve Polaroid Stack — self-contained. No external fonts (inherits the
   theme's typography; per-element typography is set from the widget). Colours
   come from CSS vars set by the widget's Style controls. Optional scroll reveal
   fans the cards out as the stack enters the viewport.

   Tilt is driven by three variables the widget sets:
     --mpol-dir    1 (tilt left, the original look) or -1 (mirrored to the right)
     --mpol-tilt   rotation multiplier for the multi-photo presets (1 = as designed)
     --mpol-angle  the exact angle of the Single preset (magnitude; sign via --mpol-dir)
   ========================================================================= */
.mauve-polaroid {
	--mpol-accent: #B4533A;
	--mpol-bg:     #F4EFE6;
	--mpol-ink:    #1A1816;
	--mpol-soft:   #4A4744;
	--mpol-pale:   #6E6961;
	--mpol-hair:   rgba(26, 24, 22, 0.10);
	--mpol-frame:  #ECE5D8;
	--mpol-label:  rgba(26, 24, 22, 0.45);
	--mpol-ease:   cubic-bezier(0.32, 0.72, 0, 1);
	--mpol-pad-y:  72px;
	--mpol-pad-x:  40px;
	background: var(--mpol-bg);
	color: var(--mpol-ink);
	/* The widget's Section padding control (Style → Section) writes `padding` straight
	   onto this element and beats these defaults by specificity. */
	padding: var(--mpol-pad-y) var(--mpol-pad-x);
}
.mauve-polaroid .mpol-inner { max-width: 1280px; margin: 0 auto; }

/* ---- head row ---- */
.mauve-polaroid .mpol-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 32px;
	border-bottom: 1px solid var(--mpol-hair);
	padding-bottom: 18px;
	margin-bottom: 56px;
}
.mauve-polaroid .mpol-num { font-weight: 300; font-style: italic; font-size: clamp(40px, 6vw, 72px); line-height: 1; color: var(--mpol-accent); }
.mauve-polaroid .mpol-title { font-weight: 300; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -0.012em; color: var(--mpol-ink); text-align: center; margin: 0; }
.mauve-polaroid .mpol-title em { font-style: italic; color: var(--mpol-accent); }
.mauve-polaroid .mpol-meta { text-align: right; text-transform: uppercase; letter-spacing: 0.26em; font-size: 10px; color: var(--mpol-soft); line-height: 1.8; }
.mauve-polaroid .mpol-meta em { text-transform: none; letter-spacing: 0; font-size: 13px; font-style: italic; color: var(--mpol-ink); }

/* ---- body grid ---- */
.mauve-polaroid .mpol-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: stretch; }
.mauve-polaroid .mpol-body--stack-only { grid-template-columns: 1fr; }
.mauve-polaroid .mpol-body--stack-only .mpol-stack {
	max-width: min(540px, 100%);
	margin-inline: auto;
	/* Lets the grid track shrink below the strut in narrow columns (the strut
	   still supplies the PREFERRED width for shrink-to-fit measurement). */
	min-width: 0;
}
/* Zero-height strut: the cards are absolutely positioned (zero intrinsic width),
   so without this the widget shrink-to-fits to ~0 in centering (align-items)
   Elementor containers. During measurement the strut contributes a definite
   width (the Stack max width control feeds --mpol-strut); at layout time its
   cyclic max-width:100% caps it, so narrow columns are never overflowed. */
.mauve-polaroid .mpol-body--stack-only .mpol-stack::before {
	content: "";
	display: block;
	height: 0;
	width: var(--mpol-strut, 540px);
	max-width: 100%;
}

/* ---- text column ---- */
.mauve-polaroid .mpol-text { display: flex; flex-direction: column; }
.mauve-polaroid .mpol-text p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; color: var(--mpol-ink); margin: 0 0 1.3em; }
.mauve-polaroid .mpol-text p:last-of-type { margin-bottom: 0; }
.mauve-polaroid .mpol-text p.lift { font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.7em; }
.mauve-polaroid .mpol-text p em { font-style: italic; color: var(--mpol-accent); }
.mauve-polaroid .mpol-text p strong { font-weight: 600; }
.mauve-polaroid .mpol-colophon { margin-top: auto; padding-top: 32px; border-top: 1px solid var(--mpol-hair); text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; color: var(--mpol-pale); }
.mauve-polaroid .mpol-colophon em { text-transform: none; letter-spacing: 0; font-size: 15px; font-style: italic; color: var(--mpol-accent); margin-left: 8px; }

/* ---- the stack ---- */
.mauve-polaroid .mpol-stack {
	position: relative;
	width: 100%;
	/* Height follows the actual card size: card height (width fraction / ratio)
	   times a spread allowance for the fanned offsets. Defaults reproduce the
	   legacy 1:1 box exactly (1 / (0.78 * 1.28) ≈ 1). */
	aspect-ratio: calc( var(--mpol-ration, 1) / ( var(--mpol-card-wn, 78) / 100 * var(--mpol-spread, 1.28) ) );
	perspective: 1200px;
	align-self: start;
}
.mauve-polaroid .mpol-card {
	position: absolute;
	top: 2%;
	left: calc((100% - var(--mpol-card-w, 78%)) / 2);
	width: var(--mpol-card-w, 78%);
	aspect-ratio: var(--mpol-ratio, 1 / 1);
	background: var(--mpol-frame);
	padding: 16px 16px 52px;
	border-radius: 2px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 30px 60px -28px rgba(26, 24, 22, 0.30), 0 6px 14px -6px rgba(26, 24, 22, 0.10);
	transform-origin: center 70%;
	transform: rotate(0deg) translate3d(0, 0, 0);
	transition: transform 1100ms var(--mpol-ease), box-shadow 800ms var(--mpol-ease);
	will-change: transform;
}
.mauve-polaroid .mpol-card:nth-child(1) { z-index: 9; }
.mauve-polaroid .mpol-card:nth-child(2) { z-index: 8; }
.mauve-polaroid .mpol-card:nth-child(3) { z-index: 7; }
.mauve-polaroid .mpol-card:nth-child(4) { z-index: 6; }
.mauve-polaroid .mpol-card:nth-child(5) { z-index: 5; }
.mauve-polaroid .mpol-card:nth-child(6) { z-index: 4; }
.mauve-polaroid .mpol-card:nth-child(7) { z-index: 3; }
.mauve-polaroid .mpol-card:nth-child(8) { z-index: 2; }
.mauve-polaroid .mpol-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
/* Card caption row: <span> = the small number, <em> = the caption. The widget's
   typography controls target the span and the em separately. */
.mauve-polaroid .mpol-label { position: absolute; bottom: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-transform: uppercase; letter-spacing: 0.26em; font-size: 9px; color: var(--mpol-label); }
.mauve-polaroid .mpol-label em { text-transform: none; letter-spacing: 0.02em; font-size: 12px; font-style: italic; color: var(--mpol-caption, var(--mpol-accent)); }

/* ---- overlay graphic (tape / pin) pinned to the top card ---- */
.mauve-polaroid .mpol-overlay {
	position: absolute;
	top: var(--mpol-ov-y, -6%);
	left: var(--mpol-ov-x, 50%);
	width: var(--mpol-ov-w, 30%);
	height: auto;
	transform: translateX(-50%) rotate(var(--mpol-ov-r, 0deg));
	z-index: 2;
	pointer-events: none;
}

/* ---- layout presets: the fanned / final positions ----
   Every angle is multiplied by --mpol-dir (mirror) and --mpol-tilt (strength);
   the horizontal offsets flip with --mpol-dir so the whole composition mirrors. */
/* Fan (4) */
.mpol-layout-fan .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -1.5deg)) translate3d(calc(var(--mpol-dir, 1) * -3%), 2%, 0); }
.mpol-layout-fan .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 4deg))    translate3d(calc(var(--mpol-dir, 1) * 13%), 8%, 0); }
.mpol-layout-fan .mpol-card:nth-child(3) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -5deg))   translate3d(calc(var(--mpol-dir, 1) * -18%), 11%, 0); }
.mpol-layout-fan .mpol-card:nth-child(4) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 6deg))    translate3d(calc(var(--mpol-dir, 1) * 20%), 2%, 0); }
.mpol-layout-fan .mpol-stack:hover .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -2.5deg)) translate3d(calc(var(--mpol-dir, 1) * -4%), 1%, 0); }
.mpol-layout-fan .mpol-stack:hover .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 5.5deg))  translate3d(calc(var(--mpol-dir, 1) * 17%), 10%, 0); }
.mpol-layout-fan .mpol-stack:hover .mpol-card:nth-child(3) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -6.5deg)) translate3d(calc(var(--mpol-dir, 1) * -23%), 14%, 0); }
.mpol-layout-fan .mpol-stack:hover .mpol-card:nth-child(4) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 7.5deg))  translate3d(calc(var(--mpol-dir, 1) * 25%), 4%, 0); }
/* Single (1) — the lone card flows normally (not absolute), so the widget's
   footprint hugs the polaroid instead of reserving the full stack box.
   Its angle is --mpol-angle (magnitude); --mpol-dir = 1 tilts left like the original. */
.mpol-layout-single .mpol-stack { aspect-ratio: auto; }
.mpol-layout-single .mpol-card {
	position: relative;
	top: auto;
	left: auto;
	margin-inline: auto;
}
.mpol-layout-single .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * -1 * var(--mpol-angle, 2deg))) translate3d(0, 0, 0); }
.mpol-layout-single .mpol-card:nth-child(n+2) { display: none; }
/* Duo (2) */
.mpol-layout-duo .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -3deg)) translate3d(calc(var(--mpol-dir, 1) * -12%), 4%, 0); }
.mpol-layout-duo .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 4deg))  translate3d(calc(var(--mpol-dir, 1) * 14%), 9%, 0); }
.mpol-layout-duo .mpol-card:nth-child(n+3) { display: none; }
/* Trio (3) */
.mpol-layout-trio .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -4deg)) translate3d(calc(var(--mpol-dir, 1) * -16%), 5%, 0); }
.mpol-layout-trio .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 3deg))  translate3d(calc(var(--mpol-dir, 1) * 2%), 11%, 0); }
.mpol-layout-trio .mpol-card:nth-child(3) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 6deg))  translate3d(calc(var(--mpol-dir, 1) * 18%), 3%, 0); }
.mpol-layout-trio .mpol-card:nth-child(n+4) { display: none; }
/* Scatter (4) */
.mpol-layout-scatter .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -6deg))  translate3d(calc(var(--mpol-dir, 1) * -22%), 4%, 0); }
.mpol-layout-scatter .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 5deg))   translate3d(calc(var(--mpol-dir, 1) * 16%), 12%, 0); }
.mpol-layout-scatter .mpol-card:nth-child(3) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -10deg)) translate3d(calc(var(--mpol-dir, 1) * -6%), 18%, 0); }
.mpol-layout-scatter .mpol-card:nth-child(4) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 9deg))   translate3d(calc(var(--mpol-dir, 1) * 24%), -2%, 0); }
.mpol-layout-scatter .mpol-card:nth-child(n+5) { display: none; }

/* ---- hover: a gentle extra spread on every preset (like Fan) ---- */
.mpol-layout-single .mpol-stack:hover .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * -1.5 * var(--mpol-angle, 2deg))) translate3d(0, -1%, 0); }
.mpol-layout-duo .mpol-stack:hover .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -4deg)) translate3d(calc(var(--mpol-dir, 1) * -15%), 3%, 0); }
.mpol-layout-duo .mpol-stack:hover .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 5deg))  translate3d(calc(var(--mpol-dir, 1) * 17%), 11%, 0); }
.mpol-layout-trio .mpol-stack:hover .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -5deg))   translate3d(calc(var(--mpol-dir, 1) * -20%), 4%, 0); }
.mpol-layout-trio .mpol-stack:hover .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 3deg))    translate3d(calc(var(--mpol-dir, 1) * 2%), 13%, 0); }
.mpol-layout-trio .mpol-stack:hover .mpol-card:nth-child(3) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 7.5deg))  translate3d(calc(var(--mpol-dir, 1) * 22%), 2%, 0); }
.mpol-layout-scatter .mpol-stack:hover .mpol-card:nth-child(1) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -7.5deg)) translate3d(calc(var(--mpol-dir, 1) * -26%), 3%, 0); }
.mpol-layout-scatter .mpol-stack:hover .mpol-card:nth-child(2) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 6deg))    translate3d(calc(var(--mpol-dir, 1) * 20%), 14%, 0); }
.mpol-layout-scatter .mpol-stack:hover .mpol-card:nth-child(3) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * -12deg))  translate3d(calc(var(--mpol-dir, 1) * -8%), 21%, 0); }
.mpol-layout-scatter .mpol-stack:hover .mpol-card:nth-child(4) { transform: rotate(calc(var(--mpol-dir, 1) * var(--mpol-tilt, 1) * 11deg))   translate3d(calc(var(--mpol-dir, 1) * 28%), -3%, 0); }

/* ---- scroll reveal (pending state before the stack enters the viewport) ---- */
.mauve-polaroid .mpol-stack.mpol-anim:not(.is-in) .mpol-card { transform: rotate(0deg) translate3d(0, 0, 0); opacity: 0; }
.mauve-polaroid .mpol-head.mpol-anim,
.mauve-polaroid .mpol-text.mpol-anim { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 900ms var(--mpol-ease), transform 900ms var(--mpol-ease); }
.mauve-polaroid .mpol-head.mpol-anim.is-in,
.mauve-polaroid .mpol-text.mpol-anim.is-in { opacity: 1; transform: none; }

/* ---- responsive ---- */
@media (max-width: 880px) {
	.mauve-polaroid { --mpol-pad-y: 56px; --mpol-pad-x: 24px; }
	.mauve-polaroid .mpol-head { grid-template-columns: 1fr; gap: 12px; text-align: left; }
	.mauve-polaroid .mpol-title, .mauve-polaroid .mpol-meta { text-align: left; }
	.mauve-polaroid .mpol-body { grid-template-columns: 1fr; gap: 44px; }
	.mauve-polaroid .mpol-stack { width: min(540px, 100%); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.mauve-polaroid .mpol-card { transition: none; }
	.mauve-polaroid .mpol-stack.mpol-anim:not(.is-in) .mpol-card { opacity: 1; }
	.mauve-polaroid .mpol-head.mpol-anim,
	.mauve-polaroid .mpol-text.mpol-anim { opacity: 1; transform: none; }
}