/**
 * Pattern: Event single  (templates/single-kd_event.html)
 *
 * Styles the kd_event CPT single template:
 *   1. (removed 2026-07-06) hero eyebrow — event date now lives only in the
 *      event-info meta group below the hero (see section 3); the hero shows
 *      breadcrumb + title only. The eyebrow's render_block filter (formerly
 *      inc/single-kd-event.php) was deleted along with the file.
 *   2. kd-event-single__body     — constrained reading column (~1000px, left-flush).
 *   3. .kde-single / .kde-single-meta / .kde-btn etc. — plugin-injected event
 *      details block, reskinned to theme tokens. No plugin files are touched.
 *   5. kd-event-single__foot     — Share + calendar export links row before footer.
 *
 * Design source: Figma node 23:1752 ("Event Template", 1440×4197).
 *
 * Figma measurements (1440px frame, content column at x=110):
 *   Hero:         full-width gradient band, y=135, h=329px.
 *   Eyebrow:      node 40:4913, x=110, y=580 — "MAY 16" 20px Bold, uppercase.
 *   Title H1:     node 40:4912, x=110, y=617 — 56px Bold, w=684px.
 *   Body text:    x=110, 18px/28px body ink. Same left edge as hero title.
 *
 * Plugin provides: .kde-single .kde-single-meta .kde-single-metaitem
 *   .kde-single-actions .kde-btn .kde-btn-fill .kde-btn-outline .kde-tag
 * These already consume KD Starter brand tokens via --kd-cal-accent (= purple primary).
 * Theme overrides here remove the plugin's card-box appearance (Figma shows
 * plain text meta, not an infobox) and tighten spacing to the reading column.
 *
 * Auto-enqueued by inc/enqueue.php glob over assets/css/patterns/*.css.
 * One pattern = one CSS partial. Prefix: .kd-event-single__* .kde-*.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — event date eyebrow (removed 2026-07-06; date lives in the meta
      group in section 3 below). Hero shows breadcrumb + title only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   2. EVENT BODY — constrained reading column
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Wraps core/post-content. The plugin prepends .kde-single before the body text.
 * Padding mirrors .kd-news-article__body (56px top / 80px bottom).
 */
.kd-event-single__body {
	padding-block: 3.5rem 5rem; /* 56px top, 80px bottom */
}

/*
 * Wide-screen alignment (systemic finding #1). The hero title centres on the
 * 1512px band (--kd-content-max) via the hero rule, but has-global-padding
 * anchors the body + foot to the root gutter (clamp → 144px max). On monitors
 * wider than the band the reading column + foot row drift left of the hero and
 * the header logo (e.g. 144px vs 517px at 2560). --kd-edge-pad = max(gutter,
 * (100% − 1512px)/2): equals the gutter on narrow screens but tracks the centred
 * band on wide ones — so post-content + foot line up under the hero at every
 * width. Scoped (0,2,0) to beat has-global-padding's :root :where() (0,1,0).
 * The inner columns stay flush-left within this padding via their existing
 * margin-inline:0 auto. (Same pattern applies to news singles — finding #1.)
 */
.kd-single--event .kd-event-single__body,
.kd-single--event .kd-event-single__foot {
	padding-inline: var(--kd-edge-pad);
}

/*
 * Left-flush reading column — same derivation as news-article.css.
 * Figma body text x=110 (same content edge as hero title). Cap at 62.5rem (~1000px).
 * FSE constrained layout forces margin:auto on post-content → !important pins left.
 * Identical scoped override used in news-article.css.
 */
.kd-event-single__body .wp-block-post-content {
	max-width: var(--kd-measure-reading); /* reading column */
	margin-inline: 0 auto !important;
}

/* Post body typography — 18px/28px (Figma 40:4934) */
.kd-event-single__body .wp-block-post-content p,
.kd-event-single__body .wp-block-post-content li {
	font-size: var(--kd-size-body-lg); /* 1.15rem / ~18px */
	line-height: 1.65;
	color: var(--kd-color-body);
}

.kd-event-single__body .wp-block-post-content h2 {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.5vw, 1.75rem); /* 22px → 28px */
	color: var(--kd-color-contrast);
	margin-block: var(--kd-space-lg) var(--kd-space-sm);
}

.kd-event-single__body .wp-block-post-content h3 {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px → 22px */
	color: var(--kd-color-contrast);
	margin-block: var(--kd-space-md) var(--kd-space-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PLUGIN EVENT DETAILS — .kde-single reskin
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * The plugin prepends .kde-single before the post body inside core/post-content
 * via render_block (SingleEvent.php). Plugin CSS applies:
 *   background: var(--kd-cal-surface)  — light neutral card box
 *   border-left: 4px solid var(--kde-type, var(--kd-cal-accent))
 *   padding: 1.5rem · border-radius: 12px · margin: 0 0 2rem
 *
 * Figma shows plain text meta (no card box, no accent bar). Override: strip the
 * card-box appearance AND the left inset, so the meta content sits flush-left,
 * aligned to the container edge (hero title / breadcrumb / logo / Share button).
 * All rules scoped to prevent bleed.
 */

/* Strip card-box background + inset (Figma = plain text meta).
 * core/post-content is is-layout-constrained, so WP centres its direct children
 * (incl. the plugin-injected .kde-single) at content-size — pushing the block
 * ~190px right of the hero edge. max-width:none lets it fill the band; WP's
 * margin:auto (!important, on constrained children) then collapses to 0, landing
 * it flush-left with the hero title / breadcrumb. (The map is re-capped below so
 * it doesn't balloon past the reading column when SHOW_MAP is enabled.) */
.kd-event-single__body .kde-single {
	max-width: none;
	background: transparent;
	padding: 0; /* flush-left — meta content aligns to the container start (hero/logo/share), no left-border to inset for */
	margin-bottom: var(--kd-space-xl); /* 64px gap before the post body text */
	border-radius: 0;
}

/* Meta list — icon + text rows (date/time, location, event type) */
.kd-event-single__body .kde-single-meta {
	margin-bottom: var(--kd-space-md); /* 24px → actions */
	gap: var(--kd-gap-tight); /* 8px between rows — tight, one fact per row */
}

.kd-event-single__body .kde-single-metaitem {
	font-size: var(
		--kd-size-body-lg
	); /* 18px — Figma: same 18px as body text */
	line-height: 1.6;
	color: var(--kd-color-body);
	gap: var(--kd-space-xs); /* 8px icon → text */
}

/* Plugin SVG icons — already coloured via --kd-cal-accent (purple). Tighten size. */
.kd-event-single__body .kde-single-metaitem .kde-icon {
	font-size: 1.1rem; /* 17.6px — let the plugin icon size rule stand */
	flex-shrink: 0;
}

/* Date strong label — slightly darker for scan hierarchy */
.kd-event-single__body .kde-single-metaitem strong {
	font-weight: 700;
	color: var(--kd-color-contrast);
}

/* Location → Google Maps link (plugin single-event.php wraps location in <a>) */
.kd-event-single__body .kde-single-metaitem a.kde-single-maplink {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--kd-color-neutral-300);
	transition:
		color var(--kd-transition-fast),
		text-decoration-color var(--kd-transition-fast);
}

.kd-event-single__body .kde-single-metaitem a.kde-single-maplink:hover,
.kd-event-single__body .kde-single-metaitem a.kde-single-maplink:focus-visible {
	color: var(--kd-color-link);
	text-decoration-color: var(--kd-color-link);
}

/* Event type tag — pill (plugin uses .kde-tag inside a metaitem li) */
.kd-event-single__body .kde-tag {
	display: inline-block;
	padding: 0.125rem 0.625rem; /* 2px 10px — compact pill */
	border-radius: var(--kd-radius-pill);
	font-family: var(--kd-font-body);
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	/* White on --kd-color-primary (#2383EB) at 12px is 3.81:1 and fails AA, so the
	   pill is navy/ink with white text instead. */
	background-color: var(--kd-color-contrast);
	color: var(--kd-color-base);
}

/* Actions row — CTA + add-to-calendar buttons */
.kd-event-single__body .kde-single-actions {
	gap: var(--kd-space-sm); /* 16px */
	margin-top: var(--kd-space-md); /* 24px ↑ meta list */
}

/*
 * Plugin buttons — .kde-btn already uses --kd-cal-accent (= purple) for border
 * and fill via the plugin's kd-events.css. Nudge size to match KD Starter pill buttons.
 * Specificity 0,2,0 beats plugin's 0,1,0 cleanly — no !important needed.
 */
.kd-event-single__body .kde-btn {
	padding: 0.75rem 1.75rem; /* 12px 28px — KD Starter pill proportions */
	font-size: 0.9375rem; /* 15px — between plugin 0.85rem + system 1rem */
	border-radius: var(--kd-radius-pill);
	transition:
		background-color var(--kd-transition-fast),
		color var(--kd-transition-fast),
		border-color var(--kd-transition-fast);
}

/* Filled CTA — "Get tickets" etc. */
.kd-event-single__body .kde-btn-fill {
	background-color: var(--kd-color-primary);
	color: var(--kd-color-base);
	border-color: var(--kd-color-primary);
}

.kd-event-single__body .kde-btn-fill:hover,
.kd-event-single__body .kde-btn-fill:focus-visible {
	background-color: var(--kd-color-secondary); /* indigo #252265 */
	border-color: var(--kd-color-secondary);
}

/* Outlined — "Add to calendar" */
.kd-event-single__body .kde-btn-outline {
	background-color: transparent;
	color: var(--kd-color-link);
	border-color: var(--kd-color-primary);
}

.kd-event-single__body .kde-btn-outline:hover,
.kd-event-single__body .kde-btn-outline:focus-visible {
	color: var(--kd-color-secondary);
	border-color: var(--kd-color-secondary);
}

/* Map block (lazy-loaded iframe or static map image) */
.kd-event-single__body .kde-single .kde-map {
	max-width: var(
		--kd-measure-reading
	); /* cap to the reading column — .kde-single is now full-band (max-width:none) */
	margin-top: var(--kd-space-lg); /* 40px ↑ actions */
	border-radius: var(
		--kd-radius-lg
	); /* 24px — Figma node 119:4854: 24px radius */
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1023.98px) ──────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
	.kd-event-single__body .wp-block-post-content {
		max-width: 100%;
	}

	.kd-event-single__body {
		padding-block: 2.5rem 3.5rem;
	}
}

/* ── Mobile (≤767.98px) ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.kd-event-single__body {
		padding-block: 2rem 2.5rem;
	}

	.kd-event-single__body .kde-single {
		margin-bottom: var(
			--kd-space-lg
		); /* 40px — tighter on mobile (padding already flush from base) */
	}

	/* Stack action buttons full-width on mobile (matches mobile-spec.md CTA rule) */
	.kd-event-single__body .kde-single-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.kd-event-single__body .kde-btn {
		text-align: center;
		justify-content: center;
	}
}

/* ── Small mobile (≤374.98px) ─────────────────────────────────────────── */
@media (max-width: 374.98px) {
	.kd-event-single__body .kde-single-metaitem {
		font-size: var(--kd-size-body); /* 16px — prevent overflow on 320px */
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FOOT ROW — Share (left) + calendar export links (right)
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-single__foot {
	padding-block: 0 var(--kd-space-xl); /* 0 top · 64px bottom before footer */
}

/*
 * Left-flush 62.5rem column — mirrors .kd-event-single__body .wp-block-post-content
 * so the foot row's left edge aligns with the event body. The width goes on the ROW
 * (not the constrained .kd-event-single__foot wrapper, whose global padding would
 * otherwise shrink the row and force Share + calendar links to wrap). nowrap keeps
 * them on one line at desktop; the mobile media query switches to a column.
 */
.kd-event-single__foot-row {
	max-width: var(--kd-measure-reading); /* reading column */
	margin-inline: 0 auto !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--kd-space-md);
}

/*
 * The Share pattern is normally a standalone full-bleed section (gutter
 * padding-inline + 40/64px padding-block). Inside this flex row that padding
 * makes it ~144px wide-indented and vertically bulky, breaking the row. Strip it
 * here so Share sits compact + flush-left, aligned with the body column above.
 */
.kd-event-single__foot .kd-share {
	padding: 0;
}

/*
 * Scoped under .kd-event-single__foot (not bare .kde-cal-link): inc/enqueue.php
 * globs every patterns/*.css onto EVERY page, and [kd_event_calendar] is a
 * registered shortcode an editor could drop anywhere — bare selectors would
 * leak this event-single styling onto other content. Scoping also makes the
 * reskin (0,2,0) beat the plugin's own .kde-cal-link (0,1,0) by specificity,
 * not enqueue load-order luck.
 */
.kd-event-single__foot .kde-cal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kd-space-md);
	align-items: center;
}

.kd-event-single__foot .kde-cal-link {
	font-family: var(--kd-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kd-color-link);
	text-decoration: none;
}

.kd-event-single__foot .kde-cal-link:hover,
.kd-event-single__foot .kde-cal-link:focus-visible {
	color: var(--kd-color-secondary);
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.kd-event-single__foot-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. TWO-COLUMN BODY + MAP + META ICONS
   Template: details + body left (62%), featured art + CTA right (38%); map
   before the share/calendar row. See templates/single-kd_event.html.
   ══════════════════════════════════════════════════════════════════════════ */

/* Body columns: details + copy left, featured artwork right (shown whole). */
.kd-event-single__cols {
	align-items: flex-start;
}

.kd-event-single__aside {
	position: sticky;
	/* Clear the sticky site header (+ admin bar when logged in) — same idiom as
	   anchor-nav.css. */
	top: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--kd-mainbar-height) +
			var(--kd-space-md)
	);
}

.kd-event-single__aside .kd-event-single__art img {
	display: block;
	width: 100%;
	height: auto; /* poster-shaped art is never cropped on the single */
	border-radius: var(--kd-radius-lg); /* 24px, like the cards */
}

/* No featured image and no CTA → the aside renders empty; collapse it so the
   copy takes the full reading measure instead of leaving a 38% gap.
   NB: :has() cannot be nested (a `:has(:not(:has()))` selector is invalid and the
   whole rule is dropped), so "aside has neither" is expressed as one flat
   :not(:has(a, b)) on the columns wrapper. */
.kd-event-single__cols:not(
		:has(
			.kd-event-single__aside img,
			.kd-event-single__aside .kd-event-single__cta
		)
	)
	.kd-event-single__aside {
	display: none;
}

.kd-event-single__cols:not(
		:has(
			.kd-event-single__aside img,
			.kd-event-single__aside .kd-event-single__cta
		)
	)
	.kd-event-single__main {
	flex-basis: 100% !important; /* beats the block's inline flex-basis */
}

/* The branded placeholder tile (inc/card-fallback.php) is for cards, not for the
   single: with no poster the aside shows nothing (or just the CTA). */
.kd-event-single__art.kd-card-fallback {
	display: none;
}

/* Meta rows — calendar / clock / pin / user, one fact per row. */
.kd-event-single__body .kde-single-metaitem--date strong {
	font-size: var(--kd-size-body-lg);
}

.kd-event-single__body .kde-single-metaitem .kde-icon-calendar {
	color: var(
		--kd-color-primary
	); /* graphic, not text: 3.81:1 clears the 3:1 UI minimum */
}

/* The plugin's 4px type-colour bar (border-left on .kde-single) is not part of
   this design; the reskin above removed the box but left the bar. */
.kd-event-single__body .kde-single {
	border-left: 0;
}

/* Map at content width before the share + calendar row, rounded like the cards.
   The plugin's click-to-load placeholder (.kde-map-load) fills the band until the
   visitor loads it; the iframe replaces it at the same height. */
.kd-event-single__map {
	margin-block: 0 var(--kd-space-xl); /* 64px to the foot row */
}

.kd-event-single__map .kd-event-map,
.kd-event-single__map .kde-map {
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: var(--kd-radius-lg); /* 24px */
	overflow: hidden;
}

.kd-event-single__map .kde-map {
	border: 0;
	background: var(--kd-color-neutral-100);
}

.kd-event-single__map .kde-map iframe,
.kd-event-single__map .kde-map .kde-map-load {
	width: 100%;
	height: 26.25rem; /* 420px */
	min-height: 26.25rem;
	border: 0;
}

.kd-event-single__map .kde-map iframe {
	display: block;
}

/* CTA under the featured image — spans the image column. */
.kd-event-single__aside .kd-event-single__cta {
	margin-top: var(--kd-space-md); /* 24px under the art */
}

.kd-event-single__aside .kd-event-single__cta .kde-btn {
	display: block;
	width: 100%;
	text-align: center;
}

@media (max-width: 1023.98px) {
	.kd-event-single__aside {
		position: static;
	}
}

@media (max-width: 767.98px) {
	.kd-event-single__map .kde-map iframe,
	.kd-event-single__map .kde-map .kde-map-load {
		height: 18rem; /* 288px */
		min-height: 18rem;
	}
}