/* Aberhall Events — frontend styling
 *
 * Everything in this file is scoped under .aberhall-event / .aberhall-events /
 * .aberhall-events-archive — there are no bare element selectors (no
 * bare `h1`, `a`, `body`, etc.), so nothing here can affect the site's
 * header, navigation or footer, which are rendered by the active theme
 * via get_header()/get_footer() and never touched by this plugin.
 *
 * Headings use a serif fallback stack rather than `inherit`, so the
 * page looks right even if the theme doesn't style headings distinctly.
 * A theme/child-theme can override this by targeting
 * `.aberhall-event h1, .aberhall-event h2` with higher specificity.
 *
 * Phase 2 palette: white / pale blue-grey surfaces with restrained
 * 1px borders, navy headings, olive accents — replacing the Phase 1
 * cream-heavy card treatment everywhere except status pills (which are
 * a separate, intentionally warmer signal colour, not a "module bg").
 *
 * Phase 2.5: --aberhall-accent (#BED443) is the brand accent, used
 * deliberately sparingly — heading underlines, the Highlights icon
 * circles, and focus states. Everywhere else (quick-facts icons, class
 * labels, sponsor label text, etc.) keeps the existing olive, so the
 * bright accent stays a recognisable, restrained flourish rather than
 * flooding the page.
 */

.aberhall-events,
.aberhall-events-archive,
.aberhall-event {
	--aberhall-navy: #1f3247;
	--aberhall-text: #33404c;
	--aberhall-muted: #7c8a92;
	--aberhall-border: #dde3e8;
	--aberhall-olive: #6b7a4a;
	--aberhall-accent: #bed443;
	--aberhall-surface: #ffffff;
	--aberhall-surface-alt: #eef2f6;
	--aberhall-amber: #d99a3d;
	--aberhall-amber-text: #5a3d0f;
	--aberhall-red: #b3453c;
	--aberhall-blue: #3b6ea5;
	--aberhall-heading-font: Georgia, 'Times New Roman', serif;
	color: var(--aberhall-text);
	font-family: inherit;
}

.aberhall-event a:focus-visible,
.aberhall-events a:focus-visible,
.aberhall-events-archive a:focus-visible {
	outline: 2px solid var(--aberhall-accent);
	outline-offset: 2px;
}

.aberhall-event *,
.aberhall-events *,
.aberhall-events-archive * {
	box-sizing: border-box;
}

/* ================= Event cards (shortcode + archive) ================= */

.aberhall-events {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 0 32px;
}

.aberhall-events--list {
	grid-template-columns: 1fr;
}

@media (max-width: 900px) {
	.aberhall-events {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.aberhall-events {
		grid-template-columns: 1fr;
	}
}

.aberhall-event-card {
	border-radius: 8px;
	overflow: hidden;
	background: var(--aberhall-surface);
	border: 1px solid var(--aberhall-border);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.aberhall-event-card:hover {
	box-shadow: 0 6px 20px rgba(31, 50, 71, 0.1);
	transform: translateY(-2px);
}

.aberhall-event-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.aberhall-event-card__media {
	position: relative;
	background: var(--aberhall-surface-alt);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

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

.aberhall-event-card__date-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #fff;
	border-radius: 5px;
	padding: 6px 10px;
	text-align: center;
	line-height: 1.1;
	box-shadow: 0 1px 6px rgba(31, 50, 71, 0.16);
}

.aberhall-event-card__date-day {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--aberhall-navy);
}

.aberhall-event-card__date-month {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--aberhall-muted);
}

.aberhall-event-card__body {
	padding: 16px 18px 20px;
}

.aberhall-event-card__title {
	margin: 0 0 6px;
	font-family: var(--aberhall-heading-font);
	font-size: 18px;
	line-height: 1.3;
	color: var(--aberhall-navy);
}

.aberhall-event-card__meta {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--aberhall-muted);
}

.aberhall-event-card__status {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aberhall-muted);
}

.aberhall-event-card__status--closed,
.aberhall-event-card__status--sold_out {
	color: var(--aberhall-amber-text);
}

.aberhall-event-card__status--cancelled {
	color: var(--aberhall-red);
}

.aberhall-event-card__status--postponed {
	color: var(--aberhall-blue);
}

/* ================= Archive ================= */

.aberhall-events-archive {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px clamp(20px, 5vw, 56px) 80px;
}

.aberhall-events-archive__header h1 {
	font-family: var(--aberhall-heading-font);
	color: var(--aberhall-navy);
	font-size: 30px;
	margin: 0 0 28px;
}

/* ================= Single event: full-bleed breakout ================= */

/* As of the Event View routing refactor (v1.5.0), this markup renders
 * inside a normal WordPress Page's entry-content — which Divi wraps in
 * its own `.container` (max-width: 1080px, centered) — rather than a
 * plugin-owned template with no such wrapper, as before. The hero,
 * Quick Facts bar and Highlights bar were always designed edge-to-edge
 * (only `.aberhall-event__content` — About/Classes/Fees/Info/Booking —
 * was ever meant to sit in a centred, readable-width column), so this
 * breaks the whole article back out to full viewport width regardless
 * of whatever container it happens to be nested inside, Divi's or
 * otherwise; `.aberhall-event__content`'s own `max-width` + `margin:
 * auto` (further down this file) then re-centres just that part within
 * it. Harmless no-op on the dormant CPT-fallback template path, where
 * there's no such container to escape in the first place — the
 * percentage margins resolve to ~0 there.
 *
 * The standard caveat of this technique: `100vw` includes the browser
 * scrollbar's width, which the page's real content area doesn't, so it
 * can introduce a few pixels of horizontal overscroll on a page tall
 * enough to have a vertical scrollbar. Accepted as a minor, well-known
 * trade-off rather than a global `overflow-x: hidden` on `body` (which
 * would violate this stylesheet's own no-bare-element-selectors rule
 * and could mask a real overflow bug elsewhere on the site).
 */
.aberhall-event {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

/* ================= Single event: breadcrumbs ================= */

/* Sits inside the readable content column, immediately before About. */
.aberhall-event__breadcrumbs {
	margin: 0 0 24px;
	padding: 0;
	font-size: 13px;
	color: var(--aberhall-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.aberhall-event__breadcrumbs a {
	color: var(--aberhall-olive);
	text-decoration: underline;
}

.aberhall-event__breadcrumbs [aria-current='page'] {
	color: var(--aberhall-text);
}

/* ================= Single event: hero ================= */

.aberhall-event__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(380px, 54vw, 660px);
	overflow: hidden;
	background: var(--aberhall-navy);
}

.aberhall-event__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
	z-index: 0;
}

.aberhall-event__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(15, 25, 35, 0.06) 0%, rgba(15, 25, 35, 0.3) 45%, rgba(15, 25, 35, 0.88) 100%);
}

.aberhall-event__hero-content {
	position: relative;
	z-index: 1;
	padding: 32px clamp(20px, 5vw, 56px) 12px;
	color: #fff;
}

.aberhall-event__hero-title {
	font-family: var(--aberhall-heading-font);
	font-size: clamp(28px, 4.4vw, 44px);
	line-height: 1.28;
	margin: 0 0 16px;
	max-width: 18ch;
	color: #fff;
}

.aberhall-event__hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 16px;
}

.aberhall-event__hero-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	opacity: 0.95;
}

.aberhall-event__hero-meta-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.aberhall-event__hero-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
}

.aberhall-event__pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Softer translucent-green treatment (2026-08-18), replacing the
 * previous plain white/dark pill — built from the Aberhall accent
 * green (--aberhall-accent, #bed443) rather than a plain white chip.
 * The first attempt at this used a pale rgba(190,212,67,0.18) chip
 * with dark olive text, matching a literal reading of the brief — but
 * checked live against the real hero photo (which is mostly grass —
 * a similarly light, similarly-hued green), that combination was
 * nearly unreadable: dark-on-light-green text over an actual green
 * photo has far less effective contrast than the same colours read as
 * a flat swatch. This darker, more opaque green chip with pale text
 * is what actually passed a live legibility check against the photo,
 * while still clearly reading as "the Aberhall green" via the fill,
 * border and pale-green (not plain white) text tone. */
.aberhall-event__pill--open {
	background: rgba(74, 92, 31, 0.55);
	border: 1px solid rgba(190, 212, 67, 0.9);
	color: #eef7c9;
}

/* A very short, decaying elastic wobble to draw the eye on first paint
 * only — runs once (no `infinite`), ends back at scale(1) so nothing
 * is left mid-animation, and never fires for prefers-reduced-motion.
 * Scoped to --open specifically (not --closing_soon or any other pill
 * variant) since the brief asked for this on the "Entries Open" pill. */
@keyframes aberhall-pill-bounce {
	0% {
		transform: scale(1);
	}
	18% {
		transform: scale(1.16);
	}
	36% {
		transform: scale(0.94);
	}
	54% {
		transform: scale(1.07);
	}
	72% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.aberhall-event__pill--open {
		animation: aberhall-pill-bounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
	}
}

.aberhall-event__pill--closing_soon {
	background: var(--aberhall-amber);
	color: var(--aberhall-amber-text);
}

.aberhall-event__pill--closed,
.aberhall-event__pill--sold_out {
	background: var(--aberhall-amber);
	color: var(--aberhall-amber-text);
}

.aberhall-event__pill--cancelled {
	background: var(--aberhall-red);
	color: #fff;
}

.aberhall-event__pill--postponed {
	background: var(--aberhall-blue);
	color: #fff;
}

/* Second, deadline-driven pill shown alongside the main status pill
 * (Aberhall_Event_Status::get_closing_pill()) — deliberately restrained
 * relative to the main pill, escalating in urgency as the close
 * date/time approaches. Reuses the same amber/red tokens the main pill
 * variants above already use, rather than introducing new colours. */
.aberhall-event__pill--closing-default {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: rgba(255, 255, 255, 0.92);
}

.aberhall-event__pill--closing-week {
	background: var(--aberhall-amber);
	color: var(--aberhall-amber-text);
}

.aberhall-event__pill--closing-tomorrow {
	background: var(--aberhall-amber);
	color: #fff;
}

.aberhall-event__pill--closing-today {
	background: var(--aberhall-red);
	color: #fff;
}

.aberhall-event__pill--closing-closed {
	background: rgba(124, 138, 146, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

/* Sponsor strip — its own band directly beneath the hero (moved off the
 * hero image itself, see event-sponsors.php), on the page's normal
 * white/pale-grey background rather than overlaid on a photo. Legibility
 * still comes from the white chip background around each logo, not a
 * hover state — that part is unchanged. */

.aberhall-event__sponsors-band {
	background: #fff;
	border-bottom: 1px solid var(--aberhall-border);
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.aberhall-event__sponsors {
	padding: 24px clamp(20px, 5vw, 56px);
	text-align: center;
}

.aberhall-event__sponsors-label {
	display: block;
	color: var(--aberhall-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 14px;
}

.aberhall-event__sponsors-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.aberhall-sponsor {
	display: flex;
	align-items: center;
	border-radius: 10px;
	transition: box-shadow 0.15s ease;
}

.aberhall-sponsor a {
	display: flex;
	align-items: center;
}

.aberhall-sponsor__logo {
	max-height: 125px;
	width: auto;
	display: block;
	transition: transform 0.2s ease;
}

.aberhall-sponsor:hover .aberhall-sponsor__logo {
	transform: scale(1.08);
}

.aberhall-sponsor__name {
	color: var(--aberhall-navy);
	font-size: 15px;
	font-weight: 600;
}

/* ================= Quick facts bar ================= */

.aberhall-event__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	background: transparent;
	border-top: 1px solid var(--aberhall-border);
	border-bottom: 1px solid var(--aberhall-border);
	margin: 32px clamp(20px, 5vw, 56px) 40px;
	padding: 22px clamp(20px, 4vw, 40px);
}

.aberhall-event__fact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1 1 0;
	min-width: 220px;
}

.aberhall-event__fact-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--aberhall-olive);
}

.aberhall-event__fact-icon svg {
	width: 100%;
	height: 100%;
}

.aberhall-event__fact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aberhall-event__fact-primary {
	font-size: 15px;
	font-weight: 700;
	color: var(--aberhall-navy);
}

.aberhall-event__fact-secondary {
	font-size: 13px;
	color: var(--aberhall-muted);
}

/* ================= Highlights: premium feature panels =================
 * Sits inside .aberhall-event__content now (see event-view.php), wrapped
 * in a .aberhall-event__section like About/Info/Booking, so it picks up
 * that shared rhythm's margin-bottom automatically — no side margins of
 * its own needed, unlike when this was a full-bleed band outside the
 * boxed content column. */

.aberhall-event__highlights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.aberhall-event__highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	background: var(--aberhall-surface);
	border-radius: 14px;
	box-shadow: 0 2px 16px rgba(31, 50, 71, 0.07);
	padding: 36px 28px;
	flex: 1 1 240px;
	max-width: 340px;
}

.aberhall-event__highlight-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--aberhall-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aberhall-event__highlight-icon svg {
	width: 30px;
	height: 30px;
}

.aberhall-event__highlight-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aberhall-event__highlight-heading {
	font-size: 16px;
	font-weight: 700;
	color: var(--aberhall-navy);
}

.aberhall-event__highlight-supporting {
	font-size: 14px;
	line-height: 1.5;
	color: var(--aberhall-muted);
}

/* ================= Content wrapper ================= */

.aberhall-event__content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px clamp(20px, 5vw, 56px) 96px;
}

/* Shared vertical rhythm: every major section (About, Important
 * Information, Online Entry — Classes/Fees via .columns below) gets
 * the same generous bottom gap, so the page breathes consistently
 * rather than each section having its own bespoke spacing. */
.aberhall-event__section {
	margin-bottom: 72px;
}

.aberhall-event__section:last-child {
	margin-bottom: 0;
}

/* Highlights vertical-rhythm correction (2026-08-18): the standard 72px
 * .aberhall-event__section rhythm reads as noticeably more whitespace
 * above the highlight cards than below them, because the cards' own
 * background/shadow box only starts after each card's internal padding
 * — that extra internal padding sits *inside* the visible card box on
 * both edges, but people read the gap as starting from the About text
 * to the top of the *box*, which is right at the 72px mark either way.
 * A small negative margin-top pulls the cards up out of the standard
 * rhythm on this one section only (adjoining-margin collapse: 72px +
 * -24px = 48px), and the matching explicit margin-bottom keeps the gap
 * below the cards equal rather than leaving it at the full 72px, so the
 * two gaps read as symmetrical instead of top-heavy. Deliberately scoped
 * to this one section, not a change to the shared rhythm rule above —
 * About/Info/Booking/Classes+Fees keep their normal 72px. */
.aberhall-event__highlights-section {
	margin-top: -24px;
	margin-bottom: 48px;
}

.aberhall-event__section h2,
.aberhall-event__fees h2 {
	font-family: var(--aberhall-heading-font);
	font-size: 26px;
	color: var(--aberhall-navy);
	margin: 0 0 24px;
	position: relative;
	padding-bottom: 16px;
}

.aberhall-event__section h2::after,
.aberhall-event__fees h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--aberhall-accent);
}

.aberhall-event__rich-text {
	font-size: 16px;
	line-height: 1.7;
}

.aberhall-event__rich-text p {
	margin: 0 0 1.1em;
}

.aberhall-event__rich-text p:last-child {
	margin-bottom: 0;
}

/* ================= About =================
 * No dedicated margin here — .aberhall-event__section already supplies
 * the standard 72px bottom rhythm; top spacing comes from
 * .aberhall-event__content's own top padding plus whatever sits above
 * (facts/highlights bars already carry their own bottom margin). */

/* ================= Classes + Fees ================= */

.aberhall-event__columns {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 72px;
}

@media (max-width: 780px) {
	.aberhall-event__columns {
		grid-template-columns: 1fr;
	}
}

.aberhall-event__class-section {
	background: var(--aberhall-surface);
	border: 1px solid var(--aberhall-border);
	border-left: 4px solid var(--aberhall-accent);
	border-radius: 12px;
	margin-bottom: 16px;
	overflow: hidden;
}

.aberhall-event__class-section:last-child {
	margin-bottom: 0;
}

.aberhall-event__class-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 20px 26px;
}

.aberhall-event__class-section-title {
	margin: 0;
}

.aberhall-event__class-section-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-family: var(--aberhall-heading-font);
	font-size: 18px;
	color: var(--aberhall-navy);
	cursor: pointer;
	text-align: left;
}

.aberhall-event__class-section-toggle svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--aberhall-muted);
	transition: transform 0.2s ease;
}

.aberhall-event__class-section.is-collapsed .aberhall-event__class-section-toggle svg {
	transform: rotate(-90deg);
}

/* Restyled as a solid pill (2026-08-18) — the bordered/muted-text
 * treatment it had before read as ordinary metadata rather than a
 * sponsor credit. `max-width` + `white-space: normal` (was `nowrap`)
 * let a long sponsor name wrap onto a second line inside the pill
 * rather than overflowing the section header or forcing it wider than
 * the header can accommodate on a narrow screen; `flex-wrap: wrap` on
 * the header (above) lets the whole pill drop onto its own line below
 * the section title when there isn't room beside it. */
.aberhall-event__class-section-sponsor {
	display: inline-flex;
	align-items: center;
	background: #3c5f91;
	color: #f8f5ee;
	border: none;
	border-radius: 999px;
	padding: 5px 14px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	max-width: 100%;
}

.aberhall-event__class-section-sponsor a {
	color: #f8f5ee;
	font-weight: 700;
	text-decoration: underline;
}

.aberhall-event__class-section-body {
	padding: 0 26px 26px;
}

.aberhall-event__class-section.is-collapsed .aberhall-event__class-section-body {
	display: none;
}

.aberhall-event__class-section-description {
	font-size: 14px;
	color: var(--aberhall-text);
	margin: 0 0 4px;
}

.aberhall-event__class-section-timing {
	font-size: 13px;
	font-weight: 600;
	color: var(--aberhall-olive);
	margin: 0 0 4px;
}

.aberhall-event__class-section-prizes {
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	color: var(--aberhall-navy);
	background: var(--aberhall-surface-alt);
	border-radius: 10px;
	padding: 6px 12px;
	margin: 6px 0 16px;
}

.aberhall-event__classes-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aberhall-event__class-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	background: var(--aberhall-surface);
	border: 1px solid var(--aberhall-border);
	border-radius: 8px;
	padding: 14px 18px;
}

.aberhall-event__class-label {
	flex-shrink: 0;
	min-width: 28px;
	font-weight: 700;
	color: var(--aberhall-olive);
}

.aberhall-event__class-body {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}

.aberhall-event__class-title {
	color: var(--aberhall-navy);
}

.aberhall-event__class-detail,
.aberhall-event__class-note {
	font-size: 14px;
	color: var(--aberhall-muted);
}

.aberhall-event__class-test {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--aberhall-olive);
	text-decoration: none;
	white-space: nowrap;
}

.aberhall-event__class-test:hover {
	color: var(--aberhall-navy);
	text-decoration: underline;
}

.aberhall-event__class-test svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.aberhall-event__fees {
	background: var(--aberhall-surface);
	border: 1px solid var(--aberhall-border);
	border-radius: 10px;
	padding: 28px clamp(20px, 3vw, 32px);
}

.aberhall-event__fees-list {
	display: flex;
	flex-direction: column;
}

.aberhall-event__fee-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--aberhall-border);
}

.aberhall-event__fee-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.aberhall-event__fee-row:first-child {
	padding-top: 0;
}

.aberhall-event__fee-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aberhall-event__fee-label {
	color: var(--aberhall-muted);
	font-size: 14px;
	font-weight: 500;
}

.aberhall-event__fee-note {
	font-size: 13px;
	color: var(--aberhall-muted);
}

.aberhall-event__fee-amount {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 28px;
	font-weight: 700;
	color: var(--aberhall-navy);
	white-space: nowrap;
	line-height: 1.1;
}

.aberhall-event__fee-unit {
	font-size: 12px;
	font-weight: 400;
	color: var(--aberhall-muted);
}

/* ================= Important information ================= */

.aberhall-event__info-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px 28px;
}

.aberhall-event__info-list ul li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
}

.aberhall-event__info-list ul li::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background-color: var(--aberhall-olive);
	-webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOC41Ii8+PHBhdGggZD0iTTkgMTIuNWwyIDIgNC00LjUiLz48L3N2Zz4=') center / contain no-repeat;
	mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOC41Ii8+PHBhdGggZD0iTTkgMTIuNWwyIDIgNC00LjUiLz48L3N2Zz4=') center / contain no-repeat;
}

/* ================= Online entry (full width) ================= */

.aberhall-event__booking-card {
	background: var(--aberhall-surface-alt);
	border: 1px solid var(--aberhall-border);
	border-radius: 12px;
	padding: 36px clamp(20px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.aberhall-event__booking-copy p.aberhall-event__booking-lead {
	font-family: var(--aberhall-heading-font);
	font-size: 22px;
	color: var(--aberhall-navy);
	margin: 0 0 8px;
}

.aberhall-event__booking-copy p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--aberhall-text);
}

.aberhall-event__booking-copy p:last-child {
	margin-bottom: 0;
}

.aberhall-event__booking-form {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	box-shadow: 0 2px 10px rgba(31, 50, 71, 0.06);
	width: 100%;
}

.aberhall-event__booking-notice {
	text-align: center;
	padding: 12px 0;
	font-size: 15px;
}

.aberhall-event__status-notice-replacement {
	font-weight: 700;
	color: var(--aberhall-navy);
}

.aberhall-admin-notice {
	font-size: 13px;
	color: var(--aberhall-muted);
	font-style: italic;
}