/*
 * 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
 *   .nge-restaurant-inline  light inline card ([restaurant] shortcode in bodies)
 *
 * 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;
}

/* Story house banners (client, 9 Jul 2026): story-rail-250-a and
   story-rail-600 carry house creatives, so they drop the box chrome the
   same way. story-rail-250-b is the live GAM slot and keeps the framed
   box - do not add it here. The aspect-ratios are the creatives' GAM
   sizes (300x250 / 300x600); they reserve the space before the lazy
   hydrate, replacing the fixed 250/600 reservation. Remove this block
   (and its mobile sibling below) to restore the framed boxes. */
.nge-story .nge-ad[data-nge-ad-slot="story-rail-250-a"],
.nge-story .nge-ad[data-nge-ad-slot="story-rail-600"] {
	background: none;
	border: 0;
	border-radius: 16px;
	padding: 0;
	min-height: 0;
}

.nge-story .nge-ad[data-nge-ad-slot="story-rail-250-a"] {
	aspect-ratio: 300 / 250;
}

.nge-story .nge-ad[data-nge-ad-slot="story-rail-600"] {
	aspect-ratio: 300 / 600;
}

.nge-story .nge-ad[data-nge-ad-slot="story-rail-250-a"] .nge-ad__creative,
.nge-story .nge-ad[data-nge-ad-slot="story-rail-600"] .nge-ad__creative,
.nge-story .nge-ad[data-nge-ad-slot="story-rail-250-a"] .nge-ad__creative a,
.nge-story .nge-ad[data-nge-ad-slot="story-rail-600"] .nge-ad__creative a {
	width: 100%;
}

.nge-story .nge-ad[data-nge-ad-slot="story-rail-250-a"] .nge-ad__creative img,
.nge-story .nge-ad[data-nge-ad-slot="story-rail-600"] .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;
	}

	/* The story house-banner slots (base rules above) stay on the 32px
	   content gutter too: the -16px breakout above exists for fixed 300px
	   GAM creatives, but these scale with the box, so the auto margins
	   override it and apply the same 350px cap, centred. The 600 tower is
	   display:none at this width anyway. */
	.nge-story .nge-ad[data-nge-ad-slot="story-rail-250-a"],
	.nge-story .nge-ad[data-nge-ad-slot="story-rail-600"] {
		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;
}

/* ── Inline restaurant card ([restaurant] shortcode in article bodies) ── */

.nge-restaurant-inline {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
	padding: 16px;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	background: #FFFFFF;
	text-decoration: none !important;
	color: #1A1A1A;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.nge-restaurant-inline:hover,
.nge-restaurant-inline:focus-visible {
	border-color: #E7B040;
	box-shadow: 0 4px 16px rgba(10, 10, 10, 0.08);
}

.nge-restaurant-inline .nge-restaurant-inline__media {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: 999px;
	overflow: hidden;
	background: #F3F4F6;
}

.nge-restaurant-inline .nge-restaurant-inline__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.nge-restaurant-inline .nge-restaurant-inline__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nge-restaurant-inline .nge-restaurant-inline__name {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: #0A0A0A;
}

.nge-restaurant-inline .nge-restaurant-inline__tagline {
	font-size: 14px;
	line-height: 1.5;
	color: #4A5565;
}

.nge-restaurant-inline .nge-restaurant-inline__location {
	font-size: 13px;
	color: #4A5565;
}

.nge-restaurant-inline .nge-restaurant-inline__cta {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #C4A45D;
}

@media (max-width: 400px) {
	.nge-restaurant-inline .nge-restaurant-inline__media {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}
}