/*
 * assets/css/event.css · Out & Down theme
 *
 * templates/single-gd_event.html (Phase 12.1 — blueprint v2.1/2.2,
 * Sections 06, 08, 11, 12, 13). Enqueued only on is_singular('gd_event'),
 * after chrome.css. Reuses base.css's `.oad-tram` / `.oad-span-*`
 * utilities for the split and the related band, rather than declaring a
 * second 6-column grid here.
 *
 * Breakpoint: 1024px only, per .stylelintrc.json's allow-list. "Desktop"
 * below means >= 1024px, "mobile" means <= 1023px. Because the split is
 * one responsive template (no separate Desktop/Mobile copy — see the
 * blueprint v2.2 changelog and the oad-event-visibility SelfCheck note in
 * the theme repo), the mobile stack is plain source order: the aside
 * (poster, price/tickets, save/share) already comes before the content
 * column (head, field rows) in the markup, so removing the grid at
 * <1024px is enough — no reordering needed.
 *
 * Restyling GeoDirectory's own widget markup (post-directions, ninja-forms
 * contact, sell-tickets, dashboard/visitors/wallet) is kept to what this
 * composition needs to read correctly. Deeper polish of those widgets is
 * Phase 13's job, not this one's.
 */

/* ------------------------------------------------------------------ */
/* Split · sticky poster column | details                               */
/* ------------------------------------------------------------------ */

.oad-event-split {
	align-items: start;
}

/* Grid items default to min-width:auto, so one unbreakable child stretched
   the whole column and pushed the page wider than the viewport. */
.oad-event-aside,
.oad-event-content {
	min-width: 0;
}

/* The tram is 6 columns at every width. Below 1024px the aside and the
   content each take a full row (source order: aside first); from 1024px the
   aside is columns 1-2 and the content columns 3-6. */
.oad-event-split > .oad-event-aside,
.oad-event-split > .oad-event-content {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	/* The divider between the poster column and the details is drawn here,
	   not as the details column's border, so it is one continuous line from
	   the top of the page (behind the header) down to the split's bottom. As the column's
	   own border its top end came into view when the page was pulled down
	   past the top. Column 3 starts a third of the way across (2 of 6). */
	.oad-event-split {
		position: relative;
	}

	.oad-event-split::before {
		content: "";
		position: absolute;
		top: calc(-1 * var(--oad-header-h));
		bottom: 0;
		left: calc(100% / 3);
		width: 2px;
		background: var(--wp--preset--color--ink);
		pointer-events: none;
	}

	.oad-event-split > .oad-event-aside {
		grid-column: 1 / span 2;
		position: sticky;
		top: calc(var(--oad-header-h) + var(--oad-adminbar-h, 0px));
		/* The header collapses to the theme strip on scroll (header.js) by
		   sliding up --oad-collapse; the poster column slides up by the same
		   amount with the same ease, so it always meets the strip, including
		   while the page is pulled down past the top (a sticky offset would
		   not move there and a gap opened under the header). */
		/* stylelint-disable-next-line declaration-property-value-allowed-list -- moves with the transform */
		transition-property: transform, margin-bottom;
		/* stylelint-disable-next-line declaration-property-value-allowed-list -- matches the header's slow collapse */
		transition-duration: 400ms;
		/* stylelint-disable-next-line declaration-property-value-allowed-list -- matches the header's slow collapse */
		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}

	/* The negative bottom margin lets the sticky column sit that far lower
	   in the split, so when the page is scrolled to the end the transform
	   lifts it exactly onto the split's bottom line rather than above it. */
	html.oad-hdr-collapsed:not(.oad-sheet-open) .oad-event-split > .oad-event-aside {
		transform: translateY(calc(-1 * var(--oad-collapse, 0px)));
		/* stylelint-disable-next-line oad/spacing-ladder -- equals the header's measured collapse, not a design gap */
		margin-bottom: calc(-1 * var(--oad-collapse, 0px));
	}

	.oad-event-split > .oad-event-content {
		grid-column: 3 / span 4;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		border-left: 2px solid transparent;
	}

	.oad-event-content > .oad-event-rows {
		flex: 1 1 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Poster · then one ticket button                                      */
/* ------------------------------------------------------------------ */

.oad-event-aside__poster {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-event-aside__poster .geodir-post-slider,
.oad-event-aside__poster .geodir-image-container,
.oad-event-aside__poster .geodir-image-wrapper {
	aspect-ratio: 4 / 5;
	position: relative;
}

/* oad-poster-underlay's .oad-pu-frame (round 4 fix, poster gap bug): the
   plugin already pulls its frame out of flow to fill a fixed-aspect-ratio
   ancestor on poster CARDS (.ratio > .oad-pu-frame /
   .custom-aspect-ratio-wrapper .oad-pu-frame in the plugin's own CSS), but
   never for this page's own aspect-ratio:4/5 box above -- that rule was
   added later (poster ratio 4:5, 2026-09-16), after the plugin's own
   documented assumption that "none of this site's poster frames get their
   height from a fixed aspect-ratio" on the event page. Left alone, the
   frame stays in normal flow sized to its own (non-4:5) image's natural
   height, shorter than the aspect-ratio box reserves -- a visible gap of
   blank space below the poster before the ticket button, worse the further
   the real image's ratio sits from 4:5 (barely visible on a near-4:5
   poster, glaring on a square one). Pinning the frame to the positioned
   ancestor above makes its height definite, which is what lets
   .oad-event-aside__poster img's own height:100% below correctly fill it
   -- same mechanism the plugin uses for cards, applied to this context too.
   No !important needed: .oad-pu-frame's own base rule (position:relative,
   no !important) loses to this selector's higher specificity. */
.oad-event-aside__poster .oad-pu-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* The definite height above doesn't actually reach .oad-pu-frame: Bootstrap's
   own .carousel-item is `position: relative` (confirmed live -- it, not
   .geodir-image-wrapper, is what .oad-pu-frame's inset:0 anchors against),
   and once the frame is pulled out of flow, .carousel-item and
   .carousel-inner have no in-flow content left to size themselves by, so
   they collapse to 0 -- and inset:0 against a 0-height ancestor gives 0.
   Every link in the flow chain between the aspect-ratio box and the frame
   needs its own definite height for the chain to actually reach it. */
.oad-event-aside__poster .carousel-inner,
.oad-event-aside__poster .carousel-item {
	height: 100%;
}

.oad-event-aside__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

/* No-poster state (Section 12's poster-loading placeholder, reused).
   Desktop keeps it so the tram doesn't jump; mobile drops the cell --
   it's the placeholder's only content, so nothing else needs to move. */
.oad-event-aside__poster-placeholder {
	display: block;
	aspect-ratio: 4 / 5;
	background: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.20) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
}

@media (max-width: 1023px) {
	.oad-event-aside__poster {
		border-bottom: 0;
	}

	.oad-event-aside__poster:has(.oad-event-aside__poster-placeholder) {
		display: none;
	}
}

/* The ticket button is the standard Ink button (components.css .oad-btn,
   and GD's own buy button restyled there), one line: "Tickets · £12.50".
   The border is already the 2px frame, so hover only flips the fill; an
   inset outline on top of it drew a 4px line. On desktop its top edge is
   the poster's bottom line and its right edge is the details column's left
   line, so the button draws only its left and bottom. */
.oad-event-aside .oad-ev-ticket-link,
.oad-event-aside .oad-ev-tickets {
	margin: 0;
}

/* Tickets and Sell tickets sit side by side; a lone button fills the row. */
.oad-event-aside__tickets {
	display: flex;
	margin: 0;
}

.oad-event-aside__tickets > .oad-ev-ticket-link,
.oad-event-aside__tickets > .oad-ev-tickets {
	flex: 1 1 0;
	min-width: 0;
}

.oad-event-aside__tickets:not(:has(.oad-ev-ticket-link *, .oad-ev-tickets *)) {
	display: none;
}

.oad-event-aside .oad-btn {
	padding-left: var(--wp--preset--spacing--8);
	padding-right: var(--wp--preset--spacing--8);
	white-space: normal;
	text-align: center;
}

.oad-event-aside .geodir-buy-tickets-btn,
.oad-event-aside .geodir-manage-tickets-btn,
.oad-event-aside .oad-ev-teaser-btn,
.oad-event-aside .oad-ev-tickets button.geodir-sell-tickets-btn {
	padding-left: var(--wp--preset--spacing--8) !important;
	/* GD's buttons carry the label as bare text, and Barlow's caps sit about
	   2px below the middle of that line box (ascent 14, descent 4 at 13px).
	   A 4px bottom padding lifts the label 2px onto the middle of the fill;
	   the Sell pencil is dropped back by the same 2px so it stays there too. */
	/* stylelint-disable-next-line oad/spacing-ladder -- optical: lifts the caps onto the middle of the fill */
	padding-bottom: 4px !important;
	padding-right: var(--wp--preset--spacing--8) !important;
	white-space: normal;
	text-align: center;
}

/* GD prints Bootstrap's d-block and mt-2 on these buttons: d-block's
   display:block !important cancels the flex centring (the label rode up to
   the top of the fill) and mt-2 opened an 8px gap between Tickets and
   Ticket Management. The extra .oad-ev-tickets outranks AUI's .bsui rules. */
.oad-event-aside .oad-ev-tickets .geodir-buy-tickets-btn,
.oad-event-aside .oad-ev-tickets .geodir-manage-tickets-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin-top: 0 !important;
}

/* The line between the two buttons (desktop already draws each left line). */
.oad-event-aside .oad-ev-ticket-link:has(*) + .oad-ev-tickets:has(*) .oad-btn {
	border-left-width: 2px;
}

.oad-event-aside .oad-ev-ticket-link:has(*) + .oad-ev-tickets:has(*) .geodir-buy-tickets-btn,
.oad-event-aside .oad-ev-ticket-link:has(*) + .oad-ev-tickets:has(*) .geodir-manage-tickets-btn,
.oad-event-aside .oad-ev-ticket-link:has(*) + .oad-ev-tickets:has(*) button.geodir-sell-tickets-btn {
	border-left-width: 2px !important;
}

.oad-event-aside .oad-btn:hover {
	outline: 0;
}

.oad-event-aside .geodir-buy-tickets-btn:hover {
	outline: 0 !important;
}

/* Lines. The poster's bottom line sits above the Tickets button, and
   Tickets' own bottom line is the line between the two buttons, so no
   button draws a top line or a right line (the details column's left line
   is the right one). On mobile they draw no side lines either; on desktop
   the left line is the page's own. */
.oad-event-aside .oad-btn {
	border-style: solid;
	border-color: var(--wp--preset--color--ink);
	border-width: 0;
	border-bottom-width: 2px;
}

@media (min-width: 1024px) {
	.oad-event-aside .oad-btn {
		border-left-width: 2px;
	}
}

.oad-event-aside .geodir-buy-tickets-btn,
.oad-event-aside .geodir-manage-tickets-btn,
.oad-event-aside .oad-ev-teaser-btn,
.oad-event-aside .oad-ev-tickets button.geodir-sell-tickets-btn {
	border-style: solid !important;
	border-color: var(--wp--preset--color--ink) !important;
	border-top-width: 0 !important;
	border-right-width: 0 !important;
	border-bottom-width: 2px !important;
	border-left-width: 0 !important;
}

@media (min-width: 1024px) {
	.oad-event-aside .geodir-buy-tickets-btn,
	.oad-event-aside .geodir-manage-tickets-btn,
	.oad-event-aside .oad-ev-teaser-btn,
	.oad-event-aside .oad-ev-tickets button.geodir-sell-tickets-btn {
		border-left-width: 2px !important;
	}
}

/* Sell Tickets (organiser's own button): Ground fill, Ink text and a pencil,
   inverting to Ink on hover. Lines are set with the other aside buttons
   above; hover flips the fill without an outline, so no line doubles. */
.oad-event-aside .oad-ev-tickets .geodir-sell-tickets-btn {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-event-aside .oad-ev-tickets .geodir-sell-tickets-btn::before {
	content: "";
	display: inline-block;
	flex: none;
	margin-right: var(--wp--preset--spacing--8);
	position: relative;
	/* stylelint-disable-next-line oad/spacing-ladder -- undoes the label's 2px optical lift */
	top: 2px;
	width: 16px;
	height: 16px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%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'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.oad-event-aside .oad-ev-tickets .geodir-sell-tickets-btn:hover,
.oad-event-aside .oad-ev-tickets .geodir-sell-tickets-btn:focus {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	outline: 0 !important;
}

/* The admin-only "no tickets" note and the teaser note take the place of
   the button, so they draw the button's lines: the poster's bottom line is
   their top and the details divider is their right, leaving only a bottom
   line, plus the left line from 1024px up. Their own all-round border
   doubled the lines above and beside them. */
.oad-event-aside .oad-ev-admin-note,
.oad-event-aside .oad-ev-teaser-note {
	margin: 0;
	border-width: 0;
	border-bottom-width: 2px;
	background: var(--wp--preset--color--ground);
	opacity: 1;
}

/* The Tickets button stretches to the height of the note beside it. */
.oad-event-aside__tickets > .oad-ev-ticket-link:has(*) {
	display: flex;
}

.oad-event-aside__tickets > .oad-ev-ticket-link .oad-btn,
.oad-event-aside__tickets > .oad-ev-ticket-link .geodir-buy-tickets-btn {
	flex: 1 1 auto;
}

@media (min-width: 1024px) {
	.oad-event-aside .oad-ev-admin-note,
	.oad-event-aside .oad-ev-teaser-note {
		border-left-width: 2px;
	}
}

/* An emptied cell (Sold out for a public viewer, no link) leaves no sliver. */
.oad-ev-ticket-link:not(:has(*)),
.oad-ev-tickets:not(:has(*)),
.oad-ev-price:not(:has(*)) {
	display: none;
}

/* Mobile: the header collapses by sliding up --oad-collapse, so the first
   block under it slides up by the same amount with the same ease, as on
   desktop; otherwise a gap opens between the strip and the poster. The
   poster wrapper is moved, not the aside: the aside holds the fixed ticket
   bar, and a transform on an ancestor would re-anchor it. With no poster the
   head takes its place. */
@media (max-width: 1023px) {
	.oad-event-aside__poster,
	.oad-event-aside:has(.oad-event-aside__poster-placeholder) + .oad-event-content {
		/* stylelint-disable-next-line declaration-property-value-allowed-list -- moves with the transform */
		transition-property: transform, margin-bottom;
		/* stylelint-disable-next-line declaration-property-value-allowed-list -- matches the header's slow collapse */
		transition-duration: 400ms;
		/* stylelint-disable-next-line declaration-property-value-allowed-list -- matches the header's slow collapse */
		transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	}

	html.oad-hdr-collapsed:not(.oad-sheet-open) .oad-event-aside__poster,
	html.oad-hdr-collapsed:not(.oad-sheet-open) .oad-event-aside:has(.oad-event-aside__poster-placeholder) + .oad-event-content {
		transform: translateY(calc(-1 * var(--oad-collapse, 0px)));
		/* stylelint-disable-next-line oad/spacing-ladder -- equals the header's measured collapse, not a design gap */
		margin-bottom: calc(-1 * var(--oad-collapse, 0px));
	}
}

/* Mobile: the ticket button sticks to the viewport's bottom edge while
   scrolling, rather than sitting wherever source order (poster, then
   button) put it. Desktop keeps the aside's own sticky column instead --
   see .oad-event-split > .oad-event-aside above. */
@media (max-width: 1023px) {
	.oad-event-aside .oad-event-aside__tickets {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		/* The poster's bottom line is off on mobile (the bar no longer
		   follows the poster), so the bar draws its own top line. */
		border-top: 2px solid var(--wp--preset--color--ink);
	}

	/* :has() cannot nest inside :has() (spec), so this checks for a
	   descendant-of-the-cell element directly rather than reusing the
	   :has(*) empty-cell check above. */
	.oad-event:has(.oad-event-aside .oad-ev-ticket-link *),
	.oad-event:has(.oad-event-aside .oad-ev-tickets *) {
		padding-bottom: var(--wp--preset--spacing--64);
	}

	.oad-event-aside .oad-btn,
	.oad-event-aside .geodir-buy-tickets-btn,
	.oad-event-aside .geodir-manage-tickets-btn,
	.oad-event-aside .oad-ev-teaser-btn,
	.oad-event-aside .oad-ev-tickets button.geodir-sell-tickets-btn {
		min-height: 44px;
		line-height: 1;
	}
}

/* ------------------------------------------------------------------ */
/* Head · theme tag · title · Save and Share                            */
/* ------------------------------------------------------------------ */

.oad-event-content {
	position: relative;
}

/* Bottom padding, round 5: before .oad-event-actions was pulled out of flow
   onto the chip's own row (round 1), ITS OWN padding-bottom (24/40) was
   what actually separated the title from .oad-event-rows below -- an
   absolutely positioned element contributes nothing to flow, so that gap
   silently collapsed to 0 (h1 was already margin:0 from round 3's fix,
   correctly, for the gap ABOVE the title). Restoring the same 24/40 value
   here, on the head itself, brings the title-to-next-section gap back
   without reintroducing the h1's own margin (which would re-break the
   chip-to-title gap round 3 fixed) -- matches the blueprint's own
   title-to-next-block precedent too (header.blueprint h1 {
   margin-bottom: 24px }). */
.oad-event-head {
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

@media (min-width: 1024px) {
	.oad-event-head {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}
}

/* The chip's own row, always present (even with no chip) so its height --
   44px, matching the Save/Share icons -- reserves the space those icons are
   laid over: .oad-event-actions is positioned onto this same row rather than
   sitting in its own stacked block below the title (see below). */
.oad-event-head__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
}

.oad-event-tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.oad-event-tag[data-cat="culture"] {
	background: var(--wp--preset--color--culture);
}

.oad-event-tag[data-cat="social"] {
	background: var(--wp--preset--color--social);
}

.oad-event-tag[data-cat="wellbeing"] {
	background: var(--wp--preset--color--wellbeing);
}

.oad-event-tag[data-cat="learning"] {
	background: var(--wp--preset--color--learning);
}

.oad-event-tag[data-cat="progress"] {
	background: var(--wp--preset--color--progress);
}

.oad-event-tag[data-cat="active"] {
	background: var(--wp--preset--color--active);
}

/* The event page's own head chip is Ink, not the event-theme colour --
   scoped to .oad-event-head so the same .oad-event-tag markup stays
   theme-coloured everywhere else it's reused (archive filter chips, header
   pills, poster tags). */
.oad-event-head .oad-event-tag[data-cat] {
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Both head chips invert on hover: Ground fill, Ink text. */
.oad-event-head a.oad-event-tag[data-cat]:hover,
.oad-event-head a.oad-event-tag[data-cat]:focus-visible {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

/* The default-category chip: Ink with white text, inverting on hover. */
.oad-event-head .oad-event-tag--cat {
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

a.oad-event-tag--cat:hover,
a.oad-event-tag--cat:focus-visible {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

/* The real bug behind "chip-to-title gap too big": this h1 had no margin
   reset, so the browser's own default h1 margin (proportional to its own
   font-size, here a clamp up to 72px) was stacking on top of
   .oad-event-head's 8px flex gap -- flex gap adds between margin boxes,
   not content boxes, so an unreset margin is invisible in the CSS but very
   visible on screen. Same root cause as the band-heading gap bug fixed
   earlier this session; margin:0 is the fix (theme.json's own h1 element
   style already sets line-height, left untouched). The 8px gap itself
   matches the blueprint's own kicker-to-heading precedent
   (header.blueprint .hero .card, a flex column with kicker + h1 at
   gap:12px -- the nearest rung on this project's 8px spacing ladder). */
.oad-event-head__title {
	font-size: var(--wp--preset--font-size--display-l);
	margin: 0;
	text-wrap: balance;
}

/* Save and Share: two 44px icon squares, laid over the chip's own row
   (.oad-event-head__top, same height) at the top-right of .oad-event-content
   -- chip left, icons right, one line, rather than a second stacked block
   under the title. */
.oad-event-actions {
	position: absolute;
	top: var(--wp--preset--spacing--24);
	right: var(--wp--preset--spacing--16);
	display: flex;
	align-items: flex-start;
	padding: 0;
}

@media (min-width: 1024px) {
	.oad-event-actions {
		top: var(--wp--preset--spacing--40);
		right: var(--wp--preset--spacing--40);
	}
}

.oad-event-actions .gd-fav-info-wrap,
.oad-event-actions .gd-list-favorite,
.oad-event-actions .oad-share {
	width: 44px;
	flex: none;
}

.oad-event-actions .geodir-addtofav,
.oad-event-actions .oad-share__toggle {
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 2px solid var(--wp--preset--color--ink);
	font-size: 0;
}

.oad-event-actions > * + * .oad-share__toggle {
	border-left: 0;
}

.oad-event-actions .oad-share__label {
	display: none;
}

/* Mobile: 40px squares (a ladder rung), 2px line + 10px + 16px icon + 10px + 2px line. The
   icon keeps its size; only the space around it shrinks. */
@media (max-width: 1023px) {
	.oad-event-actions .gd-fav-info-wrap,
	.oad-event-actions .gd-list-favorite,
	.oad-event-actions .oad-share {
		width: 40px;
	}

	.oad-event-actions .geodir-addtofav,
	.oad-event-actions .oad-share__toggle {
		width: 40px;
		height: 40px;
	}
}

.oad-event-actions .oad-icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

.oad-event-actions .geodir-addtofav i,
.oad-event-actions .geodir-addtofav svg {
	font-size: 16px;
}

/* Copies .oad-cal__menu/.oad-cal__menu a's own rules directly (right:0,
   not the logical inset-inline shorthand -- literal right, matching the
   reference rule exactly rather than trusting the logical property to
   resolve the same way): anchored to its own right edge, opening leftward,
   Meter-caps-free Speak rows with a hairline between them. The actions row
   sits at the page's own top-right corner, so components.css's default
   (inset-inline:0, meant for a full-width guide-page row, opens from the
   left) pushed the menu past the right edge of the page and forced
   horizontal scroll. */
.oad-event-actions .oad-share__menu {
	position: absolute;
	right: 0;
	left: auto;
	top: 100%;
	width: max-content;
	min-width: 220px;
	z-index: 2;
}

.oad-event-actions .oad-share__row {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--24);
	justify-content: space-between;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Details rows: each draws its own top line, the last one the bottom    */
/* ------------------------------------------------------------------ */

.oad-event-rows {
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-event-rows > * {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-event-rows > :not(:has(*)) {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Field rows                                                           */
/* ------------------------------------------------------------------ */

.oad-field-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

/* Label | value at every width (blueprint Section 22's field row). Below
   1024 the label is a column exactly 1/6 of the page, its text turned on its
   side and read top to bottom, and the value takes the other 5/6. */
@media (max-width: 1023px) {
	.oad-field-row {
		grid-template-columns: repeat(6, 1fr);
	}
}

.oad-field-row__lbl {
	grid-column: span 1;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
	border-right: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oad-field-row__val {
	grid-column: span 3;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--wp--preset--spacing--24);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

/* After the base span 3, so it wins at equal specificity. */
@media (max-width: 1023px) {
	.oad-field-row__val {
		grid-column: span 5;
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
	}

	.oad-field-row__lbl {
		grid-column: span 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--wp--preset--spacing--24) 0;
		overflow-wrap: normal;
		text-align: center;
		font-size: var(--wp--preset--font-size--data-m);
		writing-mode: vertical-rl;
	}
}

/* Round 3: body-l (18px) still read as too small to the user. The blueprint's
   own "field .val" component sample (Components page) uses a smaller
   illustrative 15px/14px pair that isn't tied to this project's real
   preset scale (generic doc CSS, not a token) -- so rather than copy a
   smaller number that would make the complaint worse, this moves to
   display-m (20px, fixed, no clamp), the next real rung above body-l in
   theme.json's own type scale. */
.oad-field-row__line {
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1.5;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Add to calendar sits at the right of the When row, styled as the
   blueprint's "See all →" link (Meter caps, arrow, 2px Ink underline); the
   link opens a framed list, one hairline row per option (cal-menu). */
.wp-block-outanddown-event-when .oad-field-row__val {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	justify-content: flex-end;
}

.oad-when__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

/* Directions sits at the right of the Where row, the same pattern as Add to
   calendar on the When row above: venue name/address in one flex child,
   the link at the row's own right edge, not stacked underneath it. */
.wp-block-outanddown-event-where .oad-field-row__val {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
	justify-content: flex-end;
}

.oad-where__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	min-width: 0;
}

.oad-cal {
	position: relative;
}

.oad-cal summary {
	align-items: center;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	gap: var(--wp--preset--spacing--8);
	list-style: none;
	padding: var(--wp--preset--spacing--8) 0;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

.oad-cal summary::after {
	content: "\2192";
}

.oad-cal summary::-webkit-details-marker {
	display: none;
}

.oad-cal__menu {
	background: var(--wp--preset--color--ground);
	border: 2px solid var(--wp--preset--color--ink);
	position: absolute;
	right: 0;
	top: 100%;
	width: max-content;
	z-index: 2;
}

.oad-cal__menu a {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--24);
	justify-content: space-between;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.oad-cal__menu a + a {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-cal__menu span {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-field-row__meter {
	display: block;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--data-l);
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
}

.oad-field-row__strong {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-m);
	letter-spacing: -0.008em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

a.oad-field-row__strong {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.oad-field-row__aside {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* GeoDirectory's own description output (geodir-widget-post-content)
   inherits Speak from the field row, no extra rule needed. */
.oad-field-row__val .geodir-post-content-container p {
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1.55;
}

/* Directions: outanddown/event-directions (Phase 13.4) replaced the
   [gd_post_directions] shortcode entirely -- GD's own widget is a lat/lng
   Google Maps link wearing FontAweome and !important, and this theme's
   own coordinates lookup (outanddown_event_directions(),
   inc/event-data.php) already has to read the same fields, so there was
   nothing left to hook. No visual map embed exists on the site to draw
   from (blueprint 12.1 deviation, still true) -- this is a bar, not the
   blueprint's 16:9 map + CTA. */
.oad-directions-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	min-height: 44px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-directions-cta:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-directions-cta__postcode {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	letter-spacing: 0.04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oad-directions-cta__go {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	flex-shrink: 0;
}

.oad-directions-cta svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Contact organiser sits at the right of the organiser row (blueprint
   Section 13: avatar, name, Contact at the end) as the blueprint's text
   link: Meter caps, an arrow and a 2px Ink underline, like "See all".
   Hub button, or GD's ninja-forms badge when the organiser is unclaimed. */
.oad-organiser {
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: var(--wp--preset--spacing--16);
}

.oad-organiser .oad-organiser__info {
	flex: 1 1 auto;
}

.oad-organiser .wp-block-outanddown-event-contact {
	width: auto;
}

.oad-organiser .oad-pf-contact__open,
.oad-organiser .geodir-ninja-forms .gd-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	width: auto;
	height: auto;
	min-height: 0;
	padding: var(--wp--preset--spacing--8) 0;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border-style: solid;
	border-width: 0;
	border-bottom-width: 2px;
	border-color: var(--wp--preset--color--ink);
}

.oad-organiser .oad-pf-contact__open {
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.oad-organiser .oad-pf-contact__open:hover {
	background: transparent;
	color: var(--wp--preset--color--ink);
	outline: 0;
}

.oad-organiser .geodir-ninja-forms .gd-badge,
.oad-organiser .geodir-ninja-forms .gd-badge:hover {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border-style: solid !important;
	border-color: var(--wp--preset--color--ink) !important;
	border-top-width: 0 !important;
	border-right-width: 0 !important;
	border-left-width: 0 !important;
	border-bottom-width: 2px !important;
}

.oad-organiser .oad-pf-contact__open::after,
.oad-organiser .geodir-ninja-forms .gd-badge::after {
	content: "\2192";
}

/* .oad-organiser* moved to assets/css/components.css (Phase 12.4) --
   shared with the guide card's organiser line. components.css is
   enqueued alongside this file. */

/* "In our guides" (outanddown/event-guides, Phase 12.4) reuses the field
   row it sits in; only its own link list needs a rule. */
.oad-event-guides-val {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
}

.oad-event-guides__link {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}


/* Dashboard/Visitors/Wallet field-row wrappers need no rules of their own
   -- .oad-field-row already covers them; the oad-ev-* groups exist only
   for oad-event-visibility's marker-class matching. */

/* ------------------------------------------------------------------ */
/* More events bands · organiser, venue, city                           */
/* Up to six posters, one per column of the tram, on the 16/24 "apart"   */
/* gutter. A band with nothing to show is not output at all.             */
/* ------------------------------------------------------------------ */

.oad-related-band {
	padding: var(--oad-section-gap) var(--wp--preset--spacing--16) 0;
}

@media (min-width: 1024px) {
	.oad-related-band {
		padding: var(--oad-section-gap) var(--wp--preset--spacing--40) 0;
	}
}

/* The last band (or the admin section, when no band shows) closes the page. */
.oad-event > .oad-related-band:last-child,
.oad-event > .oad-admin:last-child {
	padding-bottom: var(--oad-section-gap);
}

/* flex-end, not baseline: the "See all" link is shorter than the h2, and
   baseline alignment stretched the flex line to the link's own ascent/
   descent, leaving invisible space under the h2 before margin-bottom even
   started counting -- the real cause of the "too loose" gap (the h2 itself
   was already margin:0). Bottom-aligning both children makes the head's own
   box end exactly at the h2's bottom edge, so margin-bottom is the whole
   gap, genuinely 24/32px. */
.oad-related-band__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--16);
	margin-bottom: var(--oad-head-gap);
}

/* Section tier (blueprint v3.0, "space, not rules": the border above a band
   and under its head are gone, the title moved to the Section tier) --
   same token and shape as home.css's .oad-band__title, which is the same
   component under a different name. The "too large" complaint was spacing,
   not size: this h2 has no wp-block-heading class to pick up core's margin
   reset, so the browser's own default h2 margin was stacking on top of
   --oad-head-gap below it (and a matching gap above, pushing the whole
   band down). margin:0 and line-height:1, matching .oad-band__title
   exactly, is the actual fix. */
.oad-related-band__head h2 {
	font-size: var(--wp--preset--font-size--section);
	line-height: 1;
	margin: 0;
	text-wrap: balance;
}

.oad-related-band__see-all {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--8);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

.oad-related-band__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	.oad-related-band__grid {
		grid-template-columns: repeat(6, 1fr);
		gap: var(--wp--preset--spacing--24);
	}
}

/* The band's own posters carry their date and title on the poster, so
   nothing sits under them. */
.oad-related-band .oad-poster-card {
	min-width: 0;
}

/* Directions: styled and positioned like Add to calendar (.oad-cal summary)
   -- Meter caps, an arrow, a 2px Ink underline -- not a full CTA bar. */
.oad-field-row__link {
	align-items: center;
	align-self: flex-start;
	display: inline-flex;
	gap: var(--wp--preset--spacing--8);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--8) 0;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.oad-field-row__link::after {
	content: "\2192";
}

/* ------------------------------------------------------------------ */
/* Event admin · a framed section under the event                       */
/* Owner and site admins only (oad-ev-dashboard hides the whole thing).  */
/* Every vertical divider is a border-left on the cell that starts at    */
/* that column line, so lines in different rows land on the same x.      */
/* ------------------------------------------------------------------ */

.oad-admin {
	padding: var(--oad-section-gap) var(--wp--preset--spacing--16) 0;
}

@media (min-width: 1024px) {
	.oad-admin {
		padding: var(--oad-section-gap) var(--wp--preset--spacing--40) 0;
	}
}

.oad-admin__frame {
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

.oad-admin__bar {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	min-height: 48px;
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-admin__bar h2 {
	grid-column: span 5;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.oad-admin__bar a {
	grid-column: span 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 var(--wp--preset--spacing--16);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.oad-admin__bar svg {
	width: 24px;
	height: 24px;
}

/* Actions: 1 · 1 · 2 · 2 on the six-column tram. */
.oad-admin__acts {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-admin__act {
	grid-column: span 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--16);
	border-left: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-admin__act:first-child {
	border-left: 0;
}

.oad-admin__act:nth-child(n+3) {
	grid-column: span 2;
}

.oad-admin__act:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-admin__act--primary {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-admin__act--primary:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-admin__grid > * {
	min-width: 0;
}

.oad-ev-wallet {
	border-left: 2px solid var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
}

.oad-ev-wallet > .oad-admin__wallet-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.oad-admin__sub {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oad-admin__sub span {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
}

.oad-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-stat {
	min-width: 0;
	padding: var(--wp--preset--spacing--16);
}

.oad-stat + .oad-stat {
	border-left: 2px solid var(--wp--preset--color--ink);
}

.oad-stat__k {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oad-stat__v {
	margin-top: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.oad-stat__d {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}

/* Analytics: mirrors GeoDirectory's own [gd_google_analytics] widget --
   heading + a realtime "Active Users" pill, a 10-option view picker, then
   one server-rendered view (inc/event-analytics.php). Ink only, an opacity
   ladder standing in for GD's cyan/orange second series/segment (see
   outanddown-no-accent-colour); every donut and bar carries a text label
   too, since opacity alone isn't reliably distinguishable. */
.oad-chart {
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16) var(--wp--preset--spacing--16);
}

.oad-chart__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--8);
	margin-bottom: var(--wp--preset--spacing--16);
}

.oad-chart__title {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body-l);
	letter-spacing: -0.008em;
	text-transform: uppercase;
}

.oad-chart__realtime {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 32px;
	padding: 0 var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oad-chart__realtime {
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-chart__realtime:hover,
.oad-chart__realtime:focus-visible {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-chart__realtime.is-loading .oad-chart__realtime-icon {
	animation: oad-realtime-spin 700ms linear infinite;
}

@keyframes oad-realtime-spin {
	to {
		transform: rotate(360deg);
	}
}

.oad-chart__realtime-icon {
	flex: none;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%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'%3E%3Cpath d='M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.oad-chart__realtime-val {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.oad-chart__label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-chart__select {
	display: block;
	width: max-content;
	max-width: 100%;
	min-height: 44px;
	margin-bottom: var(--wp--preset--spacing--16);
	padding: 0 var(--wp--preset--spacing--48) 0 var(--wp--preset--spacing--16);
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") right var(--wp--preset--spacing--16) center / 12px 8px no-repeat;
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oad-chart__select:disabled {
	color: var(--wp--preset--color--muted);
}

.oad-chart__body[aria-busy="true"] {
	opacity: 0.5;
}

.oad-chart__svg {
	display: block;
	width: 100%;
	aspect-ratio: 15 / 4;
	overflow: visible;
}

.oad-chart text {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	fill: var(--wp--preset--color--muted);
}

.oad-chart__empty {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* Legend: the two-series compare charts (weeks/months/years) put one inline
   above the bars; the donut charts put one, with value/share, below. */
.oad-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	margin-bottom: var(--wp--preset--spacing--16);
}

.oad-chart__legend--inline {
	margin-bottom: var(--wp--preset--spacing--8);
}

.oad-chart__legend li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oad-chart__swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--ink);
	flex: none;
}

.oad-chart__legend-val {
	color: var(--wp--preset--color--muted);
}

/* Donut: country/city/devices/newreturning. */
.oad-chart__donut {
	display: block;
	width: 240px;
	max-width: 100%;
	margin-bottom: var(--wp--preset--spacing--16);
}

/* Horizontal bars: sources. Each bar carries its own label/value as real
   text, so no separate legend is needed here. */
.oad-chart__hbars {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.oad-chart__hbars li {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

.oad-chart__hbar-label {
	grid-column: 1 / -1;
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-chart__hbar-track {
	height: 16px;
	background: var(--wp--preset--color--ink);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
}

.oad-chart__hbar-fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--ink);
}

.oad-chart__hbar-val {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Engagement: no chart, a 2x2 stat grid. */
.oad-chart__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

.oad-chart__stat-v {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.oad-chart__stat-k {
	margin-top: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Wallet: the balance large, Withdraw as one 44px Ink cell at the foot.
   Round 6: the balance sits at the BOTTOM of the cell, flush above
   Withdraw, with the empty space above it (not between the balance and
   the button) -- .oad-wallet itself is the flex column that matters now:
   .oad-wallet__head (Balance label + "All events by X") is one flex item,
   .getpaid-wallet (balance figure + Withdraw, GetPaid's own markup,
   naturally stacked, no space distributed between them) is the other, and
   justify-content:space-between puts the one gap between those two groups
   -- not a margin (stylelint disallows margin:auto here). */
.oad-wallet {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-top: 2px solid var(--wp--preset--color--ink);
}

/* No flex:1 here any more -- that used to make this the ONE stretchy
   child, filling all the cell's leftover height itself and leaving
   .oad-wallet with nothing left to put a gap between; sized to its own
   content instead, so .oad-wallet's own space-between (above) has real
   space to push it down with. */
.oad-wallet > .getpaid-wallet {
	display: flex;
	flex-direction: column;
}

/* "Wallet history": links to the same UsersWP wallet tab as the admin
   actions row's own link of the same name, when a viewer has one (falls
   back to a plain label bar otherwise). */
.oad-wallet-hist {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

/* No outline: the cell already sits on the top, left and right lines of the
   frame, and an inset outline drew them a second time. Only the bottom line
   is the cell's own. */
a.oad-wallet-hist:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-wallet__label {
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) 0;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oad-wallet__sub {
	padding: 0 var(--wp--preset--spacing--16);
	margin-top: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--meter);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}

/* No flex:1/space-between here any more -- the balance figure and Withdraw
   now stack tightly with nothing distributed between them; the one gap
   lives above the whole .getpaid-wallet group (.oad-wallet's own
   space-between, above). */
.oad-wallet .card,
.oad-wallet .card-body {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* The balance figure's own wrapper (GetPaid's div.mb-3, the card-body's
   second child once the hidden p.text-muted is counted -- the old
   div:first-child selector here never matched anything). Inset from the
   left edge and lifted off the Withdraw bar, as in the mockup. */
.oad-wallet .card-body > .mb-3 {
	padding: 0 var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	margin: 0 !important;
}

.oad-wallet .getpaid-wallet {
	display: flex;
	flex-direction: column;
}

.oad-wallet .card.mb-3 {
	margin-bottom: 0 !important;
}

.oad-wallet .card-body.text-center {
	text-align: left !important;
}

.oad-wallet .card-body.p-4 {
	padding: 0 !important;
}

.oad-wallet .text-muted,
.oad-wallet .fa-wallet,
.oad-wallet .wpinv-wallet-topup-link {
	display: none !important;
}

.oad-wallet .wpinv-wallet-balance {
	margin: 0;
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	text-transform: none;
}

.oad-wallet .wpinv-wallet-buttons {
	display: block;
}

.oad-wallet .wpinv-wallet-withdraw-link,
.oad-wallet .btn-outline-primary {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 var(--wp--preset--spacing--16);
	border: 0 !important;
	border-top: 2px solid var(--wp--preset--color--ink) !important;
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-wallet .wpinv-wallet-withdraw-link:hover,
.oad-wallet .btn-outline-primary:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

.oad-wallet .wpinv-wallet-withdraw-link i,
.oad-wallet .btn-outline-primary i {
	display: none;
}

/* Ticket sales table. */
.oad-admin__sales {
	border-top: 2px solid var(--wp--preset--color--ink);
}

.oad-table-wrap {
	overflow-x: auto;
}

.oad-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.oad-table th,
.oad-table td {
	padding: var(--wp--preset--spacing--16);
	text-align: left;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-table th {
	border-top: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oad-table td {
	font-family: var(--wp--preset--font-family--meter);
	font-size: 13px;
}

.oad-table .num {
	text-align: right;
}

.oad-table tfoot td {
	border-bottom: 0;
	font-weight: 500;
}

@media (max-width: 1023px) {
	.oad-admin__grid > .oad-ev-visitors,
	.oad-admin__grid > .oad-ev-wallet {
		grid-column: 1 / -1;
	}

	.oad-ev-wallet {
		border-left: 0;
		border-top: 2px solid var(--wp--preset--color--ink);
	}

	.oad-admin__act,
	.oad-admin__act:nth-child(n+3) {
		grid-column: span 3;
	}

	.oad-admin__act:nth-child(2n+1) {
		border-left: 0;
	}

	.oad-admin__act:nth-child(-n+2) {
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	.oad-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.oad-stat:nth-child(2n+1) {
		border-left: 0;
	}

	.oad-stat:nth-child(-n+2) {
		border-bottom: 2px solid var(--wp--preset--color--ink);
	}

	.oad-stat__v {
		font-size: 24px;
	}

	.oad-wallet .wpinv-wallet-balance {
		font-size: 40px;
	}

	.oad-table th,
	.oad-table td {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--8);
	}
}

/* .oad-poster-card* styling moved to assets/css/poster.css (Phase 12.3) --
   shared by every surface that can render a card, not duplicated per
   template. poster.css is enqueued alongside this file.

   .oad-toast moved to assets/css/components.css (Phase 12.4) -- shared
   with the guide page's copy-link toast (assets/js/share.js, used by
   both singles). */

/* ---------------------------------------------------------------- */
/* Phase 14 · styling that Code Snippets 119, 121, 122 and 226 used to */
/* supply for widgets this template still prints.                      */
/* ---------------------------------------------------------------- */

/* Edit / Delete ([gd_author_actions], snippet 119). */
.oad-event .gd-author-actions .gd_user_action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	background-color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	color: var(--wp--preset--color--white) !important;
}

.oad-event .gd-author-actions .gd_user_action:hover {
	background-color: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

/* Owner analytics ([gd_google_analytics], snippet 121). The old neon
   hue-rotate filter on the chart is not carried over. */
.oad-event #ga_stats.card {
	background: transparent !important;
	border: 0 !important;
}

.oad-event #ga_stats .card-header {
	background: transparent !important;
	border: 0 !important;
	margin-bottom: 16px !important;
	padding: 0 !important;
}

.oad-event #ga_stats .card-body {
	padding: 0 !important;
}

.oad-event #ga-analytics-title {
	font-family: var(--wp--preset--font-family--shout) !important;
	font-size: var(--wp--preset--font-size--body-l) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
}

.oad-event #ga_stats .card-header .gd-ActiveUsers {
	background-color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	color: var(--wp--preset--color--white) !important;
	padding: 8px 16px !important;
}

.oad-event #ga_stats .card-header .gd-ActiveUsers:hover {
	background-color: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

/* GetPaid / payouts buttons on the event page: 44px, whatever Bootstrap
   sizes them to. */
.oad-event .wpinv-wallet-buttons .btn,
.oad-event .oad-payouts-withdraw-link,
.oad-event .getpaid-payment-button,
.oad-event .geodir-sell-tickets-btn,
.oad-event button.btn {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
}

/* Wallet card ([wpinv_wallet], snippet 122). */
.oad-event .wp-block-column [title="Placeholder"],
.oad-event .getpaid-wallet .fa-wallet {
	display: none !important;
}

.oad-event .getpaid-wallet .card {
	background: transparent !important;
	border: 0 !important;
}

.oad-event .wpinv-wallet-buttons .btn {
	font-family: var(--wp--preset--font-family--shout) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
}

/* Poster slider (snippet 226): no dots, and no arrow that leads nowhere. */
.oad-event .geodir-image-container .carousel-indicators {
	display: none !important;
}

.oad-event .geodir-image-container .carousel:has(.carousel-item:only-child) .carousel-control-prev,
.oad-event .geodir-image-container .carousel:has(.carousel-item:only-child) .carousel-control-next,
.oad-event .geodir-image-container .carousel:has(.carousel-item:first-child.active) .carousel-control-prev,
.oad-event .geodir-image-container .carousel:has(.carousel-item:last-child.active) .carousel-control-next {
	display: none !important;
}