/* ==========================================================================
   Events Featured Workshop (neilkelly/events-featured)
   Figma: 19 — Events Hub / 5 — Workshops & Events (2570:1132)
   Token-driven, plain CSS. White band: media (image + scrim + FEATURED badge +
   optional play) beside content (title, date, format badge, desc, two CTAs).
   Wrapper: .wp-block-neilkelly-events-featured.nk-events-featured
   ========================================================================== */
.wp-block-neilkelly-events-featured.nk-events-featured {
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	/* Asymmetric: the top is half the bottom, so the panel sits closer to the
	   breadcrumbs above it than to the Upcoming grid below. */
	padding-block: var(--wp--custom--components--events--featured-pad-top) var(--wp--custom--components--events--featured-pad-bottom);
	box-sizing: border-box;
}

.wp-block-neilkelly-events-featured .nk-events-featured__inner {
	display: flex;
	gap: var(--wp--custom--components--events--featured-col-gap);
	align-items: flex-start;
	width: 100%;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

/* ── Media ─────────────────────────────────────────────────────────────── */
/* Shrinks below its Figma width rather than holding it: at a 1024–1200px
   viewport a fixed 768px media left the content column 64–140px wide. Basis +
   shrink means the media is exactly 768px once there is room for it (>=1440px)
   and gives ground proportionally below that. */
.wp-block-neilkelly-events-featured .nk-events-featured__media {
	position: relative;
	flex: 0 1 var(--wp--custom--components--events--featured-image-width);
	min-width: 0;
	aspect-ratio: var(--wp--custom--components--events--featured-image-ratio);
	overflow: hidden;
}

.wp-block-neilkelly-events-featured .nk-events-featured__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-neilkelly-events-featured .nk-events-featured__placeholder {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--surface-subtle);
}

.wp-block-neilkelly-events-featured .nk-events-featured__scrim {
	position: absolute;
	inset: 0;
	background: var(--wp--custom--components--events--featured-image-scrim);
	pointer-events: none;
}

/* The whole media is the click target, not just the circle: the anchor covers the
   image and centres the badge inside it. z-index sits it above the FEATURED badge
   (z-index 1) so no part of the media is dead to the pointer — the badge is
   decorative text, so nothing is lost by covering it. */
.wp-block-neilkelly-events-featured .nk-events-featured__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* The visible affordance — what used to be the anchor itself. */
.wp-block-neilkelly-events-featured .nk-events-featured__play-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--components--events--play-size);
	height: var(--wp--custom--components--events--play-size);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--custom--components--events--play-bg);
	box-shadow: var(--wp--custom--shadow--elev-4);
	transition: transform 200ms ease;
}

.wp-block-neilkelly-events-featured .nk-events-featured__play:hover .nk-events-featured__play-badge,
.wp-block-neilkelly-events-featured .nk-events-featured__play:focus-visible .nk-events-featured__play-badge {
	transform: scale(1.06);
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-neilkelly-events-featured .nk-events-featured__play-badge {
		transition: none;
	}

	.wp-block-neilkelly-events-featured .nk-events-featured__play:hover .nk-events-featured__play-badge,
	.wp-block-neilkelly-events-featured .nk-events-featured__play:focus-visible .nk-events-featured__play-badge {
		transform: none;
	}
}

.wp-block-neilkelly-events-featured .nk-events-featured__play-icon {
	width: 0;
	height: 0;
	margin-inline-start: var(--wp--preset--spacing--1);
	border-block: var(--wp--preset--spacing--3) solid transparent;
	border-inline-start: var(--wp--preset--spacing--4-5) solid var(--wp--preset--color--brand-red);
	border-inline-end: 0;
}

.wp-block-neilkelly-events-featured .nk-events-featured__play:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 2px;
}

/* ── Badges (shared) ───────────────────────────────────────────────────── */
/* Same pill treatment and tokens as nk-blog-hub__tag, nk-reviews-featured__market
   and the learning-hub-articles port — one pill across the site. Keep the four in
   step. The transparent border is this badge's own concern: the in-person variant
   below outlines instead of filling, and reserving the border here keeps all three
   variants (featured, online, in-person) the same height. */
.wp-block-neilkelly-events-featured .nk-events-featured__badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius--full);
	border: 1px solid transparent;
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-neilkelly-events-featured .nk-events-featured__badge--featured,
.wp-block-neilkelly-events-featured .nk-events-featured__badge--online {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-events-featured .nk-events-featured__badge--in-person {
	background: transparent;
	color: var(--wp--preset--color--brand-red);
	border-color: var(--wp--preset--color--brand-red);
}

.wp-block-neilkelly-events-featured .nk-events-featured__badge--featured {
	position: absolute;
	top: var(--wp--preset--spacing--5);
	left: var(--wp--preset--spacing--5);
	z-index: 1;
}

/* ── Content ───────────────────────────────────────────────────────────── */
.wp-block-neilkelly-events-featured .nk-events-featured__content {
	display: flex;
	/* Basis holds a readable measure while the media shrinks alongside it; grow
	   takes the slack once the media has reached its full width. */
	flex: 1 1 var(--wp--custom--components--events--featured-content-basis);
	min-width: 0;
	flex-direction: column;
	gap: var(--wp--custom--components--events--featured-content-gap);
}

.wp-block-neilkelly-events-featured .nk-events-featured__title {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-events-featured .nk-events-featured__date {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--components--events--featured-date-tracking);
	color: var(--wp--preset--color--brand-red);
}

/* Venue — its own line under the date, muted (NOT the red date accent). Pulled up so it
   pairs with the date above rather than sitting a full content-gap away. */
.wp-block-neilkelly-events-featured .nk-events-featured__venue {
	margin: calc(var(--wp--custom--components--events--featured-content-gap) * -0.6) 0 0;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-secondary);
}

.wp-block-neilkelly-events-featured .nk-events-featured__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
}

.wp-block-neilkelly-events-featured .nk-events-featured__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--components--events--featured-cta-gap);
	padding-top: var(--wp--preset--spacing--2);
}

.wp-block-neilkelly-events-featured .nk-events-featured__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: var(--wp--custom--components--events--featured-cta-height);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--lg);
	border: var(--wp--custom--components--events--featured-btn-border-width) solid transparent;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.wp-block-neilkelly-events-featured .nk-events-featured__btn--primary {
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-events-featured .nk-events-featured__btn--primary:hover,
.wp-block-neilkelly-events-featured .nk-events-featured__btn--primary:focus-visible {
	background: var(--wp--preset--color--surface-dark-2);
	border-color: var(--wp--preset--color--surface-dark-2);
}

.wp-block-neilkelly-events-featured .nk-events-featured__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--surface-dark);
	border-color: var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-events-featured .nk-events-featured__btn--secondary:hover,
.wp-block-neilkelly-events-featured .nk-events-featured__btn--secondary:focus-visible {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-events-featured .nk-events-featured__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.wp-block-neilkelly-events-featured .nk-events-featured__inner {
		flex-direction: column;
	}
	/* Column layout: the media spans the full width, so basis (which now sizes
	   the cross axis) is released and the aspect ratio carries the height. */
	.wp-block-neilkelly-events-featured .nk-events-featured__media {
		flex: 0 0 auto;
		width: 100%;
	}
	/* Same reason: a 380px basis would become a 380px minimum HEIGHT here. */
	.wp-block-neilkelly-events-featured .nk-events-featured__content {
		flex: 0 0 auto;
		width: 100%;
	}
	.wp-block-neilkelly-events-featured .nk-events-featured__title {
		font-size: var(--wp--preset--font-size--xl);
	}
}

@media (max-width: 767px) {
	/* Halved on top here too — leaving mobile at a flat 64px would have made the
	   mobile top gap larger than the desktop one. */
	.wp-block-neilkelly-events-featured.nk-events-featured {
		padding-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	}
	.wp-block-neilkelly-events-featured .nk-events-featured__inner {
		padding-inline: var(--wp--preset--spacing--6);
	}
	.wp-block-neilkelly-events-featured .nk-events-featured__title {
		font-size: var(--wp--preset--font-size--lg-xl);
	}
	.wp-block-neilkelly-events-featured .nk-events-featured__desc {
		font-size: var(--wp--preset--font-size--base);
	}
	.wp-block-neilkelly-events-featured .nk-events-featured__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.wp-block-neilkelly-events-featured .nk-events-featured__btn {
		width: 100%;
	}
}

/* ── Video lightbox (view.js) ──────────────────────────────────────────────
   The media is a link first; this only styles the enhanced path. Structure and
   timing follow neilkelly/learning-hub-webinar (itself following
   blocks/project-gallery), so the video dialogs behave identically. */
.wp-block-neilkelly-events-featured .nk-events-featured__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--12);
	box-sizing: border-box;
}

.wp-block-neilkelly-events-featured .nk-events-featured__lightbox[hidden] {
	display: none;
}

.wp-block-neilkelly-events-featured .nk-events-featured__backdrop {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--surface-dark-overlay);
}

.wp-block-neilkelly-events-featured .nk-events-featured__panel {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--components--events--video-panel-max-width);
	opacity: 0;
	transform: translateY( var(--wp--preset--spacing--4) );
	transition: opacity 200ms ease, transform 200ms ease;
}

.wp-block-neilkelly-events-featured .nk-events-featured__lightbox.is-open .nk-events-featured__panel {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-neilkelly-events-featured .nk-events-featured__panel {
		transition: none;
	}
}

.wp-block-neilkelly-events-featured .nk-events-featured__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand-black);
}

.wp-block-neilkelly-events-featured .nk-events-featured__frame iframe,
.wp-block-neilkelly-events-featured .nk-events-featured__frame video,
.wp-block-neilkelly-events-featured .nk-events-featured__frame > * {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wp-block-neilkelly-events-featured .nk-events-featured__close {
	position: absolute;
	right: 0;
	bottom: calc( 100% + var(--wp--preset--spacing--3) );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-white);
	cursor: pointer;
}

.wp-block-neilkelly-events-featured .nk-events-featured__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 2px;
}

/* Scroll lock while the dialog is open (set on <html> by view.js). */
.nk-event-video-modal-open {
	overflow: hidden;
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-events-featured { margin-block: 0; }