/*
 * NEMRA Blocks — Why Choose widget (V2 homepage).
 * Serif header + a row of colored benefit cards + two audience checklists,
 * sitting on a light eversand-gray band. Colors come from brand tokens.
 */

.nemra-why-choose {
	width: 100%;
	box-sizing: border-box;
	background: #f6f6f6;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	color: var(--nemra-dark, #17171a);
}

.nemra-why-choose__inner {
	width: 100%;
	max-width: 1312px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Header */
.nemra-why-choose__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(23, 23, 26, 0.16);
}

.nemra-why-choose__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: var(--nemra-t-l2-size);
	font-weight: 500;
	letter-spacing: var(--nemra-t-l2-ls);
	line-height: var(--nemra-t-l2-lh);
	text-transform: uppercase;
	color: rgba(23, 23, 26, 0.64);
}

.nemra-why-choose__eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nemra-green, #4c7f39);
}

/* Title + optional subtitle. The comp's Global_Header sets 16 between them
 * (advocacy 797:24831); the 24 above stays the eyebrow-to-title gap, which
 * measures 37px ink-to-ink against the home comp's 38. */
.nemra-why-choose__header-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Comp component 571:22133: H2 is Poppins Medium, not the serif display. */
.nemra-why-choose__title {
	/* 680 wrapped advocacy's "How We Represent the Industry" (709px natural)
	 * onto two lines where its comp (797:24836) keeps one. Home's
	 * "Built for the Lighting Professionals" is 756 natural and breaks after
	 * "Lighting" at 445 — so anything in [709, 755] renders both to comp, and
	 * 730 sits in the middle. Per-page numbers, one shared rule. */
	margin: 0;
	max-width: 730px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-h2-size);
	line-height: var(--nemra-t-h2-lh);
	letter-spacing: var(--nemra-t-h2-ls);
	font-weight: 500;
	color: var(--nemra-dark, #17171a);
}

.nemra-why-choose__title-accent {
	color: var(--nemra-blue, #2173b3);
}

/* Body/Body Medium at dark-88%, capped at the comp's own 599px measure. */
.nemra-why-choose__body {
	margin: 0;
	max-width: 599px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-b2-size);
	font-weight: 400;
	line-height: var(--nemra-t-b2-lh);
	letter-spacing: var(--nemra-t-b2-ls);
	color: rgba(23, 23, 26, 0.88);
}

/* Benefit cards */
.nemra-why-choose__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

/* Column count follows the card count (Resources reuse is a 3-up row).
 * Same single-class specificity as the breakpoint rules below, which come
 * later in the file and therefore still win on small screens. */
.nemra-why-choose__cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.nemra-why-choose__cards--cols-3 { grid-template-columns: repeat(3, 1fr); }

/* No audience columns below → the card row is the last block and the comp
 * ends flush after it. */
.nemra-why-choose__cards:last-child {
	margin-bottom: 0;
}

.nemra-why-choose__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	border-radius: 8px;
	color: var(--nemra-light, #fcfdfd);
	min-height: 334px;
	/* Anchor + clip for the CTA, which rests fully outside the bottom edge. */
	position: relative;
	overflow: hidden;
}

/* Hover reveal: the "Learn more" button slides up from below the card's bottom
 * edge while the description lifts to make room. At rest the card is byte-for
 * byte the comp layout — the CTA is parked outside the padding box and clipped,
 * so it costs nothing until hovered. */
.nemra-why-choose__card-cta {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-btn-size);
	font-weight: 400;
	line-height: var(--nemra-t-btn-lh);
	color: #ffffff;
	text-decoration: none;
	opacity: 0;
	transform: translateY( calc( 100% + 24px ) );
	transition: transform 350ms cubic-bezier( 0.2, 0.7, 0.3, 1 ), opacity 250ms ease;
}

/* Arrow sits in a white circle; the glyph itself picks up the card's color
 * via the accent property each card modifier sets below. */
.nemra-why-choose__card-cta-arrow {
	flex-shrink: 0;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	padding: 6px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--nemra-why-card-accent, var(--nemra-blue, #2173b3));
	transition: transform 250ms ease;
}

.nemra-why-choose__card-desc {
	transition: transform 350ms cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

/* Gated on --linked (PHP only emits it when the card carries a link).
 * Certification and Advocacy use this widget with no links at all, and an
 * ungated rule lifted their copy 34px on hover for a CTA that never came. */
.nemra-why-choose__card--linked:hover .nemra-why-choose__card-cta,
.nemra-why-choose__card--linked:focus-within .nemra-why-choose__card-cta {
	opacity: 1;
	transform: translateY( 0 );
}

.nemra-why-choose__card--linked:hover .nemra-why-choose__card-desc,
.nemra-why-choose__card--linked:focus-within .nemra-why-choose__card-desc {
	transform: translateY( -34px );
}

.nemra-why-choose__card-cta:hover .nemra-why-choose__card-cta-arrow {
	transform: translateX( 4px );
}

.nemra-why-choose__card-cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Touch/keyboard-only contexts get no hover — show the CTA in place rather than
 * leaving it permanently parked off-card. */
@media ( hover: none ) {
	.nemra-why-choose__card-cta {
		position: static;
		opacity: 1;
		transform: none;
	}

	.nemra-why-choose__card-desc {
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.nemra-why-choose__card-cta,
	.nemra-why-choose__card-desc,
	.nemra-why-choose__card-cta-arrow {
		transition: none;
	}
}

.nemra-why-choose__card--blue {
	--nemra-why-card-accent: var(--nemra-blue, #2173b3);
	background: var(--nemra-why-card-accent);
}

.nemra-why-choose__card--green {
	--nemra-why-card-accent: var(--nemra-green, #4c7f39);
	background: var(--nemra-why-card-accent);
}

.nemra-why-choose__card-top {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.nemra-why-choose__card-icon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: flex-start;
	/* type-token-exempt: icon-font glyph box, not running text */
	font-size: 30px;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-why-choose__card-icon svg { width: 36px; height: 36px; fill: currentColor; }
.nemra-why-choose__card-icon svg.nemra-icon { fill: none; stroke: currentColor; }

/* Card titles are serif regular in the comp ("Advocacy in D.C."), not bold sans. */
.nemra-why-choose__card-title {
	margin: 0;
	font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
	/* Comp 5:6077 measured by ink width of the same string ("Advocacy in D.C."):
	 * comp 199px against 224px here, i.e. 26px was ~12% oversized. 26 was not on
	 * the type scale at all. The card body, section title and list items all
	 * measured 1:1 — only the two serif titles were off. */
	font-size: var(--nemra-t-h6-size);
	line-height: var(--nemra-t-h6-lh);
	/* Heading/H6 tracking. This is also what closes the last of the gap to the
	 * comp: 16 characters x -0.5px takes the measured 207px to the comp's 199px
	 * exactly, so the residual I'd written off as render bias was really this. */
	letter-spacing: var(--nemra-t-h6-ls);
	font-weight: 400;
}

.nemra-why-choose__card-desc {
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-b2-size);
	line-height: var(--nemra-t-b2-lh);
	color: #ffffff;
}

/* Audience columns */
.nemra-why-choose__columns {
	display: flex;
	align-items: stretch;
	gap: 16px;
}

.nemra-why-choose__divider {
	flex: 0 0 auto;
	width: 1px;
	align-self: stretch;
	background: rgba(23, 23, 26, 0.16);
}

.nemra-why-choose__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 32px 64px;
	box-sizing: border-box;
}

.nemra-why-choose__col-head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* "For NEMRA Agents / Manufacturers" is Heading/H5 (28 desktop / 24 mobile).
   The comp is split on desktop — Agents renders 24 (a stray H6 binding),
   Manufacturers 28 — but the mobile comp sets BOTH at 24/1.2, which only H5's
   mobile mode produces (H6 mobile is 20/28). H5 is the consistent intent. */
.nemra-why-choose__col-title {
	margin: 0;
	font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
	font-size: var(--nemra-t-h5-size);
	line-height: var(--nemra-t-h5-lh);
	letter-spacing: var(--nemra-t-h5-ls);
	font-weight: 400;
	text-transform: none;
	color: var(--nemra-dark, #17171a);
}

/* The accent word in each column title (rendered via render_heading). */
.nemra-why-choose__col--agents .nemra-why-choose__col-title .nemra-why-choose__title-accent { color: var(--nemra-green, #4c7f39); }
.nemra-why-choose__col--mfrs .nemra-why-choose__col-title .nemra-why-choose__title-accent { color: var(--nemra-blue, #2173b3); }

.nemra-why-choose__col-desc {
	margin: 0;
	max-width: 449px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-b2-size);
	line-height: var(--nemra-t-b2-lh);
	color: var(--nemra-dark, #17171a);
}

.nemra-why-choose__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nemra-why-choose__item {
	display: flex;
	align-items: center;
	gap: 24px;
	color: var(--nemra-dark, #17171a);
}

/* Colored chip behind the checklist icon. */
.nemra-why-choose__item-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 8px;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-why-choose__item-icon svg { width: 26px; height: 26px; fill: currentColor; }
.nemra-why-choose__item-icon svg.nemra-icon { fill: none; stroke: currentColor; }
.nemra-why-choose__item-icon .nemra-why-choose__check { width: 26px; height: 26px; }

.nemra-why-choose__col--agents .nemra-why-choose__item-icon { background: var(--nemra-green, #4c7f39); }
.nemra-why-choose__col--mfrs .nemra-why-choose__item-icon { background: var(--nemra-blue, #2173b3); }

.nemra-why-choose__item-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nemra-why-choose__item-title {
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-b2b-size);
	font-weight: 700;
	line-height: var(--nemra-t-b2b-lh);
	color: var(--nemra-dark, #17171a);
}

.nemra-why-choose__item-desc {
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: var(--nemra-t-b2-size);
	line-height: var(--nemra-t-b2-lh);
	color: var(--nemra-dark, #17171a);
}

/* Mobile numbers from comp 797:21410 (400px Features instance): header→cards 24,
 * cards→panel 24 + 12 panel top inset, audience blocks inset 20px past the page
 * margin, head gap 16, head→list 32, rows 20 apart, 40px chips with a 16px gap
 * to the text, and the divider stays — horizontal, 24px above and below. */
@media (max-width: 991px) {
	.nemra-why-choose__header { margin-bottom: 24px; }
	/* No page margin to spare below 992 — the subtitle takes the full column. */
	.nemra-why-choose__body { max-width: none; }
	.nemra-why-choose__cards { grid-template-columns: repeat(2, 1fr); margin-bottom: 24px; }
	.nemra-why-choose__card { min-height: 240px; }
	.nemra-why-choose__columns { flex-direction: column; gap: 24px; padding-top: 12px; }
	.nemra-why-choose__divider { width: auto; height: 1px; margin: 0 20px; }
	.nemra-why-choose__col { padding: 0 20px; gap: 32px; }
	.nemra-why-choose__col-head { gap: 16px; }
	/* The comp breaks the accent word onto its own line on mobile. */
	.nemra-why-choose__col-title .nemra-why-choose__title-accent { display: block; }
	.nemra-why-choose__list { gap: 20px; }
	.nemra-why-choose__item { gap: 16px; }
	.nemra-why-choose__item-icon { width: 40px; height: 40px; padding: 10px; }
	.nemra-why-choose__item-icon svg,
	.nemra-why-choose__item-icon .nemra-why-choose__check { width: 20px; height: 20px; }
	/* Item text: title sits flush on its description (comp gap 0, desktop 4),
	 * and the description drops to Body/Small — 10px in mobile mode. */
	.nemra-why-choose__item-body { gap: 0; }
	.nemra-why-choose__item-desc {
		font-size: var(--nemra-t-b3-size);
		line-height: var(--nemra-t-b3-lh);
	}
	/* Card icons render at 28.8px in the 400px comp (36 on desktop). */
	.nemra-why-choose__card-icon { width: 29px; height: 29px; font-size: 24px; }
	.nemra-why-choose__card-icon svg { width: 29px; height: 29px; }
}

@media (max-width: 599px) {
	.nemra-why-choose__cards { grid-template-columns: 1fr; }
	/* Single-column cards hug their content: 24 padding, 29 icon, 20 to the
	 * title, 20 to the desc (comp card = 188.8 tall; 240 min-height is the
	 * 2-up tablet grid's, not the phone's). */
	.nemra-why-choose__card { min-height: 0; gap: 20px; }
	.nemra-why-choose__card-top { gap: 20px; }
}