/*
 * Restaurant detail page.
 * Figma: design-refs/figma/restaurant-detail/ (node 2070:8026).
 *
 * Distinct from the other templates: WHITE page bg and a narrower centred
 * container - left col 555 + 31 gap + rail 350 = 936px. The title block
 * shares the container's left edge.
 */

.nge-restaurant {
	display: block;
	width: 100%;
	background: #FFFFFF;
	color: #1A1A1A;
}

.nge-restaurant .nge-restaurant__inner {
	max-width: 936px;          /* 555 reading column + 31 gap + 350 ad rail (was 886 with a 300 rail) */
	margin: 0 auto;
	padding: 48px 16px 96px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* R3: "Don't leave without trying" signature-dish callout, shown below the
   write-up (client-required; captured from the docx into signature_dish).
   Gold-accented warm card so it reads as an editorial highlight, not an ad.
   Two-class selectors (0,2,0) outrank the Elementor Kit's `.elementor-kit-N h2`
   (0,1,1) so the heading keeps its type. */
/* "Don't leave without trying" is plain write-up text (the gold callout read
   as an error message). Inside the body it inherits the paragraph styling;
   this rule covers the no-write-up standalone fallback. */
.nge-restaurant .nge-restaurant__signature {
	margin: 4px 0 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #1A1A1A;
}

/* R2-06: nomination disclaimer below the write-up (italic, muted, ruled off). */
.nge-restaurant .nge-restaurant__disclaimer {
	margin: 4px 0 0;
	padding-top: 16px;
	border-top: 1px solid #E6E6E6;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #4D4D4D;
}

.nge-restaurant .nge-restaurant__disclaimer em {
	font-style: italic;
}

/* ── Title block ──
   Mobile frame (2143:5261): centred, bold 18px tagline, 14px location.
   Desktop restores the left-aligned 60/24/16 stack. */

.nge-restaurant .nge-restaurant__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}

.nge-restaurant .nge-restaurant__title {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33;
	color: #1A1A1A;
}

.nge-restaurant .nge-restaurant__tagline {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.66;
	color: #4D4D4D;
	opacity: .9;
}

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

/* Region-hub link wearing the location text's clothes. Explicit colour on
   every state or the Hello reset paints it pink. */
.nge-restaurant .nge-restaurant__location-link,
.nge-restaurant .nge-restaurant__location-link:visited {
	color: inherit;
	text-decoration: none;
}
.nge-restaurant .nge-restaurant__location-link:hover,
.nge-restaurant .nge-restaurant__location-link:focus {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Meta row ──
   Mobile frame: a centred stack - links row, socials row, gold share
   button. Desktop flattens back to one inline row. */

.nge-restaurant .nge-restaurant__meta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.nge-restaurant .nge-restaurant__meta-links {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nge-restaurant .nge-restaurant__meta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border: 0;
	background: transparent;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.33;
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	transition: color .2s ease;
}

.nge-restaurant .nge-restaurant__meta-link:hover,
.nge-restaurant .nge-restaurant__meta-link:focus,
.nge-restaurant .nge-restaurant__meta-link:focus-visible {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 0;
	color: #C4A45D;
}

.nge-restaurant .nge-restaurant__meta-link svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* FB9: vertical divider between meta-row groups (links | socials | share).
   Hidden by default; a thin 1px x 24px rule at >=900px (desktop only). */
.nge-restaurant .nge-restaurant__meta-divider {
	display: none;
}
@media (min-width: 900px) {
	.nge-restaurant .nge-restaurant__meta-divider {
		display: inline-block;
		width: 1px;
		height: 24px;
		background: #D6D6D6;
		flex: 0 0 auto;
	}
}

.nge-restaurant .nge-restaurant__socials {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Share: mobile = the frame's 224x48 gold button ("Share this Gem"),
   no icon; desktop = small inline ghost link ("Share"). */

/* Mobile frame (raw 2143:5261): transparent button, 2px #000 outline, r8,
   black "Share this Gem" label - NOT a gold fill (matches the story share
   treatment). Desktop block below reverts it to the inline ghost link. */
.nge-restaurant .nge-restaurant__share {
	width: 224px;
	height: 48px;
	justify-content: center;
	background: transparent;
	border: 2px solid #000000;
	border-radius: 8px;
	color: #000000;
}

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

.nge-restaurant .nge-restaurant__share-ic,
.nge-restaurant .nge-restaurant__share-label--short {
	display: none;
}

@media (min-width: 900px) {
	.nge-restaurant .nge-restaurant__share {
		width: auto;
		height: auto;
		justify-content: flex-start;
		background: transparent;
		border: 0; /* drop the mobile 2px outline for the desktop inline ghost link */
		border-radius: 0;
		color: #000000;
	}

	.nge-restaurant .nge-restaurant__share:hover,
	.nge-restaurant .nge-restaurant__share:focus,
	.nge-restaurant .nge-restaurant__share:focus-visible {
		background: transparent;
		border: 0;
		color: #C4A45D;
	}

	.nge-restaurant .nge-restaurant__share-ic {
		display: inline-flex;
	}

	.nge-restaurant .nge-restaurant__share-label--short {
		display: inline;
	}

	.nge-restaurant .nge-restaurant__share-label--long {
		display: none;
	}
}

/* ── Two-column layout ── */

.nge-restaurant .nge-restaurant__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nge-restaurant .nge-restaurant__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.nge-restaurant .nge-restaurant__body {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #1A1A1A;
}

.nge-restaurant .nge-restaurant__body p {
	margin: 0 0 1.5em;
}

.nge-restaurant .nge-restaurant__body p:last-child {
	margin-bottom: 0;
}

.nge-restaurant .nge-restaurant__body a {
	color: #C4A45D;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nge-restaurant .nge-restaurant__body a:hover {
	color: #E7B040;
}

.nge-restaurant .nge-restaurant__newsletter {
	padding-top: 24px;
}

/* ── Mobile-only structure (frame 2143:5261) ──
   Order on phones: slider, body, ads (rail), newsletter, related band.
   display:contents flattens __main so its children join the column flex
   alongside the rail; desktop keeps the original DOM untouched. */

@media (max-width: 899px) {
	.nge-restaurant .nge-restaurant__main {
		display: contents;
	}

	/* Head: uniform 10px rhythm between title/tagline/location (frame). */
	.nge-restaurant .nge-restaurant__head {
		gap: 10px;
	}

	.nge-restaurant .nge-restaurant__location {
		margin-top: 0;
	}

	.nge-restaurant .nge-restaurant__layout > .nge-slider-wrap,
	.nge-restaurant .nge-restaurant__main > .nge-slider-wrap {
		order: 1;
	}

	.nge-restaurant .nge-restaurant__body {
		order: 2;
	}

	/* Keep the signature callout with the write-up (right after the body). */
	.nge-restaurant .nge-restaurant__signature {
		order: 2;
	}

	/* Keep the disclaimer with the write-up too. Without an explicit order it
	   defaulted to 0 and rendered ABOVE the gallery on mobile (pre-existing bug,
	   surfaced while adding the signature block); pin it after body + signature. */
	.nge-restaurant .nge-restaurant__disclaimer {
		order: 2;
	}

	.nge-restaurant .nge-restaurant__layout > .nge-rail,
	.nge-restaurant .nge-restaurant__layout > aside {
		order: 3;
	}

	.nge-restaurant .nge-restaurant__newsletter {
		order: 4;
		padding-top: 0;
		/* Float the card on the 32px viewport gutter like every other band
		   (story detail got the same fix earlier; this full-bleed square band
		   was the last odd one out). The content column sits at 16px here, so
		   a 16px inward margin lands the card edge at 32px. */
		margin: 0 16px;
	}

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

	.nge-restaurant .nge-restaurant__newsletter .nge-newsletter__media {
		aspect-ratio: 1 / 1;
	}

	.nge-restaurant .nge-restaurant__newsletter .nge-newsletter__media::after {
		display: none;
	}

	/* The frame shows the two 300x250 slots; the 600 tower is desktop-rail-only */
	.nge-restaurant .nge-ad--tall {
		display: none;
	}
}

@media (min-width: 900px) {
	.nge-restaurant .nge-restaurant__inner {
		padding: 64px 0 96px;
	}

	/* FB22: the compact subscribe band sits in the ~555px content column here, so
	   keep it stacked like mobile - the horizontal compact layout is for the
	   full-width bands (about / stories / legal), and cramps in this column. The
	   inline-era content uses space-between + fills the column height, which leaves
	   a void once stacked; pack it to its natural height at the top instead. */
	.nge-restaurant .nge-restaurant__newsletter .nge-newsletter--compact {
		align-self: flex-start;
	}
	.nge-restaurant .nge-restaurant__newsletter .nge-newsletter--compact .nge-newsletter__content {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 14px;
	}
	.nge-restaurant .nge-restaurant__newsletter .nge-newsletter--compact .nge-newsletter__form {
		justify-content: flex-start;
		width: 100%;
		/* reset the horizontal compact's flex-basis: 420px (it becomes a 420px
		   form HEIGHT once the content stacks into a column). */
		flex: 0 0 auto;
	}

	.nge-restaurant .nge-restaurant__head {
		align-items: flex-start;
		text-align: left;
	}

	.nge-restaurant .nge-restaurant__title {
		font-size: 60px;
		line-height: 1.12;
		color: #000000;
	}

	.nge-restaurant .nge-restaurant__tagline {
		font-weight: 400;
		font-size: 24px;
		line-height: 1.33;
		opacity: 1;
	}

	.nge-restaurant .nge-restaurant__location {
		font-size: 16px;
		line-height: 1.6;
		opacity: 1;
	}

	.nge-restaurant .nge-restaurant__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
	}

	.nge-restaurant .nge-restaurant__meta-links {
		display: contents;
	}

	.nge-restaurant .nge-restaurant__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 350px;
		gap: 64px 31px;
		align-items: start;
	}

	/* R2-17 review: when the rail has no rendered ad (all slots collapsed because
	   no advertising is configured), drop the reserved 300px column and hide the
	   empty aside so the write-up uses the full width. */
	.nge-restaurant .nge-restaurant__layout:not(:has(.nge-rail > *)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.nge-restaurant .nge-restaurant__layout:not(:has(.nge-rail > *)) .nge-rail {
		display: none;
	}
}