/**
 * Pattern: Event single  (templates/single-kd_event.html)
 *
 * Styles the kd_event CPT single template:
 *   1. kd-event-single__hero-meta — date/location line under the hero H1
 *      (Figma 6:336); filled by blg_event_single_hero_meta() (inc/event-meta.php).
 *   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.
 *   4. kd-event-single__featured — in-body featured-image figure (see below).
 *   5. kd-event-single__foot     — Share + calendar export links row before footer.
 *
 * Design source: Figma node 23:1752 ("Event Template", 1440×4197) for the base
 * body/plugin-reskin (sections 2–5, pre-existing); BLGA re-comp node 6:336
 * (pages-final-sweep pass, 2026-08-21) for section 1 + the CTA color below.
 *
 * morning-r5 (2026-08-21, client direction, SUPERSEDES the prior §1 hero
 * approach): the hero no longer shows the featured image. A real event's key
 * art (flyer-style graphic, "Good Business Awards") crowded the white H1/meta
 * text — Alain's call: strip useFeaturedImage from the hero cover in
 * templates/single-kd_event.html (template attr, not a CSS suppression) so it
 * renders the same flat Deep Petrol band as every other interior hero
 * (`.kd-hero-interior:not(:has(img))` already does this for free — no CSS
 * change needed there). The featured image instead renders inside the body,
 * as a contained rounded figure at the top of the reading column
 * (`wp:post-featured-image` in the template, styled by §4 below) — automatic
 * per event, degrades to nothing when an event has no featured image (core
 * block behavior, verified).
 *
 * Figma measurements (1440px frame, content column at x=110):
 *   Hero:         full-width gradient band, y=135, h=329px (pre-r5; hero is
 *                 now flat-color only, see the r5 note above).
 *   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 BLG 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.
 *
 * RESOLVED (decision 23, 2026-08-21): §3b recolors the ticket CTA per the amended CLAUDE.md rule (clay = money-action CTAs incl. ticket purchase, approved comp 6:336). Original note: recolors the ticket CTA
 * (.kde-btn-fill) to Georgia Clay (accent-2) to match node 6:336's "GET YOUR
 * TICKET" pill pixel-for-pixel — but CLAUDE.md's own documented rule (see
 * cta-band.css's donate-button comment) states Clay is reserved for Donate
 * CTAs only ("the only place clay is interactive"). Built to match the Figma
 * pixels per the build rule ("build from the Figma node, not guesses") and the
 * explicit brief for this sweep; flagging the conflict for Alain/reviewer to
 * confirm rather than resolving it silently either way.
 *
 * ⚠️ FLAG: node 6:336's right-column ticket-info CARD (date/time/location +
 * CTA + "Ticketing via X" + Share icons, boxed) and the "More events" band
 * (node 6:354) are NOT built here — out of this pass's scope per the brief's
 * explicit "approved simplification" (single-column body + prominent CTA,
 * don't chase the sidebar card) and its enumerated target list (hero+meta row,
 * body column, CTA). The existing flush-left plain-text meta list (no card box)
 * stays as the prior session built it. "More events" would need a new dynamic
 * query section — flagged as a remaining gap, not attempted.
 *
 * Auto-enqueued by inc/enqueue.php glob over assets/css/patterns/*.css.
 * One pattern = one CSS partial. Prefix: .kd-event-single__* .kde-*.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — date/location meta row (Figma 6:336). Filled by
      blg_event_single_hero_meta() (inc/event-meta.php); removed entirely when
      the event has neither a start date nor a location.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-single__hero-meta {
	color: var(--blg-color-base);
	opacity: 0.92;
	font-size: var(--blg-size-body-lg); /* 18px — matches the body-copy scale used elsewhere in this hero family */
	line-height: 1.5;
	margin-top: var(--blg-space-xs); /* 8px below the H1 */
	max-width: var(--blg-measure-reading);
}

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

/*
 * Wraps core/post-content. The plugin prepends .kde-single before the body text.
 * Padding mirrors .kd-story-single__body (56px top / reduced bottom because no
 * attribution block follows) and .kd-news-article__body (56px / 80px).
 */
.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 (--blg-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). --blg-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 story/news singles — finding #1.)
 */
.kd-single--event .kd-event-single__body,
.kd-single--event .kd-event-single__foot {
	padding-inline: var(--blg-edge-pad);
}

/*
 * Left-flush reading column — same derivation as news-article.css + story-single.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 story-single.css and news-article.css.
 */
.kd-event-single__body .wp-block-post-content {
	max-width: var(--blg-measure-reading); /* reading column */
	margin-inline: 0 auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. FEATURED IMAGE — in-body figure (morning-r5, client direction: moved out
      of the hero — real event key art crowded the white H1/meta over it, so
      the hero is now flat Deep Petrol only and the image lives here instead,
      as a contained rounded figure ahead of the plugin meta/body). Same
      reading-column width + left edge as the body text below it. Renders
      nothing when the event has no featured image (core block behavior).
   ══════════════════════════════════════════════════════════════════════════ */
.kd-event-single__body .kd-event-single__featured {
	max-width: var(--blg-measure-reading); /* same column as post-content */
	margin-block: 0 var(--blg-space-lg); /* 40px gap before the plugin meta / body text */
	/* Left-flush, not centred (afternoon-r1). `margin: 0 auto` centred the
	   1000px figure inside the body's 1205px padded box, landing it at x=213
	   while the hero title, the plugin meta list, the body copy and the foot
	   row all sit at x=110 — one element out of line with the whole page.
	   !important because the body is is-layout-constrained and WP's own
	   :where() layout rule sets margin-left/right:auto !important on every
	   constrained child; same idiom as .wp-block-post-content just above. */
	margin-inline: 0 auto !important;
}

.kd-event-single__body .kd-event-single__featured img {
	width: 100%;
	height: auto;
	display: block;
}

/* Client cap: tall key art must not dominate the mobile screen (~280-340px). */
@media (max-width: 767.98px) {
	.kd-event-single__body .kd-event-single__featured img {
		max-height: 340px;
		object-fit: cover;
	}
}

/*
 * Prose column — uniform width, left-flush (afternoon-r1).
 * Two separate defects lived here:
 *  1. The template asked for `contentSize:"66ch"`, and `ch` resolves against
 *     EACH element's own font-size — so the 18px paragraphs computed a 749px
 *     measure, the 16px list computed 666px, and the ~28px h2 computed 1134px
 *     (clamped to the 1000px parent). Every block was a different width. Fixed
 *     at the source: the template now passes a font-independent `42rem`.
 *  2. WP's constrained layout then centred each of those different widths in
 *     the 1000px column, so the left edge stair-stepped x=110 / 235 / 277 /
 *     317 down the page. Pinned flush-left here, matching the container rule
 *     above and the hero title / meta / foot row.
 * .kde-single is deliberately NOT re-narrowed (it keeps max-width:none from
 * §3): the plugin meta block and the featured image span the full reading
 * column while the prose sits in a narrower measure inside it — same left
 * edge, deliberate step on the right.
 */
.kd-event-single__body .wp-block-post-content > * {
	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(--blg-size-body-lg); /* 1.15rem / ~18px */
	line-height: 1.65;
	color: var(--blg-color-body);
}

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

.kd-event-single__body .wp-block-post-content h3 {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px → 22px */
	color: var(--blg-color-contrast);
	margin-block: var(--blg-space-md) var(--blg-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) */
	margin-bottom: var(--blg-space-xl); /* 64px gap before the post body text */
	border-radius: 0;
	/* The plugin's 4px accent bar (border-left: 4px solid var(--kde-type)) was
	   never actually removed (afternoon-r1) — the padding comment above said
	   "no left-border to inset for" but the border was still painting a stray
	   vertical rule beside the meta list AND pushing it to x=114 while every
	   other element on the page sits at x=110. Figma 6:336 shows plain text
	   meta with no rule. */
	border: 0;
}

/* Meta list — icon + text rows (date/time, location, event type) */
.kd-event-single__body .kde-single-meta {
	margin-bottom: var(--blg-space-lg); /* 40px → actions */
	gap: var(--blg-space-sm); /* 16px between rows */
}

.kd-event-single__body .kde-single-metaitem {
	font-size: var(
		--blg-size-body-lg
	); /* 18px — Figma: same 18px as body text */
	line-height: 1.6;
	color: var(--blg-color-body);
	gap: var(--blg-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(--blg-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(--blg-color-neutral-300);
	transition:
		color var(--blg-transition-fast),
		text-decoration-color var(--blg-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(--blg-color-primary);
	text-decoration-color: var(--blg-color-primary);
}

/* Event type tag — pill (plugin uses .kde-tag inside a metaitem li) */
.kd-event-single__body .kde-tag {
	display: inline-block;
	padding: 0.25rem 0.875rem;
	border-radius: var(--blg-radius-pill);
	font-family: var(--blg-font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background-color: var(--blg-color-neutral-300);
	color: var(--blg-color-primary);
}

/* Actions row — CTA + add-to-calendar buttons */
.kd-event-single__body .kde-single-actions {
	gap: var(--blg-space-sm); /* 16px */
	margin-top: var(--blg-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 BLG 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 — BLG pill proportions */
	font-size: 0.9375rem; /* 15px — between plugin 0.85rem + system 1rem */
	border-radius: var(--blg-radius-pill);
	transition:
		background-color var(--blg-transition-fast),
		color var(--blg-transition-fast),
		border-color var(--blg-transition-fast);
}

/* Filled CTA — "Get tickets" etc.
 * §3b (pages-final-sweep, 2026-08-21): recolored primary → accent-2 (Georgia
 * Clay) to match Figma 6:336's "GET YOUR TICKET" pill exactly. See the
 * file-level FLAG above — this is a deliberate pixel-match, not an accident;
 * uses the theme.json palette slug directly (same convention as
 * cta-band.css's donate button), not the tokens.css accent-N rotation alias. */
.kd-event-single__body .kde-btn-fill {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--blg-color-base);
	border-color: var(--wp--preset--color--accent-2);
	font-weight: 700;
}

.kd-event-single__body .kde-btn-fill:hover,
.kd-event-single__body .kde-btn-fill:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, black);
}

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

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

/* Map block (lazy-loaded iframe or static map image) */
.kd-event-single__body .kde-single .kde-map {
	max-width: var(
		--blg-measure-reading
	); /* cap to the reading column — .kde-single is now full-band (max-width:none) */
	margin-top: var(--blg-space-lg); /* 40px ↑ actions */
	border-radius: var(
		--blg-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(
			--blg-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(--blg-size-body); /* 16px — prevent overflow on 320px */
	}
}

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

.kd-event-single__foot {
	padding-block: 0 var(--blg-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(--blg-measure-reading); /* reading column */
	margin-inline: 0 auto !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--blg-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(--blg-space-md);
	align-items: center;
}

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

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

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

/* The single-event body nests its own .entry-content — the global last-child
   rhythm rule must not stack onto the body's existing 5rem padding before the
   share/calendar foot row (r6 review 🟡). */
.kd-event-single__body .entry-content > *:last-child {
	margin-block-end: 0;
}