/**
 * Shared archive primitives — page scaffolding (container, hero, list grid),
 * filter bar, status row, filter chips, pagination, empty state, card baseline.
 *
 * Loaded on every server-rendered CPT archive that consumes the
 * template-parts/archive-*.php family (archive-event.php, archive-event_request.php,
 * future archives). Per-CPT files keep only their card extensions
 * (date pill / location / cancelled state on event; eyebrow on event_request)
 * and the cross-promo / single-page styles.
 *
 * The Font Awesome @font-face is registered as inline CSS attached to this
 * file's enqueue handle in functions.php so any archive consuming these
 * primitives gets the icon glyphs without depending on event.css.
 *
 * Depends on `oa-global` for tokens.
 */

/* =====================================================================
 * Page-level scaffolding
 *
 * .oa-archive          outer <main>; full-bleed neutral-tinted page bg
 *                      so the hero gradient peaks read clearly.
 * .oa-archive__inner   capped content column (filter bar, list, pagination,
 *                      cross-promos). Width formula composes the cap with
 *                      gutter so we never need a separate horizontal padding.
 * .oa-archive__hero    full-bleed signature header; gradient + crosshatch
 *                      via pseudo-elements so per-CPT files only set the
 *                      copy. Same treatment used on the home page (.oa-gradient-bg
 *                      + .oa-grid-pattern), kept theme-side here so the
 *                      archive doesn't depend on a Divi page state.
 * .oa-archive__list    1/2/3-up responsive grid at sm/lg breakpoints; literal
 *                      640px / 1024px in @media queries since CSS spec
 *                      forbids custom properties inside media conditions.
 * =================================================================== */
.oa-archive {
	background: var(--oa-color-neutral-50);
	color: var(--oa-body-color);
	font-family: var(--oa-font-body);
	line-height: var(--oa-lh-body);
}

.oa-archive__inner {
	width: min(var(--oa-content-wide), 100% - 2 * var(--oa-space-gutter));
	margin-inline: auto;
	padding-block: 0 var(--oa-space-page-y);
}

.oa-archive__hero {
	position: relative;
	overflow: hidden;
	/* Compact band: the former --oa-space-hero-xl (5–8rem) left a lot of dead
	   vertical space above the filter bar on every archive. This tighter clamp
	   keeps the gradient/crosshatch signature but pulls the content up. */
	padding: clamp(2.75rem, 2rem + 2.5vw, 4.5rem) var(--oa-space-gutter);
	margin-bottom: var(--oa-space-section-y);
	text-align: center;
	background: var(--oa-bg-base);
}

.oa-archive__hero::before,
.oa-archive__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.oa-archive__hero::before {
	/* Page bg is neutral-50, so the gradient midpoint switches to white —
	 * keeps the tinted ends reading clearly as the gradient peaks instead
	 * of merging with the surrounding page bg.
	 */
	background-image: linear-gradient(
		to bottom right,
		var(--oa-color-primary-100),
		var(--oa-color-white),
		var(--oa-color-secondary-100)
	);
}

.oa-archive__hero::after {
	background-image:
		linear-gradient(var(--oa-grid-pattern-stroke) 1px, transparent 1px),
		linear-gradient(90deg, var(--oa-grid-pattern-stroke) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.25;
}

.oa-archive__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 48rem;
	margin: 0 auto;
}

.oa-archive__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-4);
}

.oa-archive__subtitle {
	font-size: var(--oa-size-text);
	line-height: var(--oa-lh-body);
	color: var(--oa-color-neutral-700);
	margin: 0;
}

.oa-archive__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--oa-space-6);
}

@media (min-width: 640px) {
	.oa-archive__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.oa-archive__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--oa-space-8);
	}
}

.oa-archive__item {
	display: flex;
}

/* =====================================================================
 * CTA band
 *
 * Full-width rounded band on a primary→secondary gradient field, with a
 * centered body and a decorative pill CTA. The whole surface is one link
 * (Pattern A: card-as-link), so the pill is a non-interactive <span> whose
 * paint flips via the parent-anchor state selectors.
 *
 * Two consumers, both via template-parts/cta-band.php:
 *   - event archive  → cross-promo to the "Auf Anfrage" archive
 *   - event_request archive → "your own idea?" contact CTA
 * (Extracted from the former .oa-event-request-promo block on the second
 * consumer.) The CTA arrow uses the FA Solid face declared in this sheet,
 * so it resolves on every archive that loads archive-shared.
 * =================================================================== */
.oa-cta-band {
	margin-top: var(--oa-space-8);
	border-radius: var(--oa-rounded-2xl);
	background: linear-gradient(
		135deg,
		var(--oa-color-primary-100) 0%,
		var(--oa-color-secondary-100) 100%
	);
	overflow: hidden;
}

.oa-cta-band__link {
	display: block;
	padding: var(--oa-space-8) var(--oa-space-6);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}

.oa-cta-band__link:hover,
.oa-cta-band__link:focus-visible {
	transform: translateY(-2px);
}

.oa-cta-band__link:focus-visible {
	outline: 2px solid var(--oa-color-primary-600);
	outline-offset: 2px;
}

.oa-cta-band__body {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

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

.oa-cta-band__text {
	font-size: var(--oa-size-text);
	line-height: var(--oa-lh-body);
	color: var(--oa-color-neutral-800);
	margin: 0 0 var(--oa-space-5);
}

/* Pill CTA. Diverges from the .oa-button primitive on purpose: full-pill
   radius + body-size text for a softer "discover/contact" affordance than the
   harder-edged booking CTAs. transform:none on hover keeps the band's own
   translateY from competing with the arrow's translateX cue. Scoped under
   .oa-cta-band (0,2,0) so it beats the later .oa-button primitive (0,1,0)
   regardless of source order — these overrides used to win only because the
   old rule lived in a sheet that loaded after archive-shared. */
.oa-cta-band .oa-cta-band__cta {
	gap: var(--oa-space-2);
	border-radius: var(--oa-rounded-full);
	font-size: var(--oa-size-text);
}

.oa-cta-band__link:hover .oa-cta-band__cta,
.oa-cta-band__link:focus-visible .oa-cta-band__cta {
	background-color: var(--oa-button-bg-hover);
	transform: none;
}

.oa-cta-band__cta-arrow {
	transition: transform 0.2s ease;
}

.oa-cta-band__cta-arrow::before {
	content: "\f061"; /* FA Solid arrow-right */
	font-family: "OA Font Awesome Solid";
	font-style: normal;
	font-weight: 900;
	font-size: 0.875em;
	line-height: 1;
}

.oa-cta-band__link:hover .oa-cta-band__cta-arrow,
.oa-cta-band__link:focus-visible .oa-cta-band__cta-arrow {
	transform: translateX(2px);
}

/* =====================================================================
 * Filter bar
 * =================================================================== */
.oa-archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-3);
	align-items: stretch;
	padding: var(--oa-space-4);
	margin-bottom: var(--oa-space-6);
	background: var(--oa-bg-base);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-xl);
	box-shadow: 0 8px 22px -18px rgba(0, 0, 0, 0.24);
}

.oa-archive-filters__field {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 1 1 12rem;
	min-width: 0;
}

.oa-archive-filters__field--search {
	flex: 2 1 19rem;
}

.oa-archive-filters__input,
.oa-archive-filters__select {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--oa-space-2) var(--oa-space-3) var(--oa-space-2) var(--oa-space-8);
	border: 1px solid var(--oa-color-neutral-300);
	border-radius: var(--oa-rounded-lg);
	background: var(--oa-color-neutral-50);
	color: var(--oa-body-color);
	font-family: inherit;
	font-size: var(--oa-size-text-small);
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

.oa-archive-filters__icon {
	position: absolute;
	top: 50%;
	left: var(--oa-space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	color: var(--oa-color-primary-500);
	pointer-events: none;
	transform: translateY(-50%);
}

.oa-archive-filters__icon::before,
.oa-archive-filter-chip__icon::before,
.oa-archive-filter-chip__remove::before {
	font-family: "OA Font Awesome Solid";
	font-style: normal;
	font-weight: 900;
	line-height: 1;
}

/* Per-key glyphs. Add new keys here when an archive introduces a new filter. */
.oa-archive-filters__icon--search::before,
.oa-archive-filter-chip--search .oa-archive-filter-chip__icon::before {
	content: "\f002";
}

.oa-archive-filters__icon--topic::before,
.oa-archive-filter-chip--topic .oa-archive-filter-chip__icon::before {
	content: "\f02c";
}

.oa-archive-filters__icon--audience::before,
.oa-archive-filter-chip--audience .oa-archive-filter-chip__icon::before {
	content: "\f0c0";
}

.oa-archive-filters__icon--location::before,
.oa-archive-filter-chip--location .oa-archive-filter-chip__icon::before {
	content: "\f3c5";
}

/* Native select chevron */
.oa-archive-filters__select {
	padding-right: var(--oa-space-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23018294' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--oa-space-3) center;
	background-size: 12px 8px;
	cursor: pointer;
}

.oa-archive-filters__input:focus-visible,
.oa-archive-filters__select:focus-visible {
	outline: 2px solid var(--oa-color-primary-500);
	outline-offset: 1px;
	border-color: var(--oa-color-primary-500);
}

.oa-archive-filters__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--oa-space-2) var(--oa-space-5);
	min-height: 2.75rem;
	border: 1px solid var(--oa-color-primary-500);
	border-radius: var(--oa-rounded-lg);
	background: var(--oa-color-primary-500);
	color: var(--oa-color-white);
	font-family: inherit;
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.oa-archive-filters__submit:hover,
.oa-archive-filters__submit:focus-visible {
	background: var(--oa-color-primary-600);
	border-color: var(--oa-color-primary-600);
}

/* Hide the explicit submit button when the JS autosubmit module is active —
 * change handlers on selects + debounced input on the search field replace the
 * manual submit, so the button becomes visual noise. The JS toggles this class
 * on the form root after binding listeners. */
.oa-archive-filters--autosubmit .oa-archive-filters__submit {
	display: none;
}

.oa-archive-filters__reset {
	display: inline-flex;
	align-items: center;
	padding: var(--oa-space-2) var(--oa-space-3);
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-text-small);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.oa-archive-filters__reset:hover,
.oa-archive-filters__reset:focus-visible {
	color: var(--oa-color-primary-700);
}

.oa-archive-filters--mobile-disclosure .oa-archive-filters__summary {
	display: none;
}

.oa-archive-filters--mobile-disclosure {
	display: block;
}

.oa-archive-filters--mobile-disclosure .oa-archive-filters__disclosure {
	display: block;
}

.oa-archive-filters--mobile-disclosure .oa-archive-filters__body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-3);
}

@media (max-width: 639px) {
	.oa-archive-filters {
		padding: var(--oa-space-2);
	}

	.oa-archive-filters__field {
		flex-basis: 100%;
	}

	.oa-archive-filters__submit {
		flex: 1 1 auto;
	}

	.oa-archive-filters__reset {
		justify-content: center;
		flex: 1 1 auto;
	}

	.oa-archive-filters--mobile-disclosure {
		padding: var(--oa-space-3);
	}

	.oa-archive-filters--mobile-disclosure .oa-archive-filters__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--oa-space-3);
		min-height: 2.75rem;
		padding: var(--oa-space-2) var(--oa-space-3);
		border: 1px solid var(--oa-color-neutral-300);
		border-radius: var(--oa-rounded-lg);
		background: var(--oa-color-neutral-50);
		color: var(--oa-body-color);
		font-size: var(--oa-size-text-small);
		font-weight: 700;
		cursor: pointer;
		list-style: none;
	}

	.oa-archive-filters--mobile-disclosure .oa-archive-filters__summary::-webkit-details-marker {
		display: none;
	}

	.oa-archive-filters--mobile-disclosure .oa-archive-filters__summary:focus-visible {
		outline: 2px solid var(--oa-color-primary-500);
		outline-offset: 2px;
	}

	.oa-archive-filters__summary-icon::before {
		content: "\f078";
		font-family: "OA Font Awesome Solid";
		font-style: normal;
		font-weight: 900;
		font-size: 0.875em;
		line-height: 1;
	}

	.oa-archive-filters__disclosure[open] .oa-archive-filters__summary-icon {
		transform: rotate(180deg);
	}

	.oa-archive-filters--mobile-disclosure .oa-archive-filters__body {
		display: flex;
		flex-direction: column;
		gap: var(--oa-space-3);
		padding-top: var(--oa-space-3);
	}

	.oa-archive-filters--mobile-disclosure .oa-archive-filters__disclosure:not([open]) .oa-archive-filters__body {
		display: none;
	}
}

/* =====================================================================
 * Status row (count + active-filter chips)
 * =================================================================== */
.oa-archive-status {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-3);
	margin-bottom: var(--oa-space-6);
}

/* Top line of the status block: count on the left, optional view toggle on
   the right. The active-filter chips wrap onto their own line below. */
.oa-archive-status__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-3);
	align-items: center;
	justify-content: space-between;
}

.oa-archive-status__count {
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-600);
	margin: 0;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.oa-archive-status__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-2);
	align-items: center;
	justify-content: flex-start;
}

/* ===================================================================
 * View toggle (cards ⇄ calendar) — segmented control in the status row.
 * Opt-in via the filter-bar $view_toggle arg (event archive only, #131
 * Phase 2). Glyphs come from the shared FA Solid @font-face (full set,
 * not a subset), same as .oa-icon.
 * =================================================================== */
.oa-archive-view-toggle {
	display: inline-flex;
	align-items: stretch;
	gap: 2px;
	padding: 3px;
	background: var(--oa-color-neutral-100);
	border-radius: var(--oa-rounded-full);
}

.oa-archive-view-toggle__option {
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-2);
	padding: var(--oa-space-2) var(--oa-space-4);
	border-radius: var(--oa-rounded-full);
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	color: var(--oa-color-neutral-700);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.oa-archive-view-toggle__option:hover {
	color: var(--oa-color-primary-700);
}

/* Keyboard focus ring — same colour/width as the rest of the archive UI
   (inputs, chips, badges). Inset offset so the ring hugs the rounded option
   inside the segmented control instead of clipping against its neighbour. */
.oa-archive-view-toggle__option:focus-visible {
	color: var(--oa-color-primary-700);
	outline: 2px solid var(--oa-color-primary-500);
	outline-offset: -2px;
}

.oa-archive-view-toggle__option.is-active {
	background: var(--oa-bg-base, #fff);
	color: var(--oa-color-primary-700);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.oa-archive-view-toggle__icon::before {
	font-family: "OA Font Awesome Solid";
	font-style: normal;
	font-weight: 900;
	font-size: 0.875em;
	line-height: 1;
}

.oa-archive-view-toggle__icon--cards::before    { content: "\f00a"; } /* th-large (grid) */
.oa-archive-view-toggle__icon--calendar::before { content: "\f073"; } /* calendar */

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

.oa-archive-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-1);
	max-width: 100%;
	padding: 0.35rem var(--oa-space-2) 0.35rem var(--oa-space-3);
	border: 1px solid var(--oa-color-primary-200);
	border-radius: var(--oa-rounded-full);
	background: var(--oa-bg-primary-tint);
	color: var(--oa-color-primary-800);
	font-size: var(--oa-size-text-small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.oa-archive-filter-chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 0.95rem;
	height: 0.95rem;
	font-size: 0.78rem;
	opacity: 0.82;
}

.oa-archive-filter-chip:hover,
.oa-archive-filter-chip:focus-visible {
	background: var(--oa-color-primary-500);
	border-color: var(--oa-color-primary-500);
	color: var(--oa-color-white);
}

.oa-archive-filter-chip__label {
	color: inherit;
	font-size: var(--oa-size-eyebrow);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	opacity: 0.78;
}

.oa-archive-filter-chip__value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oa-archive-filter-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: var(--oa-space-1);
	border-radius: var(--oa-rounded-full);
	background: rgba(255, 255, 255, 0.72);
	color: var(--oa-color-primary-800);
	font-size: 0.72rem;
	line-height: 1;
}

.oa-archive-filter-chip__remove::before {
	content: "\f00d";
}

.oa-archive-filter-chip:hover .oa-archive-filter-chip__remove,
.oa-archive-filter-chip:focus-visible .oa-archive-filter-chip__remove {
	background: rgba(255, 255, 255, 0.9);
	color: var(--oa-color-primary-700);
}

@media (max-width: 639px) {
	.oa-archive-status {
		align-items: stretch;
	}

	.oa-archive-status__active {
		justify-content: flex-start;
		flex-basis: 100%;
	}

	.oa-archive-filter-chip {
		max-width: 100%;
	}
}

/* =====================================================================
 * Empty state
 * =================================================================== */
.oa-archive-empty {
	padding: var(--oa-space-10) var(--oa-space-6);
	text-align: center;
	color: var(--oa-color-neutral-600);
	background: var(--oa-bg-subtle);
	border-radius: var(--oa-rounded-xl);
	font-size: var(--oa-size-text);
}

/* =====================================================================
 * Pagination
 * =================================================================== */
.oa-archive-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--oa-space-2);
	margin-top: var(--oa-space-10);
}

.oa-archive-pagination__link {
	min-width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--oa-space-3);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded);
	background: var(--oa-bg-base);
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-text-small);
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.oa-archive-pagination__link:hover,
.oa-archive-pagination__link:focus-visible {
	background: var(--oa-bg-primary-tint);
	color: var(--oa-color-primary-700);
	border-color: var(--oa-color-primary-300);
}

.oa-archive-pagination__link--active {
	background: var(--oa-color-primary-500);
	color: var(--oa-color-white);
	border-color: var(--oa-color-primary-500);
}

.oa-archive-pagination__link--active:hover,
.oa-archive-pagination__link--active:focus-visible {
	background: var(--oa-color-primary-600);
	color: var(--oa-color-white);
	border-color: var(--oa-color-primary-600);
}

.oa-archive-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 2.5rem;
	color: var(--oa-color-neutral-500);
	font-weight: 700;
}

/* =====================================================================
 * Card primitives
 *
 * Shared by .oa-event-card and .oa-event-request-card. Markup applies
 * both classes to the same element (`<article class="oa-card oa-event-card">`)
 * so the CPT class only carries the extensions (date pill, location,
 * cancelled state on event; eyebrow on event_request).
 *
 * Hover/focus elevation, badge stack positioning, and image zoom-on-hover
 * all live here. Color tokens for the topic/audience badges are shared
 * across both archives — keep them paired so adding a new card-bearing
 * archive only needs CPT-specific extensions, not a copy of the baseline.
 * =================================================================== */
.oa-card {
	--oa-card-cta-size: 3.25rem;

	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--oa-bg-base);
	border: 1px solid var(--oa-color-neutral-200);
	border-radius: var(--oa-rounded-2xl);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.oa-card:hover,
.oa-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--oa-blur-shadow);
	border-color: var(--oa-color-primary-200);
}

/* Stretched card link. Taxonomy chips on the card are themselves links, so
   a card-wide wrapper <a> is out (nested anchors are invalid HTML): the
   title carries the real link and projects it over the whole card via
   ::after; chips layer above that overlay with position + z-index. */
.oa-card__cover-link {
	color: inherit;
	text-decoration: none;
}

.oa-card__cover-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Hoist the focus ring to the card container so it isn't clipped by
   .oa-card { overflow: hidden }. Pre-PR-B both archives applied the
   outline directly on the inner link and silently lost half of the ring;
   :has() lets the visible focus state survive the clipping boundary. */
.oa-card:has(.oa-card__cover-link:focus-visible) {
	outline: 2px solid var(--oa-color-primary-500);
	outline-offset: 2px;
}

.oa-card__cover-link:focus-visible {
	outline: none;
}

.oa-card__media {
	position: relative;
	height: 12rem;
	overflow: hidden;
	background: var(--oa-color-neutral-100);
}

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

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

/* Topic badges sit top-RIGHT on the image, on the body's inset system
 * (--oa-space-6 horizontal / --oa-space-4 vertical). Audience terms render
 * in the card footer (.oa-card__chips), not on the image, so the badge
 * stack owns the full image width. The --topic class in markup stays as a
 * palette hook (.oa-badge--topic carries the paint); positioning needs no
 * per-taxonomy variant since only one stack sits on the image.
 */
.oa-card__badges {
	position: absolute;
	top: var(--oa-space-4);
	right: var(--oa-space-6);
	z-index: 1;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--oa-space-1);
	max-width: calc(100% - 2 * var(--oa-space-6));
}

.oa-card__badges .oa-badge--link {
	pointer-events: auto;
}

.oa-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.oa-card:hover .oa-card__image,
.oa-card:focus-within .oa-card__image {
	transform: scale(1.04);
}

.oa-card__body {
	padding: var(--oa-space-5) var(--oa-space-6) var(--oa-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-2);
	flex: 1;
}

/* Divi's runtime-inlined base CSS ships `p { padding-bottom: 1em }` (zeroed
   only on :last-of-type), which adds accidental, position-dependent gaps to
   card paragraphs (location, price, excerpt, banner). Cards space via flex
   gap / margins, so neutralize it across the whole body. */
.oa-card__body p {
	padding-bottom: 0;
}

.oa-card__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: var(--oa-space-2) 0 0;
}

/* Two-line clamp keeps the title + meta cluster the dominant block and
   compacts cards vertically (#131 C2; was 3 lines pre-C2). */
.oa-card__excerpt {
	font-size: var(--oa-size-text-small);
	color: var(--oa-color-neutral-700);
	margin: var(--oa-space-2) 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* Card footer: taxonomy chips left, corner-docked CTA right. margin-top:
   auto pins the row to the card bottom so it aligns across the grid
   regardless of excerpt length. The CTA is absolute (out of flow), so the
   footer reserves its width: docked size minus the body's right padding it
   already overlaps, plus a breathing gap. */
.oa-card__footer {
	display: flex;
	align-items: flex-end;
	gap: var(--oa-space-3);
	margin-top: auto;
	min-height: calc(var(--oa-card-cta-size) - var(--oa-space-6));
	padding-top: var(--oa-space-2);
	padding-right: calc(var(--oa-card-cta-size) - var(--oa-space-6) + var(--oa-space-2));
}

/* Footer chips. position + z-index lifts them over the cover-link overlay
   (the media badges already carry z-index: 1 above). */
.oa-card__chips {
	position: relative;
	z-index: 1;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-1);
}

.oa-card__chips .oa-badge--link {
	pointer-events: auto;
}

/* Muted rest state for audience chips: at full palette weight they compete
   with the topic badges and the title. Neutral at rest; the secondary
   audience coding returns on hover/focus as the filter affordance. */
.oa-card__chips .oa-badge--audience {
	--oa-badge-bg-soft:     var(--oa-color-neutral-100);
	--oa-badge-border-soft: transparent;
	--oa-badge-color-soft:  var(--oa-color-neutral-700);
}

/* Decorative CTA, docked flush into the card's bottom-right corner (the
   card's overflow: hidden clips it into the rounded-2xl radius). Card
   hover/focus fills it with the primary brand color, turning the shared
   card-lift into a directed "go" affordance. pointer-events: none is
   load-bearing: being positioned, the tab paints ABOVE the cover-link
   overlay (later DOM order, same stacking layer), so without it clicks
   land on a dead span instead of the card link. */
.oa-card__cta {
	pointer-events: none;
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--oa-card-cta-size);
	height: var(--oa-card-cta-size);
	background: var(--oa-bg-primary-tint);
	color: var(--oa-color-primary-700);
	border-top-left-radius: var(--oa-rounded-2xl);
	transition: background 0.2s ease, color 0.2s ease;
}

.oa-card__cta::before {
	content: "\f061"; /* FA Solid arrow-right, same icon system as the card meta rows */
	font-family: "OA Font Awesome Solid";
	font-style: normal;
	font-weight: 900;
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.oa-card:hover .oa-card__cta,
.oa-card:focus-within .oa-card__cta {
	background: var(--oa-color-primary-500);
	color: var(--oa-color-white);
}

.oa-card:hover .oa-card__cta::before,
.oa-card:focus-within .oa-card__cta::before {
	transform: translateX(3px);
}

/* =====================================================================
 * Button primitives
 *
 * .oa-button             baseline shape (display, padding, radius, type,
 *                        transition). Paint-agnostic — pairs with a
 *                        modifier (--primary today; --secondary / --ghost
 *                        future) for the actual color treatment.
 * .oa-button--primary    primary CTA paint. Exposes its bg/hover/text
 *                        through custom properties so consumers that
 *                        can't carry the class on the painted element
 *                        (pretix's hydrated <button class="pretix-button">,
 *                        which is created by 3rd-party JS we don't
 *                        control) can still inherit the same paint via a
 *                        descendant selector that reads the same vars.
 *                        Single source of truth for the color step.
 *
 * Lives in archive-shared.css (not single-shared, not a new
 * button-shared.css) because the cross-promo card on the event archive
 * is a consumer — every primary-CTA surface today is already inside the
 * archive-or-single chain. If a non-archive consumer (homepage hero,
 * etc.) lands later, that's the trigger to split into button-shared.css.
 * =================================================================== */

/* .oa-icon — small leading FA-glyph primitive for inline rows (archive
 * card address, single contact/meta rows). Lives here because this file
 * carries the FA @font-face (inlined by functions.php) the glyphs need,
 * and it's consumed by both archive cards and single templates (which all
 * load archive-shared). Size hook: --oa-icon-size (default 1rem, controls
 * width + glyph size); color hook: --oa-icon-color (default primary-600).
 * No tofu fallback — if the FA font fails the codepoint stays unrenderable
 * and the icon disappears cleanly (the span has no text content).
 *
 * Height is 1lh (one line-box of the inherited row line-height), NOT
 * --oa-icon-size. The glyph stays centred inside that box, so in a
 * `align-items: flex-start` row (card address, single hero <address>) the
 * icon lines up with the FIRST text line instead of floating a few px
 * above it — a fixed 1rem box top-aligned against a ~1.7 line-height was
 * the misalignment. In `align-items: center` rows the taller box still
 * centres the glyph, so those are unchanged, and the row never grows
 * because the text line-height already exceeds the glyph. Consumers that
 * need a square box (event.css chip/summary icons) set their own height
 * and override this. */
.oa-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--oa-icon-size, 1rem);
	width: var(--oa-icon-size, 1rem);
	height: 1lh;
	color: var(--oa-icon-color, var(--oa-color-primary-600));
}

.oa-icon::before {
	font-family: "OA Font Awesome Solid";
	font-style: normal;
	font-weight: 900;
	font-size: var(--oa-icon-size, 1rem);
	line-height: 1;
}

.oa-icon--date::before     { content: "\f073"; }
.oa-icon--duration::before { content: "\f017"; }
.oa-icon--location::before { content: "\f3c5"; }
.oa-icon--online::before   { content: "\f108"; }
.oa-icon--price::before    { content: "\f0d6"; }
.oa-icon--email::before    { content: "\f0e0"; }
.oa-icon--phone::before    { content: "\f095"; }

.oa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--oa-space-3) var(--oa-space-6);
	border: 0;
	border-radius: var(--oa-rounded-lg);
	font-family: inherit;
	font-weight: 600;
	font-size: var(--oa-size-button);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.oa-button--primary {
	--oa-button-bg:       var(--oa-color-primary-500);
	--oa-button-bg-hover: var(--oa-color-primary-600);
	--oa-button-color:    var(--oa-color-white);
	background-color: var(--oa-button-bg);
	color: var(--oa-button-color);
}

.oa-button--primary:hover,
.oa-button--primary:focus-visible {
	background-color: var(--oa-button-bg-hover);
	color: var(--oa-button-color);
	transform: translateY(-1px);
	text-decoration: none;
}

/* =====================================================================
 * Eyebrow primitive
 *
 * .oa-eyebrow            small uppercase label paired with a heading.
 *                        Default paint (no modifier) is the prelude role:
 *                        sits above an H1/H2 as a tight pair, primary-800
 *                        with a small bottom margin.
 * .oa-eyebrow--heading   the eyebrow IS the heading (no h1/h2 follows it,
 *                        a list/group does); muted neutral-600 paint and
 *                        more breathing room before the content below.
 *
 * Paint hooks --oa-eyebrow-color and --oa-eyebrow-margin-bottom let a
 * consumer override either axis without forking the type rules.
 *
 * Lives in archive-shared.css for the same reason the button primitives
 * do: consumers exist on both archive (cross-promo card) and single
 * (hero, sidebar) surfaces, and archive-shared is in every consumer's
 * dep chain. Letter-spacing is 0.04em across both modifiers — the
 * 0.02em variant on event_request meta-row dt's is a different role
 * (badge-shaped row label, not a heading prelude) and stays local.
 * =================================================================== */
.oa-eyebrow {
	--oa-eyebrow-margin-bottom: var(--oa-space-2);
	--oa-eyebrow-color:         var(--oa-color-primary-800);

	margin: 0 0 var(--oa-eyebrow-margin-bottom);
	font-family: var(--oa-font-body);
	font-size: var(--oa-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oa-eyebrow-color);
}

.oa-eyebrow--heading {
	--oa-eyebrow-margin-bottom: var(--oa-space-3);
	--oa-eyebrow-color:         var(--oa-color-neutral-600);
}

/* =====================================================================
 * Badge primitive
 *
 * .oa-badge              pill label for taxonomy / meta chips.
 *                        Defaults to the softer editorial treatment:
 *                        tinted background, dark text, hairline border.
 * .oa-badge--topic       primary palette hooks.
 * .oa-badge--audience    secondary palette hooks.
 * .oa-badge--solid       higher-contrast variant for image overlays.
 *
 * Lives in archive-shared.css because archive cards are consumers and
 * single-event_request already depends on that sheet. Defaulting to the
 * softer treatment lets single heroes read quieter; archive-card overlays
 * opt into the solid modifier where they need contrast over photography.
 * =================================================================== */
.oa-badge {
	background: var(--oa-badge-bg-soft, var(--oa-color-neutral-100));
	border: 1px solid var(--oa-badge-border-soft, transparent);
	border-radius: var(--oa-rounded-full);
	color: var(--oa-badge-color-soft, var(--oa-color-neutral-800));
	display: inline-flex;
	align-items: center;
	padding: 0.25rem var(--oa-space-3);
	font-family: var(--oa-font-body);
	font-size: var(--oa-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.oa-badge--topic {
	--oa-badge-bg-soft:     var(--oa-color-primary-100);
	--oa-badge-border-soft: var(--oa-color-primary-200);
	--oa-badge-color-soft:  var(--oa-color-primary-800);
	--oa-badge-bg-solid:    var(--oa-color-primary-500);
	--oa-badge-color-solid: var(--oa-color-white);
}

.oa-badge--audience {
	--oa-badge-bg-soft:     var(--oa-color-secondary-100);
	--oa-badge-border-soft: var(--oa-color-secondary-200);
	--oa-badge-color-soft:  var(--oa-color-secondary-800);
	--oa-badge-bg-solid:    var(--oa-color-secondary-500);
	--oa-badge-color-solid: var(--oa-color-white);
}

.oa-badge--solid {
	background: var(--oa-badge-bg-solid, var(--oa-badge-bg-soft, var(--oa-color-neutral-100)));
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	color: var(--oa-badge-color-solid, var(--oa-badge-color-soft, var(--oa-color-white)));
}

/* Card-scope shape override: badges + chips on archive cards share one
   rounded-rect shape (instead of the pill default) with a taller padding
   step — the #131 C2 card language. Scoped to .oa-card so single-page
   hero badges keep the quieter pill. */
.oa-card .oa-badge {
	border-radius: var(--oa-rounded-lg);
	padding: var(--oa-space-2) var(--oa-space-3);
}

/* Shared label/value facts. Cards use at most two compact rows; detail heroes
   use all facts as wrapping chips. Both event CPTs share this shell. */
.oa-content-facts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.et-db #left-area .oa-content-facts,
.et-l--body .oa-content-facts,
.et-l--footer .oa-content-facts,
.et-l--header .oa-content-facts,
.entry-content .oa-content-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: inherit;
}

.et-db #left-area .oa-content-fact,
.et-l--body .oa-content-fact,
.et-l--footer .oa-content-fact,
.et-l--header .oa-content-fact,
.entry-content .oa-content-fact {
	list-style: none;
	margin: 0;
}

.oa-content-facts--card {
	display: flex;
	flex-direction: column;
	gap: var(--oa-space-2);
}

.oa-content-fact--card {
	display: grid;
	grid-template-columns: 1.15rem minmax(0, 1fr);
	align-items: center;
	column-gap: var(--oa-space-3);
	min-width: 0;
	padding: 0;
	color: var(--oa-color-neutral-700);
	font-size: var(--oa-size-text-small);
	line-height: 1.2;
}

.oa-content-fact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 1.15rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: var(--oa-rounded-full);
	background: var(--oa-color-primary-600);
	color: var(--oa-color-white);
}

.oa-content-fact__icon::before {
	content: "\f00c";
	font-family: "OA Font Awesome Solid";
	font-size: 0.65rem;
	font-weight: 900;
	line-height: 1;
}

.oa-content-fact__text {
	display: block;
	min-width: 0;
}

.oa-content-fact--card .oa-content-fact__text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.oa-content-fact__label {
	font-weight: 700;
	color: var(--oa-color-primary-800);
}

.oa-content-fact__value {
	color: var(--oa-color-neutral-700);
}

.oa-content-facts--chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oa-space-2);
	margin-top: var(--oa-space-4);
}

.oa-content-fact--chip {
	display: inline-flex;
	align-items: center;
	gap: var(--oa-space-2);
	max-width: 100%;
	padding: 0.45rem 0.7rem;
	border: 1px solid color-mix(in srgb, var(--oa-color-primary-600) 22%, transparent);
	border-radius: var(--oa-rounded-lg);
	background: var(--oa-bg-primary-tint);
	color: var(--oa-color-primary-800);
	font-size: var(--oa-size-text-small);
	line-height: 1.2;
}

.oa-content-fact--chip .oa-content-fact__text {
	overflow-wrap: anywhere;
}

/* Linked badges: taxonomy chips that filter the archive. The element-
   qualified selector keeps non-link <span> badges inert. */
a.oa-badge--link {
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

/* Solid topic badge on the image: darken on hover. */
.oa-card__badges a.oa-badge--link:hover,
.oa-card__badges a.oa-badge--link:focus-visible {
	background: var(--oa-color-primary-600);
}

/* Hover restores the secondary tint (former rest state) so the audience ↔
   secondary coding survives as an interactive signal, not decoration. */
.oa-card__chips a.oa-badge--link:hover,
.oa-card__chips a.oa-badge--link:focus-visible {
	background: var(--oa-color-secondary-100);
	border-color: var(--oa-color-secondary-200);
	color: var(--oa-color-secondary-800);
}