/*
 * NEMRA Blocks — Events Feature widget styles (V2).
 *
 * "The Events Lighting Professionals Are Talking About" — a horizontal
 * card carousel. Layout matches Figma node 571:21245:
 *
 *   Header:  top divider + "EVENTS" eyebrow, then a row with a serif
 *            heading (one word in brand blue) on the left and two
 *            circular prev/next arrow buttons on the right.
 *   Cards:   a Swiper of 480px-tall full-bleed image cards. Each card
 *            has a navy gradient overlay, an uppercase tag/date pill at
 *            the top, and a title + short description + a small green
 *            circular CTA at the bottom.
 *
 * The widget is full-width and transparent at the section level; width
 * constraints/padding come from the parent Elementor container.
 */

.nemra-events-feature {
	--nemra-ef-card-radius: 5px;
	--nemra-ef-card-height: 480px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 70px;
	box-sizing: border-box;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	color: var(--nemra-dark, #17171a);
}

.nemra-events-feature *,
.nemra-events-feature *::before,
.nemra-events-feature *::after {
	box-sizing: border-box;
}

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

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

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

.nemra-events-feature__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--nemra-font-body, 'Poppins', sans-serif);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(23, 23, 26, 0.64);
}

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

.nemra-events-feature__header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
}

.nemra-events-feature__heading {
	margin: 0;
	/* Figma container is 788px wide, but its Libre Baskerville metrics break
	   the line after "Lighting" so the emphasized word leads line 2. Browser
	   metrics render ~4px narrower and keep "Professionals" on line 1; 740px
	   reproduces the comp's two-line break for the default heading. */
	max-width: 740px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: var(--nemra-dark, #17171a);
}

.nemra-events-feature__heading-em {
	color: var(--nemra-blue, #2173b3);
}

/* Left column of the header row: heading + optional subtitle. */
.nemra-events-feature__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.nemra-events-feature__body {
	margin: 0;
	max-width: 647px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nemra-dark, #17171a);
}

/* Optional green section button under the header (Agent Connect). Sits as
   the header's third child so the flex gap gives it the comp's 24px above. */
.nemra-events-feature__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid rgba(252, 253, 253, 0.08);
	border-radius: 5px;
	background-color: var(--nemra-green, #4c7f39);
	color: var(--nemra-light, #fcfdfd);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.nemra-events-feature__cta:hover,
.nemra-events-feature__cta:focus-visible {
	background-color: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: var(--nemra-light, #fcfdfd);
	text-decoration: none;
	outline: 0;
}

/* Circular prev/next nav buttons */
.nemra-events-feature__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.nemra-events-feature__navbtn {
	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, #17171a);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

/* Border matches the fill so the hovered button reads as borderless. */
.nemra-events-feature__navbtn:hover,
.nemra-events-feature__navbtn:focus-visible {
	background-color: var(--nemra-blue, #2173b3);
	border-color: var(--nemra-blue, #2173b3);
	color: #ffffff;
}

.nemra-events-feature__navbtn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- Carousel --------------------------------------------------------- */

.nemra-events-feature__swiper {
	width: 100%;
	overflow: hidden;
}

.nemra-events-feature__swiper .swiper-wrapper {
	align-items: stretch;
	/* Overshoot-and-settle on arrow/drag-release moves: the track travels a
	 * little past the target slide and eases back, instead of the flat linear
	 * glide Swiper defaults to. The y=1.5 control point is what carries it past
	 * 1 (the target) before it returns. Swiper zeroes transition-duration while
	 * dragging, so this only affects the animated settle, never the drag. */
	transition-timing-function: cubic-bezier( 0.34, 1.5, 0.64, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.nemra-events-feature__swiper .swiper-wrapper {
		transition-timing-function: ease-out;
	}
}

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

.nemra-events-feature__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: var(--nemra-ef-card-height);
	padding: 24px;
	border-radius: var(--nemra-ef-card-radius);
	overflow: hidden;
	background-color: var(--nemra-blue-dark, #042a48);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--nemra-light, #fcfdfd);
	text-decoration: none;
}

/* Navy gradient: transparent at the top ~40%, deepening to navy at the bottom. */
.nemra-events-feature__card-overlay {
	position: absolute;
	inset: 0;
	border-radius: var(--nemra-ef-card-radius);
	background: linear-gradient(
		to bottom,
		rgba(4, 42, 72, 0) 40%,
		var(--nemra-blue-dark, #042a48) 89%
	);
	pointer-events: none;
	z-index: 1;
}

/* Top dark overlay (Figma "Dark Overlay", 160px tall): darkest at the very
   top edge, fading to transparent — gives the tag pill consistent contrast. */
.nemra-events-feature__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 160px;
	border-radius: var(--nemra-ef-card-radius) var(--nemra-ef-card-radius) 0 0;
	background: linear-gradient(
		to top,
		rgba(26, 26, 23, 0) 0%,
		rgba(26, 26, 23, 0.64) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Tag / date pill (top) */
.nemra-events-feature__card-tag {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	max-width: 100%;
	padding: 12px;
	border-radius: 8px;
	/* Light frost, not a dark chip — comp 797:22735 samples ~rgba(252,253,253,.32)
	 * over the photo, which keeps the pill visible on dark backdrops. */
	background-color: rgba(252, 253, 253, 0.32);
	font-family: var(--nemra-font-body, 'Poppins', sans-serif);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--nemra-light, #fcfdfd);
}

/* Content block (bottom): title + footer */
.nemra-events-feature__card-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

/* Event card titles are Heading/H5 in the comp — Libre Baskerville Regular
   28/-0.5 over the photo, not the sans the section heading uses. */
.nemra-events-feature__card-title {
	margin: 0;
	font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-events-feature__card-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.nemra-events-feature__card-desc {
	margin: 0;
	max-width: 300px;
	font-family: var(--nemra-font-body, 'Poppins', sans-serif);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--nemra-light, #fcfdfd);
}

/* CTA: text label + green circular arrow button */
.nemra-events-feature__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.nemra-events-feature__card-cta-label {
	font-family: var(--nemra-font-body, 'Poppins', sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-events-feature__card-cta-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 32px;
	background-color: var(--nemra-green-vibrant, #53c02a);
	color: var(--nemra-light, #fcfdfd);
	transition: background-color 150ms ease, color 150ms ease;
}

a.nemra-events-feature__card:hover .nemra-events-feature__card-cta-circle,
a.nemra-events-feature__card:focus-visible .nemra-events-feature__card-cta-circle {
	background-color: #ffffff;
	color: var(--nemra-dark, #17171a);
}

/* Recording cards (Past Events): duration + members-only lock note replace
   the button row. */
.nemra-events-feature__card-duration {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(244, 243, 234, 0.72);
}

.nemra-events-feature__card-access {
	margin: 0 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	letter-spacing: 0.5px;
	color: rgba(244, 243, 234, 0.8);
	white-space: nowrap;
}

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

@media (max-width: 991px) {
	.nemra-events-feature {
		gap: 48px;
	}

	.nemra-events-feature__heading {
		font-size: var(--nemra-t-h2-size, 36px);
		letter-spacing: var(--nemra-t-h2-ls, -1.5px);
	}
}

@media (max-width: 768px) {
	.nemra-events-feature {
		/* Taller card than the old 426: the comp's copy block runs a 2-line
		   serif title, a 3-line description AND the CTA row. */
		--nemra-ef-card-height: 470px;
		gap: 24px;
	}

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

	/* Mobile V2: 36px throughout — the comp sets the emphasized word at the
	   SAME size as the rest of the heading, not a step up. */
	.nemra-events-feature__heading {
		font-size: 36px;
		line-height: 1.2;
		letter-spacing: -1.5px;
	}

	.nemra-events-feature__heading-em {
		font-size: inherit;
	}

	/* Comp splits the controls to opposite ends of the block on mobile. */
	.nemra-events-feature__nav {
		width: 100%;
		justify-content: space-between;
	}

	/* Cards: 20px inner padding to match the mobile comp. */
	.nemra-events-feature__card {
		padding: 20px;
	}

	/* The photo needs to give up more of the card to the navy so the serif
	   title and description hold contrast at this size. */
	.nemra-events-feature__card-overlay {
		background: linear-gradient(
			to bottom,
			rgba(4, 42, 72, 0) 26%,
			rgba(4, 42, 72, 0.86) 58%,
			var(--nemra-blue-dark, #042a48) 78%
		);
	}

	.nemra-events-feature__card-content {
		gap: 16px;
	}

	/* Card title stays on Heading/H5, whose mobile mode is 24 — the mobile
	   card comp 538:8500 binds Size/h5 and resolves 24, not a midpoint. */
	.nemra-events-feature__card-title {
		font-size: var(--nemra-t-h5-size, 24px);
	}

	.nemra-events-feature__card-desc {
		font-size: 14px;
	}

	/* Card CTA is UI/Button-1 — 12 on a 20px line in the mobile mode. */
	.nemra-events-feature__card-cta-label {
		font-size: var(--nemra-t-btn-size, 12px);
		line-height: var(--nemra-t-btn-lh, 20px);
	}

	.nemra-events-feature__card-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* Duration + lock note keep their single-line row on mobile. */
	.nemra-events-feature__card-footer--access {
		flex-direction: row;
		align-items: flex-end;
	}

	.nemra-events-feature__card-desc {
		max-width: none;
	}
}