/* MC Wear Frame CTA
 *
 * Figma source: 1441×972 stage. Centered 580×686 white-bordered card crops
 * into the background image, with the bottom 244px painted white to hold
 * the eyebrow + heading + button. "M" calligraphy and ring vectors hang
 * off the top of the card with blend modes.
 *
 * Specificity bumped (.mcw-frame-cta.mcw-frame-cta) to beat Elementor Site
 * Settings without !important.
 */

/* Zero out Elementor's default widget-container padding so the stage goes
 * edge-to-edge. */
.elementor-widget-mcw-classic-frame-cta > .elementor-widget-container {
	padding: 0;
}

.mcw-frame-cta.mcw-frame-cta {
	box-sizing: border-box;
	display: block;
	width: 100%;
	background: #ffffff;
	color: #000000;
	padding-left: 0;
	padding-right: 0;
}

.mcw-frame-cta.mcw-frame-cta *,
.mcw-frame-cta.mcw-frame-cta *::before,
.mcw-frame-cta.mcw-frame-cta *::after {
	box-sizing: border-box;
}

/* Stage = the canvas the Figma frame sits inside. Holds the bg image full
 * bleed and centers the card via flexbox so no transform is needed —
 * transforms isolate stacking contexts and break the M/ring blend modes.
 * Aspect-ratio 1440/972 keeps Figma composition at every viewport. */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 972;
	min-height: 520px;
	max-height: 972px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	pointer-events: none;
}

/* ---------- Card ----------
 * Centered by parent flexbox. NO transform, NO isolation, NO opacity —
 * those would create a new stacking context and the M/ring mix-blend-mode
 * would lose the bg.jpg backdrop. Width fluid via clamp; aspect-ratio
 * locks the Figma 580×686 proportions at every viewport. Negative
 * margin-left shifts card 14px left of stage center per Figma. */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__card {
	position: relative;
	flex-shrink: 0;
	width: clamp(280px, 48vw, 580px);
	aspect-ratio: 580 / 686;
	margin-left: clamp(-28px, -2vw, 0px);
	overflow: hidden;
	background: transparent;
	border: 0;
}

/* Frame.svg = 12px white border + bottom white rectangle. Renders ABOVE
 * the m + ring layers so its border masks any bleed past the inner area
 * (e.g. ring crossing into the 12px border zone on narrow viewports). */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	pointer-events: none;
	user-select: none;
	z-index: 3;
}

/* M letter — white fill, soft-light blend so it reads as softened blue
 * over the sky. m.svg is full card canvas (604×710) with the m positioned
 * natively, so just fill the card like frame.svg. */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__m {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	pointer-events: none;
	user-select: none;
	mix-blend-mode: soft-light;
	z-index: 2;
}

/* Orbital ring — white fill, exclusion blend inverts to gold over blue
 * sky and to blue over skin. Inset from Figma:
 * top 6.19%, left 51.03%, right 9.14%, bottom 65.53% of card box. */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__ring {
	position: absolute;
	top: 6.19%;
	left: 51.03%;
	right: 9.14%;
	bottom: 65.53%;
	width: auto;
	height: auto;
	max-width: none;
	display: block;
	pointer-events: none;
	user-select: none;
	mix-blend-mode: exclusion;
	z-index: 2;
}

/* Panel covers the SVG's bottom white rectangle + bottom border area as
 * one continuous white block — avoids a sub-pixel seam between the inner
 * rect and the outer stroke when SVG is scaled. z-index above decor so
 * text/button stay clickable. */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/* Match SVG's bottom white rectangle proportion (244/686 ≈ 35.57%)
	 * so panel covers the SVG's own white area at every viewport — no
	 * white gap between the image and the panel text. */
	min-height: 35.57%;
	padding: clamp(16px, 1.7vw, 25px) clamp(12px, 1.5vw, 20px) clamp(22px, 2.4vw, 35px);
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__content {
	width: 100%;
	max-width: 455px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__content > * {
	align-self: center;
}

/* ---------- Eyebrow + bird ---------- */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__eyebrow-text {
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: clamp(10px, 1vw, 14px);
	line-height: 1.42;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000000;
	white-space: nowrap;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__bird {
	display: block;
	width: clamp(20px, 1.93vw, 27.788px);
	height: auto;
}

/* ---------- Heading ---------- */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__heading {
	margin: 0;
	padding: clamp(10px, 1vw, 15px) 0 clamp(14px, 1.4vw, 20px);
	font-family: "Ivy Mode", "Times New Roman", serif;
	font-weight: 400;
	font-size: clamp(20px, 2.5vw, 36px);
	line-height: 1.22;
	letter-spacing: 1px;
	text-align: center;
	color: #000000;
	text-transform: none;
}

/* ---------- Button ----------
 * Calypso #11 hover (matches mcw-button widget):
 * circle scale-in → plane drop → text bounce up+down. */
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(11px, 1.1vw, 16px) clamp(18px, 1.7vw, 24px);
	border: 1px solid #000000;
	background: transparent;
	color: #000000;
	font-family: "Mona Sans Expanded", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: clamp(12px, 1.1vw, 16px);
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.2s ease 0.4s;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn::before,
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	pointer-events: none;
	z-index: 1;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn::before {
	background: #000000;
	width: 120%;
	height: 0;
	padding-bottom: 120%;
	top: -110%;
	left: -10%;
	border-radius: 50%;
	transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:hover::before,
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:focus-visible::before {
	transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn::after {
	background: #000000;
	transform: translate3d(0, -100%, 0);
	transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:hover::after,
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:focus-visible::after {
	transform: translate3d(0, 0, 0);
	transition-duration: 0.05s;
	transition-delay: 0.4s;
	transition-timing-function: linear;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn > span {
	display: block;
	position: relative;
	z-index: 10;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:hover > span,
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:focus-visible > span {
	animation: mcw-frame-cta-btn-up 0.3s forwards, mcw-frame-cta-btn-down 0.3s forwards 0.3s;
}

.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:hover,
.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn:focus-visible {
	color: #ffffff;
	outline: none;
	transition: color 0.2s ease 0.3s;
}

@keyframes mcw-frame-cta-btn-up {
	to {
		transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
}

@keyframes mcw-frame-cta-btn-down {
	from {
		transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn,
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn::before,
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn::after,
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn > span {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}
}

/* ---------- Responsive: Tablet (≤1024) ----------
 * Cap the orbital ring (e) so it doesn't crowd the m at narrower widths. */
@media (max-width: 1024px) {
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__ring {
		right: auto;
		bottom: auto;
		width: 180px;
		max-width: 180px;
		height: auto;
	}
}

/* ---------- Responsive: Portrait/narrow (≤640) ----------
 * Stage uses a taller aspect; card width caps at 90vw. Card aspect is
 * relaxed (no fixed aspect-ratio) so panel content can grow without
 * spilling past the card bottom into the next section. Image area uses
 * an explicit aspect-ratio instead to keep the Figma crop. */
@media (max-width: 640px) {
	.mcw-frame-cta.mcw-frame-cta {
		padding-bottom: 48px;
	}

	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__stage {
		aspect-ratio: auto;
		min-height: 520px;
		max-height: none;
		height: auto;
		padding: 32px 0;
	}

	/* Re-anchor the photo crop so the woman (right side, mid-height)
	 * stays in frame; at narrow widths "center top" leaves too much
	 * empty sky above the card's image area. */
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__bg {
		object-position: 62% 60%;
	}

	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__card {
		width: min(420px, 90vw);
		aspect-ratio: 580 / 686;
		height: auto;
		min-height: 0;
		margin-left: 0;
	}

	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__ring {
		width: clamp(110px, 32vw, 160px);
		max-width: clamp(110px, 32vw, 160px);
	}

	/* Panel sizes by content, no min-height cap pushing image area
	 * smaller than it can survive. Symmetric top/bottom padding. */
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__panel {
		min-height: 0;
		padding: 22px 16px;
	}

	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__eyebrow-text {
		font-size: clamp(10px, 2.6vw, 13px);
		letter-spacing: 0.8px;
	}

	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__heading {
		font-size: clamp(18px, 5.2vw, 26px);
		padding: 10px 0 14px;
	}

	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__btn {
		font-size: clamp(12px, 3.2vw, 14px);
		padding: clamp(10px, 2.6vw, 12px) clamp(18px, 4.5vw, 22px);
	}
}

/* Extra-narrow phones: let the eyebrow wrap if it must. */
@media (max-width: 360px) {
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__eyebrow {
		flex-wrap: wrap;
	}
	.mcw-frame-cta.mcw-frame-cta .mcw-frame-cta__eyebrow-text {
		white-space: normal;
		text-align: center;
	}
}