/**
 * Education Programs widget styles — V2 (node 571:21247).
 *
 * Dark navy section over an audience photo with an 80% navy overlay.
 * Header (eyebrow + serif H2 + green CTA) sits top-left; a grid of icon
 * program cards is right-aligned in two rows (2 cards top, 3 cards bottom).
 * A gold IES ribbon badge anchors the bottom-left corner.
 *
 * Stacks at 991px (grid → 2 cols) and 1-col at 599px.
 */

.nemra-education-programs {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 120px 64px 0;
	box-sizing: border-box;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
}

.nemra-education-programs *,
.nemra-education-programs *::before,
.nemra-education-programs *::after {
	box-sizing: border-box;
}

.nemra-education-programs__inner {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 80px;
	border-radius: 10px;
	isolation: isolate;
}

/* Background photo + navy overlay ------------------------------------ */

.nemra-education-programs__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.nemra-education-programs__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(4, 42, 72, 0.8); /* --nemra-blue-dark @ 80% */
	z-index: 1;
}

.nemra-education-programs__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ------------------------------------------------------------------ *
 * Header (eyebrow, heading, CTA)
 * ------------------------------------------------------------------ */

.nemra-education-programs__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-top: 24px;
	/* Figma divider node 571:21251 uses neutral/dark-16% — effectively invisible
	 * on the navy overlay, matching the comp which shows no top hairline. */
	border-top: 1px solid rgba(23, 23, 26, 0.16);
}

.nemra-education-programs__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-education-programs__eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--nemra-green, #4c7f39);
	flex-shrink: 0;
}

/* Comp 571:22091: the band heading is Poppins Medium (H2), not serif. */
.nemra-education-programs__heading {
	margin: 0;
	max-width: 680px;
	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-light, #fcfdfd);
}

.nemra-education-programs__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	background-color: var(--nemra-green, #4c7f39);
	border: 1px solid rgba(252, 253, 253, 0.08);
	color: var(--nemra-light, #fcfdfd);
	text-decoration: none;
	border-radius: 5px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.nemra-education-programs__cta:hover,
.nemra-education-programs__cta:focus-visible {
	background-color: var( --neutral-dark-88, rgba(23, 23, 26, 0.88) );
	transform: translateY(-1px);
}

.nemra-education-programs__cta:focus-visible {
	outline: 2px solid var(--nemra-light, #fcfdfd);
	outline-offset: 3px;
}

.nemra-education-programs__arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ *
 * Program grid — 3 columns, right-aligned. Top row holds cards 1-2 in
 * the two rightmost cells; bottom row holds cards 3-5 across all cols.
 * Mirrors Figma node 571:21257 (col_top: 2 cards, col_bottom: 3 cards).
 * ------------------------------------------------------------------ */

.nemra-education-programs__grid {
	display: grid;
	/* Capped, not fixed: below ~1150px the 3×244 grid outgrows the card's
	   content box and clips off the left edge (overflow: hidden). */
	grid-template-columns: repeat(3, minmax(0, 244px));
	justify-content: flex-end;
	column-gap: 64px;
	row-gap: 64px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nemra-education-programs__item:nth-child(1) {
	grid-column: 2;
	grid-row: 1;
}

.nemra-education-programs__item:nth-child(2) {
	grid-column: 3;
	grid-row: 1;
}

.nemra-education-programs__item:nth-child(3) {
	grid-column: 1;
	grid-row: 2;
}

.nemra-education-programs__item:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}

.nemra-education-programs__item:nth-child(5) {
	grid-column: 3;
	grid-row: 2;
}

.nemra-education-programs__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	/* Tracks cap at 244px, so this is 244px at full width but shrinks
	   with the track instead of overflowing it. */
	width: 100%;
}

.nemra-education-programs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--nemra-light, #fcfdfd);
	font-size: 32px;
	line-height: 1;
}

.nemra-education-programs__icon svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}
.nemra-education-programs__icon svg.nemra-icon { fill: none; stroke: currentColor; }

.nemra-education-programs__icon i {
	font-size: 32px;
	line-height: 1;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-education-programs__item-title {
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 20px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-education-programs__item-description {
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 12px;
	line-height: 1.5;
	color: rgba(252, 253, 253, 0.76);
}

/* ------------------------------------------------------------------ *
 * IES ribbon badge — bottom-left, gold flag with a notched right edge.
 * ------------------------------------------------------------------ */

.nemra-education-programs__badge {
	position: absolute;
	left: 0;
	/* Comp 797:22148 floats the flag level with the second card row —
	   its bottom edge sits 158px above the card's bottom, not in the corner. */
	bottom: 158px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Comp 797:21302 right-aligns both lines against the notch, with
	   "Supporting SEC & CEC Courses" holding a single line. */
	align-items: flex-end;
	text-align: right;
	gap: 4px;
	width: 251px;
	padding: 11px 55px 11px 16px;
	background-color: #efbf04;
	color: var(--nemra-dark, #17171a);
	clip-path: polygon(0 0, 100% 0, 89% 50%, 100% 100%, 0 100%);
}

.nemra-education-programs__badge-title,
.nemra-education-programs__badge-text {
	white-space: nowrap;
}

.nemra-education-programs__badge-title {
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--nemra-dark, #17171a);
}

.nemra-education-programs__badge-text {
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--nemra-dark, #17171a);
}

/* ------------------------------------------------------------------ *
 * Swipe dots — mobile only. Hidden here; the grid doesn't scroll at
 * desktop widths, so the dots would have nothing to page through.
 * Tuned light because this section sits on a dark photo ground.
 * ------------------------------------------------------------------ */

.nemra-education-programs__dots {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.nemra-education-programs__dot {
	position: relative;
	width: 24px;
	height: 24px;
	margin: 0 -5px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: width 0.2s ease;
}

.nemra-education-programs__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: rgba(252, 253, 253, 0.32);
	transition: width 0.2s ease, background-color 0.2s ease;
}

.nemra-education-programs__dot.is-active {
	width: 34px;
}

.nemra-education-programs__dot.is-active::before {
	width: 24px;
	background: var(--nemra-light, #fcfdfd);
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

/* Below ~1360px the empty pocket left of the second card row is narrower
   than the 251px flag, so floating it at 158px would cover card copy.
   Give the ribbon its own band under the content instead. */
@media (max-width: 1360px) {
	.nemra-education-programs--has-badge .nemra-education-programs__inner {
		padding-bottom: 152px;
	}

	.nemra-education-programs__badge {
		bottom: 40px;
	}
}

@media (max-width: 991px) {
	.nemra-education-programs {
		padding: 80px 32px 0;
	}

	.nemra-education-programs__inner {
		padding: 48px 40px;
		gap: 48px;
	}

	.nemra-education-programs--has-badge .nemra-education-programs__inner {
		padding-bottom: 144px;
	}

	.nemra-education-programs__content {
		gap: 48px;
	}

	.nemra-education-programs__heading {
		font-size: var(--nemra-t-h2-size, 36px);
		letter-spacing: var(--nemra-t-h2-ls, -1.5px);
		max-width: 100%;
		overflow-wrap: break-word;
	}

	/* Mobile comp 806:28597: item titles are Body/Large (16 in the mobile
	   mode) and the CTA label is UI/Button-1 (12). */
	.nemra-education-programs__item-title {
		font-size: var(--nemra-t-b1-size, 16px);
	}

	.nemra-education-programs__cta {
		font-size: var(--nemra-t-btn-size, 12px);
	}

	.nemra-education-programs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		column-gap: 32px;
		row-gap: 40px;
	}

	.nemra-education-programs__item:nth-child(1),
	.nemra-education-programs__item:nth-child(2),
	.nemra-education-programs__item:nth-child(3),
	.nemra-education-programs__item:nth-child(4),
	.nemra-education-programs__item:nth-child(5) {
		grid-column: auto;
		grid-row: auto;
	}

	.nemra-education-programs__item {
		width: 100%;
	}

	.nemra-education-programs__badge {
		bottom: 40px;
	}
}

@media (max-width: 599px) {
	/* Mobile comps 806:28705 (Networking, no ribbon) and 806:28597 / 806:28651
	   (Home + Agents, with it) all run this band edge to edge — no inset, no
	   rounded card — and they carry the section's 64/24 padding INSIDE the
	   band. Anything the page container adds here lands OUTSIDE it, which is
	   what pushed the band 24px off both edges and 64px down the page. */
	.nemra-education-programs {
		padding: 0;
	}

	/* Bottom is 20, not 64: the comp floats the pager inside the bottom band
	   rather than stacking the band under it. */
	.nemra-education-programs__inner {
		padding: 64px 24px 20px;
		gap: 0;
		border-radius: 0;
	}

	/* The ribbon rides the TOP of the band (see below), so the header clears
	   it: comp 806:28597 puts the flag at 64–112 and the eyebrow at 143.8. */
	.nemra-education-programs--has-badge .nemra-education-programs__inner {
		padding-top: 144px;
		padding-bottom: 20px;
	}

	/* Each seam is its own number here (64 header→cards, 40 cards→pager), so
	   the shared column gap has nothing left to say. */
	.nemra-education-programs__content {
		gap: 0;
	}

	/* No hairline above the eyebrow in the mobile comp — the band's own 64px
	   is the whole gap — and eyebrow → heading is Spacing/16. */
	.nemra-education-programs__header {
		gap: 16px;
		padding-top: 0;
		border-top: 0;
	}

	.nemra-education-programs__eyebrow {
		font-size: var(--nemra-t-l2-size, 8px);
		letter-spacing: var(--nemra-t-l2-ls, 0.8px);
	}

	/* Heading → CTA is 32, twice the header's own gap. */
	.nemra-education-programs__cta {
		margin-top: 16px;
	}

	/* Designer feedback 2026-07: mobile shows one program at a time as a
	 * swipe track with dots, replacing the long 1-up stacked scroll. */
	.nemra-education-programs__grid {
		display: flex;
		grid-template-columns: none;
		gap: 32px;
		margin-top: 64px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Track stays inside the inner padding so card 1 lines up with the
		 * heading above it; the narrower card lets the next one peek. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		overscroll-behavior-x: contain;
	}

	.nemra-education-programs__grid::-webkit-scrollbar {
		display: none;
	}

	/* One whole slide per view, centred. The old `100% - 32px` left a slab of
	   the next card hanging off the right edge, which read as a broken layout
	   rather than a swipe affordance — the comp shows a single clean card. */
	.nemra-education-programs__item {
		flex: 0 0 100%;
		gap: 12px;
		scroll-snap-align: center;
		align-items: center;
		text-align: center;
	}

	/* The stacked list's hairline separator has no meaning once each card
	 * is its own slide. */
	.nemra-education-programs__item:not(:first-child) {
		border-top: 0;
		padding-top: 0;
	}

	.nemra-education-programs__item-description {
		font-size: var(--nemra-t-b2-size, 14px);
		line-height: var(--nemra-t-b2-lh, 1.6);
		/* 0.64 blends to #b4bfc8 on the slate ground — 4.33:1. 0.72 is the
		   first comfortable pass at 5.02:1. */
		color: rgba(252, 253, 253, 0.72);
	}

	/* The comp's pager is a frosted pill track, not bare dots: 28 tall with
	   16px of side padding, 6×4 marks 6px apart, and a 32×4 white bar for the
	   card in view. Buttons stay 6px wider than their mark and pull that back
	   with a negative margin, so the tap target survives the 6px visual. */
	.nemra-education-programs__dots {
		display: flex;
		width: max-content;
		margin: 40px auto 0;
		padding: 0 16px;
		gap: 6px;
		border-radius: 999px;
		background: rgba(252, 253, 253, 0.055);
	}

	.nemra-education-programs__dot {
		width: 12px;
		height: 28px;
		margin: 0 -3px;
	}

	.nemra-education-programs__dot::before {
		width: 6px;
		height: 4px;
		border-radius: 2px;
		background: rgba(252, 253, 253, 0.2);
	}

	.nemra-education-programs__dot.is-active {
		width: 38px;
	}

	.nemra-education-programs__dot.is-active::before {
		width: 32px;
	}

	/* The comp keeps the desktop ribbon on mobile — same gold flag with the
	   notched right edge — but moves it to the TOP of the band, flush to the
	   left edge, with the copy left-aligned inside it. */
	.nemra-education-programs__badge {
		top: 64px;
		bottom: auto;
		left: 0;
		width: 236px;
		padding: 9px 44px 9px 24px;
		align-items: flex-start;
		text-align: left;
	}
}

/* ---------- Accent + stagger variants (Networking comp 797:25269) ------- */

.nemra-education-programs--accent-blue .nemra-education-programs__eyebrow-dot {
	background-color: var(--nemra-blue, #2173b3);
}

/* Leaves the top-left cell empty so five items read 1 / 2 / 2 down the
 * columns instead of 3 across then 2. Placing only the FIRST item is enough —
 * auto-placement carries the rest: item 1 -> col2 row1, item 2 -> col3 row1,
 * then 3/4/5 fill row 2 left to right. Desktop only; the mobile breakpoint
 * turns this grid into a one-card swipe track where a hole makes no sense. */
@media (min-width: 992px) {
	.nemra-education-programs--stagger .nemra-education-programs__item:first-child {
		grid-column: 2;
	}
}