/*
 * Story detail page.
 * Figma: design-refs/figma/stories-detail/ (node 2080:4823).
 * Content 1025 + 51 gap + rail 300 ≈ 1376. Hero r:16 inside content col.
 */

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

.nge-story .nge-story__inner {
	max-width: 1376px;
	margin: 0 auto;
	padding: 32px 16px 0;
}

.nge-story .nge-story__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nge-story .nge-story__main {
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

/* Mobile frame (2143:5523): full-bleed 372x247 band, square corners.
   Desktop restores the rounded in-column hero. */
.nge-story .nge-story__hero {
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 372 / 247;
	background: #F3F4F6;
	margin: 0 -16px;
}

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

.nge-story .nge-story__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nge-story .nge-story__title {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33; /* mobile frame 42.656/32 */
	color: #1A1A1A;
}

.nge-story .nge-story__dek {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 700; /* mobile frame: bold standfirst */
	font-size: 18px;
	line-height: 1.66;
	color: #1A1A1A;
	opacity: .9;
}

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

.nge-story .nge-story__body p {
	margin: 0 0 1.5em;
}

.nge-story .nge-story__body p:last-child {
	margin-bottom: 0;
}

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

.nge-story .nge-story__body a:hover {
	color: #E7B040;
}

.nge-story .nge-story__body h2,
.nge-story .nge-story__body h3 {
	margin: 1.5em 0 .5em;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.33;
	color: #0A0A0A;
}

.nge-story .nge-story__body img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.nge-story .nge-story__newsletter {
	padding: 32px 0 0;
}

/* Mobile-only structure (frame 2143:5523): full-bleed dark newsletter,
   no 300x600 ad tower. */
@media (max-width: 899px) {
	/* Frame: content column groups at gap 24 (vs the flat 26 base). */
	.nge-story .nge-story__main {
		gap: 24px;
	}

	/* Both bands standardised to palette white in components.css (JP 2026-06-15,
	   was #D6D6D6 - off-palette). This override is kept as belt-and-braces. */
	.nge-story .nge-band__title {
		color: #FFFFFF;
	}

	.nge-story .nge-story__newsletter {
		/* was margin:0 -16px (pulled the band out for the old 16px inner gutter);
		   the inner now floats at 32px, so 0 keeps the band on the same gutter. */
		margin: 0;
	}

	.nge-story .nge-story__newsletter .nge-newsletter {
		/* Rounded to match the sibling floating bands (home subscribe, stories
		   listing, nominate). Was 0 back when the band was pulled outward; now it
		   floats on the 32px gutter, so a square card read as the odd one out. */
		border-radius: 16px;
	}

	.nge-story .nge-story__newsletter .nge-newsletter__media {
		aspect-ratio: 1 / 1;
	}

	.nge-story .nge-story__newsletter .nge-newsletter__media::before,
	.nge-story .nge-story__newsletter .nge-newsletter__media::after {
		display: none;
	}

	.nge-story .nge-ad--tall {
		display: none;
	}
}

@media (min-width: 900px) {
	.nge-story .nge-story__inner {
		padding: 64px 0 0;
	}

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

	/* R2-17 review: collapse the reserved rail column to full width when the rail
	   has no rendered ad (all slots collapsed, no advertising configured). */
	.nge-story .nge-story__layout:not(:has(.nge-rail > *)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.nge-story .nge-story__layout:not(:has(.nge-rail > *)) .nge-rail {
		display: none;
	}

	.nge-story .nge-story__hero {
		border-radius: 16px;
		aspect-ratio: 1025 / 568;
		margin: 0;
	}

	.nge-story .nge-story__title {
		font-size: 60px;
		line-height: 1.12;
		color: #0A0A0A;
	}

	.nge-story .nge-story__dek {
		font-weight: 400;
		font-size: 24px;
		line-height: 1.33;
		color: #4A5565;
		opacity: 1;
	}

	.nge-story .nge-story__newsletter {
		padding: 56px 0;  /* was 120px: match the home + listing gap reduction */
	}
}