/* ==========================================================================
   Event Body (neilkelly/event-body)
   Figma: Registration — Eventbrite (2075:1277)
   The two-column region of a single Event: inner-block sections in the left
   column, a sticky Registration card in the right rail. 850 + 56 + 390 = 1296,
   which is the site's own content width — the left column is not given a width,
   it takes what the rail and the gap leave, so the three figures can never drift
   apart.

   THIS BLOCK OWNS THE REGION'S LAYOUT. Its children are full-width sections in
   their own right, so their gutter, measure and band are neutralised below rather
   than in their own stylesheets — that way each child still stands alone if it is
   ever used outside this wrapper, and the override lives with the thing that
   causes it. The selectors are deliberately over-specific: block stylesheets load
   in directory order (event-body before event-details), so an equal-specificity
   rule here would lose.

   Token-driven, plain CSS.
   Wrapper: .wp-block-neilkelly-event-body.nk-event-body
   ========================================================================== */

/* position: sticky needs an ancestor chain with no scroll container. The hero
   block's global `html, body { overflow-x: hidden }` (loaded site-wide) forces
   overflow-y to `auto`, which makes body a scroll container and silently kills
   the rail. `clip` prevents horizontal scroll the same way WITHOUT creating one.
   Scoped by :has() to pages carrying this block, and outranking the plain
   `html, body` rule on specificity so load order does not matter. Same fix, same
   reason as neilkelly/content-detail-body. */
html:has(.wp-block-neilkelly-event-body),
body:has(.wp-block-neilkelly-event-body) {
	overflow-x: clip;
}

.wp-block-neilkelly-event-body.nk-event-body {
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

.wp-block-neilkelly-event-body .nk-event-body__grid {
	display: flex;
	/* flex-start, not stretch: a stretched rail is full-height, and a sticky
	   element inside a full-height box has nowhere to travel. */
	align-items: flex-start;
	gap: var(--wp--custom--components--events--body-column-gap);
	width: 100%;
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
}

.wp-block-neilkelly-event-body .nk-event-body__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

/* ── Children handed their layout back ─────────────────────────────────── */
/* The sections inside the column are ordinary full-width blocks elsewhere. Here
   the wrapper owns the gutter, the measure and the band, so theirs are removed.
   Four classes deep to beat the child's own two-class rule regardless of which
   stylesheet loads first. */
.wp-block-neilkelly-event-body .nk-event-body__main > .wp-block-neilkelly-event-details.nk-event-details,
.wp-block-neilkelly-event-body .nk-event-body__main > .wp-block-neilkelly-event-presenters.nk-event-presenters,
.wp-block-neilkelly-event-body .nk-event-body__main > .wp-block-neilkelly-location-anchor.nk-location-anchor {
	padding: 0;
	background: transparent;
}

.wp-block-neilkelly-event-body .nk-event-body__main .nk-event-details__inner,
.wp-block-neilkelly-event-body .nk-event-body__main .nk-event-presenters__inner,
.wp-block-neilkelly-event-body .nk-event-body__main .nk-location-anchor__container {
	max-width: none;
	margin-inline: 0;
	/* location-anchor pads its own container rather than its section, so that has
	   to go too — the wrapper owns the gutter for everything in this column. */
	padding-inline: 0;
}

/* ── Sticky rail ───────────────────────────────────────────────────────── */
.wp-block-neilkelly-event-body .nk-event-body__rail {
	position: sticky;
	top: var(--wp--custom--components--events--body-sticky-top);
	flex: 0 0 var(--wp--custom--components--events--body-rail-width);
	width: var(--wp--custom--components--events--body-rail-width);
	box-sizing: border-box;
}

/* Logged-in admin bar: WP's bar is position:fixed on desktop and the sticky site
   header drops below it, so this rail — whose offset is measured from that header
   — has to drop by the same amount or it parks underneath the bar. 32px is WP's
   fixed desktop admin-bar height, not a theme design token, which is why it is a
   literal here; blocks/site-header/style.css hardcodes the same figure for the
   same reason. The .admin-bar prefix also keeps specificity above the base rule.

   No ≤782px variant: WP's bar is position:absolute there and scrolls away, and
   this rail stops being sticky at ≤1023px anyway, so the declaration is inert
   below the breakpoint. */
.admin-bar .wp-block-neilkelly-event-body .nk-event-body__rail {
	top: calc(var(--wp--custom--components--events--body-sticky-top) + 32px);
}

/* ── Registration card ─────────────────────────────────────────────────── */
.wp-block-neilkelly-event-body .nk-event-body__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	padding: var(--wp--preset--spacing--8);
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--card);
	box-sizing: border-box;
}

.wp-block-neilkelly-event-body .nk-event-body__card-head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

/* Red, but not a CTA — an accent label, which CLAUDE.md still allows red for.
   brand-red on white is 4.9:1, over AA for this 12px bold. */
.wp-block-neilkelly-event-body .nk-event-body__card-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--none);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
}

/* 24px in Figma; the scale has no 24px, so `lg` (25px) — the same 1px
   reconciliation the Details section's headings make. */
.wp-block-neilkelly-event-body .nk-event-body__card-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	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-event-body .nk-event-body__card-meta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.wp-block-neilkelly-event-body .nk-event-body__card-date {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--brand-black);
}

.wp-block-neilkelly-event-body .nk-event-body__card-line {
	margin: 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--snug);
	color: var(--wp--preset--color--ink-secondary);
}

/* Primary CTA on a light surface → black, per the brand rule. */
.wp-block-neilkelly-event-body .nk-event-body__card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3-5) var(--wp--preset--spacing--7);
	background: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--lg);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.wp-block-neilkelly-event-body .nk-event-body__card-btn:hover,
.wp-block-neilkelly-event-body .nk-event-body__card-btn:focus-visible {
	/* Black can't darken — one step toward grey, per the brand hover rule. */
	background: var(--wp--preset--color--neutral-800);
}

.wp-block-neilkelly-event-body .nk-event-body__card-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
}

.wp-block-neilkelly-event-body .nk-event-body__card-arrow { flex-shrink: 0; }

.wp-block-neilkelly-event-body .nk-event-body__card-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	text-align: center;
	color: var(--wp--preset--color--ink-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-event-body .nk-event-body__card-btn { transition: none; }
}

/* --- Responsive --- */
@media (max-width: 1023px) {
	.wp-block-neilkelly-event-body.nk-event-body {
		padding-inline: var(--wp--preset--spacing--12);
	}
	/* One column. The rail stops sticking and becomes an ordinary block after the
	   content — its DOM position — so reading order and focus order stay the same
	   as the visual order. */
	.wp-block-neilkelly-event-body .nk-event-body__grid {
		flex-direction: column;
		gap: var(--wp--preset--spacing--12);
	}
	.wp-block-neilkelly-event-body .nk-event-body__rail {
		position: static;
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-event-body.nk-event-body {
		padding-inline: var(--wp--preset--spacing--6);
	}
	.wp-block-neilkelly-event-body .nk-event-body__card {
		padding: var(--wp--preset--spacing--6);
	}
}