/*
 * NGE shared components - used by 2+ widgets.
 * Figma cache: design-refs/figma/ (project planning repo) (spec.md per page).
 *
 * Components:
 *   .nge-rail            300px sidebar column (sticky on desktop)
 *   .nge-ad              ad slot 300×250 / --tall 300×600 (placeholder or CMS creative)
 *   .nge-nominate-card   dark 300×250 promo card
 *   .nge-story-card      Featured Gems card (grid + dark band)
 *   .nge-gem-card        dark-band restaurant card (circular image)
 *   .nge-band            full-width black section wrapper ("More …")
 *   .nge-share           "Share this Gem" row
 *   .nge-iconbtn         31px round icon button
 *   .nge-slider          image carousel with chevron buttons
 *   .nge-newsletter      banner + inline sign-up variants
 *
 * SPECIFICITY: heading/paragraph rules are double-class namespaced so they
 * beat the Elementor Kit `.elementor-kit-N h1..h6` rules at (0,1,1).
 *
 * Palette: #FBFBFB page bg · #0A0A0A headings · #1A1A1A ink · #4A5565 lead ·
 * #D6D6D6 dark-surface text · #E7B040 gold · #F3F4F6 ad bg · #E5E7EB border
 */

/* ── Rail ─────────────────────────────────────────────────────────── */

.nge-rail {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

@media (min-width: 900px) {
	.nge-rail {
		width: 350px;          /* 300px creative + the .nge-ad 24px padding + 1px border each side */
		flex: 0 0 350px;
		position: sticky;
		top: 32px;
	}
}

/* ── Ad slot ──────────────────────────────────────────────────────── */

.nge-ad {
	background: #F3F4F6;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	min-height: 250px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.nge-ad--tall {
	min-height: 600px;
}

/* R2-17: the "Advertisement / Ad Space Reserved" placeholder was removed (empty
   slots collapse), so the former .nge-ad__eyebrow / .nge-ad__label rules are gone. */

.nge-ad .nge-ad__creative {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nge-ad .nge-ad__creative img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* About (standard-page) slots hold frameless house banners (client, 2 Jul
   2026): no box chrome - the creative fills the 350px sidebar column on
   desktop / the 32px-gutter content width on mobile, and takes the site
   card radius. The aspect-ratio (the bundled 700px 2x exports) reserves
   the space before the lazy creative hydrates, replacing the fixed 250/600
   reservation. Fixed-size GAM slots elsewhere keep the framed box. */
.nge-standard-page .nge-ad {
	background: none;
	border: 0;
	border-radius: 16px;
	padding: 0;
	min-height: 0;
	aspect-ratio: 700 / 584;
}

.nge-standard-page .nge-ad--tall {
	aspect-ratio: 700 / 1400;
}

.nge-standard-page .nge-ad .nge-ad__creative,
.nge-standard-page .nge-ad .nge-ad__creative a {
	width: 100%;
}

.nge-standard-page .nge-ad .nge-ad__creative img {
	width: 100%;
	border-radius: 16px;
}

/* ── Nominate side card ───────────────────────────────────────────── */

.nge-nominate-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid #E5E7EB;
	background: #000000;
	color: #FFFFFF;
	text-decoration: none;
	min-height: 250px;
	padding: 15px 25px 25px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.nge-nominate-card:hover,
.nge-nominate-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .25);
	outline: none;
	color: #FFFFFF;
}

.nge-nominate-card .nge-nominate-card__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.nge-nominate-card .nge-nominate-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 1;
}

.nge-nominate-card .nge-nominate-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: 210px;
}

.nge-nominate-card .nge-nominate-card__eyebrow {
	display: block;
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 2;
	color: #FFFFFF;
}

.nge-nominate-card .nge-nominate-card__title {
	display: block;
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.23;
	color: #FFFFFF;
}

.nge-nominate-card .nge-nominate-card__foot {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}

.nge-nominate-card .nge-nominate-card__logo img {
	display: block;
	width: 101px;
	height: auto;
}

.nge-nominate-card .nge-nominate-card__arrow {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: #E7B040;
	color: #000000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.nge-nominate-card .nge-nominate-card__arrow svg {
	width: 24px;  /* Figma: ArrowUpRight 24×24 inside the 32px chip */
	height: 24px;
}

/* ── Story card ───────────────────────────────────────────────────── */

.nge-story-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}

.nge-story-card:hover,
.nge-story-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .18);
	outline: none;
}

.nge-story-card .nge-story-card__media {
	display: block;
	aspect-ratio: 437 / 273;
	background: #F3F4F6;
	overflow: hidden;
}

.nge-story-card .nge-story-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.nge-story-card .nge-story-card__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 24px;
	border: 1px solid #D6D6D6;
	border-top: 0;
	border-radius: 0 0 8px 8px;
	flex: 1 1 auto;
}

.nge-story-card .nge-story-card__title {
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.33;
	color: #1A1A1A;
	display: block;
}

.nge-story-card .nge-story-card__excerpt {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.66;
	color: #4A5565;
	display: block;
}

.nge-story-card .nge-story-card__foot {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

/* Figma "Ghosts" 48×48: BARE 24px arrow, no disc - hover tints it gold. */
.nge-story-card .nge-story-card__arrow {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1A1A1A;
	transition: color .2s ease;
}

.nge-story-card:hover .nge-story-card__arrow {
	color: #C4A45D;
}

.nge-story-card .nge-story-card__arrow svg {
	width: 24px;
	height: 24px;
}

/* ── Dark band + gem card ─────────────────────────────────────────── */

.nge-band {
	background: var(--ng-color-surface, #1A1714); /* FB23: dark surface, not pure black */
	padding: 48px 16px; /* mobile frame Frame 15: 48px vertical; desktop block overrides to 115 */
}

.nge-band .nge-band__inner {
	max-width: 1376px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nge-band .nge-band__title {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 24px; /* mobile frame: 24/32 centred; desktop restores 32 left */
	line-height: 1.33;
	color: #FFFFFF; /* standardised both "More …" bands to palette white - JP 2026-06-15 (was #D6D6D6, off-palette) */
	text-align: center;
}

.nge-band .nge-band__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* Carousel band (restaurant "More Gems …", mobile frame): one card per
   view, swipe/scroll-snap, dot indicators. Desktop reverts to the grid. */

.nge-band--carousel .nge-band__grid {
	display: flex;
	gap: 16px; /* JP 2026-06-17: was 0 - cards sat flush while swiping */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-padding: 0 16px;
}

.nge-band--carousel .nge-band__grid::-webkit-scrollbar {
	display: none;
}

.nge-band--carousel .nge-band__grid > * {
	flex: 0 0 100%;
	scroll-snap-align: center;
}

.nge-band .nge-band__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin: -8px 0 0;
	padding: 0;
	list-style: none;
}

.nge-band .nge-band__dots li {
	display: flex;
}

.nge-band .nge-band__dot {
	width: 24px;  /* WCAG 2.5.8 tap target; visible 11px dot painted by the gradient */
	height: 24px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: radial-gradient(circle at center, #D9D9D9 0 5.5px, transparent 6px);
	opacity: .5;
	cursor: pointer;
	transition: opacity .2s ease;
}

.nge-band .nge-band__dot.is-active,
.nge-band .nge-band__dot[aria-selected='true'] {
	opacity: 1;
}

.nge-band .nge-band__dot:hover,
.nge-band .nge-band__dot:focus,
.nge-band .nge-band__dot:focus-visible {
	background: radial-gradient(circle at center, #D9D9D9 0 5.5px, transparent 6px); /* shield: theme reset paints button states pink */
	border: 0;
	opacity: .8;
	outline: none;
}

.nge-band .nge-band__dot:focus-visible {
	outline: 2px solid #E7B040;
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.nge-band {
		padding: 115px 16px;
	}

	.nge-band .nge-band__title {
		font-size: 32px;
		text-align: left;
	}

	.nge-band .nge-band__grid,
	.nge-band--carousel .nge-band__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
		overflow-x: visible;
	}

	.nge-band--carousel .nge-band__grid > * {
		flex: none;
	}

	.nge-band .nge-band__dots {
		display: none;
	}
}

/* Story cards sit on white cards already - on the black band they keep
   their own white background, matching Figma. */

.nge-gem-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
}

.nge-gem-card .nge-gem-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 999px;
	overflow: hidden;
	background: #1A1A1A;
	margin-bottom: 16px;
}

.nge-gem-card .nge-gem-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .3s ease;
}

.nge-gem-card:hover .nge-gem-card__media img {
	transform: scale(1.03);
}

.nge-gem-card .nge-gem-card__name {
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33;
	color: #FFFFFF;
}

.nge-gem-card .nge-gem-card__tagline {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #D6D6D6;
}

.nge-gem-card .nge-gem-card__location {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.66;
	color: #D6D6D6;
}

/* Carousel mode (mobile band frame): the in-view card's name goes gold;
   .is-current is kept in sync by the slider's scroll handler. */
@media (max-width: 899px) {
	.nge-band--carousel .nge-gem-card.is-current .nge-gem-card__name {
		color: #E7B040;
	}
}

/* ── Icon buttons + share row ─────────────────────────────────────── */

.nge-iconbtn {
	width: 31px;
	height: 31px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: #000000;
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

/* Doubled class: the Hello theme reset styles button:hover/:focus pink at
   up to (0,2,0) - every state below must outrank it AND survive the
   post-click :focus state. Hover comes after :focus so a hovered+focused
   button shows the hover colours. */
.nge-iconbtn.nge-iconbtn:focus {
	background: #000000;
	color: #FFFFFF;
	border: 0;
}

.nge-iconbtn.nge-iconbtn:hover,
.nge-iconbtn.nge-iconbtn:focus-visible {
	background: #E7B040;
	color: #000000;
	border: 0;
	outline: none;
}

.nge-iconbtn svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Plain variant: bare glyph, no disc (the copy-link icon in Figma). */
.nge-iconbtn--plain {
	background: transparent;
	color: #1A1A1A;
}

.nge-iconbtn--plain.nge-iconbtn--plain:focus {
	background: transparent;
	color: #1A1A1A;
}

.nge-iconbtn--plain.nge-iconbtn--plain:hover,
.nge-iconbtn--plain.nge-iconbtn--plain:focus-visible {
	background: transparent;
	color: #E7B040;
}

.nge-iconbtn--plain svg {
	width: 22px;
	height: 22px;
}

.nge-share {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid #D6D6D6;
	border-bottom: 1px solid #D6D6D6;
}

.nge-share .nge-share__label {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.66;
	color: #1A1A1A;
}

.nge-share .nge-share__buttons {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nge-share .nge-share__toast {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #1A1A1A;
	color: #FFFFFF;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 12px;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 6px;
}

/* Mobile (frame 2143:5523 + JP's note): one full-width bordered button
   driving the native share sheet; the label + icon row are desktop-only. */

.nge-share .nge-share__native {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px; /* mobile frame: Export icon + label, gap 12 */
	width: 100%;
	height: 56px;
	background: transparent;
	border: 2px solid #000000;
	border-radius: 8px;
	color: #1A1A1A;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity .2s ease;
}

.nge-share .nge-share__native-ic {
	display: inline-flex;
	flex: 0 0 auto;
}

.nge-share .nge-share__native-ic svg {
	width: 24px;
	height: 24px;
}

.nge-share .nge-share__native:hover,
.nge-share .nge-share__native:focus,
.nge-share .nge-share__native:focus-visible {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 2px solid #000000;
	color: #1A1A1A;
	opacity: .7;
	outline: none;
}

@media (max-width: 899px) {
	.nge-share {
		border-top: 0;
		border-bottom: 0;
		padding: 16px 0;
	}

	.nge-share .nge-share__label,
	.nge-share .nge-share__buttons {
		display: none;
	}
}

@media (min-width: 900px) {
	.nge-share .nge-share__native {
		display: none;
	}
}

/* ── Slider ───────────────────────────────────────────────────────── */

.nge-slider-wrap {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nge-slider {
	position: relative;
	overflow: hidden;
	background: #F3F4F6;
	border-radius: 10px; /* restaurant mobile frame: InnerSlider2 r:10 */
}

.nge-slider-wrap--story .nge-slider {
	border-radius: 16px;
}

.nge-slider .nge-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.nge-slider .nge-slider__track::-webkit-scrollbar {
	display: none;
}

.nge-slider .nge-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 555 / 384;
}

.nge-slider-wrap--story .nge-slider__slide {
	aspect-ratio: 1025 / 664;
}

.nge-slider .nge-slider__slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* FB10: restaurant gallery shows portrait + landscape whole (letterbox/contain
   on a neutral dark surface), not cropped. */
.nge-slider-wrap--restaurant .nge-slider__slide img {
	object-fit: contain;
	background: var(--ng-color-surface, #1A1714);
}

.nge-slider .nge-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: none; /* mobile frames navigate by dots + swipe; chevrons ≥900px */
	width: 44px;  /* FB11: ≥44px tap target (client override of the 37px design) */
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: #0A0A0A;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 5px rgba(0, 0, 0, .1), 0 9px 14px rgba(0, 0, 0, .1);
	transition: background .2s ease;
}

.nge-slider .nge-slider__btn:hover,
.nge-slider .nge-slider__btn:focus,
.nge-slider .nge-slider__btn:focus-visible {
	background: #FFFFFF; /* shield: theme reset paints button states pink */
	color: #0A0A0A;
	border: 0;
}

.nge-slider .nge-slider__btn--prev { left: 16px; }
.nge-slider .nge-slider__btn--next { right: 16px; }

.nge-slider-wrap--story .nge-slider__btn--prev { left: 24px; }
.nge-slider-wrap--story .nge-slider__btn--next { right: 24px; }

.nge-slider .nge-slider__btn svg {
	width: 26px;  /* FB11: larger chevron */
	height: 26px;
	flex-shrink: 0; /* Chrome flex bug collapses an inline svg flex-child to 12px without this */
}

/* Dot indicators under the image frame (mobile spec: 11px black, inactive
   50%, gap 9, 16px below the frame). Hidden on desktop - chevrons rule. */

.nge-slider-wrap .nge-slider__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.nge-slider-wrap .nge-slider__dots li {
	display: flex;
}

.nge-slider-wrap .nge-slider__dot {
	width: 24px;  /* WCAG 2.5.8 tap target; visible 11px dot painted by the gradient */
	height: 24px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: radial-gradient(circle at center, #000000 0 5.5px, transparent 6px);
	opacity: .5;
	cursor: pointer;
	transition: opacity .2s ease;
}

.nge-slider-wrap .nge-slider__dot.is-active,
.nge-slider-wrap .nge-slider__dot[aria-selected='true'] {
	opacity: 1;
}

.nge-slider-wrap .nge-slider__dot:hover,
.nge-slider-wrap .nge-slider__dot:focus,
.nge-slider-wrap .nge-slider__dot:focus-visible {
	background: radial-gradient(circle at center, #000000 0 5.5px, transparent 6px); /* shield: theme reset paints button states pink */
	border: 0;
	opacity: .8;
	outline: none;
}

.nge-slider-wrap .nge-slider__dot:focus-visible {
	outline: 2px solid #E7B040;
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.nge-slider .nge-slider__btn {
		display: inline-flex;
	}

	.nge-slider-wrap .nge-slider__dots {
		display: none;
	}
}

.nge-slider-wrap .nge-slider-wrap__credit {
	font-family: Open Sans, system-ui, sans-serif;
	font-style: normal;       /* theme defaults figcaption to italic */
	font-weight: 400;
	font-size: 12px;
	line-height: 1.33;
	color: #595959; /* WCAG AA: #808080 was 3.81:1 on #FBFBFB; #595959 is ~6.9:1 */
}

/* ── Newsletter ───────────────────────────────────────────────────── */

.nge-newsletter {
	background: var(--ng-color-surface, #1A1714); /* FB23: premium dark surface */
	border-radius: 16px;
	overflow: hidden;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
}

/* FB22: compact subscribe band - no image, smaller, horizontal on desktop,
   shown site-wide via [ng_subscribe_band]. (Form-row fix: an empty error/status
   <p> must not squeeze the input in the nowrap row.) */
.nge-newsletter--compact .nge-newsletter__media {
	display: none;
}
.nge-newsletter.nge-newsletter--compact .nge-newsletter__content {
	gap: 10px;
	padding: 32px 40px; /* a bit larger than the original 20/28 */
}
.nge-newsletter--compact .nge-newsletter__heading {
	font-size: 22px;
	line-height: 1.3;
}
.nge-newsletter--compact .nge-newsletter__body {
	display: none; /* compact band shows the heading + form only */
}
.nge-newsletter.nge-newsletter--compact .nge-newsletter__form {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 2px;
}
.nge-newsletter.nge-newsletter--compact .nge-newsletter__input {
	/* (0,3,0) to beat the base `.nge-newsletter .nge-newsletter__input`
	   (flex:0 0 auto; width:100%), which otherwise full-widths the input on
	   mobile and stacks the button. The compact form is a row, so a 0 basis is
	   a width (not a height). */
	flex: 1 1 0;
	min-width: 0; /* shrink so the input + button stay inline on one row */
	width: auto;
}
.nge-newsletter--compact .nge-newsletter__submit {
	flex: 0 0 auto;
}
.nge-newsletter--compact .nge-newsletter__error:empty,
.nge-newsletter--compact .nge-newsletter__status:empty {
	display: none;
}
.nge-newsletter--compact .nge-newsletter__error,
.nge-newsletter--compact .nge-newsletter__status {
	order: 99;
	flex: 1 0 100%;
}
@media (min-width: 768px) {
	.nge-newsletter.nge-newsletter--compact .nge-newsletter__content {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
	}
	.nge-newsletter.nge-newsletter--compact .nge-newsletter__form {
		flex: 1 1 420px;
		justify-content: flex-end;
		margin-top: 0;
	}
	.nge-newsletter .nge-newsletter__heading {
		max-width: 55%; /* leave the rest of the row for the inline form (all variants) */
	}
}

/* The newsletter is a floating CARD like the nominate card: the gold band
   itself is inset from the viewport (see .nge-newsletter-band /
   .nge-stories__newsletter, which float it via min(100% - 64px, 1376px)), so the
   band is NOT flush to the edges at any breakpoint. Here we only give the
   content a consistent inner padding within that card. */
.nge-newsletter:not(.nge-newsletter--banner) .nge-newsletter__content {
	box-sizing: border-box;
	padding-left: 32px !important;
	padding-right: 32px !important;
}

.nge-newsletter .nge-newsletter__media {
	position: relative;
	overflow: hidden;
}

.nge-newsletter .nge-newsletter__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.nge-newsletter .nge-newsletter__content {
	display: flex;
	flex-direction: column;
	gap: 17px;
	padding: 32px;
}

.nge-newsletter .nge-newsletter__heading {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33;
	color: #FFFFFF;
}

.nge-newsletter .nge-newsletter__body {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #FFFFFF; /* mobile frames use pure white; desktop banner mutes it */
}

/* Mobile (Figma home 2107:3221 newsletter): input and button stack, both
   full width, 16px apart. Desktop restores the inline row. */
.nge-newsletter .nge-newsletter__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 7px;
}

.nge-newsletter .nge-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.nge-newsletter .nge-newsletter__input {
	flex: 0 0 auto; /* column form: a px flex-basis would become the HEIGHT */
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 8px 12px;
	border: 1px solid #A6A6A6;
	border-radius: 4px;
	background: transparent;
	color: #FFFFFF;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.nge-newsletter .nge-newsletter__input::placeholder {
	color: #A6A6A6;
}

.nge-newsletter .nge-newsletter__input:focus {
	outline: none;
	border-color: #E7B040;
}

.nge-newsletter .nge-newsletter__submit {
	height: 44px;
	padding: 12px 15px;
	border: 0;
	border-radius: 6px;
	background: #E7B040;
	color: #1A1A1A;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s ease;
}

.nge-newsletter .nge-newsletter__submit:focus {
	background: #E7B040; /* shield: theme reset paints button states pink */
	color: #1A1A1A;
	border: 0;
}

.nge-newsletter .nge-newsletter__submit:hover,
.nge-newsletter .nge-newsletter__submit:focus-visible {
	background: #C4A45D;
	color: #1A1A1A;
	border: 0;
	outline: none;
}

.nge-newsletter .nge-newsletter__submit[disabled] {
	opacity: .6;
	cursor: wait;
}

.nge-newsletter .nge-newsletter__status {
	flex: 0 0 auto;
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	min-height: 1.4em;
	color: #D6D6D6;
}

.nge-newsletter .nge-newsletter__status.is-error {
	color: #E7B040;
}

/* Inline field validation (replaces the native browser bubble). */
.nge-newsletter .nge-newsletter__error {
	flex: 0 0 auto;
	width: 100%;
	margin: -8px 0 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #E7B040;
}

.nge-newsletter .nge-newsletter__error:empty {
	display: none;
}

.nge-newsletter .nge-newsletter__input[aria-invalid="true"],
.nge-newsletter .nge-newsletter__input[aria-invalid="true"]:focus {
	border-color: #E7B040;
}

/* Banner variant - text left, image right half (≥900px) */

@media (min-width: 900px) {
	.nge-newsletter .nge-newsletter__body {
		color: #D6D6D6;
	}

	.nge-newsletter .nge-newsletter__form {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}

	.nge-newsletter .nge-newsletter__input {
		flex: 1 1 220px;
		width: auto;
	}

	.nge-newsletter .nge-newsletter__status {
		flex: 1 0 100%;
	}

	.nge-newsletter--banner {
		flex-direction: row-reverse;
		align-items: stretch;
		min-height: 644px;
	}

	.nge-newsletter--banner .nge-newsletter__media {
		flex: 0 0 47%;
	}

	.nge-newsletter--banner .nge-newsletter__media::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 34%);
		z-index: 1;
	}

	.nge-newsletter--banner .nge-newsletter__content {
		flex: 1 1 auto;
		justify-content: center;
		padding: 87px;
		gap: 17px;
	}

	.nge-newsletter--banner .nge-newsletter__heading {
		font-size: 60px;
		line-height: 1.12;
		max-width: 480px;
	}

	.nge-newsletter--banner .nge-newsletter__form {
		max-width: 474px;
	}
}

/* Gold theme - homepage Subscription CTA. R2-11: Gems gold #E7B040 (was the
   muted #C4A45D), black type for ~10.7:1 contrast. Now applied at ALL
   breakpoints so the home subscribe band is yellow on mobile too (client
   override of the Figma mobile-dark home band; mobile-first). */

.nge-newsletter--gold {
	background: #E7B040;
	color: #000000;
}

.nge-newsletter--gold .nge-newsletter__heading,
.nge-newsletter--gold .nge-newsletter__body {
	color: #000000;
}

.nge-newsletter--gold .nge-newsletter__input {
	border-color: #000000;
	color: #000000;
}

.nge-newsletter--gold .nge-newsletter__input::placeholder {
	color: #000000;
	opacity: .8;
}

.nge-newsletter--gold .nge-newsletter__input:focus {
	border-color: #1A1A1A;
}

.nge-newsletter--gold .nge-newsletter__submit {
	background: #000000;
	color: #E7B040;
}

.nge-newsletter--gold .nge-newsletter__submit:focus {
	background: #000000;
	color: #E7B040;
}

.nge-newsletter--gold .nge-newsletter__submit:hover,
.nge-newsletter--gold .nge-newsletter__submit:focus-visible {
	background: #1A1A1A;
	color: #E7B040;
}

.nge-newsletter--gold .nge-newsletter__status {
	color: #1A1A1A;
}

.nge-newsletter--gold .nge-newsletter__status.is-error {
	color: #000000;
	font-weight: 600;
}

.nge-newsletter--gold .nge-newsletter__error {
	color: #000000;
	font-weight: 600;
}

.nge-newsletter--gold .nge-newsletter__input[aria-invalid="true"],
.nge-newsletter--gold .nge-newsletter__input[aria-invalid="true"]:focus {
	border-color: #000000;
}

@media (min-width: 900px) {
	.nge-newsletter--gold.nge-newsletter--banner .nge-newsletter__media::before {
		background: linear-gradient(90deg, #E7B040 0%, rgba(231, 176, 64, 0) 34%);
	}
}

/* Inline variant - media on top, content below */

.nge-newsletter--inline .nge-newsletter__media {
	aspect-ratio: 555 / 373;
}

.nge-newsletter--inline .nge-newsletter__media::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 85px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

@media (min-width: 900px) {
	.nge-newsletter--inline .nge-newsletter__form .nge-newsletter__input {
		flex: 1 1 180px;
	}
}

/* Standalone band wrapper (ng-newsletter widget): centred 1376 with the
   Figma Frame-13 vertical rhythm (120px top/bottom on desktop). */

.nge-newsletter-band {
	/* Float the gold card with a consistent 32px side margin at EVERY breakpoint
	   (was max-width:1376 which left it flush/full-bleed below 1376, e.g. on
	   tablet). Matches the nominate card so the bands line up. */
	width: min(100% - 64px, 1376px);
	max-width: none;
	margin: 0 auto;
	/* Mobile (Figma home 2107:3221): the CTA runs edge to edge - square
	   image full-bleed on top, no card rounding, no side gutters. */
	padding: 0;
}

.nge-newsletter-band .nge-newsletter {
	border-radius: 16px; /* the band now floats as a card at all breakpoints */
}

.nge-newsletter-band .nge-newsletter__media {
	aspect-ratio: 1 / 1;
}

@media (min-width: 900px) {
	.nge-newsletter-band {
		padding: 56px 0;  /* was 120px: too large a gap before the nominate band */
	}

	.nge-newsletter-band .nge-newsletter {
		border-radius: 16px;
	}

	.nge-newsletter-band .nge-newsletter__media {
		aspect-ratio: auto;
	}
}

/* ── Sidebars on mobile ───────────────────────────────────────────────
   The rail mobile frames (restaurant/story/legal) show exactly the two
   300x250 slots under the content - no 600 tower, no sidebar nominate card.
   The standard-page (About) sidebar KEEPS its 300x600 on mobile: that rail
   now carries the permanent house banners and the client wants both visible
   (2 Jul 2026). Only the sidebar nominate card stays hidden there (About
   has its full-width Nominate CTA band instead). */

@media (max-width: 899px) {
	.nge-rail .nge-ad--tall,
	.nge-rail .nge-nominate-card,
	.nge-standard-page__sidebar .nge-nominate-card {
		display: none;
	}

	/* Rail Frame 18: the two 300x250 slots sit 16px apart on mobile */
	.nge-rail {
		gap: 16px;
	}

	/* The stacked mobile ad box is screen-width-bound, not the 350px desktop rail,
	   so trim the 24px frame to 8px: a 300px creative then fits down to a ~360px
	   phone (box ~328px - 16 padding - 2 border = 310). At 24px it left only ~278. */
	.nge-ad {
		padding: 8px;
	}

	/* Story/Legal use a 32px mobile content gutter, so their stacked ad box is
	   only ~296px at 360px and a fixed 300px GAM creative clips. Break those
	   slots out to a 16px viewport gutter (restaurant already sits at 16px), so
	   a 300px ad fits down to ~334px. -16px each side widens the box by 32px
	   without overflow. */
	.nge-story .nge-ad,
	.nge-legal-page .nge-ad {
		margin-left: -16px;
		margin-right: -16px;
	}

	/* About (standard-page) slots stay on the 32px content gutter - no -16px
	   breakout - because their frameless house banners scale with the box
	   (see the base .nge-standard-page .nge-ad rules). Once the sidebar
	   stacks under the content (<900px) the column is the full content
	   width, so cap the banner at its 350px design width and centre it -
	   otherwise a 700-800px-wide tablet column blows the creative up into
	   a screen-filling tower. Phones (<=414px) are unaffected (column is
	   already narrower than the cap). */
	.nge-standard-page__sidebar .nge-ad {
		width: 100%;
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Newsletter (Figma: image, 16px gap, then content with no top padding).
	   The content's 32px top padding was forcing a 32px image-to-heading gap. */
	.nge-newsletter {
		gap: 16px;
	}

	.nge-newsletter .nge-newsletter__content {
		padding: 0 32px 32px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.nge-story-card,
	.nge-story-card:hover,
	.nge-nominate-card,
	.nge-nominate-card:hover,
	.nge-gem-card .nge-gem-card__media img,
	.nge-gem-card:hover .nge-gem-card__media img {
		transform: none;
		transition: none;
		box-shadow: none;
	}
}

/* ── Region hub archive (taxonomy-region.php) ─────────────────────────────────
   Renders the region's restaurants as the NG dark gem-card grid, replacing the
   theme's default archive styling (black titles, reset-pink links). Heading
   rules are double-class namespaced (.nge-region .nge-region__title = (0,2,0))
   so they beat the Elementor Kit's `.elementor-kit-N h1 {color:#000}` (0,1,1). */
.nge-region {
	background: var(--ng-color-surface, #1A1714);
	color: #D6D6D6;
}
.nge-region .nge-region__inner {
	max-width: 1376px;
	margin: 0 auto;
	padding: 48px 16px;
}
.nge-region .nge-region__head {
	text-align: center;
	margin-bottom: 32px;
}
.nge-region .nge-region__title {
	color: #FFFFFF;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 8px;
}
.nge-region .nge-region__intro {
	color: #D6D6D6;
	font-size: 16px;
	margin: 0;
}
.nge-region .nge-region__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.nge-region .nge-region__empty {
	color: #D6D6D6;
	text-align: center;
	padding: 32px 0;
}
.nge-region .pagination,
.nge-region .nav-links {
	margin-top: 32px;
	text-align: center;
}
.nge-region .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0 8px;
	color: #FFFFFF;
	text-decoration: none;
}
.nge-region .page-numbers.current {
	color: #E7B040;
}
@media (min-width: 600px) {
	.nge-region .nge-region__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.nge-region .nge-region__inner { padding: 64px 32px; }
	.nge-region .nge-region__head { text-align: left; }
	.nge-region .nge-region__title { font-size: 40px; }
	.nge-region .nge-region__grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
}

/* ── Site-wide content gutter ──────────────────────────────────────────────
   Every page-content wrapper aligns to the 1376 content grid with ONE consistent
   32px side gutter at EVERY breakpoint, matching the bands. This replaces the
   per-wrapper `max-width: 1376/1440 + ad-hoc 16px padding that a desktop rule
   zeroed`, which left the content flush across the 1024-1366 laptop band
   (verify-done §2.17, the centred-container gutter trap). The restaurant detail
   keeps its narrower 886px reading column on purpose and is not included. */
.nge-standard-page__inner,
.nge-legal-page__inner,
.nge-story__inner,
.nge-stories__inner,
.nge-band__inner,
.nge-region__inner,
.nge-index__inner {
	box-sizing: border-box;
	width: min(100% - 64px, 1376px) !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* The .nge-band component (e.g. "Featured in this story") carries its own 16px
   side padding which stacked on the inner gutter above (32 + 16 = 48). Zero its
   side padding so the inner provides the single, consistent gutter; the band
   background stays full-bleed and keeps its vertical padding. */
.nge-band {
	padding-left: 0 !important;
	padding-right: 0 !important;
}