/*
 * assets/css/split.css · Out & Down theme
 *
 * The sticky-aside / scrolling-list layout shared by every "profile
 * shaped" template: the guide page (Phase 12.4, single-gd_guides.html),
 * and the organiser/venue profile (Phase 12.5, page-profile.html and
 * single-gd_place.html). Extracted out of guide.css, which originally
 * carried this as guide-only markup -- generic class names
 * (.oad-split / .oad-split__aside / .oad-split__intro / .oad-split__foot
 * / .oad-split__list) so a template only supplies its own content, never
 * its own layout.
 *
 * .oad-gcard (the event card) moves here too, unchanged, since it is
 * literally the same markup (outanddown_guide_card()) on both the guide
 * page and the profile pages -- Phase 12.5 added hide_organiser/
 * hide_venue args to the PHP, not a second set of classes.
 *
 * Reuses base.css's `.oad-tram` / `.oad-span-*` utilities, same as
 * guide.css always did. Breakpoint: 1024px only, per
 * .stylelintrc.json's allow-list.
 */

/* ------------------------------------------------------------------ */
/* Split                                                                */
/* ------------------------------------------------------------------ */

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

@media (min-width: 1024px) {
	.oad-split__aside {
		position: sticky;
		top: calc(var(--oad-header-h) + var(--oad-adminbar-h, 0px));
		height: calc(100svh - var(--oad-header-h) - var(--oad-adminbar-h, 0px));
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.oad-split__intro {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--32);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

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

.oad-split__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	/* 40 on the left: the category tab hangs off the card's left edge. */
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	/* Containment for .oad-gcard__title's cqi font-size below -- the card
	   title scales against this column's own width, not the viewport. */
	container-type: inline-size;
}

@media (min-width: 1024px) {
	.oad-split__list {
		border-left: 2px solid var(--wp--preset--color--ink);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--80) var(--wp--preset--spacing--64);
	}
}

/* ------------------------------------------------------------------ */
/* Info column · the aside on guide, venue and organiser pages          */
/* ------------------------------------------------------------------ */
/* Opt-in via .oad-split--card so the account page and add-listing form  */
/* keep the plain aside. No frame and no vertical line: identity, fact   */
/* rows, then the actions straight under them. The column is only as    */
/* tall as its content. Desktop: sticky. Mobile: stacks above the list.  */

.oad-info-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	min-width: 0;
}

.oad-info-card .oad-split__intro {
	padding: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	gap: var(--wp--preset--spacing--16);
}

.oad-info-card .oad-split__intro > * {
	flex: 0 0 100%;
	min-width: 0;
}

/* Avatar and kicker share one row (profile pages). */
.oad-info-card .oad-pf-avatar {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
}

.oad-info-card .oad-pf-kicker {
	flex: 1 1 0;
	margin-top: 0;
}

.oad-info-card .oad-guide-desc p,
.oad-info-card .oad-pf-bio {
	font-size: 16px;
}

.oad-info-card .oad-split__foot {
	border-top: 0;
}

.oad-info-card .oad-pf-contact {
	padding: 0;
}

/* Save | Share: one framed button split in two. */
.oad-info-card .oad-actions-btns {
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-info-card .oad-actions-btns .geodir-addtofav,
.oad-info-card .oad-share__toggle {
	min-height: 48px;
}

.oad-info-card .oad-actions-btns > .wp-block-group + .wp-block-group {
	border-left: 2px solid var(--wp--preset--color--ink);
}

/* Share cell reads as Ink-filled at rest here (Save stays Ground), inverting
   on hover -- the opposite of components.css's shared Ground-at-rest rule. */
.oad-info-card .oad-share__toggle {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.oad-info-card .oad-share__toggle:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

/* Compiled by · avatar, muted label, name in Shout. */
.oad-guide-by {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--16) 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

.oad-guide-by__avatar {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--ink);
	overflow: hidden;
	background: var(--wp--preset--color--ground);
}

.oad-guide-by__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

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

.oad-guide-by__name {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.oad-guide-by__name:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (min-width: 1024px) {
	/* Left over from when the card had a fixed, viewport-height cap: this
	   flex-grow spacer (.oad-guide-facts-spacer, printed by the guide-facts
	   block straight after the <dl>) used to soak up whatever the screen
	   left over so Compiled-by + Save|Share read as the card's own footer.
	   The card now sizes to its own content (below), which leaves this
	   spacer nothing to grow into -- harmless (it just renders at 0
	   height), kept only so a future fixed-height variant of the card
	   would still have it available. */
	.oad-guide-facts-spacer {
		flex: 1 1 auto;
	}

	.oad-split--card {
		align-items: stretch;
	}

	.oad-split--card .oad-split__aside {
		position: static;
		height: auto;
		overflow: visible;
		display: block;
		/* Bottom padding matches .oad-split__list's own 40px (below) so the
		   two columns' bottom edges land on the same line the moment the
		   info card (always shorter than the list) releases from sticky at
		   the foot of the page -- a mismatched pair of paddings here left
		   the info card's release point 16px off the list's own. */
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}

	.oad-split--card .oad-info-card {
		position: sticky;
		top: calc(var(--oad-header-h) + var(--oad-adminbar-h, 0px) + var(--wp--preset--spacing--24));
		/* No fixed height and no overflow here on purpose -- a capped height
		   with a hidden internal scrollbar clipped Save|Share the moment the
		   description (or a badly-wrapping heading at some in-between width)
		   made the card's natural content taller than one screen, and left a
		   dangling blank gap at the foot whenever content was shorter than
		   that cap. The card is sized by its own content instead, same as
		   .oad-event-aside (event.css): it stays pinned while it fits inside
		   the viewport, and simply scrolls away with the page, in normal
		   sticky fashion, on the rare page short enough for that to matter --
		   correct at any description length with nothing to keep in sync. */
		/* 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-split--card .oad-info-card {
		/* The header collapses to the theme strip on scroll (header.js) by
		   sliding up --oad-collapse; a sticky offset alone doesn't move, so
		   without this the card stayed pinned at the full header's height
		   and opened a gap under the now-shorter, collapsed header. Same
		   fix as .oad-event-aside (event.css), including the negative
		   bottom margin: it lets the sticky card 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. */
		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-split--card .oad-split__list {
		border-left: 0;
		padding: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 1023px) {
	.oad-split--card .oad-split__aside {
		display: block;
		order: 1;
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) var(--wp--preset--spacing--40);
	}

	.oad-info-card .oad-split__intro {
		order: 0;
		gap: var(--wp--preset--spacing--8);
	}

	.oad-info-card .oad-split__foot {
		order: 0;
	}

	.oad-info-card .oad-pf-avatar {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
	}

	.oad-guide-by {
		gap: var(--wp--preset--spacing--16);
		padding: var(--wp--preset--spacing--8) 0;
	}

	.oad-guide-by__avatar {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
	}

	.oad-split--card .oad-split__list {
		order: 2;
	}
}

/* ------------------------------------------------------------------ */
/* Event card · poster 1 of 4 · body 3 of 4                             */
/* ------------------------------------------------------------------ */

.oad-gcard {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

/* Category tab · hangs off the card's left edge, bottom-aligned. No
   palette colour -- Rule 04's scope is the header's pill row, a category
   tab and a tag chip, but this Ground tab reads as chrome, not as the
   "category colour follows content" surface those are built for. */
.oad-gcard__tab {
	position: absolute;
	right: 100%;
	bottom: -2px;
	width: 32px;
	padding: 8px 0;
	border: 2px solid var(--wp--preset--color--ink);
	border-left: 0;
	background: var(--wp--preset--color--ground);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.oad-gcard__poster {
	grid-column: 1;
	aspect-ratio: 4 / 5;
	border-right: 2px solid var(--wp--preset--color--ink);
	position: relative;
	overflow: hidden;
	display: block;
	background: var(--wp--preset--color--ground);
}

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

.oad-gcard__poster :is(.geodir-post-slider, .geodir-image-container, .geodir-images, .carousel-item, .ratio, .oad-pu-frame) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
}

.oad-gcard__poster .ratio::before {
	display: none;
}

.oad-gcard__poster-placeholder {
	position: absolute;
	inset: 0;
	display: block;
	background: repeating-linear-gradient(45deg, rgba(107, 107, 107, 0.20) 0 6px, rgba(107, 107, 107, 0.08) 6px 12px);
}

.oad-gcard__body {
	grid-column: 2 / span 3;
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--32);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.oad-gcard__top {
	display: flex;
	flex-direction: column;
}

.oad-gcard__when {
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

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

/* Two when-line strings, one shown at a time: the full date+time
   (desktop) and the mobile one (start date only, no year -- see
   outanddown_event_when()'s meter_mobile). Default/desktop shows the
   full string; the mobile breakpoint below flips them. */
.oad-gcard__when-mobile {
	display: none;
}

.oad-gcard__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--16);
}

/*
 * Two classes deep on purpose: GeoDirectory wraps its own widget loops in a
 * .bsui scope (ayecode-ui-compatibility.css), which sets `.bsui h3` to
 * font-family: inherit; font-weight: 500 at specificity 0,0,1,1. A bare
 * `.oad-gcard__title` rule (0,0,1,0) loses that fight wherever this card
 * renders inside a GD widget (e.g. the home page's ?view=list), so it must
 * out-specify .bsui h3 rather than just declare the font.
 */
.oad-gcard .oad-gcard__title {
	flex: 1;
	min-width: 200px;
	margin: 0;
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	/* Deviation from the blueprint's literal clamp(22px, 2.4cqi, 40px): that
	   value barely moves off its own floor on this page's real column width
	   (measured ~22px at common laptop widths, indistinguishable from the
	   old fixed 20px) because the blueprint's own demo box was narrower.
	   Recalibrated against .oad-split__list's real width so mid-range
	   laptops land in the 26-34px range and the blueprint's 40px ceiling is
	   still reachable at wide monitors -- verified with the render harness. */
	font-size: clamp(24px, 3.4cqi, 40px);
	line-height: 0.95;
}

.oad-gcard__title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Mobile-only twin of the title above -- see .oad-gcard__title-strip in the
   mobile block below. Hidden here so desktop's markup addition has no
   effect on desktop's own layout or rendering. */
.oad-gcard__title-strip {
	display: none;
}

.oad-gcard__buy {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--8);
}

.oad-gcard__ticket {
	display: flex;
	gap: var(--wp--preset--spacing--8);
	text-decoration: none;
}

.oad-gcard__price {
	height: 44px;
	min-width: 88px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--wp--preset--color--ink);
	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: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-gcard__price.is-muted {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--muted);
}

/* Sold-out chip (Phase 13.4) -- same footprint as .oad-gcard__price so the
   buy cell doesn't jump between the two states; outanddown_price_badge()
   supplies .oad-chip--compact with no sizing of its own. */
.oad-gcard__buy .oad-chip--compact {
	height: 44px;
	min-width: 88px;
	padding: 0 24px;
	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: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oad-gcard__go {
	width: 44px;
	height: 44px;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-gcard__go svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Status chip -- "In a guide" (links to the guide) or "Featured" (no
   link); never names the external ticket platform. Matches the
   blueprint's own .gd-src exactly: sized to its own text (not stretched
   to the row above), 2px border on three sides with a heavier 4px
   accent on the left, Meta-tier 11px text. The two px values below are
   this component's own literal interior spacing, not a general spacing
   choice -- logged exceptions to Rule 05/border-width, same as the
   blueprint's. */
.oad-gcard__src {
	display: inline-block;
	/* stylelint-disable-next-line oad/spacing-ladder -- component interior, matches the blueprint's own .gd-src literally */
	padding: 4px 10px;
	border: 2px solid var(--wp--preset--color--ink);
	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- the blueprint's own .gd-src left accent */
	border-left: 4px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

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

/* Yellow rule (outanddown-yellow-rule): Action only ever on hover, never
   a resting fill -- the pill hovers Action, the arrow hovers Ink. */
.oad-gcard__ticket:hover .oad-gcard__price {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

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

.oad-gcard__by {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	min-width: 0;
	margin-top: var(--wp--preset--spacing--24);
}

.oad-gcard__by a,
.oad-gcard__by span:last-child {
	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: 2px;
	text-underline-offset: 4px;
}

/* The organiser name is a link: a 44px target, the underline stays on the text. */
.oad-gcard__by a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
}


/* Ended · the poster is never dimmed, only the text mutes */
.oad-gcard.is-ended .oad-gcard__when,
.oad-gcard.is-ended .oad-gcard__title a {
	color: var(--wp--preset--color--muted);
}


@media (max-width: 1023px) {
	.wp-block-group.oad-split,
	div.oad-split.oad-tram {
		display: flex;
		flex-direction: column;
		/* The base rule's align-items: start would size each child to its
		   content, so a wide table pushed the list past the viewport. */
		align-items: stretch;
	}

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

	.oad-split__aside {
		display: contents;
	}

	.oad-split__intro {
		order: 1;
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) var(--oad-section-gap);
		gap: var(--wp--preset--spacing--16);
	}

	.oad-split__list {
		order: 2;
	}

	.oad-split__foot {
		order: 3;
	}

	/* The category tab now hangs off the card's top edge, not its left
	   (see .oad-gcard__tab below) -- swap the clearance from left to top
	   so it has room to poke up without clipping the list's own edge.
	   The gap between cards also grows a step, from 24 to 40: the tab
	   (28px tall with its border) sits inside that gap flush to its own
	   card, so the base 24px gap left no space between it and the card
	   above -- the extra 16px is headroom for the tab, not a general
	   card-to-card spacing change. */
	.oad-split__list {
		gap: var(--wp--preset--spacing--40);
		padding-top: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--24);
	}


/* Mobile only: poster and details split the card in half, the poster's
   right border sitting exactly on that gridline (2-col tram, same
   convention as the site's other bars -- see outanddown-blueprint-6col-tram).
   Desktop's 1-of-4 poster and side-by-side title/buy row are untouched. */
.oad-gcard {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Poster stays a fixed 4:5 box on mobile too, same as everywhere else
	   on the site -- the base rule's aspect-ratio: 4/5 is left alone here,
	   so this block no longer sizes the poster at all. When the details
	   column runs taller than 4:5 (a wrapped title), the poster stops
	   short of the card's own bottom border rather than stretching out of
	   ratio to meet it; the blurred-fill trick that used to paper over
	   that gap is gone with it, since a poster that never stretches has
	   nothing left for it to fill. */

	/* Tab moves from the left/bottom to the top/left -- above the card,
	   flush to its left edge, instead of hanging off its side. Swap the
	   anchored axis (bottom:100%/left instead of right:100%/bottom), drop
	   the vertical writing-mode since the tab now reads left-to-right
	   along the card's top edge, and re-add the left border the base rule
	   zeroes out (that zero was for the side-hanging desktop tab, whose
	   left edge is the outer/open end -- this tab is a plain box, all
	   four sides bordered). */
	.oad-gcard__tab {
		left: -2px;
		right: auto;
		bottom: 100%;
		top: auto;
		width: auto;
		height: 24px;
		padding: 0 8px;
		border: 2px solid var(--wp--preset--color--ink);
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 11px;
	}

	/* Fixed-shape body: .oad-gcard__body mirrors the poster's own 4:5
	   ratio (same column width), so its height is always identical to the
	   poster's -- never computed from content, never taller for a long
	   venue or organiser name. .oad-gcard__top flattens into .body's own
	   grid (its children -- the when-line and .head -- become direct grid
	   items), so venue/organiser can be reordered against .head with
	   nothing more than grid-row: the empty 1fr row absorbs whatever
	   space when-line + organiser don't use and pins .head (price/arrow)
	   to the bottom, the same job position: absolute used to do, without
	   the overlap risk -- margin: auto is off the table (lint-banned), and
	   a plain flex space-between can't give one gap all the slack while
	   the other stays tight, which is why this is grid, not flex. */
	.oad-gcard__top {
		display: contents;
	}

	.oad-gcard__body {
		grid-column: 2;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto;
		padding: var(--wp--preset--spacing--16);
	}

	.oad-gcard__when {
		grid-row: 1;
		font-size: 11px;
		padding-bottom: 8px;
		margin-bottom: 8px;
	}

	.oad-gcard__by {
		grid-row: 2;
		align-items: flex-start;
		margin-top: var(--wp--preset--spacing--16);
	}

	.oad-gcard__head {
		grid-row: 4;
	}

	.oad-organiser__avatar {
		width: 32px;
		height: 32px;
		font-size: 11px;
	}

	/* Venue and organiser name are both capped at 2 lines -- the fixed
	   budget that lets the body box stay locked to the poster's height
	   (see the .oad-gcard__body comment above) instead of overflowing it. */
	.oad-gcard__by a,
	.oad-gcard__by span:last-child {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
	}

	.oad-gcard__when-full {
		display: none;
	}

	.oad-gcard__when-mobile {
		display: inline;
	}

	/* Date and time render as two separate lines rather than one string
	   joined by " · " -- a joined string left a stray bullet stranded at
	   the end of the date whenever it wrapped ahead of the time. */
	.oad-gcard__when-mobile-date,
	.oad-gcard__when-mobile-time {
		display: block;
	}

	/* Venue drops onto its own line; the desktop "date · venue" dot is
	   hidden rather than removed, so no PHP branch is mobile-only. */
	.oad-gcard__when-sep {
		display: none;
	}

	.oad-gcard__venue {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: 8px;
	}

	/* Same specificity as the "two classes deep on purpose" desktop rule
	   above (.oad-gcard .oad-gcard__title) -- a bare .oad-gcard__title
	   selector here would lose the specificity fight and never apply,
	   same trap that rule's own comment warns about. Title moved out of
	   the body entirely on mobile, into .oad-gcard__title-strip below. */
	.oad-gcard .oad-gcard__title {
		display: none;
	}

	/* The strip: a full-width row below both the poster and the body,
	   spanning the 2-col grid -- styled exactly like
	   outanddown_poster_card()'s own .oad-poster-card__strip (poster.css),
	   just with a top border instead of all four sides since this one
	   already sits inside the card's own outer border. */
	.oad-gcard__title-strip {
		display: block;
		grid-column: 1 / -1;
		padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
		border-top: 2px solid var(--wp--preset--color--ink);
		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: 11px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.oad-gcard.is-ended .oad-gcard__title-strip {
		background: var(--wp--preset--color--muted);
	}

	.oad-gcard__price,
	.oad-gcard__buy .oad-chip--compact {
		height: 32px;
		min-width: 0;
		padding: 0 8px;
		font-size: 13px;
	}

	.oad-gcard__ticket {
		gap: 8px;
	}

	.oad-gcard__go {
		width: 32px;
		height: 32px;
	}

	.oad-gcard__go svg {
		width: 16px;
		height: 16px;
	}

	/* The blueprint hides this chip on mobile outright (.gd-src { display:
	   none }) -- there's no room for it anyway: .oad-gcard__body is locked
	   to the poster's own 4:5 height and overflow: hidden, with .oad-gcard__head
	   pinned to one fixed grid row, so a second stacked element here just
	   gets clipped off the bottom of the card instead of showing. */
	.oad-gcard__src {
		display: none;
	}

}