/**
 * Pattern: Events Archive  (templates/archive-kd_event.html +
 * patterns/event-archive.php + inc/event-archive.php renderers)
 *
 * Figma source: node 5:1968 — "Events" wireframe (Wireframes page,
 * file LdwJIRwwEJXAInb2m9V8Dw). Wireframe-tier frame (not pixel-complete) — the
 * canvas's grey hero band + monochrome-purple card text are placeholder styling;
 * this build applies the real design system instead (see inc/event-archive.php's
 * file-level docblock for the full reasoning).
 *
 * Sections:
 *   1. HERO           — archive H1 + intro (mirrors .kd-archive--team).
 *   2. TOOLBAR        — search pill + view-toggle buttons + Submit an Event.
 *   3. RESULTS HEADER — search results-only view header.
 *   4. CARD           — .kd-event-card (image inset, eyebrow, title, excerpt,
 *                       "Learn more" link). Grid layout itself reuses the shared
 *                       .kd-card-grid wrapper class from card-grid.css (columns/
 *                       gap/responsive ladder) — only the card's own visual
 *                       treatment lives here.
 *   5. RESPONSIVE     — 1024 / 768 / 375.
 *   6. GRID ALIGNMENT — events-polish fix: cards fill the band edge-to-edge
 *                       (scoped override of card-grid.css's column tracks —
 *                       .kd-card-grid itself is untouched).
 *   7. LIST VIEW      — .is-view-list row layout (image left / content right).
 *   8. CALENDAR EMBED — [kd_calendar] panel chrome (hides the plugin's own
 *                       redundant switcher; sizing to fit the archive band).
 *
 * Token rules: only --kd-* custom properties, no hardcoded hex or sizes.
 * Auto-enqueued by inc/enqueue.php (glob patterns/*.css) — no edits to any
 * shared PATTERN stylesheet. Two narrow, precedented shared-file touches
 * elsewhere for this events-polish pass (flagged in the handoff, not in this
 * file): forms.css gained a `:not(.kd-event-search__input)` exclusion
 * (mirrors the pre-existing `:not(.kd-news-search__input)` one — see §2 below)
 * and inc/enqueue.php gained one new archive-scoped script enqueue.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — archive title + intro
   ══════════════════════════════════════════════════════════════════════════ */

/* query-title isn't .wp-block-post-title, so the global hero-interior title rule
   doesn't reach it — restate the H1 treatment for the archive title. Mirrors
   .kd-archive--team .kd-hero-interior .wp-block-query-title
   exactly (same system-wide interior-hero H1 size, independent of this one
   Figma frame's 56px label — the shipped archives already established the
   banner-size H1 as the interior-hero convention). */
.kd-archive--event .kd-hero-interior .wp-block-query-title {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: var(--kd-size-banner);
	line-height: var(--kd-lh-tight);
	color: var(--kd-color-base); /* white */
	margin: 0;
}

/* Intro line — white 18px below the H1 (injected by
   kds_event_archive_intro_subtitle). Mirrors .kd-team-archive__intro.
   Empty by default (Customizer-editable). */
.kd-event-archive__intro {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg); /* 18px */
	font-weight: 400;
	line-height: 1.65;
	color: var(--kd-color-base);
	max-width: var(--kd-measure-intro); /* intro measure — ~574px */
	margin: var(--kd-space-sm) 0 0; /* 16px gap from H1 */
}

@media (max-width: 767.98px) {
	.kd-event-archive__intro {
		font-size: var(--kd-size-body);
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TOOLBAR — search + view-toggle chrome + Submit an Event
   Figma 5:1968: "Search" label (Bold 16px purple) above a pill input beside 3
   circular view-toggle icons (left); a filled-purple "Submit an Event" pill
   button (right).
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--kd-space-md);
	margin-bottom: var(--kd-space-xl); /* 64px — toolbar → grid */
}

.kd-event-toolbar__left {
	display: flex;
	flex-direction: column;
	gap: var(--kd-gap-tight); /* 8px — label → input row */
	min-width: 0;
}

/* Visible "Search" label — Figma: Inter/Montserrat SemiBold 16px, purple. */
.kd-event-search__label {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body); /* 16px */
	font-weight: 600;
	color: var(--kd-color-link);
}

.kd-event-toolbar__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--kd-space-md); /* 24px — search pill → view toggle */
}

.kd-event-toolbar__right {
	display: flex;
	align-items: center;
}

/* ── Search form — pill input, magnifier icon inside, visible label above ──── */

.kd-event-search {
	display: flex;
	align-items: center;
}

/* events-view.js hides the search form + label in calendar view via the
   native [hidden] attribute. An author rule's `display` always beats the
   UA stylesheet's `[hidden] { display: none }` (author origin outranks UA
   origin regardless of specificity) — confirmed live: .kd-event-search's own
   `display: flex` above left the "hidden" search pill still visibly flexed.
   Restate display:none for the hidden state so JS's native-attribute
   approach actually works (mirrors the belt-and-suspenders
   .kd-event-view-panel[hidden] rule in §8 CALENDAR EMBED). */
.kd-event-search[hidden] {
	display: none;
}

.kd-event-search__inner {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	background: var(--kd-color-base);
	border: 1px solid var(--kd-color-neutral-500, var(--kd-color-neutral-300));
	border-radius: var(--kd-radius-pill);
	padding: 0.75rem 1.25rem;
	min-width: 15.625rem; /* ~250px */
	transition:
		border-color var(--kd-transition-fast),
		box-shadow var(--kd-transition-fast);
}

/*
 * Keyboard/focus indicator lives on the WRAPPER, not the input (events-polish
 * fix #1). Mirrors .kd-news-search__inner:focus-within exactly.
 */
.kd-event-search__inner:focus-within {
	border-color: var(--kd-color-primary);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--kd-color-primary) 15%, transparent);
	outline: 2px solid var(--kd-color-primary);
	outline-offset: 2px;
}

.kd-event-search__icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--kd-color-link);
}

/*
 * events-polish fix #1 (double border): this rule already asked for a
 * borderless/transparent input, but the global input[type=search] rule in
 * forms.css (2px purple pill border) has higher specificity and rendered a
 * second purple pill INSIDE .kd-event-search__inner's own pill — confirmed via
 * computed styles (input showed a 1.7px solid purple border it never declared
 * here). Fixed at the source: forms.css now excludes
 * .kd-event-search__input the same way it already excludes
 * .kd-news-search__input (both the base input[type=search] rule and the
 * input:focus rule) — so this rule is now the ONLY thing touching the input's
 * border, and it stays borderless/outline-less at every state, matching the
 * news-search precedent exactly.
 */
.kd-event-search__input {
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body); /* 16px */
	color: var(--kd-color-body);
	flex: 1 1 auto;
	min-width: 0;
}

.kd-event-search__input::placeholder {
	color: var(--kd-color-neutral-500, var(--kd-color-body));
	opacity: 1; /* Firefox resets opacity on placeholders */
}

/* Visually hidden — no-JS fallback; form submits on enter or click. */
.kd-event-search__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── View-toggle — grid / calendar / list (events-polish fix #3: WIRED) ──────
   Real <button> elements now (was decorative aria-hidden chrome — see
   inc/event-archive.php's updated file-level docblock). A toggle-button-group
   pattern (role="group" wrapper + aria-pressed per button) rather than a full
   ARIA tablist — simpler, still keyboard-operable (native <button>) and
   correctly announced. Active state keys off [aria-pressed="true"] directly
   (assets/js/events-view.js sets it) so there is one source of truth instead
   of a class kept in sync with the attribute. */

.kd-event-view-toggle {
	display: flex;
	align-items: center;
	gap: var(
		--kd-space-xs
	); /* 8px between the toggle buttons (restored — the
	   polish diff dropped this wrapper rule, leaving the 3 circles abutting) */
}

.kd-event-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; /* 44px */
	height: 2.75rem;
	border: none;
	border-radius: 50%;
	background: var(--kd-color-neutral-100);
	color: var(--kd-color-neutral-500, var(--kd-color-body));
	cursor: pointer;
	transition:
		background-color var(--kd-transition-fast),
		color var(--kd-transition-fast);
}

.kd-event-view-toggle__btn:hover {
	background: var(--kd-color-neutral-300, var(--kd-color-neutral-100));
}

.kd-event-view-toggle__btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Active view = filled purple (Figma shows the grid icon filled by default). */
.kd-event-view-toggle__btn[aria-pressed="true"] {
	background: var(--kd-color-primary);
	color: var(--kd-color-base);
}

.kd-event-view-toggle__btn[aria-pressed="true"]:hover {
	background: var(--kd-color-primary);
}

.kd-event-view-toggle__btn:focus-visible {
	outline: 2px solid var(--kd-color-primary);
	outline-offset: 2px;
}

/* ── Submit an Event — filled purple pill + trailing icon ───────────────────── */

.kd-event-archive__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.kd-event-archive__submit-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. RESULTS HEADER — search results-only view (mirrors .kd-news-results-header)
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-results-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kd-space-sm);
	margin-bottom: var(--kd-space-lg); /* 40px → grid */
}

.kd-event-results-header__title {
	margin: 0;
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem); /* 24 → 32px */
	line-height: 1.25;
	color: var(--kd-color-contrast);
}

.kd-event-results-header__title span {
	color: var(--kd-color-primary);
}

.kd-event-results-header__clear {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body);
	font-weight: 700;
	color: var(--kd-color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.kd-event-results-header__clear:hover,
.kd-event-results-header__clear:focus-visible {
	text-decoration: underline;
}

.kd-event-no-results {
	margin: var(--kd-space-lg) 0 0;
	text-align: center;
	font-size: var(--kd-size-body-lg);
	color: var(--kd-color-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. CARD — .kd-event-card
   Figma 5:1968 node 40:4457 family: white bg, thin #d4d2e3 hairline border
   (--kd-color-neutral-300 — a thin neutral hairline, NOT the 4px purple
   .kd-card border), 24px radius, soft shadow. Image inset 343×220 (7/6-ish
   aspect), 10px radius, #f9f9ff
   placeholder (--kd-color-neutral-100). Date eyebrow purple uppercase 14px →
   title purple Bold 24px → excerpt (body ink — see the deviation note in
   inc/event-archive.php) → "Learn more" underlined purple link.
   Grid wrapper reuses the shared .kd-card-grid class (card-grid.css) for the
   3→2→1 column ladder + gap — only the card's own look lives here.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-card {
	position: relative;
	background-color: var(--kd-color-base);
	border: 1px solid var(--kd-color-neutral-300);
	border-radius: var(--kd-radius-lg); /* 24px */
	box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	height: 100%;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.kd-event-card:hover,
.kd-event-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 4px 18px 6px rgba(0, 0, 0, 0.1);
}

/* ── Image — 24px inset, 343/220 aspect (Figma 40:4494) ─────────────────────── */

.kd-event-card .kd-event-card__image {
	margin: 1.5rem 1.5rem 0;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
}

.kd-event-card__image img {
	width: 100%;
	aspect-ratio: 343 / 220;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

.kd-event-card__image--placeholder {
	aspect-ratio: 343 / 220;
	background-color: var(--kd-color-neutral-100); /* #F9F9FF — Figma 40:4494 */
	border-radius: 10px;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.kd-event-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	flex: 1 1 auto;
}

/* ── Date eyebrow — Inter/Montserrat Bold 14px, purple, UPPERCASE ───────────── */

.kd-event-card__date {
	font-family: var(--kd-font-body);
	font-size: 0.875rem !important; /* 14px */
	font-weight: 700 !important;
	line-height: 1.4;
	color: var(--kd-color-link) !important;
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin: 0 0 0.375rem;
}

/* ── Title — Bold 24px, purple (Figma: 24px/34px, #5d5a88) ──────────────────── */

.kd-event-card__title {
	font-family: var(--kd-font-heading) !important;
	font-weight: 700 !important;
	font-size: var(--kd-size-h3); /* 1.5rem / 24px */
	line-height: 1.42; /* 34/24 */
	color: var(--kd-color-primary) !important;
	margin: 0 0 var(--kd-gap-tight); /* 8px title → excerpt */
}

/* ── Excerpt — body ink (see deviation note: inc/event-archive.php) ─────────── */

.kd-event-card__excerpt {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body); /* 16px */
	font-weight: 400;
	line-height: 1.625;
	color: var(--kd-color-body);
	margin: 0 0 var(--kd-space-md); /* 24px excerpt → link */
	flex: 1 1 auto;
}

/* ── "Learn more" link — Bold 18px, purple, underlined ───────────────────────── */

.kd-event-card__link {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg); /* 18px */
	font-weight: 700;
	color: var(--kd-color-link) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: auto; /* pin to card bottom */
	align-self: flex-start;
	transition: color var(--kd-transition-fast);
}

.kd-event-card__link:hover,
.kd-event-card__link:focus-visible {
	color: var(--kd-color-secondary) !important;
}

.kd-event-card__link:focus-visible {
	outline: 3px solid var(--kd-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1023.98px) ─────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
	.kd-event-toolbar {
		margin-bottom: var(--kd-space-lg); /* 40px */
	}
}

/* ── Mobile (≤767.98px) — toolbar stacks, search full-width ─────────────────── */

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

	.kd-event-toolbar__row {
		flex-wrap: wrap;
	}

	.kd-event-search {
		width: 100%;
	}

	.kd-event-search__inner {
		width: 100%;
		min-width: 0;
	}

	.kd-event-toolbar__right {
		width: 100%;
	}

	.kd-event-archive__submit {
		width: 100%;
		justify-content: center;
	}

	.kd-event-card .kd-event-card__image {
		margin: 1.25rem 1.25rem 0;
	}

	.kd-event-card__body {
		padding: 1rem 1.25rem 1.25rem;
	}
}

/* ── Small phone (≤375px) ────────────────────────────────────────────────── */

@media (max-width: 375px) {
	.kd-event-search__inner {
		padding: 0.625rem 1rem;
	}

	.kd-event-view-toggle__btn {
		width: 2.5rem;
		height: 2.5rem;
	}

	.kd-event-card .kd-event-card__image {
		margin: 1rem 1rem 0;
	}

	.kd-event-card__body {
		padding: 0.875rem 1rem 1rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. GRID ALIGNMENT — events-polish fix #2: cards fill the band edge-to-edge
   ══════════════════════════════════════════════════════════════════════════
   Figma 5:1968 shows the card trio flush with the toolbar: first card's left
   edge = search's left edge, last card's right edge = "Submit an Event"'s
   right edge. Confirmed live @2560 BEFORE this fix: the .kd-event-grid
   CONTAINER already lands exactly on the band (left/right = 516.57/2028.57px,
   matching the toolbar and --kd-content-max — the constrained-layout parent
   handles that correctly). The mismatch was inside it: card-grid.css's shared
   `.kd-card-grid` ruleset caps each column at `minmax(0, 24.5rem)` (Figma's
   392px static-card spec) with `justify-content: center`, so once the 3-col
   trio's natural width (3×392 + 2×24 gap = 1224px) is narrower than the 1512px
   band, the trio centers — 144px inset on each side @2560, 660.57 vs the
   516.57 container edge.

   Fix: let THIS archive's grid stretch its columns to 1fr instead of capping
   them at 24.5rem, at each of card-grid.css's own column-count breakpoints —
   only the column WIDTH changes; the 3→2→2→1 column-COUNT ladder (driven by
   the shared `.kd-card-grid--cols-3` class + its media queries) is untouched.
   Scoped to `.kd-archive--event .kd-event-grid` only — news/team
   archives keep the shared centered behaviour (card-grid.css untouched,
   per instruction; that centering is flagged system-wide as its own separate,
   deferred design decision — see build-tracker.md's "Finding #2").

   !important is required: card-grid.css asserts `grid-template-columns`
   `!important` on `.kd-card-grid--cols-3` (unconditional) and again inside
   each of its own breakpoints, so only an equally-`!important` rule can win —
   confirmed via computed styles before writing this (not a blind override).
   Source order also favours this file (events-archive.css loads after
   card-grid.css — enqueue.php's pattern glob is alphabetical), so plain class
   specificity would already be enough even without the breakpoint's own
   `!important`; the `!important` here matches the base file's own convention
   for this exact property rather than introducing a new one. */

.kd-archive--event .kd-event-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1024px) {
	.kd-archive--event .kd-event-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767.98px) {
	.kd-archive--event .kd-event-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. LIST VIEW — .is-view-list (events-polish fix #3)
   ══════════════════════════════════════════════════════════════════════════
   A CSS-only variant of the SAME grid + SAME .kd-event-card markup (no new
   query, no new PHP renderer) — assets/js/events-view.js toggles this class on
   .kd-event-grid. Row layout: image fixed-width left column, content fills the
   rest. Card, search, and Load More markup/behaviour are completely unchanged;
   Load More-appended cards inherit the row layout automatically since they
   land inside the same .is-view-list grid. No mobile-list Figma frame exists
   (this is a builder-derived interaction, not in 5:1968) — below tablet width
   a "row" reads too cramped, so list collapses back to the same stacked
   image-over-content look as grid view; flagged for designer review. */

.kd-event-grid.is-view-list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--kd-space-md) !important;
}

.kd-event-grid.is-view-list .kd-event-card {
	/* The base rule's `height: 100%` is a CSS-Grid stretch convention (matches
	   the tallest sibling in a grid ROW). Carried into this flex COLUMN
	   container it becomes a percentage against an indefinite ancestor height.
	   `height: auto` alone did NOT fully neutralise it live — the image's own
	   `height: 100%` (below) still fed a percentage-height chain back into this
	   card's own content-size computation, and every row rendered ~1501px tall
	   (an equal 1/9th split of the grid's own auto-height: a flex
	   percentage-height cyclic quirk, confirmed via computed styles). Fixing
	   the image to a definite, non-percentage height (below) removes the
	   percentage chain at its source, so `auto` here now behaves as expected:
	   each row hugs max(image height, body's natural content height). */
	flex-direction: row !important;
	height: auto !important;
}

.kd-event-grid.is-view-list .kd-event-card .kd-event-card__image {
	margin: 0;
	flex: 0 0 16rem; /* fixed left column */
	height: auto;
	border-radius: 0; /* the card's own overflow:hidden clips the outer corner */
}

.kd-event-grid.is-view-list .kd-event-card__image img,
.kd-event-grid.is-view-list .kd-event-card__image--placeholder {
	aspect-ratio: auto;
	width: 100%;
	/* Definite (not percentage) height — see the .kd-event-card note above.
	   16rem keeps the row a comfortable list-row size; if the excerpt text
	   runs longer than that the row (and this image) grow to match it via
	   align-self: stretch, which is fine since it resolves against the row's
	   OWN already-computed content height at that point, not a live cycle. */
	height: 16rem;
	object-fit: cover;
	border-radius: 0;
}

.kd-event-grid.is-view-list .kd-event-card__body {
	flex: 1 1 auto;
}

@media (max-width: 767.98px) {
	/* Collapse the row back to the grid card's stacked layout — a 16rem image
	   column reads as a thin sliver at phone widths. */
	.kd-event-grid.is-view-list .kd-event-card {
		flex-direction: column !important;
	}

	.kd-event-grid.is-view-list .kd-event-card .kd-event-card__image {
		flex: 0 0 auto;
		margin: 1.25rem 1.25rem 0;
		border-radius: 10px;
	}

	.kd-event-grid.is-view-list .kd-event-card__image img,
	.kd-event-grid.is-view-list .kd-event-card__image--placeholder {
		aspect-ratio: 343 / 220;
		height: auto;
		border-radius: 10px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. CALENDAR EMBED — .kd-event-view-panel--calendar (events-polish fix #3)
   ══════════════════════════════════════════════════════════════════════════
   Wraps the server-rendered [kd_calendar view="calendar" nav="true"] output
   (inc/event-archive.php's kds_event_archive_calendar_html()). The plugin
   renders its OWN list/grid/calendar switcher when nav="true" (needed for the
   AJAX month prev/next to work) — that switcher is redundant next to this
   toolbar's switcher, so it is hidden here, scoped to this embed only (a
   plain descendant-selector display:none — the plugin's own .kde-switcher
   rule carries no !important, so no override contest). Everything else
   (month grid, day-detail panel, agenda) is the plugin's untouched CSS —
   confirmed live on the pre-existing /events-demo/ page (kd-events
   3474731): AJAX month-nav round-trips via /wp-json/kd-events/v1/calendar
   with no console errors. */

.kd-event-view-panel[hidden] {
	display: none !important; /* belt-and-suspenders vs. any future
		display:* rule landing on this wrapper and beating the native
		[hidden] behaviour */
}

.kd-event-view-panel--calendar .kde-switcher {
	display: none;
}

.kd-event-view-panel--calendar {
	margin-top: var(--kd-space-sm);
}