/**
 * Per-CPT styles for the `event` post type.
 *
 * Loaded conditionally by functions.php on event archive/single pages,
 * Standort event sections, and embedded [oa_event_section] shortcode surfaces.
 *
 * Two BEM blocks:
 *   .oa-event-card     archive listing card extensions (also mirrored in
 *                      event-archive.css for the default cards archive)
 *                      (shared .oa-card baseline + .oa-archive page-level
 *                      scaffolding live in archive-shared.css)
 *   .oa-event-single   per-event detail page (hero, dates, body, sidebar)
 *
 * Tokens consumed:
 *   --oa-color-{primary,neutral,secondary}-{50..950}
 *   --oa-space-{1,2,3,5,6,8,10}, --oa-space-section-y, --oa-space-gutter
 *   --oa-size-{h1,card-title,text,text-small,eyebrow}, --oa-lh-{heading,body}
 *   --oa-rounded-{lg,xl,full}, --oa-blur-shadow
 *   --oa-font-{heading,body}, --oa-bg-{base,subtle,primary-tint}
 *   --oa-content-wide (layout cap from global.css)
 *
 * Breakpoint values (640px / 1024px) are literal in `@media` queries
 * because CSS spec doesn't accept custom properties inside media
 * conditions — `@media (min-width: var(--bp))` is not valid. The
 * values follow the conventional `sm` / `lg` boundaries used across
 * the project.
 */

/* Archive container, hero, list grid, and item moved to
 * assets/css/archive-shared.css under the .oa-archive* primitives.
 * Filter bar, status row, filter chips, empty state, and pagination
 * also live there under the .oa-archive-* primitives.
 * Selectors in archive-event.php and template-parts/archive-hero.php
 * point at the shared sheet. */

/* =====================================================================
 * Card extensions
 *
 * The shared C2 baseline (.oa-card + __media/__badges/__image/__body/
 * __title/__excerpt/__footer/__chips/__cta, the stretched cover-link
 * pattern, badge shape + link states, hover/focus states) lives in
 * archive-shared.css — promoted there when the event_request card became
 * the second consumer (#132). Event cards keep only what is event-shaped:
 * the date-rail meta cluster (rail beside title/location/price) and the
 * cancelled state. Design settled in the Divi sandbox exploration (#131,
 * sandbox pages 2332/2346).
 * =================================================================== */

.oa-event-section-shortcode {
	color: var(--oa-body-color);
	font-family: var(--oa-font-body);
	line-height: var(--oa-lh-body);
}

.oa-event-section-shortcode__title {
	margin: 0 0 var(--oa-space-5);
	color: var(--oa-heading-color);
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-h2);
	line-height: var(--oa-lh-heading);
}

.oa-event-section-shortcode__empty {
	margin: 0;
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-text-small);
}

.oa-event-section-shortcode {
	max-width: 100%;
}

.oa-event-section-shortcode .oa-archive-filters__field,
.oa-event-section-shortcode .oa-archive-filters__field--search {
	flex-basis: clamp(12rem, 24vw, 18rem);
	min-width: 0;
}

.oa-event-section-shortcode .oa-archive__list {
	grid-template-columns: minmax(0, 1fr);
}

.oa-event-section-shortcode .oa-archive__item,
.oa-event-section-shortcode .oa-card {
	min-width: 0;
}

@media (min-width: 720px) {
	.oa-event-section-shortcode .oa-archive__list {
		grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	}
}

@media (min-width: 1024px) {
	.oa-event-section-shortcode .oa-archive-filters--mobile-disclosure .oa-archive-filters__body {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	}

	.oa-event-section-shortcode .oa-archive-filters__field,
	.oa-event-section-shortcode .oa-archive-filters__field--search {
		flex: initial;
	}
}

@media (max-width: 639px) {
	.oa-event-section-shortcode .oa-archive-filters--mobile-disclosure .oa-archive-filters__body {
		align-items: stretch;
	}

	.oa-event-section-shortcode .oa-archive-filters--mobile-disclosure .oa-archive-filters__field,
	.oa-event-section-shortcode .oa-archive-filters--mobile-disclosure .oa-archive-filters__field--search {
		flex: 0 0 auto;
		align-items: center;
		min-height: 0;
	}

	.oa-event-section-shortcode .oa-archive-filters--mobile-disclosure .oa-archive-filters__input,
	.oa-event-section-shortcode .oa-archive-filters--mobile-disclosure .oa-archive-filters__select {
		height: auto !important;
		min-height: 2.875rem;
	}
}

.oa-event-section-shortcode .oa-archive-empty:not(.has-background):last-of-type {
	padding-bottom: var(--oa-space-10);
}

.oa-event-section-shortcode .oa-event-calendar__legend {
	display: none;
}

.oa-event-section-shortcode .oa-archive-pagination {
	gap: var(--oa-space-1);
	margin-top: var(--oa-space-6);
}

.oa-event-section-shortcode .oa-archive-pagination__link {
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 var(--oa-space-2);
}

@media (min-width: 768px) {
	.oa-event-section-shortcode .oa-event-calendar .lre-calendar {
		min-height: 28rem;
	}

	.oa-event-section-shortcode .oa-event-calendar .fc-daygrid-day-frame {
		min-height: 4.25rem;
		padding: 0.25rem;
	}

	.oa-event-section-shortcode .oa-event-calendar .fc-daygrid-day-number {
		padding: 0.25rem;
		font-size: 0.875rem;
		line-height: 1;
	}
}

@media (max-width: 767px) {
	.oa-event-section-shortcode .oa-event-calendar .lre-calendar {
		min-height: 24rem;
	}

	.oa-event-section-shortcode .oa-event-calendar .fc-daygrid-day-frame {
		min-height: 3.75rem;
	}
}

.oa-event-section-shortcode .oa-event-calendar .fc-daygrid-day-top {
	line-height: 1;
}

.oa-event-section-shortcode .oa-event-calendar .fc-daygrid-day-events {
	min-height: 0.75rem;
	margin: 0.125rem 0 0.375rem;
}

.entry-content .oa-event-section-shortcode .oa-event-calendar .fc-scrollgrid td {
	padding: 0;
}

/* Body rhythm: meta cluster → excerpt → chips column. Margins stay reset
   so the body gap owns the rhythm (the shared default stacks gap +
   element margins — see #131 round 2). */
.oa-event-card .oa-card__body {
	padding: var(--oa-space-4) var(--oa-space-5) var(--oa-space-5);
	gap: var(--oa-space-2);
}

.oa-event-card .oa-card__media {
	height: auto;
	aspect-ratio: var(--oa-aspect-card);
}

.oa-event-card .oa-card__title,
.oa-event-card .oa-card__excerpt {
	margin-top: 0;
}

/* Card titles wrap to two lines on long German names — 1.3em reads better
   than the 1.1em display-heading default at card-title size. */
.oa-event-card .oa-card__title {
	line-height: 1.3em;
}

/* ----- Meta cluster: date rail beside title + location + price ----- */
/* The rail anchors only the title/meta block; the excerpt below spans the
   full card width (the C2 fix for variant C's squeezed right column). */
.oa-event-card__meta-cluster {
	display: flex;
	align-items: flex-start;
	gap: var(--oa-space-3);
}

.oa-event-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-1);
	min-width: 0;
}

.oa-event-card__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	flex: 0 0 auto;
	min-width: 3.5rem;
	padding: var(--oa-space-2) var(--oa-space-3);
	background: var(--oa-bg-primary-tint);
	color: var(--oa-color-primary-800);
	border-radius: var(--oa-rounded-lg);
	text-transform: uppercase;
	line-height: 1.1;
}

.oa-event-card__rail-weekday,
.oa-event-card__rail-month {
	font-size: var(--oa-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.05em;
}

.oa-event-card__rail-day {
	font-family: var(--oa-font-heading);
	font-size: 1.625rem;
	font-weight: 700;
}

.oa-event-card__rail-time {
	margin-top: var(--oa-space-1);
	padding-top: var(--oa-space-1);
	border-top: 1px solid var(--oa-color-primary-200);
	font-size: var(--oa-size-eyebrow);
	font-weight: 600;
}

/* ----- Meta rows: location + price ----- */
.oa-event-card__location,
.oa-event-card__price {
	display: grid;
	grid-template-columns: 1.15rem minmax(0, 1fr);
	align-items: center;
	column-gap: var(--oa-space-3);
	min-width: 0;
	font-size: var(--oa-size-text-small);
	line-height: 1.2;
	color: var(--oa-color-neutral-600);
	margin: 0;
}

.oa-event-card__location-text,
.oa-event-card__price-text {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Row glyphs from FA Solid — map marker (\f3c5) matches the filter bar and
   single-page sidebar; ticket (\f3ff) marks the price row. Same icon system
   instead of OS emoji that renders inconsistently across platforms and
   ignores currentColor. Tinted with the primary token to match the filter
   chip + summary icon styling. */
.oa-event-card__location::before,
.oa-event-card__price::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	font-family: "OA Font Awesome Solid";
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	color: var(--oa-color-primary-500);
}

.oa-event-card__location::before {
	content: "\f3c5";
}

.oa-event-card__price::before {
	content: "\f3ff";
}

/* Stretched cover link, card footer (chips + corner CTA), badge shape, and
   badge-link states all live in archive-shared.css since #132. */

/* ----- Cancelled state ----- */
.oa-event-card--cancelled {
	opacity: 0.65;
}

.oa-event-card--cancelled:hover,
.oa-event-card--cancelled:focus-within {
	opacity: 0.85;
}

.oa-event-card--cancelled .oa-event-card__rail {
	background: var(--oa-color-neutral-200);
	color: var(--oa-color-neutral-700);
}

.oa-event-card--cancelled .oa-event-card__rail-time {
	border-top-color: var(--oa-color-neutral-300);
}

.oa-event-card__cancelled-banner {
	margin: var(--oa-space-3) 0 0;
	padding: var(--oa-space-2) var(--oa-space-3);
	background: var(--oa-color-secondary-100);
	color: var(--oa-color-secondary-800);
	border-radius: var(--oa-rounded-lg);
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	text-align: center;
}

/* Pagination moved to assets/css/archive-shared.css under .oa-archive-pagination*. */

/* =====================================================================
 * Single event
 *
 * Outer page scaffold (.oa-single page bg + body type), two-column layout
 * (.oa-single__layout), and detail-section card chrome (.oa-section,
 * .oa-section__title) live in single-shared.css. This file keeps only
 * event-specific rules: breadcrumbs, hero (chrome + chips + CTA + banner),
 * media, sidebar, date list, gallery grid, standort detail, persons detail,
 * share row, sticky bar.
 * =================================================================== */
.oa-event-single__inner {
	width: min(var(--oa-content-wide), 100% - 2 * var(--oa-space-gutter));
	margin-inline: auto;
	padding-block: var(--oa-space-page-y);
}

/* ----- Breadcrumbs ----- */
.oa-event-single__hero {
	display: grid;
	gap: var(--oa-space-6);
	margin-bottom: var(--oa-space-10);
}

@media (min-width: 1024px) {
	.oa-event-single__hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--oa-space-8);
		align-items: center;
	}
}

.oa-event-single__media {
	aspect-ratio: var(--oa-aspect-hero);
	overflow: hidden;
	border-radius: var(--oa-rounded-2xl);
	background: var(--oa-color-neutral-100);
}

.oa-event-single__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* H1 typography lives on .oa-single__title in single-shared.css. */

.oa-event-single__excerpt {
	font-size: var(--oa-size-text);
	color: var(--oa-color-neutral-700);
	margin: 0;
}

/* ----- Hero info chips (date + standort) -----
 * Two side-by-side cards in the hero left column. Single column on
 * narrow viewports, two columns from sm up. Each chip is a small
 * white card with an icon, a label, and a value.
 */
.oa-event-single__hero-info {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--oa-space-4);
	margin-top: var(--oa-space-5);
}

@media (min-width: 640px) {
	.oa-event-single__hero-info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.oa-event-single__hero-chip {
	display: flex;
	align-items: center;
	gap: var(--oa-space-3);
	padding: var(--oa-space-4);
	background: var(--oa-bg-base);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-xl);
}

.oa-event-single__hero-chip-icon {
	--oa-icon-size: 1.125rem;

	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
}

.oa-event-single__hero-chip-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oa-event-single__hero-chip-label {
	font-size: var(--oa-size-eyebrow);
	font-weight: 500;
	color: var(--oa-color-neutral-500);
}

.oa-event-single__hero-chip-value {
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	color: var(--oa-color-neutral-900);
}

/* ----- Hero CTA -----
 * Primary booking action surfaced above the fold; the sidebar CTA card
 * mirrors this for sticky-visible reach as the user scrolls.
 *
 * Paint inherited from .oa-button.oa-button--primary in archive-shared.css.
 * This class only contributes layout (section spacer above the chip row).
 */
.oa-event-single__hero-cta {
	margin-top: var(--oa-space-7);
}

.oa-event-single__banner {
	margin: var(--oa-space-5) 0 0;
	padding: var(--oa-space-3) var(--oa-space-5);
	border-radius: var(--oa-rounded-lg);
	font-weight: 600;
	font-size: var(--oa-size-text-small);
}

.oa-event-single__banner--cancelled {
	background: var(--oa-color-secondary-100);
	color: var(--oa-color-secondary-800);
}

.oa-event-single__banner--postponed {
	background: var(--oa-color-tertiary-100);
	color: var(--oa-color-neutral-900);
}

/* Two-column layout (.oa-single__layout) lives in single-shared.css. */

.oa-event-single__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-8);
}

.oa-event-single__aside {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-5);
}

@media (min-width: 1024px) {
	.oa-event-single__aside {
		position: sticky;
		top: var(--oa-space-8);
		align-self: start;
	}
}

/* Main-column section card chrome (.oa-section + .oa-section__title) lives
 * in single-shared.css. Per-section content rules below sit on the modifier
 * class (.oa-event-single__description, __dates, __gallery, etc.), which
 * is paired with .oa-section in markup. */

/* ----- Upcoming dates list ----- */
.oa-event-single__date-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-3);
}

.oa-event-single__date-item {
	background: var(--oa-bg-subtle);
	border-radius: var(--oa-rounded-lg);
	border-left: 3px solid var(--oa-color-primary-500);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oa-event-single__date-item:hover,
.oa-event-single__date-item:focus-within {
	transform: translateY(-1px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.oa-event-single__date-item--cancelled {
	opacity: 0.7;
	border-left-color: var(--oa-color-secondary-500);
}

.oa-event-single__date-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--oa-space-3);
	padding: var(--oa-space-3) var(--oa-space-5);
	color: inherit;
	text-decoration: none;
}

.oa-event-single__date-link:focus-visible {
	outline: 2px solid var(--oa-color-primary-500);
	outline-offset: 2px;
	border-radius: var(--oa-rounded-lg);
}

.oa-event-single__series-back {
	margin: 0 0 var(--oa-space-4);
	font-size: var(--oa-size-text-small);
}

.oa-event-single__series-back a {
	color: var(--oa-color-primary-700);
	text-decoration: none;
	font-weight: 500;
}

.oa-event-single__series-back a:hover {
	text-decoration: underline;
}

/* ----- Pretix widget button ----- */
/* Pretix's widget hydrates <pretix-button> into:
     <div class="pretix-widget-wrapper {our classes}">
       <div class="pretix-widget-button-container">
         <form><button class="pretix-button">label</button></form>
       </div>
     </div>
   The wrapper, container, and form are pretix-controlled markup — we
   only style the inner native <button class="pretix-button">. Wrapper
   stays visually inert (no bg, no padding, no transform) so it can't
   double-render or jump on hover from competing rules.

   Variant classes (oa-pretix-button--hero / --summary) drive theming
   from the wrapper class down to the inner button. Importantly the
   wrapper does NOT carry the original __hero-cta / __summary-cta
   classes — those have their own :hover transforms + bg overrides
   that would paint a teal pill around the button and cause
   margin-collapse jumps when hover removes the wrapper margin. */

/* No-JS fallback strategy: server emits two siblings together:
     <pretix-button …>Label</pretix-button><a class="oa-pretix-button__fallback" …>Label</a>
   Pre-script (or script-blocked / pretix.eu unreachable): the bare
   `<pretix-button>` is hidden via the unconditional rule below, the
   fallback anchor is the visible/clickable CTA.
   Post-script: pretix's widget *replaces* the `<pretix-button>` element
   in the DOM with `<div class="pretix-widget-wrapper">…</div>` (it does
   not register a custom element, so the `:defined` pseudo-class is not
   the right signal). The presence of `.pretix-widget-wrapper` as the
   immediate previous sibling is the post-hydration tell, and we use
   the adjacent-sibling combinator to hide the fallback once it's there.
   Two siblings (label-text-only inside the custom element + separate
   anchor) avoid both the visual button-in-button artifact and the
   nested-interactive-content a11y concern an inner anchor would create. */

/* Bare custom element never needs to render — pretix replaces it on
   hydration, and the sibling fallback is the visible CTA pre-hydration.
   Hiding it unconditionally avoids a flash of un-styled label text
   during the script-load race window. */
pretix-button.oa-pretix-button {
	display: none;
}

/* Post-hydration: pretix's wrapper has taken the bare element's slot,
   so the sibling fallback hides — pretix's hydrated button is the
   visible CTA. */
.pretix-widget-wrapper + .oa-pretix-button__fallback {
	display: none;
}

/* Fallback anchor — visible until pretix's widget script defines
   <pretix-button> (or permanently if the script is blocked / pretix.eu
   is unreachable). Paint inherited from .oa-button.oa-button--primary
   in archive-shared.css (the helper emits both classes on this anchor).
   This selector is paint-free; variant modifiers below contribute layout
   only. */

/* Hero variant — same section spacer the hydrated wrapper carries
   below, so the fallback occupies the final layout slot from first
   paint and the hydrated button doesn't jump up by --oa-space-7. */
.oa-pretix-button__fallback--hero {
	margin-top: var(--oa-space-7);
}

/* Summary variant — full-width pill matching the original __summary-cta. */
.oa-pretix-button__fallback--summary {
	display: block;
	width: 100%;
	padding: var(--oa-space-3) var(--oa-space-5);
	text-align: center;
}

/* Wrapper layout per variant — hero gets the section spacer, sidebar
   stretches block-level to fill the boarding-pass column width. The
   hero spacer (--oa-space-7 ≈ 28px) is one step larger than the chip
   row's --oa-space-5 above it so the CTA reads as the action zone of
   the hero instead of a third chip in the info row. */
.pretix-widget-wrapper.oa-pretix-button--hero {
	display: inline-block;
	margin-top: var(--oa-space-7);
}
.pretix-widget-wrapper.oa-pretix-button--summary {
	display: block;
}

/* Inner native button — third-party-hydrated paint surface.
 *
 * Two button categories now exist in this codebase:
 *
 *   1. Self-owned markup (fallback <a>, __hero-cta, __summary-cta,
 *      sidebar CTA, promo CTA, request CTA) — wears .oa-button
 *      .oa-button--primary directly; paint comes from the primitive
 *      via custom properties on .oa-button--primary in archive-shared.css.
 *      Single source of truth.
 *
 *   2. Third-party-hydrated markup (this rule, for Pretix's
 *      <button class="pretix-button">) — pretix's widget creates the
 *      inner button in JS, so we can't add primitive classes to it. The
 *      wrapper (.pretix-widget-wrapper) is intentionally NOT carrying
 *      .oa-button or .oa-button--primary: pretix preserves any class
 *      we set on the bare <pretix-button> onto the wrapper, and any
 *      visible paint on the wrapper would render behind the inner button
 *      as a button-in-button artifact (same hazard the existing
 *      __hero-cta / __summary-cta wrapper-paint avoidance documents).
 *      Because the wrapper is inert, the custom-property bridge can't
 *      reach the inner button — the modifier class can't go anywhere
 *      that doesn't paint the wrapper. So this descendant rule
 *      re-declares the same paint by direct token reference, mirroring
 *      the primitive's structural rules (display, padding, radius,
 *      type, transition).
 *
 * Contract for the next contributor: when .oa-button--primary's paint
 * changes (e.g. the color step retunes), the change MUST also land
 * here. Two faces of one paint contract — the price of keeping pretix's
 * widget behavior intact while still consolidating six other CTA
 * surfaces. */
.oa-pretix-button .pretix-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--oa-space-3) var(--oa-space-6);
	background-color: var(--oa-color-primary-500);
	color: var(--oa-color-white);
	border: 0;
	border-radius: var(--oa-rounded-lg);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--oa-size-button);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.oa-pretix-button .pretix-button:hover,
.oa-pretix-button .pretix-button:focus-visible {
	background-color: var(--oa-color-primary-600);
	transform: translateY(-1px);
	color: var(--oa-color-white);
}

/* Sidebar variant: full-width pill matching the original __summary-cta. */
.oa-pretix-button--summary .pretix-button {
	display: block;
	width: 100%;
	padding: var(--oa-space-3) var(--oa-space-5);
	text-align: center;
}

.oa-event-single__date-pill {
	display: inline-flex;
	align-items: baseline;
	gap: var(--oa-space-2);
	font-weight: 600;
	color: var(--oa-color-primary-800);
}

.oa-event-single__date-label {
	font-size: var(--oa-size-text);
}

.oa-event-single__date-time {
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-700);
	font-weight: 500;
}

.oa-event-single__date-subtitle {
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-text-small);
}

.oa-event-single__date-tag {
	margin-left: auto;
	padding: var(--oa-space-1) var(--oa-space-3);
	background: var(--oa-color-secondary-100);
	color: var(--oa-color-secondary-800);
	border-radius: var(--oa-rounded-full);
	font-size: var(--oa-size-eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.oa-event-single__date-tag--rescheduled {
	background: var(--oa-color-tertiary-100);
	color: var(--oa-color-neutral-900);
}

/* ----- Gallery -----
 * Three-up grid on desktop, two-up at sm, one-up below. Each tile is a
 * 1:1 square with hover scale matching the archive card pattern.
 */
.oa-event-single__gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--oa-space-4);
}

.oa-event-single__gallery-item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--oa-rounded-xl);
	background: var(--oa-color-neutral-100);
}

.oa-event-single__gallery-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	cursor: zoom-in;
}

.oa-event-single__gallery-link:focus-visible {
	outline: 3px solid var(--oa-color-neutral-900);
	outline-offset: -3px;
}

.oa-event-single__gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.oa-event-single__gallery-item:hover .oa-event-single__gallery-image,
.oa-event-single__gallery-link:focus-visible .oa-event-single__gallery-image {
	transform: scale(1.05);
}

/* ----- Standort detail card -----
 * Two-column grid (text + image) from sm up. Image stays a fixed-aspect
 * thumbnail rather than dominating; this is supporting content, not the
 * hero.
 */
.oa-event-single__standort-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--oa-space-5);
	align-items: start;
}

/* On narrow viewports the image leads the card; the grid places media in
 * row 1 and body in row 2. From sm up the layout switches to two columns
 * with body left, image right (DOM order resumes).
 */
.oa-event-single__standort-detail-media {
	order: -1;
}

@media (min-width: 640px) {
	.oa-event-single__standort-detail-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
		gap: var(--oa-space-6);
	}

	.oa-event-single__standort-detail-media {
		order: 0;
	}
}

.oa-event-single__standort-detail-body {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-2);
}

.oa-event-single__standort-detail-title {
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-card-title);
	line-height: var(--oa-lh-heading);
	font-weight: 600;
	color: var(--oa-heading-color);
	text-decoration: none;
}

.oa-event-single__standort-detail-title:hover,
.oa-event-single__standort-detail-title:focus-visible {
	color: var(--oa-color-primary-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-event-single__standort-detail-address {
	display: flex;
	align-items: flex-start;
	gap: var(--oa-space-2);
	font-style: normal;
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-700);
}

.oa-event-single__standort-detail-icon {
	--oa-icon-size: 0.95rem;

	flex: 0 0 1rem;
	width: 1rem;
	height: 1rem;
	margin-top: 0.2em;
}

.oa-event-single__standort-detail-excerpt {
	margin: var(--oa-space-3) 0 0;
	font-size: var(--oa-size-text-small);
	line-height: var(--oa-lh-body);
	color: var(--oa-color-neutral-700);
}

.oa-event-single__standort-detail-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-2);
	margin-top: var(--oa-space-4);
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	color: var(--oa-color-primary-600);
	text-decoration: none;
	transition: color 0.15s ease, gap 0.15s ease;
}

.oa-event-single__standort-detail-cta::after {
	content: "→";
	transition: transform 0.15s ease;
}

.oa-event-single__standort-detail-cta:hover,
.oa-event-single__standort-detail-cta:focus-visible {
	color: var(--oa-color-primary-700);
	gap: var(--oa-space-3);
}

.oa-event-single__standort-detail-media {
	display: block;
	aspect-ratio: var(--oa-aspect-hero);
	overflow: hidden;
	border-radius: var(--oa-rounded-xl);
	background: var(--oa-color-neutral-100);
}

.oa-event-single__standort-detail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.oa-event-single__standort-detail-media:hover .oa-event-single__standort-detail-image,
.oa-event-single__standort-detail-media:focus-visible .oa-event-single__standort-detail-image {
	transform: scale(1.04);
}

/* ----- Persons detail card -----
 * Per-person row: 80px avatar + name + role + contact list.
 */
.oa-event-single__persons-detail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-6);
}

.oa-event-single__persons-detail-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--oa-space-5);
}

.oa-event-single__persons-detail-avatar-link {
	flex: 0 0 auto;
	display: block;
}

.oa-event-single__persons-detail-avatar {
	width: 5rem;
	height: 5rem;
	border-radius: var(--oa-rounded-full);
	object-fit: cover;
	background: var(--oa-color-neutral-100);
	display: block;
}

.oa-event-single__persons-detail-body {
	flex: 1 1 16rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-2);
}

.oa-event-single__persons-detail-name {
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-text);
	font-weight: 600;
	color: var(--oa-heading-color);
	text-decoration: none;
}

.oa-event-single__persons-detail-name:hover,
.oa-event-single__persons-detail-name:focus-visible {
	color: var(--oa-color-primary-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-event-single__persons-detail-role {
	margin: 0;
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-600);
}

.oa-event-single__persons-detail-contact {
	list-style: none;
	margin: var(--oa-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-1);
}

.oa-event-single__persons-detail-contact-item {
	display: flex;
	align-items: center;
	gap: var(--oa-space-2);
	font-size: var(--oa-size-text-small);
}

.oa-event-single__persons-detail-contact-item a {
	color: var(--oa-link-color);
	text-decoration: none;
}

.oa-event-single__persons-detail-contact-item a:hover,
.oa-event-single__persons-detail-contact-item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-event-single__persons-detail-contact-icon {
	--oa-icon-size: 0.95rem;

	flex: 0 0 1rem;
	width: 1rem;
	height: 1rem;
}

/* ----- Sidebar summary card -----
 * Single sticky card. Acts as a boarding-pass: enough info to commit
 * (next date, location thumb, price, person mini) plus the CTA. Detail
 * cards in the main column carry the full information.
 *
 * Card chrome (padding, border, radius, base bg) lives on .oa-sidebar-card
 * in single-shared.css. Defaults match this card — bg-base + rounded-2xl —
 * so no override hooks needed. Sticky positioning lives on the parent
 * .oa-event-single__aside (different scope: sidebar layout, not card paint).
 */

.oa-event-single__summary-title {
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-card-title);
	line-height: var(--oa-lh-heading);
	color: var(--oa-heading-color);
	margin: 0 0 var(--oa-space-4);
}

.oa-event-single__summary-list {
	list-style: none;
	margin: 0 0 var(--oa-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-4);
}

.oa-event-single__summary-item {
	display: flex;
	align-items: flex-start;
	gap: var(--oa-space-3);
}

.oa-event-single__summary-item--persons {
	flex-direction: column;
	gap: var(--oa-space-2);
}

.oa-event-single__summary-item--pricing .oa-event-single__summary-text {
	width: 100%;
}

.oa-event-single__summary-icon {
	--oa-icon-size: 1rem;

	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
}

.oa-event-single__summary-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.oa-event-single__summary-value {
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	color: var(--oa-color-neutral-900);
	text-decoration: none;
}

a.oa-event-single__summary-value:hover,
a.oa-event-single__summary-value:focus-visible {
	color: var(--oa-color-primary-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-event-single__summary-meta {
	font-size: var(--oa-size-eyebrow);
	color: var(--oa-color-neutral-600);
}

.oa-event-single__summary-more {
	margin-top: 0.15rem;
	font-size: var(--oa-size-eyebrow);
	font-weight: 600;
	color: var(--oa-color-primary-600);
	text-decoration: none;
}

.oa-event-single__summary-more:hover,
.oa-event-single__summary-more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-event-single__summary-label {
	font-size: var(--oa-size-eyebrow);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oa-color-neutral-600);
}

.oa-event-single__summary-persons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-2);
}

.oa-event-single__summary-person {
	display: flex;
	align-items: center;
	gap: var(--oa-space-3);
	color: inherit;
	text-decoration: none;
}

.oa-event-single__summary-person:hover .oa-event-single__summary-person-name,
.oa-event-single__summary-person:focus-visible .oa-event-single__summary-person-name {
	color: var(--oa-color-primary-700);
}

.oa-event-single__summary-person-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: var(--oa-rounded-full);
	object-fit: cover;
	background: var(--oa-color-neutral-100);
	flex: none;
}

.oa-event-single__summary-person-name {
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	color: var(--oa-heading-color);
	transition: color 0.15s ease;
}

.oa-event-single__summary-prices {
	list-style: none;
	display: grid;
	gap: var(--oa-space-2);
	margin: var(--oa-space-1) 0 0;
	padding: 0;
}

.oa-event-single__summary-price {
	padding: var(--oa-space-3);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-lg);
	background: var(--oa-color-neutral-50);
}

.oa-event-single__summary-price-main {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--oa-space-3);
}

.oa-event-single__summary-price-name {
	font-size: var(--oa-size-text-small);
	font-weight: 700;
	color: var(--oa-heading-color);
}

.oa-event-single__summary-price-amount {
	flex: 0 0 auto;
	font-size: var(--oa-size-text-small);
	font-weight: 700;
	color: var(--oa-color-primary-700);
	white-space: nowrap;
}

.oa-event-single__summary-price-note {
	display: block;
	margin-top: var(--oa-space-1);
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-eyebrow);
	line-height: var(--oa-lh-normal);
}

/* Sidebar booking CTA — full-width pill in the boarding-pass card.
 * Paint inherited from .oa-button.oa-button--primary in archive-shared.css.
 * This class only contributes the full-width sidebar layout (block +
 * narrower horizontal padding to fit the column). */
.oa-event-single__summary-cta {
	display: block;
	padding: var(--oa-space-3) var(--oa-space-5);
	text-align: center;
}

/* ----- Mobile sticky CTA bar -----
 * Issue #64. Always-reachable booking action on mobile — desktop has the
 * sticky boarding-pass sidebar so this is hidden ≥640px. Default state is
 * "display: none" so the bar never costs layout outside its viewport range,
 * even when the markup is server-rendered.
 *
 * The bar wraps either an <a class="oa-event-single__cta--sticky"> fallback
 * or a pretix wrapper carrying .oa-pretix-button--sticky — both are styled
 * full-width within the bar so the tap target spans the full content width
 * for thumb reach. iOS safe-area inset added so the button clears the home
 * indicator on notched devices.
 */
.oa-event-single__sticky-cta {
	display: none;
}

@media (max-width: 639px) {
	.oa-event-single__sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: var(--oa-space-3) var(--oa-space-4);
		padding-bottom: calc( var(--oa-space-3) + env(safe-area-inset-bottom, 0px) );
		background: var(--oa-color-white);
		box-shadow: var(--oa-bar-shadow-top);
	}

	/* Push the page so the last bit of content isn't trapped under the bar.
	   Composed from the same tokens that build the bar:
	     56px  = inner button rendered height (font-size + 1.2 line-height
	             + the button's own --oa-space-3 vertical padding × 2),
	             held as a constant because tap-target sizing is HIG-driven
	             not a designable token,
	     ×2 var(--oa-space-3) = the bar's own vertical padding (matches the
	                            inline padding above so the spacer tracks any
	                            future spacing-token retune),
	     env(safe-area-inset-bottom) = the same notch addend the bar carries.
	   :has() scopes the padding to events that actually render the bar —
	   cancelled / no-provider events skip the tax. Baseline browser support
	   (Safari 15.4+, Chrome 105+, Firefox 121+) is fine for the headless
	   audience; without :has() the fallback is a single bar's worth of
	   blank space at the bottom — graceful, not broken. */
	.oa-event-single:has(.oa-event-single__sticky-cta) {
		padding-bottom: calc( 56px + (var(--oa-space-3) * 2) + env(safe-area-inset-bottom, 0px) );
	}
}

/* Fallback <a> — full-width pill with the same paint as the hero/summary
 * CTAs. Paint inherited from .oa-button.oa-button--primary in
 * archive-shared.css; this class contributes the sticky-bar layout
 * (full width, tap target floor, narrower padding to fit the bar).
 *
 * Intentional divergence: transform: none on hover. The primitive shifts
 * by translateY(-1px) on hover to give the CTA tactile feedback, but
 * this anchor sits inside a position:fixed bar — translating the
 * anchor while the bar's chrome stays put would read as a jiggle, not a
 * press affordance. The bar's box-shadow already separates it from page
 * content, so the background-color step alone reads cleanly as hover. */
.oa-event-single__cta--sticky {
	display: block;
	width: 100%;
	min-height: var(--oa-tap-target-min);
	padding: var(--oa-space-3) var(--oa-space-5);
	text-align: center;
}

.oa-event-single__cta--sticky:hover,
.oa-event-single__cta--sticky:focus-visible {
	transform: none;
}

/* Pretix variant inside the sticky bar — wrapper stays inert (matches the
   --hero / --summary convention above: only display is set on the wrapper,
   never padding). The actual sizing + tap target lives on the inner
   <button> for the hydrated path and on the __fallback--sticky <a> for the
   pre-hydration path. */
.pretix-widget-wrapper.oa-pretix-button--sticky {
	display: block;
}

.oa-pretix-button__fallback--sticky {
	display: block;
	width: 100%;
	padding: var(--oa-space-3) var(--oa-space-5);
	text-align: center;
}

.oa-pretix-button--sticky .pretix-button {
	display: block;
	width: 100%;
	min-height: var(--oa-tap-target-min);
	padding: var(--oa-space-3) var(--oa-space-5);
	text-align: center;
}

/* ----- Share row (#65) -----
 * Inline row below the description on the main column. Icons-only on desktop;
 * icons + labels on mobile so the targets are unambiguous when there's no
 * cursor-hover affordance. Static intent links — no third-party JS.
 */
.oa-event-single__share {
	margin-top: var(--oa-space-6);
}

.oa-event-single__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-2);
	margin: var(--oa-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.oa-event-single__share-link {
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-2);
	min-height: var(--oa-tap-target-min);
	padding: var(--oa-space-2) var(--oa-space-3);
	background: var(--oa-color-neutral-50);
	color: var(--oa-color-neutral-900);
	border-radius: var(--oa-rounded-md);
	text-decoration: none;
	font-size: var(--oa-size-button);
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.oa-event-single__share-link:hover,
.oa-event-single__share-link:focus-visible {
	background: var(--oa-color-primary-50);
	color: var(--oa-color-primary-700);
	border-color: var(--oa-color-primary-200);
}

.oa-event-single__share-link.is-copied {
	background: var(--oa-color-primary-500);
	color: var(--oa-color-white);
	border-color: var(--oa-color-primary-500);
}

.oa-event-single__share-icon {
	display: inline-flex;
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
}

.oa-event-single__share-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Desktop: icon-only — labels collapse to assistive-only. */
@media (min-width: 640px) {
	.oa-event-single__share-link {
		padding: var(--oa-space-2);
		width: var(--oa-tap-target-min);
		justify-content: center;
	}

	.oa-event-single__share-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Copy-link's label stays visible on desktop even when other labels collapse;
	   place this after the generic icon-only rule so the wider button wins. */
	.oa-event-single__share-link.oa-event-single__share-link--copy {
		width: auto;
		padding: var(--oa-space-2) var(--oa-space-3);
		justify-content: center;
	}

	.oa-event-single__share-link--copy .oa-event-single__share-label {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: nowrap;
	}
}

/* ----- Sticky-bar share button (#65) -----
 * Web Share API trigger sits next to the enroll CTA inside the existing
 * mobile sticky bar. Server renders it hidden; assets/js/event-single.js
 * unhides it only when navigator.share is available so unsupported
 * browsers (desktop Firefox) don't display a dead control.
 *
 * The sticky bar still uses block layout for the enroll button — flex is
 * scoped here only when our share button is actually rendered, so we don't
 * disturb the existing pretix / fallback CTA sizing rules.
 */
@media (max-width: 639px) {
	.oa-event-single__sticky-cta:has(.oa-event-single__sticky-share:not([hidden])) {
		display: flex;
		align-items: center;
		gap: var(--oa-space-2);
	}

	.oa-event-single__sticky-cta:has(.oa-event-single__sticky-share:not([hidden])) > :first-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	.oa-event-single__sticky-share[hidden] {
		display: none;
	}

	.oa-event-single__sticky-share {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--oa-tap-target-min);
		height: var(--oa-tap-target-min);
		padding: 0;
		background: var(--oa-color-neutral-50);
		color: var(--oa-color-neutral-900);
		border: 1px solid var(--oa-color-neutral-200);
		border-radius: var(--oa-rounded-lg);
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	}

	.oa-event-single__sticky-share:hover,
	.oa-event-single__sticky-share:focus-visible {
		background: var(--oa-color-primary-50);
		color: var(--oa-color-primary-700);
		border-color: var(--oa-color-primary-200);
	}

	.oa-event-single__sticky-share .oa-event-single__share-icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}


/* ============================================================
 * Event archive calendar.
 *
 * archive-event.php renders a child-theme owned FullCalendar mount when
 * ?view=calendar. LRE remains the recurrence backend, but the archive owns
 * the FullCalendar asset, REST data mapping, navigation controls and skin.
 * ============================================================ */
.oa-event-calendar {
	margin-top: var(--oa-space-4);
}

/* CLS guard: FullCalendar builds the grid after JS loads, so reserve the month
   grid height for the desktop and mobile calendar layouts. */
@media (min-width: 768px) {
	.oa-event-calendar .lre-calendar {
		min-height: 720px;
	}
}

.oa-event-calendar .lre-calendar-wrapper {
	--lre-primary-color: var(--oa-color-primary-600) !important;
	--lre-primary-hover: var(--oa-color-primary-700) !important;
	--lre-event-bg: var(--oa-color-primary-600) !important;
	--lre-event-text: #ffffff !important;
	--lre-event-border: var(--oa-color-primary-700) !important;
	--lre-today-bg: var(--oa-color-primary-100) !important;
	--lre-border-color: var(--oa-color-neutral-200) !important;
	--lre-page-bg: var(--oa-bg-base, #ffffff) !important;
	--lre-header-bg: transparent !important;
	--lre-day-header-color: var(--oa-color-neutral-500) !important;
	--lre-day-number-color: var(--oa-color-neutral-800) !important;
	--lre-border-radius: var(--oa-rounded-lg) !important;
	--lre-font-family: var(--oa-font-body) !important;
	--lre-grid-border-radius: var(--oa-rounded-lg) !important;
	position: relative;
	width: 100%;
	font-family: var(--oa-font-body);
}

.oa-event-calendar .lre-custom-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oa-space-4);
	padding: var(--oa-space-4) 0;
	margin-bottom: var(--oa-space-4);
}

.oa-event-calendar .lre-header-title {
	display: flex;
	align-items: center;
	min-width: 0;
}

.oa-event-calendar .lre-title-year {
	font-size: clamp(1.75rem, 2.2vw, 2.5rem);
	line-height: var(--oa-lh-tight);
	font-weight: 800;
	letter-spacing: 0;
	color: var(--oa-color-neutral-600);
}

.oa-event-calendar .lre-nav-pill {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--oa-space-1);
	padding: var(--oa-space-1);
	border: 1px solid var(--lre-border-color);
	border-radius: var(--oa-rounded-full);
	background: var(--lre-header-bg);
}

.oa-event-calendar .lre-nav-btn,
.oa-event-calendar .lre-nav-today {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2rem;
	border: 0;
	border-radius: var(--oa-rounded-full);
	background: transparent;
	color: var(--oa-color-neutral-700);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.oa-event-calendar .lre-nav-btn {
	width: 2rem;
	font-size: 1.75rem;
	line-height: 1;
}

.oa-event-calendar .lre-nav-today {
	padding: 0 var(--oa-space-3);
	font-size: var(--oa-size-text-small);
}

.oa-event-calendar .lre-nav-btn:hover,
.oa-event-calendar .lre-nav-today:hover {
	background: var(--lre-today-bg);
	color: var(--lre-primary-color);
}

.oa-event-calendar .lre-nav-btn:active,
.oa-event-calendar .lre-nav-today:active {
	transform: scale(0.96);
}

.oa-event-calendar .lre-nav-divider {
	width: 1px;
	height: 1.25rem;
	background: var(--lre-border-color);
}

.oa-event-calendar .lre-nav-month {
	width: 7rem;
	padding: 0 var(--oa-space-2);
	text-align: center;
	font-weight: 800;
	color: var(--oa-color-neutral-600);
	text-transform: capitalize;
}

.oa-event-calendar__status {
	min-height: 1.25rem;
	margin-bottom: var(--oa-space-2);
	color: var(--oa-color-neutral-600);
	font-size: var(--oa-size-text-small);
}

.oa-event-calendar .lre-calendar {
	background: transparent;
	border-radius: var(--lre-grid-border-radius);
	overflow: hidden;
	position: relative;
}

.oa-event-calendar .fc-toolbar {
	display: none !important;
}

.oa-event-calendar .fc-scrollgrid {
	border: 0 !important;
}

.oa-event-calendar .fc-scrollgrid-section > td {
	border: 0 !important;
}

.oa-event-calendar .fc-scrollgrid-section-header,
.oa-event-calendar .fc-scrollgrid-section-header > td,
.oa-event-calendar .fc-scrollgrid thead th {
	border: 0 !important;
	background: transparent !important;
}

.oa-event-calendar .fc-col-header-cell {
	padding: var(--oa-space-3) var(--oa-space-1) var(--oa-space-2);
	border: 0 !important;
	background: transparent;
}

.oa-event-calendar .fc-col-header-cell-cushion {
	color: var(--oa-color-neutral-500);
	font-size: var(--oa-size-text-small);
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
}

.oa-event-calendar .fc-scrollgrid-section-body > td {
	border: 1px solid var(--lre-border-color) !important;
	border-radius: var(--lre-grid-border-radius);
	overflow: hidden;
	background: var(--lre-page-bg);
}

.oa-event-calendar .fc-daygrid-day {
	background: var(--lre-page-bg);
	border-color: var(--lre-border-color);
}

.oa-event-calendar .fc-daygrid-day:hover,
.oa-event-calendar .fc-day-today {
	background: var(--lre-today-bg) !important;
}

.oa-event-calendar .fc-daygrid-day-frame {
	padding: var(--oa-space-1);
}

.oa-event-calendar .fc-daygrid-day-number {
	padding: var(--oa-space-2);
	color: var(--oa-color-neutral-800);
	font-weight: 700;
	text-decoration: none;
}

.oa-event-calendar .fc-day-today .fc-daygrid-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin: var(--oa-space-1);
	padding: 0;
	border-radius: var(--oa-rounded-full);
	background: var(--lre-primary-color);
	color: #ffffff;
}

.oa-event-calendar .fc-event {
	border-radius: var(--lre-border-radius);
	cursor: pointer;
	padding: 0.125rem 0.25rem;
	transition: transform 0.12s ease, box-shadow 0.16s ease;
}

.oa-event-calendar .fc-event:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.oa-event-calendar .fc-event-title,
.oa-event-calendar .fc-event-time {
	font-weight: 700;
}

.oa-event-calendar .fc-daygrid-event .fc-event-time,
.oa-event-calendar .fc-daygrid-event .fc-event-title {
	display: -webkit-box;
	overflow: hidden;
	line-height: 1.15;
	white-space: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.oa-event-calendar .fc-daygrid-event .fc-event-main-frame {
	align-items: flex-start;
	gap: 0.0625rem;
}

.oa-event-calendar .fc-daygrid-event .fc-event-time {
	flex: 0 0 3.2rem;
	margin-right: 0;
}

.oa-event-calendar .fc-daygrid-event .fc-event-title-container {
	min-width: 0;
}

.oa-event-calendar .fc-daygrid-event-harness {
	margin-bottom: var(--oa-space-1);
}

.oa-event-calendar .fc-list {
	border: 0;
	border-radius: var(--lre-grid-border-radius);
	overflow: hidden;
}

.oa-event-calendar .fc-list-table {
	width: 100%;
	border-collapse: collapse;
}

.oa-event-calendar .fc-list-event {
	cursor: pointer;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	transform: none !important;
	box-shadow: none !important;
}

.oa-event-calendar .fc-list-event td {
	padding: var(--oa-space-3) var(--oa-space-4);
	vertical-align: top;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lre-border-color);
}

.oa-event-calendar .fc-list-event:hover td {
	background: var(--lre-today-bg);
}

.oa-event-calendar .fc-list-event-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-width: 0.3125rem !important;
	border-style: solid !important;
	border-radius: var(--oa-rounded-full);
	box-sizing: border-box;
}

.oa-event-calendar .fc-list-event-time {
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-text-small);
	font-weight: 700;
	white-space: nowrap;
}

.oa-event-calendar .fc-list-event-title {
	font-weight: 800;
}

.oa-event-calendar .fc-list-event-title a {
	color: var(--oa-color-neutral-800);
	text-decoration: none;
}

.oa-event-calendar .fc-list-day th {
	padding: 0;
	border: 0;
}

.oa-event-calendar .fc-list-day-cushion {
	display: flex;
	align-items: baseline;
	gap: var(--oa-space-2);
	padding: var(--oa-space-3) var(--oa-space-4);
	background: var(--lre-header-bg);
	border-top: 1px solid var(--lre-border-color);
	border-bottom: 1px solid var(--lre-border-color);
}

.oa-event-calendar .fc-list-day:first-child .fc-list-day-cushion {
	border-top: 0;
}

.oa-event-calendar .fc-list-day-text,
.oa-event-calendar .fc-list-day-side-text {
	color: var(--oa-color-neutral-600);
	font-weight: 800;
	text-decoration: none;
}

.oa-event-calendar .fc-list-day-text {
	font-size: var(--oa-size-text-small);
	text-transform: uppercase;
}

.oa-event-calendar .fc-list-day-side-text {
	font-size: var(--oa-size-text-small);
}

.oa-event-calendar .fc-list-empty {
	padding: var(--oa-space-8) var(--oa-space-4);
	background: var(--lre-page-bg);
	color: var(--oa-color-neutral-600);
	text-align: center;
}

@media (max-width: 767px) {
	.oa-event-calendar .lre-calendar {
		min-height: 35rem;
	}

	.oa-event-calendar .lre-custom-header {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--oa-space-3);
		padding-top: var(--oa-space-2);
		margin-bottom: var(--oa-space-3);
	}

	.oa-event-calendar .lre-title-year {
		font-size: 2rem;
	}

	.oa-event-calendar .lre-nav-pill {
		width: 100%;
		justify-content: space-between;
	}

	.oa-event-calendar .lre-nav-month {
		width: auto;
		flex: 1 1 auto;
	}

	.oa-event-calendar .fc-col-header-cell {
		padding: var(--oa-space-2) 0 var(--oa-space-1);
	}

	.oa-event-calendar .fc-col-header-cell-cushion {
		font-size: 0.6875rem;
	}

	.oa-event-calendar .fc-daygrid-day-frame {
		min-height: 4.5rem;
		padding: 0.125rem;
	}

	.oa-event-calendar .fc-daygrid-day-number {
		padding: 0.25rem;
		font-size: 0.75rem;
		line-height: 1;
	}

	.oa-event-calendar .fc-day-today .fc-daygrid-day-number {
		width: 1.375rem;
		height: 1.375rem;
		margin: 0.125rem;
	}

	.oa-event-calendar .fc-daygrid-day-events {
		margin-top: 0.125rem;
	}

	.oa-event-calendar .fc-daygrid-event-harness {
		margin-bottom: 0.125rem;
	}

	.oa-event-calendar .fc-daygrid-event {
		min-height: 1.75rem;
		padding: 0.125rem 0.1875rem;
		border-radius: 0.25rem;
	}

	.oa-event-calendar .fc-event-main {
		min-width: 0;
	}

	.oa-event-calendar .fc-event-title,
	.oa-event-calendar .fc-event-time {
		font-size: 0.625rem;
		line-height: 0.8125rem;
	}

	.oa-event-calendar .fc-daygrid-event .fc-event-time {
		display: none;
	}

	.oa-event-calendar .fc-daygrid-more-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.25rem;
		height: 1rem;
		padding: 0 0.25rem;
		border-radius: 0.25rem;
		background: var(--oa-color-neutral-100);
		color: var(--oa-color-neutral-700);
		font-size: 0.625rem;
		font-weight: 800;
		line-height: 1;
		text-decoration: none;
	}
}


/* Color key above the calendar — swatch + Zielgruppe label. Colors come
   from the audience map in inc/lre-calendar.php (inline background on the
   swatch), so the key always matches the bar colors without duplication. */
.oa-event-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--oa-space-2) var(--oa-space-5);
	margin: 0 0 var(--oa-space-4);
	padding: 0;
	list-style: none;
}

.oa-event-calendar__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-2);
}

.oa-event-calendar__legend-swatch {
	width: 0.875rem;
	height: 0.875rem;
	flex: 0 0 auto;
	border-radius: var(--oa-rounded);
}

.oa-event-calendar__legend-label {
	font-size: var(--oa-size-text-small);
	line-height: var(--oa-lh-normal);
	color: var(--oa-color-neutral-700);
}

/* ============================================================
 * Keyboard focus visibility (WCAG 2.4.7)
 * FullCalendar/LRE reset `outline` to none on events, the nav
 * buttons and the view-switch control, so keyboard focus was
 * invisible. Restore a token-colored focus-visible ring scoped to
 * the calendar. `!important` mirrors the skin block above — it beats
 * the plugin's own outline reset. `:focus-visible` keeps mouse users
 * unaffected.
 *
 * A single outward dark ring covers every surface: month-view events
 * render as light list-rows (thin audience-colored left border on a
 * white cell), week/day events as filled colored blocks, and the
 * controls sit on the light header — a neutral-900 ring offset onto the
 * surrounding light background stays legible against all of them.
 * ============================================================ */
.oa-event-calendar :is(
	.lre-nav-btn,
	.lre-nav-today,
	.lre-vs-trigger,
	.lre-back-btn,
	.fc-button,
	.fc-event
):focus-visible {
	outline: 3px solid var(--oa-color-neutral-900) !important;
	outline-offset: 2px !important;
	border-radius: var(--oa-rounded) !important;
}

/* ============================================================
 * Own event side panel (assets/js/lre-calendar-panel.js)
 * Accessible dialog opened from grid-view calendar events. Slides in
 * from the right over a dimmed backdrop; the page behind is set `inert`
 * by the script. Design-system native (tokens throughout).
 * ============================================================ */
.oa-evpanel-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	/* Block clicks ONLY while open. The backdrop is a full-viewport fixed layer,
	   so without this it intercepts every click even at opacity:0 — and it only
	   gets display:none from an async `done()` (transitionend/timeout), which if
	   missed leaves the page un-clickable. Gating pointer-events on the
	   synchronously-toggled .is-open class makes teardown immediate and
	   independent of that async path. */
	pointer-events: none;
	transition: opacity 0.28s ease;
}

.oa-evpanel-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.oa-evpanel {
	position: fixed;
	top: var(--oa-space-4);
	right: var(--oa-space-4);
	bottom: var(--oa-space-4);
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: min(420px, calc(100vw - var(--oa-space-4) * 2));
	/* The panel is the rounded, clipping shell — it does NOT scroll. Scrolling
	   lives on .oa-evpanel__content below, so the scrollbar sits INSIDE the
	   rounded corners (never poking past them) and no reserved gutter strip
	   shows on the right when the content fits. overflow:hidden also clips the
	   full-bleed media to the radius. */
	overflow: hidden;
	background: var(--oa-color-white);
	/* Floats clear of the viewport edges: rounded + a layered lift. */
	border-radius: var(--oa-rounded-2xl);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35), var(--oa-blur-shadow);
	/* Slide fully off-screen including the right gap when closed. */
	transform: translateX(calc(100% + var(--oa-space-4)));
	transition: transform 0.28s ease;
	font-family: var(--oa-font-body);
}

.oa-evpanel.is-open {
	transform: translateX(0);
}

/* `.oa-evpanel{display:flex}` outranks the UA `[hidden]{display:none}` (equal
   specificity, later source order), so a closed panel would otherwise linger in
   the layout + accessibility tree — only slid off-screen by transform. This
   higher-specificity rule lets `panel.hidden = true` actually remove it once the
   slide-out finishes. JS clears `hidden` BEFORE adding `.is-open` (with a reflow
   between), so the open transition is unaffected. */
.oa-evpanel[hidden] {
	display: none;
}

/* The scrolling region — fills the panel (flex:1 + min-height:0) and scrolls
   independently. The rounded shell above (overflow:hidden) clips its scrollbar
   so it stays inside the corners. No scrollbar-gutter: when content fits there
   is no reserved strip; when it overflows the classic bar takes its own space. */
.oa-evpanel__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Persistent, design-system-tinted scrollbar (WebKit/Blink). The white thumb
   border insets the bar so it doesn't crowd the content edge. The standard
   scrollbar-width/color props are deliberately NOT set here — in Chrome 121+
   they suppress ::-webkit-scrollbar and degrade to a thin auto-hiding overlay
   bar; Firefox gets them via the @supports block below instead. */
.oa-evpanel__content::-webkit-scrollbar {
	width: 12px;
}

.oa-evpanel__content::-webkit-scrollbar-track {
	background: transparent;
}

.oa-evpanel__content::-webkit-scrollbar-thumb {
	background: var(--oa-color-neutral-300);
	border-radius: var(--oa-rounded-full);
	border: 3px solid var(--oa-color-white);
}

.oa-evpanel__content::-webkit-scrollbar-thumb:hover {
	background: var(--oa-color-neutral-400);
}

/* Firefox: no ::-webkit-scrollbar, so theme via the standard props. Gating on
   `not selector(::-webkit-scrollbar)` keeps these out of Chrome (where they'd
   suppress the classic bar above). A colored scrollbar in Firefox is
   non-overlay, so it stays persistent the same way. */
@supports not selector(::-webkit-scrollbar) {
	.oa-evpanel__content {
		scrollbar-width: thin;
		scrollbar-color: var(--oa-color-neutral-300) transparent;
	}
}

/* When the panel is open, lock background scroll. */
body.oa-evpanel-open {
	overflow: hidden;
}

.oa-evpanel__close {
	position: absolute;
	top: var(--oa-space-3);
	right: var(--oa-space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--oa-tap-target-min);
	height: var(--oa-tap-target-min);
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--oa-color-neutral-900);
	background: var(--oa-color-white);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-full);
	cursor: pointer;
	transition: background 0.15s ease;
}

.oa-evpanel__close:hover {
	background: var(--oa-color-neutral-100);
}

.oa-evpanel__media {
	aspect-ratio: var(--oa-aspect-card);
	overflow: hidden;
	background: var(--oa-color-neutral-100);
	flex: 0 0 auto;
}

.oa-evpanel__media--fallback {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0)),
		var(--oa-color-neutral-200);
}

.oa-evpanel__media--fallback::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.72) 0 0.65rem, transparent 0.7rem),
		linear-gradient(135deg, transparent 0 58%, rgba(255, 255, 255, 0.52) 58% 64%, transparent 64%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

.oa-evpanel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.oa-evpanel__body {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-3);
	padding: var(--oa-space-6) var(--oa-space-5) var(--oa-space-8);
}

.oa-evpanel__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-2);
}

.oa-evpanel__badge {
	display: inline-block;
	padding: var(--oa-space-1) var(--oa-space-3);
	font-size: var(--oa-size-text-small);
	line-height: var(--oa-lh-tight);
	color: var(--oa-color-neutral-800);
	background: var(--oa-color-neutral-100);
	border-radius: var(--oa-rounded-full);
}

.oa-evpanel__badge--cancelled {
	color: var(--oa-color-white);
	background: var(--oa-color-quinary-700);
}

.oa-evpanel__title {
	margin: 0;
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-h3);
	line-height: var(--oa-lh-tight);
	color: var(--oa-color-neutral-950);
}

.oa-evpanel__when {
	margin: 0;
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-600);
}

.oa-evpanel__excerpt {
	margin: 0;
	font-size: var(--oa-size-text);
	line-height: var(--oa-lh-normal);
	color: var(--oa-color-neutral-800);
}

.oa-evpanel__actions {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-3);
	margin-top: var(--oa-space-2);
}

.oa-evpanel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--oa-tap-target-min);
	padding: var(--oa-space-3) var(--oa-space-5);
	font-size: var(--oa-size-text);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-radius: var(--oa-rounded-lg);
	transition: background 0.15s ease, color 0.15s ease;
}

.oa-evpanel__btn--primary {
	color: var(--oa-color-white);
	background: var(--oa-color-primary-600);
}

.oa-evpanel__btn--primary:hover {
	background: var(--oa-color-primary-700);
}

.oa-evpanel__btn--secondary {
	color: var(--oa-color-primary-700);
	background: var(--oa-color-white);
	border: 1px solid var(--oa-color-primary-600);
}

.oa-evpanel__btn--secondary:hover {
	background: var(--oa-color-primary-50);
}

.oa-evpanel__close:focus-visible,
.oa-evpanel__btn:focus-visible {
	outline: 3px solid var(--oa-color-neutral-900);
	outline-offset: 2px;
}

.oa-evpanel__error {
	padding: var(--oa-space-6) var(--oa-space-5);
	color: var(--oa-color-neutral-700);
}

/* Visually-hidden live-region status (skeleton announce). */
.oa-evpanel__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skeleton placeholders while the occurrence loads. */
.oa-evpanel__sk-img {
	aspect-ratio: var(--oa-aspect-card);
	background: var(--oa-color-neutral-100);
}

.oa-evpanel__sk-line {
	height: 1.25rem;
	margin: var(--oa-space-5) var(--oa-space-5) 0;
	border-radius: var(--oa-rounded);
	background: var(--oa-color-neutral-100);
}

.oa-evpanel__sk-line--short {
	width: 55%;
}

/* Add-to-calendar disclosure inside the panel. */
.oa-evpanel__atc {
	margin-top: var(--oa-space-2);
	border-top: 1px solid var(--oa-color-neutral-200);
	padding-top: var(--oa-space-4);
}

.oa-evpanel__atc-summary {
	cursor: pointer;
	font-size: var(--oa-size-text);
	font-weight: 600;
	color: var(--oa-color-primary-700);
	list-style: none;
	min-height: var(--oa-tap-target-min);
	display: flex;
	align-items: center;
	gap: var(--oa-space-2);
}

.oa-evpanel__atc-summary::-webkit-details-marker {
	display: none;
}

.oa-evpanel__atc-summary::before {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
}

.oa-evpanel__atc[open] .oa-evpanel__atc-summary::before {
	content: "–";
}

.oa-evpanel__atc-summary:focus-visible {
	outline: 3px solid var(--oa-color-neutral-900);
	outline-offset: 2px;
}

.oa-evpanel__atc-list {
	list-style: none;
	margin: var(--oa-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.oa-evpanel__atc-link {
	display: flex;
	align-items: center;
	min-height: var(--oa-tap-target-min);
	padding: var(--oa-space-2) var(--oa-space-2);
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-800);
	text-decoration: none;
	border-radius: var(--oa-rounded);
}

.oa-evpanel__atc-link:hover {
	background: var(--oa-color-neutral-100);
	color: var(--oa-color-primary-700);
}

.oa-evpanel__atc-link:focus-visible {
	outline: 3px solid var(--oa-color-neutral-900);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.oa-evpanel,
	.oa-evpanel-backdrop {
		transition: none;
	}
}

/* ============================================================
 * Add-to-calendar disclosure on the single event page. Same markup
 * as the calendar panel's (oa_eo_render_add_to_calendar), scoped to
 * the single-page hero context.
 * ============================================================ */
.oa-event-single__atc {
	margin-top: var(--oa-space-4);
	max-width: 28rem;
}

.oa-event-single__atc-summary {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-2);
	min-height: var(--oa-tap-target-min);
	font-size: var(--oa-size-text);
	font-weight: 600;
	color: var(--oa-color-primary-700);
	list-style: none;
}

.oa-event-single__atc-summary::-webkit-details-marker {
	display: none;
}

.oa-event-single__atc-summary::before {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
}

.oa-event-single__atc[open] .oa-event-single__atc-summary::before {
	content: "–";
}

.oa-event-single__atc-summary:focus-visible {
	outline: 2px solid var(--oa-color-primary-500);
	outline-offset: 2px;
}

.oa-event-single__atc-list {
	list-style: none;
	margin: var(--oa-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.oa-event-single__atc-link {
	display: flex;
	align-items: center;
	min-height: var(--oa-tap-target-min);
	padding: var(--oa-space-2);
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-800);
	text-decoration: none;
	border-radius: var(--oa-rounded);
}

.oa-event-single__atc-link:hover {
	background: var(--oa-color-neutral-100);
	color: var(--oa-color-primary-700);
}

.oa-event-single__atc-link:focus-visible {
	outline: 2px solid var(--oa-color-primary-500);
	outline-offset: 2px;
}

/* Leading icon on each add-to-calendar provider link (shared by the panel and
   the single-event disclosure). A currentColor mask so the glyph inherits the
   link's neutral/teal color + hover. The hosted calendars get a calendar
   glyph; the .ics link (marked with [download]) gets a download glyph. */
.oa-evpanel__atc-link::before,
.oa-event-single__atc-link::before {
	content: '';
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-right: var(--oa-space-2);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.oa-evpanel__atc-link[download]::before,
.oa-event-single__atc-link[download]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}