/*
 * NEMRA News Grid + Sidebar — V2 (Figma 571:22909).
 * Divider + eyebrow header, then a 2×2 grid of white blog cards (full-bleed
 * image top, blue category, 20px title, muted description) beside a 280px
 * sidebar of white panels (topic pills, most-read list, newsletter).
 */

.nemra-news-grid-sidebar {
	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);
	/* Grid, not flex: the section header spans both columns so the grid's
	 * first card and the sidebar's topic filters start on the same line
	 * (comp 797:22973 puts Blogs and SIDEBAR at the same y). */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	column-gap: 24px;
	row-gap: 32px;
	align-items: start;
}

.nemra-news-grid-sidebar--no-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

.nemra-news-grid-sidebar__section-header {
	grid-column: 1 / -1;
	padding-top: 24px;
	border-top: 1px solid rgba(23, 23, 26, 0.16);
}

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

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

.nemra-news-grid-sidebar__section-heading {
	margin: 24px 0 0;
	max-width: 814px;
	/* H2 (comp 797:23111) — Poppins Medium, not the serif. */
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 48px;
	line-height: 1.2;
	letter-spacing: -1.5px;
	font-weight: 500;
	color: var(--nemra-dark, #17171a);
}

/* 3-up variant (single-article "More from" section, no sidebar). The comp's
 * cards end where their content ends — ragged bottoms, not a stretched row. */
.nemra-news-grid-sidebar--cols-3 .nemra-news-grid-sidebar__grid {
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}

/* Mobile "Filter by" dropdown (mobile comp 797:22700) — the shared
 * nemra-dropdown component carries the pill + panel styling; this wrapper
 * only places it in the grid and gates it to mobile (desktop filters via
 * the sidebar's topic pills, so it only shows below 992px). */
.nemra-news-grid-sidebar__filter {
	display: none;
	grid-column: 1 / -1;
}

.nemra-news-grid-sidebar__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nemra-news-grid-sidebar__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* Blog card — white, image full-bleed top, text inset 25px */
.nemra-news-grid-sidebar__card {
	display: flex;
	flex-direction: column;
	gap: 37px;
	padding: 0 25px 25px;
	background: var(--nemra-light, #fcfdfd);
	border-radius: 5px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.nemra-news-grid-sidebar__card-image {
	height: 305px;
	margin: 0 -25px;
	border-radius: 5px 5px 0 0;
	background-color: #dedede;
	background-size: cover;
	background-position: center;
}

.nemra-news-grid-sidebar__card-body {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.nemra-news-grid-sidebar__card-eyebrow {
	font-size: 12px;
	line-height: 1.5;
	color: var(--nemra-blue, #2173b3);
}

.nemra-news-grid-sidebar__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-grid-sidebar__card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(23, 23, 26, 0.64);
}

.nemra-news-grid-sidebar__empty {
	margin: 0;
	font-size: 14px;
	color: rgba(23, 23, 26, 0.64);
}

/* Sidebar panels */
.nemra-news-grid-sidebar__sidebar {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nemra-news-grid-sidebar__card-panel {
	background: var(--nemra-light, #fcfdfd);
	border-radius: 6px;
	padding: 20px;
}

/* All three panel headings are UI/Label-2 in the comp (797:23006/23025/23036);
 * only the gap below differs per panel. */
.nemra-news-grid-sidebar__panel-heading {
	margin: 0 0 24px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: normal;
	color: rgba(23, 23, 26, 0.64);
}

.nemra-news-grid-sidebar__card-panel--read .nemra-news-grid-sidebar__panel-heading {
	margin-bottom: 5px;
}

.nemra-news-grid-sidebar__card-panel--newsletter .nemra-news-grid-sidebar__panel-heading {
	margin-bottom: 8px;
}

.nemra-news-grid-sidebar__panel-body {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 16px;
	color: rgba(23, 23, 26, 0.64);
}

/* Topic pills */
.nemra-news-grid-sidebar__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nemra-news-grid-sidebar__pill-link {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid rgba(23, 23, 26, 0.12);
	border-radius: 16px;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	line-height: 16px;
	color: var(--nemra-dark, #17171a);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nemra-news-grid-sidebar__pill-link:hover {
	background: rgba(23, 23, 26, 0.06);
}

.nemra-news-grid-sidebar__pill-link.is-active {
	background: var(--nemra-blue, #2173b3);
	border-color: var(--nemra-blue, #2173b3);
	color: #ffffff;
}

/* Most read list */
.nemra-news-grid-sidebar__read-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.nemra-news-grid-sidebar__read-item {
	padding: 12px 0;
	border-top: 1px solid rgba(23, 23, 26, 0.1);
}

.nemra-news-grid-sidebar__read-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.nemra-news-grid-sidebar__read-eyebrow {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--nemra-blue, #2173b3);
}

.nemra-news-grid-sidebar__read-title {
	font-size: 13px;
	line-height: 1.35;
	color: var(--nemra-dark, #17171a);
}

/* Newsletter */
.nemra-news-grid-sidebar__newsletter {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nemra-news-grid-sidebar__newsletter-input {
	width: 100%;
	box-sizing: border-box;
	height: 35px;
	padding: 6px 13px;
	border: 1px solid #eaeaea;
	border-radius: 4px;
	background: #f4f4f4;
	font-family: inherit;
	font-size: 12px;
	line-height: 16px;
	color: var(--nemra-dark, #17171a);
}

.nemra-news-grid-sidebar__newsletter-input::placeholder {
	color: var(--nemra-dark, #17171a);
	opacity: 1;
}

.nemra-news-grid-sidebar__newsletter-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	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-grid-sidebar__newsletter-cta:hover,
.nemra-news-grid-sidebar__newsletter-cta:focus-visible {
	background-color: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: #ffffff;
}

@media (max-width: 1199px) {
	.nemra-news-grid-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.nemra-news-grid-sidebar__sidebar {
		width: 100%;
	}
}

@media (max-width: 991px) {
	/* The mobile comp keeps only the newsletter panel: the topic pills are
	 * replaced by the "Filter by" dropdown above the cards, and Most Read
	 * doesn't exist on mobile (797:22695 goes cards → Stay Updated). */
	.nemra-news-grid-sidebar__filter {
		display: block;
	}

	.nemra-news-grid-sidebar__card-panel--topics,
	.nemra-news-grid-sidebar__card-panel--read {
		display: none;
	}
}

@media (max-width: 767px) {
	.nemra-news-grid-sidebar__grid,
	.nemra-news-grid-sidebar--cols-3 .nemra-news-grid-sidebar__grid {
		grid-template-columns: 1fr;
	}

	.nemra-news-grid-sidebar__section-heading { font-size: 32px; letter-spacing: -1px; }

	/* Mobile comp blog cards (797:22705): 200px landscape image band. */
	.nemra-news-grid-sidebar__card-image {
		height: 200px;
	}
}

/* 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 blog cards 797:22705: titles hug 2x24 = Body/Large
 * mobile 16/1.5; category eyebrows hug 15px lines (797:22708) = Body/Small
 * mobile 10/1.5; the newsletter CTA is UI/Button-1 (797:22734). */
@media (max-width: 991px) {
	.nemra-news-grid-sidebar .nemra-news-grid-sidebar__card-title {
		font-size: var(--nemra-t-b1-size, 20px);
		line-height: var(--nemra-t-b1-lh, 1.5);
	}

	.nemra-news-grid-sidebar .nemra-news-grid-sidebar__card-eyebrow {
		font-size: var(--nemra-t-b3-size, 12px);
		line-height: 1.5;
	}

	.nemra-news-grid-sidebar .nemra-news-grid-sidebar__newsletter-cta {
		font-size: var(--nemra-t-btn-size, 14px);
		line-height: var(--nemra-t-btn-lh, 20px);
	}

}