/* ==========================================================================
   Finewerk — Home 3 Hero CTA  (.fw-hero-cta)
   --------------------------------------------------------------------------
   Dual-state hero CTA for the Home 3 banner (EG Hero → Style Three). The old
   `.primary-btn2` anchor is replaced server-side (inc/home3-hero-cta.php) by:

       .fw-hero-cta                     state root (pill-sized in layout)
         a.fw-hero-cta__default        DEFAULT: white pill  → refferences/default-hero-button.png
         div.fw-hero-cta__card         OPENED:  glass card  → refferences/hover-hero-button.png
                                       (carries `finewerk-liquid-glass` — the
                                       material itself lives in
                                       finewerk-liquid-glass.css, NOT here)

   TRANSITION MODEL — why this never causes layout jumps
   ---------------------------------------------------------------------------
   The root keeps the DEFAULT pill's size in the layout at all times. The card
   is absolutely positioned over the pill's top-left corner and animates
   opacity + scale from a pill-sized origin, so it reads as the pill growing
   into the card. Nothing in the flow ever resizes → surrounding hero content
   (para, ratings, counters) never moves. Closing plays the same transition in
   reverse (all transitions are declared on the base state).

   CLICK TO OPEN — the card no longer reacts to hover
   ---------------------------------------------------------------------------
   There is exactly ONE open state, `.is-open`, and only home3-hero-cta.js adds
   it. Merely pointing at the button does nothing; the glass card appears when
   the visitor CLICKS the pill, stays up while the pointer remains anywhere
   inside the component, and resets when the pointer leaves it or when a click
   lands outside it. The morph itself is unchanged, so opening and closing look
   exactly as they always did.

   No `:hover`, `:active` or `:focus-within` appears in the open-state selector
   below, and that is deliberate: any of them would re-introduce a pointer-over
   reveal (`:focus-within` too, since clicking the pill focuses it, which would
   then keep the card up after the pointer had already left).

   While CLOSED the card is `visibility:hidden` + `pointer-events:none`, so
   its (larger) invisible box can never trap hover or clicks; `visibility`
   flips instantly on open and only after the transition on close.

   Tunables (all overridable per-element / via the Elementor Style controls):
       --fw-hcta-duration       morph duration            (Style → slider)
       --fw-hcta-title          default title color
       --fw-hcta-muted          availability text color
       --fw-hcta-dot            green dot color
       --fw-hcta-default-bg     default pill background
       --fw-hcta-card-radius    card corner radius
       --fw-hcta-card-max-w     card max width

   Author: Chili-House
   ========================================================================== */

.fw-hero-cta {
	/* Tunables */
	--fw-hcta-duration: 450ms;
	--fw-hcta-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fw-hcta-title: #0b0b0f;
	--fw-hcta-muted: #8a8a92;
	--fw-hcta-dot: #3ecf6e;
	--fw-hcta-default-bg: #ffffff;
	--fw-hcta-default-border: #ececec;
	--fw-hcta-card-radius: 36px;
	--fw-hcta-card-max-w: 480px;

	position: relative;
	display: inline-block;
	/* Above the static hero content (btm-area, global-icon) so the expanded
	   card overlays instead of pushing anything around. */
	z-index: 20;
}

/* --------------------------------------------------------------------------
   DEFAULT face — white pill: bold title + "● Available now"
   -------------------------------------------------------------------------- */
.fw-hero-cta__default {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 15px 30px 14px;
	background: var(--fw-hcta-default-bg);
	border: 1px solid var(--fw-hcta-default-border);
	border-radius: 999px;
	box-shadow:
		0 6px 16px rgba(17, 17, 26, 0.08),
		0 1px 3px rgba(17, 17, 26, 0.06);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		opacity calc(var(--fw-hcta-duration) * 0.45) ease,
		transform calc(var(--fw-hcta-duration) * 0.45) ease,
		box-shadow 0.3s ease;
}

.fw-hero-cta__default-text {
	color: var(--fw-hcta-title);
	font-family: var(--font-inter, inherit);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.fw-hero-cta__availability {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--fw-hcta-muted);
	font-family: var(--font-inter, inherit);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.fw-hero-cta__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fw-hcta-dot);
}

/* --------------------------------------------------------------------------
   HOVER face — liquid-glass card (portrait + name/role + inner CTA + email).
   The glass material itself comes from `finewerk-liquid-glass` (+ --dark);
   here we only lay out the card and tune the material's public variables.
   -------------------------------------------------------------------------- */
.fw-hero-cta .fw-hero-cta__card {
	position: absolute;
	top: -16px;
	left: -16px;
	width: min(var(--fw-hcta-card-max-w), 86vw);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 46px;
	border-radius: var(--fw-hcta-card-radius);
	z-index: 2;

	/* Liquid-glass tuning: dark smoke plate like the reference card. */
	--fw-glass-radius: var(--fw-hcta-card-radius);
	--fw-glass-tint: 52, 54, 58;
	--fw-glass-opacity: 0.62;
	--fw-glass-blur: 22px;
	--fw-glass-border-opacity: 0.22;

	/* Closed state: invisible, non-interactive, pill-sized (scaled down
	   around a point inside the pill so the morph starts "from" the pill). */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.3);
	transform-origin: 90px 48px;
	transition:
		transform var(--fw-hcta-duration) var(--fw-hcta-ease),
		opacity calc(var(--fw-hcta-duration) * 0.6) ease,
		visibility 0s linear var(--fw-hcta-duration);
	/* NO will-change here: `will-change: opacity` turns the card into a
	   backdrop root, which silently disables the liquid-glass backdrop-filter
	   (the plate would stop blurring the hero behind it). The transition only
	   runs while opening or closing, so the compositing hint isn't needed
	   anyway. */
}

/* ---- Open state (click-driven; see home3-hero-cta.js) --------------------- */
.fw-hero-cta.is-open .fw-hero-cta__card {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
	transition:
		transform var(--fw-hcta-duration) var(--fw-hcta-ease),
		opacity calc(var(--fw-hcta-duration) * 0.5) ease,
		visibility 0s;
}

/* Once the card is up it owns the pointer: the pill underneath it fades out
   and stops taking clicks, so the card's own inner link is what a second
   click hits. */
.fw-hero-cta.is-open .fw-hero-cta__default {
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Card internals
   -------------------------------------------------------------------------- */
.fw-hero-cta__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.fw-hero-cta__portrait {
	flex: 0 0 auto;
	display: block;
	width: 168px;
	aspect-ratio: 1 / 1;
	border-radius: 34px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08); /* placeholder before image paints */
}

.fw-hero-cta__portrait img,
.fw-hero-cta__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: inherit;
}

.fw-hero-cta__person {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 8px;
	padding-top: 14px;
	min-width: 0;
}

.fw-hero-cta__name {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #ffffff;
	font-family: var(--font-inter, inherit);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.fw-hero-cta__name .fw-hero-cta__dot {
	width: 14px;
	height: 14px;
}

.fw-hero-cta__role {
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-inter, inherit);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
}

.fw-hero-cta__inner-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 9px 18px;
	background-color: #ffffff;
	color: #0b0b0f;
	border-radius: 999px;
	font-family: var(--font-inter, inherit);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.fw-hero-cta__inner-btn:hover,
.fw-hero-cta__inner-btn:focus-visible {
	background-color: #ededf0;
	color: #0b0b0f;
	transform: translateY(-1px);
}

.fw-hero-cta__inner-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.fw-hero-cta__arrow {
	flex: 0 0 auto;
}

.fw-hero-cta__email {
	color: #ffffff;
	font-family: var(--font-inter, inherit);
	font-size: 27px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Responsive
   The card is viewport-capped (min(…, 86vw)) so it can never overflow a small
   screen; internals scale down with it. Every device opens the card the same
   way — a click/tap handled by home3-hero-cta.js — so touch needs no special
   case here.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.fw-hero-cta .fw-hero-cta__card {
		gap: 36px;
	}
	.fw-hero-cta__portrait {
		width: 140px;
		border-radius: 28px;
	}
	.fw-hero-cta__name {
		font-size: 24px;
	}
	.fw-hero-cta__role {
		font-size: 17px;
	}
	.fw-hero-cta__email {
		font-size: 23px;
	}
}

@media (max-width: 576px) {
	.fw-hero-cta {
		--fw-hcta-card-radius: 26px;
	}
	.fw-hero-cta .fw-hero-cta__card {
		top: -10px;
		left: -10px;
		width: min(var(--fw-hcta-card-max-w), calc(100vw - 12vw));
		padding: 20px;
		gap: 26px;
		transform-origin: 70px 40px;
	}
	.fw-hero-cta__default {
		padding: 12px 24px 11px;
	}
	.fw-hero-cta__default-text {
		font-size: 16px;
		white-space: normal;
	}
	.fw-hero-cta__availability {
		font-size: 13px;
	}
	.fw-hero-cta__card-top {
		gap: 14px;
	}
	.fw-hero-cta__portrait {
		width: 104px;
		border-radius: 22px;
	}
	.fw-hero-cta__person {
		padding-top: 6px;
		gap: 6px;
	}
	.fw-hero-cta__name {
		font-size: 19px;
		gap: 8px;
	}
	.fw-hero-cta__name .fw-hero-cta__dot {
		width: 11px;
		height: 11px;
	}
	.fw-hero-cta__role {
		font-size: 14px;
	}
	.fw-hero-cta__inner-btn {
		font-size: 14px;
		padding: 8px 15px;
	}
	.fw-hero-cta__email {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion — the swap still happens, the morph does not.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fw-hero-cta__default,
	.fw-hero-cta .fw-hero-cta__card,
	.fw-hero-cta.is-open .fw-hero-cta__card {
		transition: opacity 0.01s linear, visibility 0.01s linear;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Dark theme (parent ships body.dark) — pill flips to a dark plate; the
   glass card is theme-agnostic already.
   -------------------------------------------------------------------------- */
body.dark .fw-hero-cta {
	--fw-hcta-default-bg: #14141a;
	--fw-hcta-default-border: #2a2a33;
	--fw-hcta-title: #f5f5f7;
	--fw-hcta-muted: #a6a6b0;
}