/*
 * Homepage Hero
 * Figma refs: 2070:9935 (desktop 1652×600) + 2107:7583 (mobile 372 width)
 *
 * Mobile-first. Breakpoint at 900px - below this, the stacked mobile layout;
 * above, the side-by-side desktop layout.
 *
 * Brand colours (per design-system memory):
 *   #E7B040 (primary yellow)  #FFFFFF (white)  #000000 / #1A1A1A (ink)
 *
 * Fonts (loaded site-wide by the theme - we just request them by name):
 *   Playfair Display SemiBold 600  - for the rotating title
 *   Open Sans Regular / Medium / Bold  - for everything else
 */

.nge-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.nge-hero__viewport {
	overflow: hidden;
	touch-action: pan-y; /* FB6: allow vertical scroll, let JS own horizontal swipe */
}

.nge-hero__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.nge-hero__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* ── MOBILE ── stacked: image up top with bottom-fade gradient, info card below */

.nge-hero__media {
	position: relative;
	width: 100%;
	height: 340px;
	overflow: hidden;
	background: #1A1A1A; /* fallback while img loads */
}

.nge-hero__media a,
.nge-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.nge-hero__media img {
	object-fit: cover;
	object-position: center;
}

/* Bottom-fading dark gradient overlay - mobile only, matches Figma fill_JA6K82 */
.nge-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.nge-hero__info {
	background: #E7B040;
	color: #000;
	padding: 0 10px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
}

.nge-hero__info-inner {
	width: 100%;
	max-width: 321px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Mobile: all card text + the CTA centred (client request, 2 Jul);
	   the desktop block reverts both to the left-aligned design. */
	align-items: center;
	text-align: center;
}

/* Nested under `.nge-hero` so the selector specificity (0,2,0) wins against
 * Elementor's Default Kit `.elementor-kit-N h2 { color:#000; font-family:Roboto; }`
 * which is (0,1,1). Without this our Playfair Display + per-design colour
 * would be overridden site-wide. Same trick used in restaurants-index.css. */
.nge-hero .nge-hero__title {
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33; /* mobile frame: 42.656/32; desktop block overrides to 1.12 */
	margin: 0;
	color: #000;
}

.nge-hero__tagline {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.66;
	text-align: center;
	margin: 0;
	color: #000;
	opacity: .9;
}

.nge-hero__location {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.66;
	margin: 0;
	color: #000;
	opacity: .9;
}

.nge-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 12px 15px;
	min-height: 44px;
	/* Figma home 2070:5900: black button, gold label (the previous white
	   version also failed contrast at ~2:1 against the gold panel). */
	background: #000000;
	color: #E7B040;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	border-radius: 6px;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nge-hero__cta:hover,
.nge-hero__cta:focus-visible {
	background: #1A1A1A;
	color: #E7B040;
	transform: translateY(-1px);
}

.nge-hero__cta--placeholder {
	pointer-events: none;
	opacity: .6;
}

/* ── Navigation arrows (desktop primarily; hidden on mobile in favour of dots) ── */

/* Figma home 2070:5900 "carousal control": BARE black chevron, 54px glyph
   (2px stroke in the 24 viewBox scales to the design's 4.5px), 75px round
   hit area, NO circle background. */
.nge-hero__nav {
	position: absolute;
	top: 170px; /* centred on the 340px-tall mobile media */
	transform: translateY(-50%);
	display: none; /* hidden on mobile; shown ≥900px */
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: #000000;
	cursor: pointer;
	z-index: 2;
	transition: opacity .2s ease;
	padding: 0;
}

/* Hello theme reset.css paints button:hover/:focus pink (#c36) at up to
   (0,2,0) - these states must RE-ASSERT background/color/border at higher
   specificity, not just opacity. */
.nge-hero .nge-hero__nav:hover,
.nge-hero .nge-hero__nav:focus,
.nge-hero .nge-hero__nav:focus-visible {
	background: transparent;
	border: 0;
	color: #000000;
	opacity: .6;
}

.nge-hero__nav svg {
	width: 54px;
	height: 54px;
	display: block;
	margin: auto;
}

.nge-hero__nav--prev { left: 18px; }
.nge-hero__nav--next { right: 18px; }

/* No dot indicators on desktop - the design (2070:5900) has chevrons only.
   Dots remain the mobile navigation (mobile frames keep them). */
/* ── Dot indicators (mobile only - desktop hides them, see the 900px block) ── */

.nge-hero__dots {
	position: absolute;
	bottom: 24px; /* mobile frame: dots sit 24px above the gold panel's edge */
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

.nge-hero__dots li { display: flex; }

.nge-hero__dot {
	width: 24px;  /* WCAG 2.5.8 tap target; the visible 11px dot is painted by the gradient */
	height: 24px;
	border-radius: 50%;
	border: 0;
	/* black 11px ellipse centred inside the 24px target (mobile frame, gold panel) */
	background: radial-gradient(circle at center, #000 0 5.5px, transparent 6px);
	opacity: .3;
	padding: 0;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.nge-hero__dot.is-active,
.nge-hero__dot[aria-selected="true"] {
	opacity: 1;
	transform: scale(1.1);
}

.nge-hero .nge-hero__dot:hover,
.nge-hero .nge-hero__dot:focus,
.nge-hero .nge-hero__dot:focus-visible {
	background: radial-gradient(circle at center, #000 0 5.5px, transparent 6px); /* shield against the theme reset's pink button states */
	border: 0;
	opacity: .8;
}

/* ── DESKTOP (≥ 900px): side-by-side image + yellow card ── */

@media (min-width: 900px) {
	.nge-hero {
		max-width: 1652px;
		margin: 0 auto;
		height: 460px; /* FB4: shorter desktop hero (client override; was 520, design 600) */
	}

	.nge-hero__viewport,
	.nge-hero__track {
		height: 100%;
	}

	.nge-hero__slide {
		flex-direction: row;
		height: 100%;
	}

	.nge-hero__media {
		flex: 1 1 50%;
		height: 100%;
	}

	/* No bottom gradient on desktop - image stands on its own next to the card */
	.nge-hero__media::after {
		display: none;
	}

	.nge-hero__info {
		flex: 1 1 50%;
		min-height: auto;
		padding: 0 48px;
		justify-content: flex-start;
	}

	.nge-hero__info-inner {
		max-width: none;
		gap: 8px;
		align-items: flex-start;
		text-align: left;
	}

	.nge-hero .nge-hero__title {
		font-size: 44px; /* FB5: smaller hero title (client override of the 60px design) */
		line-height: 1.15;
	}

	.nge-hero__tagline {
		font-weight: 400; /* Open Sans Regular, not Bold, on desktop per Figma H3 */
		font-size: 24px;
		line-height: 1.33; /* 32 / 24 */
		text-align: left;
	}

	.nge-hero__location {
		font-size: 16px;
		line-height: 1.6; /* 25.6 / 16 */
	}

	.nge-hero__cta {
		margin-top: 16px;
		align-self: flex-start;
	}

	/* Figma "carousal control": 75px hit area, bare 54px black chevron. */
	.nge-hero__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 50%;
		width: 75px;
		height: 75px;
	}

	.nge-hero__nav--prev { left: 18px; }
	.nge-hero__nav--next { right: 18px; }

	.nge-hero__nav svg { width: 54px; height: 54px; }

	/* No dots on desktop - the design has chevrons only. */
	.nge-hero__dots {
		display: none;
	}
}

/* ── Above the Figma reference width: same as desktop but cap at 1652 ── */

/* ── Reduce motion: kill autoplay transition + dot scale ── */
@media (prefers-reduced-motion: reduce) {
	.nge-hero__track    { transition: none; }
	.nge-hero__nav:hover,
	.nge-hero__nav:focus-visible { transform: translateY(-50%); }
	.nge-hero__dot.is-active { transform: none; }
}

/* ── Focus rings for keyboard users - never rely on browser default colour ── */
.nge-hero__nav:focus-visible,
.nge-hero__dot:focus-visible,
.nge-hero__cta:focus-visible,
.nge-hero__media a:focus-visible {
	outline: 2px solid #1A1A1A;
	outline-offset: 2px;
}