/*
 * Standard Page (About Us-style content pages)
 * Figma refs:
 *   - Desktop 2310:7200 - 1652 wide, white #FBFBFB
 *   - Mobile  2310:9447 - 372 wide, stacked
 *
 * Layout:
 *   .nge-standard-page                 // article wrapper
 *     .nge-standard-page__hero         // full-bleed image
 *     .nge-standard-page__inner        // centred 1376px max, 140-ish gutters on desktop
 *       .nge-standard-page__main       // 1023px column desktop / full mobile
 *         .nge-standard-page__head     // h1 + lead
 *         .nge-standard-page__body     // KSES'd WYSIWYG output
 *         .nge-standard-page__content-image  // optional figure
 *       .nge-standard-page__sidebar    // 300px desktop / stacks below mobile
 *         .nge-standard-page__nominate // anchor with image bg + dark overlay + gold arrow
 *         .nge-standard-page__ad x2    // grey placeholder slots
 *
 * SPECIFICITY NOTE: every heading and paragraph rule is namespaced under
 * `.nge-standard-page` (specificity 0,2,0) so it beats Elementor's Default
 * Kit `.elementor-kit-N h1..h6 { color:#000; font-family:Roboto }` at (0,1,1).
 * Don't strip the prefix or the Kit will repaint everything.
 *
 * Brand colours:
 *   #FBFBFB  page bg (set on parent container in Elementor)
 *   #0A0A0A  h1 colour (per Figma fill_FCRVPS)
 *   #4A5565  lead H3 colour (Figma fill_47B0IL - slate-grey, off-brand)
 *   #1A1A1A  body copy (Figma fill_J8YFQF - matches brand ink)
 *   #E5E7EB  card border
 *   #F3F4F6  ad placeholder bg
 *   #6A7282  ad eyebrow
 *   #99A1AF  ad label
 *   #E7B040  gold accent (nominate arrow chip)
 *   #FFFFFF  nominate card text
 *   #000000  nominate card base bg under image overlay
 */

.nge-standard-page {
	display: block;
	width: 100%;
	background: #FBFBFB;     /* matches Figma fill_HVWIAT - self-contained band */
	color: #1A1A1A;
}

/* ── Hero image (full-bleed) ── */

.nge-standard-page .nge-standard-page__hero {
	width: 100%;
	aspect-ratio: 372 / 243;
	overflow: hidden;
	background: #1A1A1A;
}

.nge-standard-page .nge-standard-page__hero img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* ── Inner container ── */

.nge-standard-page .nge-standard-page__inner {
	max-width: 1376px;
	margin: 0 auto;
	padding: 32px 16px 80px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ── Main column ── */

.nge-standard-page .nge-standard-page__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.nge-standard-page .nge-standard-page__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nge-standard-page .nge-standard-page__title {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;       /* H2 mobile per Figma */
	line-height: 1.33;     /* 42.656/32 per frame 2310:9444 */
	color: #1A1A1A;
}

.nge-standard-page .nge-standard-page__lead {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;       /* FB13: flatten the lead to body (client override of the lead/body hierarchy) */
	font-size: 16px;
	line-height: 1.6;
	color: #364153;         /* matched to body */
}

.nge-standard-page .nge-standard-page__body {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #364153;         /* mobile body colour per Figma fill_HV0EZ4 */
}

.nge-standard-page .nge-standard-page__body p {
	margin: 0 0 1.25em;
}

.nge-standard-page .nge-standard-page__body p:last-child {
	margin-bottom: 0;
}

.nge-standard-page .nge-standard-page__body a {
	color: #E7B040;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nge-standard-page .nge-standard-page__body a:hover {
	color: #C4A45D;
}

.nge-standard-page .nge-standard-page__body ul,
.nge-standard-page .nge-standard-page__body ol {
	padding-left: 1.25em;
	margin: 0 0 1.25em;
}

.nge-standard-page .nge-standard-page__body li + li {
	margin-top: .25em;
}

.nge-standard-page .nge-standard-page__body strong { font-weight: 700; }
.nge-standard-page .nge-standard-page__body em     { font-style: italic; }

/* ── Optional content image below body ── */

.nge-standard-page .nge-standard-page__content-image {
	margin: 0;
	width: 100%;
	aspect-ratio: 340 / 235;        /* matches mobile InnerSlider2 Figma */
	overflow: hidden;
	border-radius: 10px;
	background: #F3F4F6;
}

.nge-standard-page .nge-standard-page__content-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* ── Sidebar (stacked under main on mobile) ── */

.nge-standard-page .nge-standard-page__sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Nominate promo card */

/* The current mobile frame (2310:9444) drops the sidebar nominate card -
   the page's full-width Nominate CTA band carries that job on phones. */
@media (max-width: 899px) {
	.nge-standard-page .nge-standard-page__nominate {
		display: none;
	}

	/* Frame: the lead/description block carries 90% opacity. */
	.nge-standard-page .nge-standard-page__lead {
		opacity: .9;
	}
}

.nge-standard-page .nge-standard-page__nominate {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid #E5E7EB;
	background: var(--ng-color-surface, #1A1714); /* FB23: premium dark surface, not pure black */
	color: #FFFFFF;
	text-decoration: none;
	min-height: 250px;
	padding: 20px 24px 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.nge-standard-page .nge-standard-page__nominate:hover,
.nge-standard-page .nge-standard-page__nominate:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .25);
	outline: none;
}

.nge-standard-page .nge-standard-page__nominate-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.nge-standard-page .nge-standard-page__nominate-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 1;
}

.nge-standard-page .nge-standard-page__nominate-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	min-height: calc(250px - 44px); /* fill padded box height */
}

.nge-standard-page .nge-standard-page__nominate-eyebrow {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 2;
	color: #FFFFFF;
}

.nge-standard-page .nge-standard-page__nominate-title {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.23;
	color: #FFFFFF;
}

.nge-standard-page .nge-standard-page__nominate-arrow {
	margin-top: auto;
	align-self: flex-end;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: #E7B040;
	color: #000000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nge-standard-page .nge-standard-page__nominate-arrow svg {
	width: 18px;
	height: 18px;
}

/* Ad placeholders */

.nge-standard-page .nge-standard-page__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;
}

.nge-standard-page .nge-standard-page__ad--tall {
	min-height: 350px;
}

.nge-standard-page .nge-standard-page__ad-eyebrow {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.33;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: #6A7282;
}

.nge-standard-page .nge-standard-page__ad-label {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.43;
	color: #99A1AF;
}

/* ── DESKTOP (≥ 900px) - 2-col grid + larger type ── */

@media (min-width: 900px) {
	.nge-standard-page .nge-standard-page__hero {
		aspect-ratio: 1652 / 681;
	}

	.nge-standard-page .nge-standard-page__inner {
		padding: 64px 0 120px;       /* margin from page edge comes from max-width centering */
		gap: 64px;
	}

	/* Figma layout: main + 51px gap + 350px ad sidebar (300 creative + 24 padding + 1px border each side), capped at 1376 */
	.nge-standard-page .nge-standard-page__inner.has-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 350px;
		gap: 64px 51px;
		align-items: start;
	}

	.nge-standard-page .nge-standard-page__main {
		gap: 32px;
	}

	.nge-standard-page .nge-standard-page__head {
		gap: 26px;
	}

	.nge-standard-page .nge-standard-page__title {
		font-size: 60px;
		line-height: 1.12;            /* 67.2/60 */
		color: #0A0A0A;
	}

	.nge-standard-page .nge-standard-page__lead {
		font-family: Open Sans, system-ui, sans-serif;
		font-weight: 400;             /* FB13: flatten the lead to body at desktop too (client override of the lead/body hierarchy) */
		font-size: 16px;
		line-height: 1.6;
		color: #364153;               /* matched to body */
	}

	.nge-standard-page .nge-standard-page__body {
		color: #1A1A1A;
	}

	/* Content image gets a 1023/504 aspect ratio at desktop per Figma 2310:7766 */
	.nge-standard-page .nge-standard-page__content-image {
		aspect-ratio: 1023 / 504;
		border-radius: 16px;
	}

	.nge-standard-page .nge-standard-page__sidebar {
		gap: 30px;
		position: sticky;
		top: 32px;
	}

	/* Desktop ad slot 2 is twice the height of slot 1 per Figma */
	.nge-standard-page .nge-standard-page__ad--tall {
		min-height: 600px;
	}
}

/* ── Reduce-motion: kill hover lifts ── */

@media (prefers-reduced-motion: reduce) {
	.nge-standard-page .nge-standard-page__nominate,
	.nge-standard-page .nge-standard-page__nominate:hover,
	.nge-standard-page .nge-standard-page__nominate:focus-visible {
		transform: none;
		box-shadow: none;
	}
}