/*
 * Nominate CTA - the dark band on editorial pages.
 * Figma ref: 2310:7686 / Frame 13 (1376×644 card on a #FBFBFB page)
 *
 * Mobile-first, 900px breakpoint. Card is 16px radius. Content on the left,
 * decorative image on the right with bottom + left gradients fading into
 * the dark card background.
 *
 * SPECIFICITY NOTE: heading + button rules nested under `.nge-nominate-cta`
 * (0,2,0) to win against Elementor Default Kit `.elementor-kit-N h2`
 * (0,1,1) which would otherwise paint everything black + Roboto.
 */

.nge-nominate-cta {
	width: 100%;
	padding: 20px 32px;            /* R2-12 compact vertical kept; sides back to 32px so
	                                  the in-page card lines up with the footer subscribe
	                                  band's 32px viewport gutter (client, 2 Jul 2026) */
	background: #FBFBFB;
}

/* R2-14: the black lives on the CARD now (see .elementor-location-footer
   .nge-nominate-cta__card), so the home SECTION is transparent and the dark
   body shows through behind the black card. Other pages keep the #FBFBFB band. */
body.home .nge-nominate-cta {
	background: transparent;
}

.nge-nominate-cta__card {
	position: relative;
	width: 100%;
	max-width: 1376px;
	margin: 0 auto;
	background: var(--ng-color-surface, #1A1714); /* FB23: premium dark surface */
	border-radius: 16px;
	overflow: hidden;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
}

/* FB24: when no image is set, drop the reserved media half + fixed aspect-ratio
   so the band is a content-only card (no empty dark panel or seam). */
.nge-nominate-cta--no-media .nge-nominate-cta__media {
	display: none;
}
.nge-nominate-cta--no-media .nge-nominate-cta__card {
	aspect-ratio: auto;
	display: block;
}

/* ── Decorative image area ── */

.nge-nominate-cta__media {
	position: relative;
	width: 100%;
	aspect-ratio: 372 / 220;
	overflow: hidden;
	background: #1A1A1A;
}

/* Fill the media box. Plain height:100% lost to Elementor's `.elementor img
   { height:auto }` (0,1,1) and a square source then rendered at its intrinsic
   width-driven height, leaving a black gap once the card grew taller than the
   image. The two-class selector (0,2,0) wins, and absolute inset:0 pins it to
   the full media height. */
.nge-nominate-cta .nge-nominate-cta__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.nge-nominate-cta__gradient-bottom {
	position: absolute;
	inset: auto 0 0 0;
	height: 32%; /* soft fade that blends the banner into the dark content (was a
	                heavy 50% that darkened the stacked photo); desktop sets 30% */
	background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.nge-nominate-cta__gradient-left {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;  /* mobile: no left fade - gradient applies to bottom only */
	background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

/* ── Content area ── */

.nge-nominate-cta__content {
	position: relative;
	padding: 28px 32px;            /* a touch more room on the black card */
	display: flex;
	flex-direction: column;
	gap: 12px;                     /* R2-12: compact (was 16px) */
	z-index: 2;
}

.nge-nominate-cta .nge-nominate-cta__heading {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 22px;               /* R2-12: compact (was 32px), matches subscribe compact */
	line-height: 1.3;
	color: #FFFFFF;
}

.nge-nominate-cta__body {
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;       /* mobile frame: Open Sans 400 16/1.6 (matches desktop) */
	line-height: 1.6;
	color: #FFFFFF;
	opacity: .9;
}

.nge-nominate-cta__body p {
	margin: 0 0 .8em;
}

.nge-nominate-cta__body p:last-child {
	margin-bottom: 0;
}

.nge-nominate-cta__button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	/* Reads as an actual button: a faint 25% border on the dark band looked like
	   plain text ("missing button"). Subtle fill + a clearer border give it the
	   button affordance without leaving the ghost-pill design. */
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: #FFFFFF;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.nge-nominate-cta__button svg {
	width: 24px;  /* Figma: ArrowUpRight 24×24 in the Ghost link */
	height: 24px;
	color: #E7B040;
}

.nge-nominate-cta .nge-nominate-cta__button:hover,
.nge-nominate-cta .nge-nominate-cta__button:focus-visible {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .55);
	color: #FFFFFF; /* re-assert: the Elementor Kit's a:hover (#333366) otherwise repaints the label */
	transform: translateY(-1px);
}

.nge-nominate-cta__button:focus-visible {
	outline: 2px solid #E7B040;
	outline-offset: 3px;
}

/* Mobile frame (2310:9444): the "Submit Your Nomination" link is a BARE
   gold ghost - gold text, no pill border/background/radius, pad 4/12, gap 8.
   Desktop (audited separately) keeps the bordered pill for now; revisit the
   desktop CTA chrome when the live pass confirms the desktop frame. */
@media (max-width: 899px) {
	.nge-nominate-cta__button {
		padding: 4px 12px;
		background: transparent; /* bare gold link on mobile - drop the desktop fill */
		border: 0;
		border-radius: 0;
		color: #E7B040;
	}

	.nge-nominate-cta .nge-nominate-cta__button:hover,
	.nge-nominate-cta .nge-nominate-cta__button:focus-visible {
		background: transparent;
		border: 0;
		color: #E7B040; /* re-assert gold on mobile; the Kit's a:hover would repaint it */
		opacity: .8;
		transform: none;
	}
}

/* ── DESKTOP (≥ 900px) - 2-col layout, image on the right ── */

@media (min-width: 900px) {
	.nge-nominate-cta {
		padding: 24px 32px;        /* R2-12: compact (was 120px) */
	}

	.nge-nominate-cta__card {
		/* No fixed aspect-ratio: below ~1280 the proportional height fell short of
		   the content column, so the button overflowed the card's overflow:hidden
		   and was clipped (invisible). Let the content drive the height; the
		   absolutely-positioned media fills whatever height results. min-height
		   keeps the design proportions when the content is short. */
		min-height: 0;             /* R2-12/13: compact + text-only (no tall media card) */
		flex-direction: row;
		align-items: stretch;
	}

	/* Image takes the right half - content area sits on the left over it via z-index */
	.nge-nominate-cta__media {
		position: absolute;
		inset: 0 0 0 50%;
		width: 50%;
		aspect-ratio: auto;
	}

	/* Both gradients active on desktop: bottom fade + left fade for blend */
	.nge-nominate-cta__gradient-bottom {
		height: 30%;
	}

	.nge-nominate-cta__gradient-left {
		width: 35%;
		inset: 0 auto 0 0;
	}

	.nge-nominate-cta__content {
		position: relative;
		padding: 40px 44px;        /* a touch more room on the black card (was 24/32) */
		max-width: 644px;
		gap: 12px;
		z-index: 2;
	}

	.nge-nominate-cta .nge-nominate-cta__heading {
		font-size: 28px;           /* R2-12: compact (was 60px) */
		line-height: 1.2;
	}

	.nge-nominate-cta__body {
		font-size: 16px;
		line-height: 1.6;
	}

	.nge-nominate-cta__button {
		margin-top: 24px;
	}
}

/* ── Reduce-motion ── */

@media (prefers-reduced-motion: reduce) {
	.nge-nominate-cta__button,
	.nge-nominate-cta__button:hover,
	.nge-nominate-cta__button:focus-visible {
		transform: none;
	}
}

/* ── NG logo above the heading (Figma 2310:7200) ── */

.nge-nominate-cta__logo {
	display: block;
	margin-bottom: 24px;
}

.nge-nominate-cta__logo img {
	display: block;
	width: 158px;
	height: auto;
}

/* ── Footer placement (FB22 subscribe + FB24 nominate) ──
   The global footer stacks the nominate band + compact subscribe band above the
   partner / social / copyright rows. Without margins they sit flush against each
   other and the footer content. Scope to the footer location so the in-content
   bands (home, about) keep their own section spacing. */
/* Align the footer bands to the page content grid (a 32px viewport gutter, capped
   at 1376). The footer's own container is inset 10px, so a plain max-width:1376
   centred them ~10px off and lost the gutter below ~1408; `100% - 44px` keeps a
   22px gutter inside that 10px container = a 32px gutter from the viewport, which
   matches the legal/page content edge at all widths. */
.elementor-location-footer .nge-nominate-cta {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 48px;
}

@media (min-width: 900px) {
	.elementor-location-footer .nge-nominate-cta {
		margin-bottom: 0;
		padding-bottom: 30px;
	}
}

.elementor-location-footer .nge-nominate-cta__card {
	/* The CTA block is the black surface (was the section); the photo's gradient
	   already fades to #000 so it blends seamlessly into the black card. */
	background: #000000;
	width: min(100% - 44px, 1376px); /* card edge sits a consistent ~32px from the screen */
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.elementor-location-footer .nge-newsletter--compact {
	width: min(100% - 44px, 1376px);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 56px;
}