/* ─────────────────────────────────────────────────────────────────────────────
   ATHERIA — EXPERIENCE HERO (redesigned)
   Full-bleed image with a glassmorphism thumbnail box (3 extra photos → lightbox).
   Title + intro are optional (usually supplied by Experience Details below).
   Globals-First tokens throughout.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Conflict guard: prevent Elementor's own entrance animation from hiding
   the whole widget via elementor-invisible (widget stays hidden on Live). ── */
.elementor-widget-atheria_experience_hero.elementor-invisible {
	visibility: visible !important;
}

.ath-exp-hero {
	--ath-exp-hero-radius: var(--ath-radius-lg, 2rem);
	--ath-exp-hero-h: clamp(30rem, 78vh, 52rem);
	display: block;
	position: relative;
	width: 100%;
}

.ath-exp-hero-wrapper {
	position: relative;
	width: 100%;
	z-index: 0;
}

.ath-exp-hero-pin {
	position: relative;
	width: 100%;
	z-index: 1;
}

/* ── Image stage (full-bleed background cover) ── */
.ath-exp-hero__stage {
	position: relative;
	width: 100%;
	height: var(--ath-exp-hero-h);
	border-radius: var(--ath-exp-hero-radius);
	overflow: hidden;
	background-color: var(--ath-arctic-mist, #ACBCBF);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
	isolation: isolate;
	transform-origin: top center;
	will-change: transform;
}
.ath-exp-hero__img {
	/* the single, prioritized cover image — loading="eager" fetchpriority="high"
	   in the render markup. No duplicate CSS background-image on .ath-exp-hero__stage
	   as of this fix: a second, unprioritized background layer was competing with
	   this image for load priority and was exposed to Elementor's "Lazy Load
	   Background Images" setting, causing an inconsistent late pop-in independent
	   of this widget's own animation setting. */
	position: absolute;
	inset: -4px;
	width: calc(100% + 8px) !important;
	height: calc(100% + 8px) !important; /* Elementor's own ".elementor img{height:auto}" core
	   reset has higher specificity (class+type vs. our single class) and wins the
	   cascade otherwise, collapsing this image to its intrinsic aspect ratio and
	   exposing the stage's fallback background-color beneath it. */
	object-fit: cover;
	display: block;
	pointer-events: none;
	max-width: none !important;
}
.ath-exp-hero__eyebrow-on-img {
	position: absolute;
	left: 1.5rem;
	bottom: 1.25rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.32);
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
	font-family: var(--ath-font-eyebrow, sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ath-frost, #F4FCFB);
}

/* ── Glassmorphism "Back to all experiences" link ── */
.ath-exp-hero__back {
	position: absolute;
	left: 1.5rem;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1.1rem;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.32);
	box-shadow: 0 4px 20px rgba(0,0,0,.15);
	font-family: var(--ath-font-eyebrow, sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ath-frost, #F4FCFB);
	text-decoration: none;
	transition: background 0.25s ease, gap 0.25s ease;
}
.ath-exp-hero__back:hover {
	background: rgba(255, 255, 255, 0.24);
	gap: 0.85rem;
}
.ath-exp-hero__back-arrow { font-size: 1.05em; line-height: 1; }
.ath-exp-hero__back--top { top: 1.5rem; }
/* Sits just above the bottom-left label (which is at bottom:1.25rem). */
.ath-exp-hero__back--bottom { bottom: 4rem; }

/* ── Glassmorphism thumbnail box (bottom-right) ── */
.ath-exp-hero__glass {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 4;
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: var(--ath-radius-md, 1.25rem);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.ath-exp-hero__thumb {
	position: relative;
	width: clamp(3.25rem, 5vw, 4.5rem);
	height: clamp(3.25rem, 5vw, 4.5rem);
	border-radius: calc(var(--ath-radius-md, 1.25rem) - 0.4rem) !important;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.35) !important;
	padding: 0 !important;
	cursor: pointer;
	background: rgba(255,255,255,0.10) !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.3s var(--ath-ease-out, cubic-bezier(.22,1,.36,1));
}
.ath-exp-hero__thumb img {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ath-exp-hero__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0);
	transition: background 0.3s ease;
	z-index: 2;
}
.ath-exp-hero__thumb:hover { transform: translateY(-3px) scale(1.03); }
.ath-exp-hero__thumb:hover::after,
.ath-exp-hero__thumb:focus-visible::after { background: rgba(255,255,255,0.12); }
.ath-exp-hero__thumb:focus-visible { outline: 2px solid var(--ath-frost, #F4FCFB); outline-offset: 2px; }

/* ── Content below image ── */
.ath-exp-hero__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.ath-exp-hero__eyebrow {
	display: block;
	font-family: var(--ath-font-eyebrow, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ath-arctic-blue, #5289AD);
	margin-bottom: 0.75rem;
}
.ath-exp-hero__title {
	font-family: var(--ath-font-heading, serif);
	color: var(--ath-arctic-navy, #243C4C);
	font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
	line-height: 1.02;
	margin: 0;
	overflow-wrap: break-word;
}
.ath-exp-hero__intro {
	font-family: var(--ath-font-body, sans-serif);
	color: var(--ath-reflection, #698696);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 1.25rem 0 0;
	max-width: 60ch;
}
.ath-exp-hero__main { flex: 1 1 30rem; min-width: 0; }

/* CTA on the right of the body */
.ath-exp-hero__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.4rem;
	font-family: var(--ath-font-eyebrow, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ath-arctic-navy, #243C4C);
	text-decoration: none;
	white-space: nowrap;
	transition: gap 0.25s var(--ath-ease-out, ease);
}
.ath-exp-hero__cta:hover { gap: 1rem; }
.ath-exp-hero__cta-arrow { font-size: 1.1em; line-height: 1; }

/* ── Lightbox ── */
.ath-exp-hero__lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vw;
	background: rgba(15, 22, 27, 0.86);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ath-ease-out, ease), visibility 0.35s;
}
.ath-exp-hero__lb.is-open { opacity: 1; visibility: visible; }
.ath-exp-hero__lb-img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: var(--ath-radius-md, 1.25rem);
	box-shadow: 0 24px 80px rgba(0,0,0,.5);
	transform: scale(0.96);
	transition: transform 0.35s var(--ath-ease-out, cubic-bezier(.22,1,.36,1));
}
.ath-exp-hero__lb.is-open .ath-exp-hero__lb-img { transform: scale(1); }
.ath-exp-hero__lb-close,
.ath-exp-hero__lb-nav {
	position: fixed !important;
	z-index: 10000 !important;
	background: rgba(255,255,255,0.12) !important;
	border: 1px solid rgba(255,255,255,0.3) !important;
	color: #fff !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-size: 1.4rem !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background 0.2s ease !important;
}
.ath-exp-hero__lb-close:hover,
.ath-exp-hero__lb-nav:hover { background: rgba(255,255,255,0.28) !important; }
.ath-exp-hero__lb-close { top: clamp(1rem,3vh,2rem) !important; right: clamp(1rem,3vw,2rem) !important; bottom: auto !important; left: auto !important; transform: none !important; }
.ath-exp-hero__lb-nav--prev { left: clamp(1rem,3vw,2rem) !important; top: 50% !important; transform: translateY(-50%) !important; right: auto !important; bottom: auto !important; }
.ath-exp-hero__lb-nav--next { right: clamp(1rem,3vw,2rem) !important; top: 50% !important; transform: translateY(-50%) !important; left: auto !important; bottom: auto !important; }

.ath-exp-hero-next-section {
	position: relative !important;
	z-index: 999 !important;
	background-color: var(--ath-frost-surface, #ffffff);
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: translateZ(0);
}

/* ── Responsive ── */
@media (max-width: 768px) {
	/* Glass box spans the width and centers at the bottom (like the reference). */
	.ath-exp-hero__glass {
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		gap: 0.5rem;
		padding: 0.5rem;
		justify-content: center;
	}
	.ath-exp-hero__thumb {
		flex: 1 1 0;
		width: auto;
		height: clamp(3.5rem, 22vw, 5.5rem);
	}
	.ath-exp-hero__body { flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
	.ath-exp-hero__cta { margin-top: 0; }
	/* Label moves to top-left so it doesn't collide with the bottom glass box. */
	.ath-exp-hero__eyebrow-on-img { bottom: auto; top: 1rem; left: 1rem; }
	.ath-exp-hero__back { left: 1rem; }
	.ath-exp-hero__back--top { top: 1rem; }
	/* When both the back-link (top) and label (now top) are shown, push the
	   label below the back-link so they stack instead of overlapping.
	   .ath-exp-hero__back inherits body{line-height:1.66} (no own line-height),
	   so at font-size .6875rem + padding .55rem top/bottom, the pill's real
	   height is ~3.24rem from its top:1rem position — not the ~2.25rem a
	   default line-height would give. 3.75rem left only ~8px clearance. */
	.ath-exp-hero__back--top ~ .ath-exp-hero__eyebrow-on-img { top: 4.5rem; }
	/* Bottom-mode back-link sits above the centered bottom glass box. */
	.ath-exp-hero__back--bottom { bottom: 6.5rem; }
}

/* ── Editor safety: keep content visible ── */
.elementor-editor-active .ath-exp-hero__lb { display: none; }