/**
 * NEMRA Spotlight Pair widget — "Welcome to NEMRA Lighting" (V2)
 * ---------------------------------------------------------------
 * Serif section header with prev/next slider arrows, then a dark-blue card
 * holding a framed member photo (left) and a large serif testimonial quote
 * with author attribution + "Read case study" CTA (right). Light section bg.
 *
 * Matches Figma node 571:21291 on file 8EpY00T4Y4D6PW3YVc652t.
 *
 * BEM:
 *   .nemra-spotlight-pair               — outer section (full-width, light bg)
 *   .nemra-spotlight-pair__inner        — max-width + horizontal padding wrapper
 *   .nemra-spotlight-pair__header       — section header block
 *   .nemra-spotlight-pair__eyebrow      — dot + label-2 eyebrow
 *   .nemra-spotlight-pair__heading      — serif H2 heading
 *   .nemra-spotlight-pair__nav          — slider arrow group
 *   .nemra-spotlight-pair__arrow        — round prev/next button
 *   .nemra-spotlight-pair__card         — dark blue testimonial card
 *   .nemra-spotlight-pair__photo        — framed member photo (left)
 *   .nemra-spotlight-pair__testimonial  — quote column (right)
 *   .nemra-spotlight-pair__quote        — large serif quote
 *   .nemra-spotlight-pair__footer       — author + CTA row
 *   .nemra-spotlight-pair__cta          — "Read case study" link w/ circle arrow
 *
 * V2 tokens.
 * Breakpoints mirror Elementor defaults: 991px (tablet), 599px (mobile).
 */

.nemra-spotlight-pair {
	--nemra-blue: #2173b3;
	--nemra-blue-dark: #042a48;
	--nemra-blue-vibrant: #0078d6;
	--nemra-green: #4c7f39;
	--nemra-eversand: #e6e8dd;
	--nemra-dark: #17171a;
	--nemra-light: #fcfdfd;
	/* No local font tokens: they would shadow the globals and this widget
	 * would keep its own typeface when NEMRA_HEADING_FONT changes. */

	display: block;
	width: 100%;
	background-color: transparent;
	color: var( --nemra-dark );
	font-family: var( --nemra-font-body );
}

.nemra-spotlight-pair *,
.nemra-spotlight-pair *::before,
.nemra-spotlight-pair *::after {
	box-sizing: border-box;
}

.nemra-spotlight-pair__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	/*
	 * No section padding here. The container carries it (120/64 desktop,
	 * 80/24 mobile per 797:21346 and 797:21485), and this wrapper is
	 * transparent — anything it adds lands on top of that. It used to be
	 * 40/64, tuned by eye against a block already padded by its container,
	 * which put the first divider at 160/128 where the comp has 120/64.
	 */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ---------- Header ------------------------------------------------------ */

.nemra-spotlight-pair__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.nemra-spotlight-pair__header-top {
	border-top: 1px solid rgba( 23, 23, 26, 0.16 );
	padding-top: 24px;
}

.nemra-spotlight-pair__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.nemra-spotlight-pair__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --nemra-blue );
	flex-shrink: 0;
}

.nemra-spotlight-pair__eyebrow-text {
	font-family: var( --nemra-font-body );
	font-size: var( --nemra-t-l2-size, 10px );
	font-weight: 500;
	line-height: 1;
	letter-spacing: var( --nemra-t-l2-ls, 1px );
	text-transform: uppercase;
	color: rgba( 23, 23, 26, 0.64 );
	white-space: nowrap;
}

.nemra-spotlight-pair__eyebrow--light .nemra-spotlight-pair__eyebrow-text {
	color: var( --nemra-light );
}

.nemra-spotlight-pair__header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
}

.nemra-spotlight-pair__heading {
	margin: 0;
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	font-weight: 500;
	font-size: var( --nemra-t-h2-size, 48px );
	line-height: var( --nemra-t-h2-lh, 1.2 );
	letter-spacing: var( --nemra-t-h2-ls, -1.5px );
	color: var( --nemra-dark );
	/* Wide enough that "Welcome to NEMRA Lighting" stays on one line at 1440. */
	max-width: 900px;
}

/* ---------- Slider arrows ---------------------------------------------- */

.nemra-spotlight-pair__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.nemra-spotlight-pair__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba( 23, 23, 26, 0.32 );
	border-radius: 32px;
	background-color: rgba( 252, 253, 253, 0.32 );
	color: var( --nemra-dark );
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nemra-spotlight-pair__arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

.nemra-spotlight-pair__arrow:hover:not( [disabled] ),
.nemra-spotlight-pair__arrow:focus-visible:not( [disabled] ) {
	background-color: var( --nemra-blue, #2173b3 );
	border-color: var( --nemra-blue, #2173b3 );
	color: #fff;
}

.nemra-spotlight-pair__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ---------- Card -------------------------------------------------------- */

/* One slide visible at a time. Every slide is rendered server-side and the
 * inline script toggles `is-active`; with a single slide the widget prints no
 * script, so this rule must not hide a lone card — hence hiding only the
 * explicitly inactive ones rather than defaulting everything to hidden. */
.nemra-spotlight-pair__card[data-index]:not( .is-active ) {
	display: none;
}

.nemra-spotlight-pair__card {
	display: flex;
	gap: 0;
	align-items: stretch;
	width: 100%;
	height: 420px;
	padding: 24px;
	border-radius: 8px;
	background-color: var( --nemra-blue-dark );
	overflow: hidden;
}

/* Member spotlight photos are one standard size in every instance. The
 * round-3 comp (797:21346) sizes the photo 424x374 and seats it in the
 * card's own 24px padding box -- flush top and bottom, no extra inset.
 * The 280px square left it floating in the middle of the card. */
.nemra-spotlight-pair__photo {
	flex: 0 0 424px;
	width: 424px;
	height: auto;
	align-self: stretch;
	margin-left: 0;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	background-color: #0a3a5e;
	background-image: linear-gradient( 180deg, rgba( 252, 253, 253, 0.04 ) 0%, rgba( 26, 26, 23, 0.5 ) 100% );
}

.nemra-spotlight-pair__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nemra-spotlight-pair__testimonial {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 16px 0 12px 48px;
}

.nemra-spotlight-pair__quote {
	margin: 16px 0 0;
	/* Comp measure is 765px, which breaks the pull quote over three lines. */
	max-width: 765px;
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	font-weight: 500;
	font-size: var( --nemra-t-h4-size, 32px );
	line-height: var( --nemra-t-h4-lh, 1.2 );
	letter-spacing: var( --nemra-t-h4-ls, -1px );
	color: var( --nemra-light );
}

/* ---------- Footer (author + CTA) -------------------------------------- */

.nemra-spotlight-pair__footer {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

.nemra-spotlight-pair__author {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.nemra-spotlight-pair__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background-color: rgba( 252, 253, 253, 0.12 );
}

.nemra-spotlight-pair__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nemra-spotlight-pair__author-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nemra-spotlight-pair__author-name {
	font-family: var( --nemra-font-body );
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var( --nemra-light );
}

.nemra-spotlight-pair__author-role {
	font-family: var( --nemra-font-body );
	font-size: var( --nemra-t-b3-size, 12px );
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 252, 253, 253, 0.64 );
}

/* ---------- CTA --------------------------------------------------------- */

.nemra-spotlight-pair__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --nemra-light );
	font-family: var( --nemra-font-body );
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.nemra-spotlight-pair__cta--static {
	cursor: default;
}

.nemra-spotlight-pair__cta-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 8px;
	border-radius: 32px;
	background-color: var( --nemra-blue-vibrant );
	color: var( --nemra-light );
	transition: transform 0.2s ease;
}

.nemra-spotlight-pair__cta-circle svg {
	width: 16px;
	height: 16px;
	display: block;
}

.nemra-spotlight-pair__cta:hover .nemra-spotlight-pair__cta-circle,
.nemra-spotlight-pair__cta:focus-visible .nemra-spotlight-pair__cta-circle {
	transform: translateX( 3px );
}

/* ---------- Sponsors (ported from the retired Spotlight Slider) --------- */

/* Comp 571:22138 separates card and sponsor strip by 50px; the __inner flex
 * gap is 64/48/40 per breakpoint, so the margins below make up the difference
 * at each one. */
.nemra-spotlight-pair__sponsors {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	margin-top: -14px;
}

.nemra-spotlight-pair__sponsors-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --nemra-dark );
}

/* Sponsors eyebrow dot is green in the comp (571:22137). */
.nemra-spotlight-pair__dot--green {
	background-color: var( --nemra-green );
}

.nemra-spotlight-pair__logos-wrap {
	position: relative;
	width: 100%;
	/* Comp 571:22138: the strip is a centered ~886px row whose page-ground edge
	 * fades sit ON the outermost logos, not out at the section gutters. */
	max-width: 900px;
	margin: 0 auto;
}

.nemra-spotlight-pair__logos-wrap::before,
.nemra-spotlight-pair__logos-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 140px;
	z-index: 1;
	pointer-events: none;
}

.nemra-spotlight-pair__logos-wrap::before {
	left: 0;
	background: linear-gradient( to right, #f6f6f6, rgba( 246, 246, 246, 0 ) );
}

.nemra-spotlight-pair__logos-wrap::after {
	right: 0;
	background: linear-gradient( to left, #f6f6f6, rgba( 246, 246, 246, 0 ) );
}

.nemra-spotlight-pair__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.nemra-spotlight-pair__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}

	/* Scoped through the li.nemra-spotlight-pair__logo wrapper on purpose: Elementor's
	 * `.elementor img { max-width: 100% }` is (0,1,1) and silently beat the
	 * bare class (0,1,0), so this cap never applied. A wide wordmark then
	 * sized off max-height alone and pushed the row into a second line. */
.nemra-spotlight-pair__logo .nemra-spotlight-pair__logo-img {
	display: block;
	max-height: 42px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.nemra-spotlight-pair__logo-fallback {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgba( 23, 23, 26, 0.55 );
	white-space: nowrap;
}

/* ---------- Responsive: tablet ----------------------------------------- */

@media ( max-width: 991px ) {

	.nemra-spotlight-pair__inner {
		/* Section padding is the container's — see the base rule. */
		padding: 0;
		gap: 48px;
	}

	/* UI/Button-1 is 12 in the mobile mode (card comp 538:13392). */
	.nemra-spotlight-pair__cta {
		font-size: var(--nemra-t-btn-size, 12px);
	}

	/* Heading size/tracking come from the h2 tokens, which flip to 36px/-1.5
	   at this same breakpoint — matching the mobile comp 797:21485. */

	/* Mobile comp 797:21485 runs the photo edge to edge across the top of the
	   card — no padding around it — with only the copy below inset. The old
	   200px centred square left it stranded in a sea of navy. */
	.nemra-spotlight-pair__card {
		flex-direction: column;
		height: auto;
		gap: 24px;
		padding: 0 0 24px;
	}

	.nemra-spotlight-pair__photo {
		flex: 0 0 auto;
		width: 100%;
		height: 221px;
		margin: 0;
		border-radius: 8px 8px 0 0;
	}

	.nemra-spotlight-pair__testimonial {
		padding: 0 24px;
		gap: 24px;
	}

	/* The mobile card component (538:13401 inside 797:21485) sets the quote in
	   the SERIF at H6 — unlike desktop (164:555), where it is Poppins H4. The
	   comp's "Merriweather Medium" is the stale token set; it resolves to
	   Libre Baskerville, which only ships 400/700 — so Regular. */
	.nemra-spotlight-pair__quote {
		margin-top: 0;
		font-family: var( --nemra-font-heading );
		font-weight: 400;
		font-size: var( --nemra-t-h6-size, 20px );
		/* Comp says 1.3 — not the 28px h6 lh token, which belongs to the 24px
		   desktop h6. */
		line-height: 1.3;
		letter-spacing: var( --nemra-t-h6-ls, -0.5px );
	}

	.nemra-spotlight-pair__footer {
		margin-top: 0;
	}

	/* __inner gap drops to 48 here; keep the comp's 50px card→sponsors gap. */
	.nemra-spotlight-pair__sponsors {
		margin-top: 2px;
	}
}

/* ---------- Responsive: mobile ----------------------------------------- */

@media ( max-width: 599px ) {

	.nemra-spotlight-pair__inner {
		/* Section padding is the container's — see the base rule. */
		padding: 0;
		gap: 40px;
	}

	.nemra-spotlight-pair__header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.nemra-spotlight-pair__card {
		padding: 0 0 24px;
	}

	.nemra-spotlight-pair__photo {
		width: 100%;
		height: 221px;
	}

	/* The comp carries the eyebrow only in the section header on mobile —
	   repeating it inside the card just eats vertical space. */
	.nemra-spotlight-pair__card .nemra-spotlight-pair__eyebrow--light {
		display: none;
	}

	/* Controls sit at opposite ends of the block, as on the events slider. */
	.nemra-spotlight-pair__nav {
		width: 100%;
		justify-content: space-between;
	}

	.nemra-spotlight-pair__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* __inner gap is 40 here (comp gap 50); mobile comp keeps the sponsors as
	   ONE row that runs off the right edge (scrollable) instead of wrapping. */
	.nemra-spotlight-pair__sponsors {
		margin-top: 10px;
	}

	.nemra-spotlight-pair__logos-wrap {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.nemra-spotlight-pair__logos-wrap::-webkit-scrollbar { display: none; }

	.nemra-spotlight-pair__logos {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 40px;
		width: max-content;
	}
}