/**
 * Shared single-page primitives — outer page scaffold, two-column layout,
 * detail-section card chrome.
 *
 * Loaded on every server-rendered CPT single template that opts in
 * (currently single-event.php, single-event_request.php). Per-CPT files
 * keep their hero, sidebar card, gallery grid, button paint, and any
 * content-specific section rules; the chrome lives here so both CPTs
 * stay in sync as the singles surface grows.
 *
 * Depends on `oa-global` for tokens.
 *
 * Primitives:
 *   .oa-single             outer <main>; neutral-tinted page bg + body type.
 *                          Cards "lift" off the bg the same way the archive
 *                          surface treats it.
 *   .oa-single__layout     two-column main+sidebar grid; single column on
 *                          mobile, 2fr / minmax(18rem, 1fr) at lg. Sidebar
 *                          floor stops a tight viewport from collapsing the
 *                          aside into an unreadable narrow column.
 *   .oa-single__title      h1 typography for single-page heroes. The hero
 *                          containers themselves stay per-CPT — they
 *                          diverge structurally (capped vs full-bleed,
 *                          2-col vs 1-col, eyebrow/badges/CTA presence)
 *                          and a shared container would be a coat-hanger.
 *   .oa-section            detail-section card chrome (padding, border,
 *                          radius, base bg). Used by the main-column
 *                          sections that carry their own card surface
 *                          (description, dates, gallery, standort, persons,
 *                          share). Per-CPT files add content-specific rules
 *                          on a sibling modifier class.
 *   .oa-section__title     section heading inside .oa-section.
 *   .oa-single__description-body
 *                          shared long-form event description typography.
 *                          Used by scheduled events and request events so
 *                          both editorial bodies keep identical rhythm,
 *                          heading scale, list treatment, and link paint.
 *   .oa-sidebar-card       sidebar CTA / boarding-pass card chrome.
 *                          Padded box with neutral border. Paint hooks
 *                          (--oa-sidebar-card-bg, --oa-sidebar-card-radius)
 *                          let consumers swap the surface tint and corner
 *                          radius without forking the chrome. Sticky
 *                          positioning + internal title typography stay
 *                          per-CPT (different roles, different content
 *                          density).
 *   .oa-prose              rich-text rendering for the_content / wysiwyg
 *                          fields (description, bio). Lists, headings,
 *                          links, emphasis, blockquote. Add alongside the
 *                          per-surface wrapper class.
 *   .oa-icon               MOVED to archive-shared.css (now also used by
 *                          archive cards; lives with its FA @font-face).
 *   .oa-breadcrumbs        single-page breadcrumb trail. Flex <ol>
 *                          (list reset on the container) of <li>s
 *                          carrying either an item or a separator;
 *                          enclosing <nav aria-label> is the
 *                          consumer's responsibility (kept out of the
 *                          primitive so each callsite sets its own
 *                          translated label). BEM children:
 *                          __item (baseline <li>, no decoration),
 *                          __link (primary-600, hover underline),
 *                          __sep (neutral-400 chevron glyph in
 *                          markup, also an <li> with aria-hidden so
 *                          screen readers count items not separators),
 *                          __current (neutral-700, weight 500, no
 *                          link styling, paired with
 *                          aria-current="page" in markup). The
 *                          literal "›" lives in markup (not CSS
 *                          ::before) so translations can reach it.
 *
 * Breakpoint values (1024px) are literal in `@media` queries because CSS
 * spec doesn't accept custom properties inside media conditions.
 */

.oa-single {
	background: var(--oa-color-neutral-50);
	color: var(--oa-body-color);
	font-family: var(--oa-font-body);
	line-height: var(--oa-lh-body);
}

.oa-single__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--oa-space-8);
}

@media (min-width: 1024px) {
	.oa-single__layout {
		grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
		gap: var(--oa-space-10);
	}
}

.oa-section {
	padding: var(--oa-space-6) var(--oa-space-6) var(--oa-space-7);
	background: var(--oa-bg-base);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-2xl);
}

@media (min-width: 640px) {
	.oa-section {
		padding: var(--oa-space-8);
	}
}

.oa-section__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-5);
}

.oa-single__title {
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-h1);
	line-height: var(--oa-lh-heading);
	color: var(--oa-heading-color);
	margin: 0 0 var(--oa-space-3);
}

/* Shared long-form event/request-event description body. */
.oa-single__description-body {
	color: var(--oa-color-neutral-700);
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	line-height: 1.65;
}

.oa-single__description-body :is(h2, h3, h4) {
	font-family: var(--oa-font-heading);
	color: var(--oa-heading-color);
	line-height: 1.22;
	margin: var(--oa-space-7) 0 var(--oa-space-3);
}

.oa-single__description-body :is(h2, h3) {
	font-size: clamp(1.35rem, 1.2rem + 0.45vw, 1.7rem);
}

.oa-single__description-body h4 {
	font-size: clamp(1.15rem, 1.05rem + 0.25vw, 1.35rem);
}

.oa-single__description-body > :first-child {
	margin-top: 0;
}

.oa-single__description-body p {
	margin: 0 0 var(--oa-space-4);
	padding-bottom: 0;
	font-family: var(--oa-font-body);
	font-weight: 400;
	line-height: inherit;
}

.oa-single__description-body p:last-child {
	margin-bottom: 0;
}

.oa-single__description-body :is(ul, ol) {
	list-style-position: outside;
	margin: 0 0 var(--oa-space-4);
	padding-left: 1.45em;
	font-family: var(--oa-font-body);
	font-weight: 400;
	line-height: inherit;
}

.oa-single__description-body ul {
	list-style-type: disc;
}

.oa-single__description-body ol {
	list-style-type: decimal;
}

.oa-single__description-body li::marker {
	color: var(--oa-color-primary-600);
	font-size: 0.85em;
}

.oa-single__description-body li + li {
	margin-top: var(--oa-space-2);
}

.oa-single__description-body :is(ul, ol):last-child {
	margin-bottom: 0;
}

.oa-single__description-body a {
	color: var(--oa-link-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.oa-single__description-body blockquote {
	margin: 0 0 var(--oa-space-4);
	padding-left: var(--oa-space-4);
	border-left: 3px solid var(--oa-color-neutral-200);
	color: var(--oa-color-neutral-700);
}

.oa-sidebar-card {
	padding: var(--oa-space-6);
	background: var(--oa-sidebar-card-bg, var(--oa-bg-base));
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-sidebar-card-radius, var(--oa-rounded-2xl));
}

/* Shared Bit Form conversion dialog. The form document remains isolated in a
 * lazy same-origin iframe so its generated CSS/runtime cannot leak into the
 * cached event page (and vice versa). */
.oa-bitform-dialog {
	width: min(46rem, calc(100% - (2 * var(--oa-space-gutter))));
	max-width: none;
	height: min(48rem, calc(100dvh - (2 * var(--oa-space-6))));
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	background: var(--oa-bg-base);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-2xl);
	box-shadow: 0 1.5rem 3rem -1rem rgb(24 24 27 / 0.35);
}

.oa-bitform-dialog::backdrop {
	background: rgb(24 24 27 / 0.66);
	backdrop-filter: blur(2px);
}

.oa-bitform-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oa-space-4);
	min-height: 4.5rem;
	padding: var(--oa-space-4) var(--oa-space-5);
	border-bottom: 1px solid var(--oa-color-neutral-200);
}

.oa-bitform-dialog__title {
	margin: 0;
	font-family: var(--oa-font-heading);
	font-size: var(--oa-size-card-title);
	line-height: var(--oa-lh-heading);
	color: var(--oa-heading-color);
}

.oa-bitform-dialog__close {
	display: inline-grid;
	place-items: center;
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--oa-color-neutral-800);
	background: var(--oa-color-neutral-100);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: 50%;
	cursor: pointer;
}

.oa-bitform-dialog__close:hover {
	color: var(--oa-color-primary-800);
	background: var(--oa-color-primary-100);
}

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

.oa-bitform-dialog__close svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.oa-bitform-dialog__body {
	position: relative;
	height: calc(100% - 4.5rem);
	background: var(--oa-color-neutral-50);
}

.oa-bitform-dialog__loading {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: var(--oa-color-neutral-700);
}

.oa-bitform-dialog__frame {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	opacity: 0;
}

.oa-bitform-dialog__frame.is-loaded {
	opacity: 1;
}

.oa-bitform-dialog-open {
	overflow: hidden;
}

@media (max-width: 639px) {
	.oa-bitform-dialog {
		width: 100%;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.oa-bitform-dialog__frame {
		transition: opacity 160ms ease;
	}
}

/* Rich-text ("prose") rendering for the_content / wysiwyg fields shown in
 * single templates (standort description, person bio, event_request
 * description). Re-asserts the list bullets Divi's base reset strips, and
 * gives headings / links / emphasis / blockquotes sensible defaults. Add
 * the .oa-prose class alongside the per-surface wrapper.
 *
 * Typography here matches the per-surface description rules it replaced, so
 * the only visible change is correct list + link + heading rendering. */
.oa-prose {
	font-size: var(--oa-size-text);
	line-height: var(--oa-lh-body);
	color: var(--oa-color-neutral-900);
}

.oa-prose p {
	margin: 0 0 var(--oa-space-3);
}

.oa-prose :where(h2, h3, h4) {
	font-family: var(--oa-font-heading);
	color: var(--oa-heading-color);
	line-height: var(--oa-lh-heading);
	margin: var(--oa-space-6) 0 var(--oa-space-3);
}

.oa-prose :where(ul, ol) {
	margin: 0 0 var(--oa-space-3);
	padding-left: var(--oa-space-6);
}

/* Divi's base resets list markers to none on content lists — re-assert so
 * editor bullet / numbered lists render. */
.oa-prose ul { list-style: disc outside; }
.oa-prose ol { list-style: decimal outside; }

.oa-prose li {
	margin-bottom: var(--oa-space-2);
}

.oa-prose :where(strong, b) {
	font-weight: 700;
}

.oa-prose a {
	color: var(--oa-color-primary-600);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-prose blockquote {
	margin: 0 0 var(--oa-space-3);
	padding-left: var(--oa-space-4);
	border-left: 3px solid var(--oa-color-neutral-200);
	color: var(--oa-color-neutral-700);
}

.oa-prose > :last-child {
	margin-bottom: 0;
}

/* NOTE: the .oa-icon FA-glyph primitive moved to archive-shared.css — it's
 * now used by archive cards (standort address) as well as single contact
 * rows, and that file already carries the FA @font-face it needs. */

.oa-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--oa-space-2);
	margin: 0 0 var(--oa-space-5);
	padding: 0;
	list-style: none;
	font-size: var(--oa-size-text-small);
}

.oa-breadcrumbs__link {
	color: var(--oa-color-primary-600);
	text-decoration: none;
}

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

.oa-breadcrumbs__sep {
	color: var(--oa-color-neutral-400);
}

.oa-breadcrumbs__current {
	color: var(--oa-color-neutral-700);
	font-weight: 500;
}

/* Shared gallery lightbox for hand-rendered single CPT pages. */
.oa-lightbox-open {
	overflow: hidden;
}

.oa-lightbox[hidden] {
	display: none;
}

.oa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 2rem);
	color: var(--oa-color-white);
}

.oa-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--oa-color-neutral-950) 78%, transparent);
	backdrop-filter: blur(2px);
}

.oa-lightbox__frame {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-areas:
		"figure figure figure"
		"prev counter next";
	grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
	align-items: end;
	column-gap: var(--oa-space-4);
	row-gap: var(--oa-space-3);
	width: min(74rem, 100%);
	max-height: calc(100vh - 2rem);
}

.oa-lightbox__figure {
	grid-area: figure;
	position: relative;
	margin: 0;
	display: grid;
	gap: var(--oa-space-3);
	justify-items: center;
	min-width: 0;
}

.oa-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: min(74vh, 48rem);
	border-radius: var(--oa-rounded-lg);
	object-fit: contain;
	background: var(--oa-color-neutral-950);
	box-shadow: var(--oa-shadow-lg);
}

.oa-lightbox__caption,
.oa-lightbox__counter {
	margin: 0;
	color: var(--oa-color-white);
	font-size: var(--oa-size-text-small);
	line-height: var(--oa-lh-body);
	text-align: center;
}

.oa-lightbox__counter {
	grid-area: counter;
	opacity: 0.82;
}

.oa-lightbox__button {
	display: inline-grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--oa-color-white) 34%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--oa-color-neutral-950) 48%, transparent);
	color: var(--oa-color-white);
	font: inherit;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--oa-color-neutral-950) 24%, transparent);
}

.oa-lightbox__button:hover,
.oa-lightbox__button:focus-visible {
	background: var(--oa-color-white);
	color: var(--oa-color-neutral-950);
}

.oa-lightbox__button:focus-visible {
	outline: 3px solid var(--oa-color-white);
	outline-offset: 3px;
}

.oa-lightbox__icon {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.oa-lightbox__close {
	position: fixed;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	width: 3rem;
	height: 3rem;
}

.oa-lightbox__nav {
	width: 3.25rem;
	height: 3.25rem;
	align-self: center;
}

.oa-lightbox__nav--prev {
	grid-area: prev;
}

.oa-lightbox__nav--next {
	grid-area: next;
}

@media (max-width: 640px) {
	.oa-lightbox {
		padding: var(--oa-space-3);
	}

	.oa-lightbox__frame {
		grid-template-areas:
			"figure figure"
			"prev next"
			"counter counter";
		grid-template-columns: 1fr 1fr;
		row-gap: var(--oa-space-3);
	}

	.oa-lightbox__nav {
		width: 100%;
		max-width: 8rem;
		justify-self: center;
	}

	.oa-lightbox__image {
		max-height: 68vh;
	}

	.oa-lightbox__close {
		width: 2.75rem;
		height: 2.75rem;
	}
}