/*
 * NEMRA News Featured — V2 "Latest" block on News page (Figma 571:22892).
 * Divider + eyebrow, then a 680px photo stage (navy wash) with a white
 * article panel inset bottom-right.
 */

.nemra-news-featured {
	width: 100%;
	max-width: 1312px;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	color: var(--nemra-dark, #17171a);
}

.nemra-news-featured__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 24px;
	margin-bottom: 32px;
	border-top: 1px solid rgba(23, 23, 26, 0.16);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(23, 23, 26, 0.64);
}

.nemra-news-featured__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nemra-green, #4c7f39);
}

/* Photo stage */
.nemra-news-featured__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 680px;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 5px;
	overflow: hidden;
	background-color: #dedede;
	background-size: cover;
	background-position: center;
}

/* Navy wash + top dark gradient per comp (797:22957: the "Dark Overlay"
 * gradient sits in a 160px strip rotated 180°, so it renders dark-at-top). */
.nemra-news-featured__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 26, 23, 0.64) 0%, rgba(26, 26, 23, 0) 160px), rgba(4, 42, 72, 0.57);
	pointer-events: none;
}

/* White panel — meta + CTA render as siblings of the body, so the panel
 * itself carries the 48px inset. */
.nemra-news-featured__card {
	position: relative;
	width: 628px;
	max-width: 100%;
	background: var(--nemra-light, #fcfdfd);
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 48px;
	box-sizing: border-box;
}

.nemra-news-featured__card-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.nemra-news-featured__card-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(23, 23, 26, 0.64);
}

.nemra-news-featured__card-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nemra-green, #4c7f39);
}

.nemra-news-featured__card-title {
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--nemra-dark, #17171a);
}

.nemra-news-featured__card-text {
	margin: 0;
	max-width: 493px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nemra-dark, #17171a);
}

.nemra-news-featured__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12px;
	color: rgba(23, 23, 26, 0.64);
}

.nemra-news-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 8px 12px;
	border-radius: 5px;
	background: var(--nemra-green, #4c7f39);
	border: 1px solid rgba(252, 253, 253, 0.08);
	color: #ffffff;
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* All buttons hover to the same neutral-dark-88 fill sitewide (designer direction). */
.nemra-news-featured__cta:hover,
.nemra-news-featured__cta:focus-visible {
	background-color: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: #ffffff;
}

.nemra-news-featured__cta-arrow { display: none; }

@media (max-width: 767px) {
	/* News mobile comp 797:22686: the stage collapses to a stacked card —
	 * a 200px photo band on top, full-width white body below. The card is
	 * a child of the stage, so the band is the stage's own top padding and
	 * the opaque card covers the background below it. The comp's mobile
	 * image is clean (no navy wash), so the overlay goes too. */
	.nemra-news-featured__stage {
		display: block;
		min-height: 0;
		padding: 200px 0 0;
	}

	/* The stage's cover-crop computes against the FULL stage box (band +
	 * card), so the visible 200px strip would show only the photo's top
	 * (the ceiling). Repainting the band via ::before with background:
	 * inherit re-runs the cover-crop against the 200px box itself, giving
	 * the comp's centered crop. The comp's mobile image is clean, so the
	 * navy wash the desktop ::before carried is dropped. */
	.nemra-news-featured__stage::before {
		inset: 0 0 auto 0;
		height: 200px;
		background: inherit;
	}

	.nemra-news-featured__card {
		width: 100%;
		border-radius: 0;
		padding: 32px 24px;
		gap: 16px;
	}

	.nemra-news-featured__card-body {
		gap: 16px;
	}
}

/* Mobile mode type - appended at the END of the file so it outranks the
 * rules above at equal specificity (same pattern as events-featured).
 * News mobile comp 797:22691: featured card title hugs 3x24 = Body/Large
 * mobile 16/1.5; the read-story CTA is UI/Button-1 12/20 (797:22694). */
@media (max-width: 991px) {
	.nemra-news-featured .nemra-news-featured__card-title {
		font-size: var(--nemra-t-b1-size, 20px);
		line-height: var(--nemra-t-b1-lh, 1.5);
	}

	.nemra-news-featured .nemra-news-featured__cta {
		font-size: var(--nemra-t-btn-size, 14px);
		line-height: var(--nemra-t-btn-lh, 20px);
	}

}