/**
 * Events.
 *
 * Listing cards are a coloured date band with geometric flourishes over a
 * white body (pills, title, time, Register). The detail view keeps the theme's
 * plain card language: hairline borders, Poppins titles and eyebrow labels.
 */

.tma-events {
	container-type: inline-size;
}

/* ---------- Listing ---------- */

.tma-event-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: var( --wp--preset--spacing--xl );
	list-style: none;
	margin: 0;
	padding: 0;
}

.tma-event-cards > li {
	display: flex;
	margin: 0;
}

/* Colours arrive per card as --tma-ev-* custom properties from render.php
   (tint, soft, main, accent), so every rule below is palette-agnostic. */
.tma-event-card {
	--tma-ev-tint: var( --wp--preset--color--blue-100 );
	--tma-ev-soft: var( --wp--preset--color--blue-200 );
	--tma-ev-main: var( --wp--preset--color--blue-500 );
	--tma-ev-accent: var( --wp--preset--color--yellow-500 );
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
	color: var( --wp--preset--color--neutral-900 );
	border: 1px solid var( --wp--preset--color--neutral-200 );
	border-radius: 18px;
	overflow: hidden;
	background: var( --wp--preset--color--neutral-000 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tma-event-card:hover,
.tma-event-card:focus-visible {
	text-decoration: none;
	transform: translateY( -3px );
	box-shadow: 0 14px 30px -18px rgba( 8, 18, 25, 0.45 );
}

/* ---- Date band ---- */

.tma-event-card-band {
	position: relative;
	display: block;
	min-height: 142px;
	padding: 22px 24px;
	overflow: hidden;
	background: var( --tma-ev-tint );
}

.tma-event-card-date {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-card-month {
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tma-event-card-day {
	font-family: var( --wp--preset--font-family--poppins );
	font-size: 3.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	margin: 4px 0 6px;
}

.tma-event-card-weekday {
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 500;
}

/* ---- Flourishes ----
   Three spans per card: [1] the big shape in the main hue, [2] a solid accent
   dot, [3] a ring or soft disc. Four arrangements, chosen per event. They all
   stay in the right half of the band so the date never sits on a shape. */

.tma-event-card-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tma-event-card-art > span {
	position: absolute;
	border-radius: 50%;
	transition: transform 0.35s ease;
}

.tma-event-card-art > span:nth-child( 1 ) {
	background: var( --tma-ev-main );
}

.tma-event-card-art > span:nth-child( 2 ) {
	background: var( --tma-ev-accent );
}

/* 1 -- big disc dropping off the bottom-right, a small dot on its edge. */
.tma-event-card-art--1 > span:nth-child( 1 ) {
	width: 190px;
	height: 190px;
	right: -40px;
	top: -24px;
}

.tma-event-card-art--1 > span:nth-child( 2 ) {
	width: 26px;
	height: 26px;
	right: 124px;
	bottom: 22px;
}

.tma-event-card-art--1 > span:nth-child( 3 ) {
	display: none;
}

/* 2 -- half disc on the right edge, a pale disc inside it, an accent planet. */
.tma-event-card-art--2 > span:nth-child( 1 ) {
	width: 250px;
	height: 250px;
	right: -110px;
	top: -40px;
}

.tma-event-card-art--2 > span:nth-child( 2 ) {
	width: 50px;
	height: 50px;
	right: 96px;
	top: 18px;
}

.tma-event-card-art--2 > span:nth-child( 3 ) {
	width: 96px;
	height: 96px;
	right: -6px;
	top: 26px;
	background: var( --tma-ev-soft );
}

/* 3 -- a fat ring hanging from the top, a disc rising from the bottom. */
.tma-event-card-art--3 > span:nth-child( 1 ) {
	width: 210px;
	height: 210px;
	right: -24px;
	bottom: -120px;
}

.tma-event-card-art--3 > span:nth-child( 2 ) {
	display: none;
}

.tma-event-card-art--3 > span:nth-child( 3 ) {
	width: 80px;
	height: 80px;
	right: 96px;
	top: -26px;
	border: 16px solid var( --tma-ev-accent );
}

/* 4 -- corner arc, a thin ring and a pin-prick dot. */
.tma-event-card-art--4 > span:nth-child( 1 ) {
	width: 200px;
	height: 200px;
	right: -70px;
	top: -90px;
}

.tma-event-card-art--4 > span:nth-child( 2 ) {
	width: 16px;
	height: 16px;
	right: 34px;
	bottom: 26px;
}

.tma-event-card-art--4 > span:nth-child( 3 ) {
	width: 52px;
	height: 52px;
	right: 120px;
	bottom: 18px;
	border: 8px solid var( --tma-ev-accent );
}

.tma-event-card:hover .tma-event-card-art > span:nth-child( 1 ),
.tma-event-card:focus-visible .tma-event-card-art > span:nth-child( 1 ) {
	transform: scale( 1.06 );
}

.tma-event-card:hover .tma-event-card-art > span:nth-child( n + 2 ),
.tma-event-card:focus-visible .tma-event-card-art > span:nth-child( n + 2 ) {
	transform: translate( -6px, 4px );
}

@media ( prefers-reduced-motion: reduce ) {
	.tma-event-card,
	.tma-event-card-art > span {
		transition: none;
	}

	.tma-event-card:hover,
	.tma-event-card:focus-visible,
	.tma-event-card:hover .tma-event-card-art > span,
	.tma-event-card:focus-visible .tma-event-card-art > span {
		transform: none;
	}
}

/* ---- Body ---- */

.tma-event-card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 22px;
	flex: 1 1 auto;
}

.tma-event-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tma-event-pill {
	display: inline-block;
	padding: 3px 12px;
	border: 1.5px solid var( --wp--preset--color--neutral-900 );
	border-radius: var( --wp--custom--radius--pill );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
	line-height: 1.4;
	color: var( --wp--preset--color--neutral-900 );
}

/* The type pill takes the card's hue; the format pill stays ink. */
.tma-event-type {
	border-color: var( --tma-ev-main );
}

.tma-event-card-name {
	font-family: var( --wp--preset--font-family--poppins );
	font-size: var( --wp--preset--font-size--heading-4 );
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-card-time {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--neutral-700 );
	font-variant-numeric: tabular-nums;
}

.tma-event-card-time svg {
	flex: none;
}

/* Pushed to the bottom so a row of cards lines up on the call to action. */
.tma-event-card-cta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var( --wp--preset--color--neutral-200 );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-card-cta svg {
	transition: transform 0.2s ease;
}

.tma-event-card:hover .tma-event-card-cta svg,
.tma-event-card:focus-visible .tma-event-card-cta svg {
	transform: translateX( 3px );
}

.tma-events-empty {
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--neutral-700 );
}

.tma-events-notice {
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--orange-700 );
	border-left: 3px solid var( --wp--preset--color--orange-500 );
	padding-left: 14px;
}

/* ---------- Detail ---------- */

/* The detail view is rendered full width in place of the page's own content
   (inc/events.php), and carries the event's palette as --tma-ev-* like the
   card does, so the hero's flourishes match the card that led here. */
.tma-events--detail {
	margin-block: 0;
	text-align: left;
	color: var( --wp--preset--color--neutral-800 );
	--tma-ev-page: calc( var( --wp--custom--container ) + 2 * var( --wp--preset--spacing--l ) );
}

/* ---- Hero ---- */

.tma-event-hero {
	position: relative;
	overflow: hidden;
	background: var( --wp--preset--color--neutral-900 );
	color: var( --wp--preset--color--neutral-000 );
	border-bottom: 3px solid var( --tma-ev-main );
}

.tma-event-hero-inner {
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr );
	gap: var( --wp--preset--spacing--xl );
	align-items: center;
	max-width: var( --tma-ev-page );
	margin: 0 auto;
	padding: clamp( 28px, 4vw, 44px ) var( --wp--preset--spacing--l ) clamp( 48px, 7vw, 80px );
}

.tma-event-hero-text {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.tma-event-back {
	margin: 0 0 var( --wp--preset--spacing--m );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 600;
}

.tma-event-back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --wp--preset--color--neutral-000 );
	text-decoration: none;
}

.tma-event-back a:hover {
	text-decoration: underline;
}

.tma-event-hero .tma-event-pills {
	margin: 0 0 14px;
}

.tma-event-hero .tma-event-pill {
	color: var( --wp--preset--color--neutral-000 );
	border-color: var( --wp--preset--color--neutral-000 );
}

.tma-event-hero .tma-event-type {
	border-color: var( --tma-ev-main );
}

.tma-event-hero .tma-event-name {
	margin: 0 0 var( --wp--preset--spacing--m );
	font-size: var( --wp--preset--font-size--heading-1 );
	font-weight: 700;
	color: var( --wp--preset--color--neutral-000 );
}

.tma-event-summary {
	max-width: 56ch;
	margin: calc( -1 * var( --wp--preset--spacing--xs ) ) 0 var( --wp--preset--spacing--m );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.55;
	color: var( --wp--preset--color--neutral-100 );
}

/* Date tile: month and day on the left, the full date and facts beside. */
.tma-event-when {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 12px 20px 12px 14px;
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 14px;
	background: rgba( 255, 255, 255, 0.05 );
}

.tma-event-when-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-right: 16px;
	border-right: 1px solid rgba( 255, 255, 255, 0.14 );
}

.tma-event-when-month {
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tma-event-when-day {
	font-family: var( --wp--preset--font-family--poppins );
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tma-event-when-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tma-event-when-date {
	font-family: var( --wp--preset--font-family--poppins );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
}

.tma-event-when-meta {
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--neutral-200 );
}

.tma-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var( --wp--preset--spacing--s );
}

.tma-event-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var( --wp--custom--radius--button );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tma-event-button:hover,
.tma-event-button:focus-visible {
	text-decoration: none;
}

.tma-event-button--primary {
	background: var( --wp--preset--color--lime-500 );
	color: var( --wp--preset--color--neutral-950 );
}

.tma-event-button--primary:hover,
.tma-event-button--primary:focus-visible {
	background: color-mix( in srgb, var( --wp--preset--color--lime-500 ) 78%, white );
	color: var( --wp--preset--color--neutral-950 );
}

.tma-event-button--ghost {
	background: rgba( 255, 255, 255, 0.05 );
	border-color: rgba( 255, 255, 255, 0.2 );
	color: var( --wp--preset--color--neutral-000 );
}

.tma-event-button--ghost:hover,
.tma-event-button--ghost:focus-visible {
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --wp--preset--color--neutral-000 );
}

/* Image over three flourishes in the event's palette: a big disc bleeding off
   the top right, an accent dot, and a ring rising from behind the image. */
.tma-event-hero-media {
	position: relative;
	min-width: 0;
}

.tma-event-hero-art > span {
	position: absolute;
	border-radius: 50%;
}

.tma-event-hero-art > span:nth-child( 1 ) {
	width: 340px;
	height: 340px;
	right: -150px;
	top: -110px;
	background: var( --tma-ev-main );
}

.tma-event-hero-art > span:nth-child( 2 ) {
	width: 24px;
	height: 24px;
	left: -40px;
	top: 14%;
	background: var( --tma-ev-accent );
}

.tma-event-hero-art > span:nth-child( 3 ) {
	width: 150px;
	height: 150px;
	left: -54px;
	bottom: -70px;
	border: 32px solid var( --tma-ev-main );
	filter: brightness( 1.15 );
}

.tma-event-image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var( --wp--custom--radius--card );
	box-shadow: var( --wp--preset--shadow--flyout );
}

/* No image: the flourishes alone, given room to sit. */
.tma-event-hero-media--bare {
	min-height: 280px;
}

@container ( max-width: 820px ) {
	.tma-event-hero-inner {
		grid-template-columns: minmax( 0, 1fr );
	}

	.tma-event-hero-media {
		max-width: 520px;
	}

	.tma-event-hero-media--bare {
		display: none;
	}

	.tma-event-hero-art > span:nth-child( 1 ) {
		width: 220px;
		height: 220px;
		right: -90px;
		top: -60px;
	}
}

/* ---- Body ---- */

.tma-event-detail {
	display: grid;
	/* 420 rather than 340: the registration panel holds a third-party form in
	   an iframe, and at 340 the Contrast form wrapped its buttons and ran
	   tall. The description column keeps ~670px, which is still a comfortable
	   measure. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 420px );
	gap: var( --wp--preset--spacing--xxl );
	align-items: start;
	max-width: var( --tma-ev-page );
	margin: 0 auto;
	padding: var( --wp--preset--spacing--xxl ) var( --wp--preset--spacing--l ) var( --wp--preset--spacing--xxxl );
}

@container ( max-width: 900px ) {
	.tma-event-detail {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* A grid item defaults to min-width:auto, so a long unbroken string -- a URL
   in the description, say -- would widen the track and push the sidebar off
   screen instead of wrapping. */
.tma-event-primary {
	min-width: 0;
}

.tma-event-primary img,
.tma-event-description img {
	max-width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius--image );
}

/* An h2 for the outline, set as an eyebrow -- so the heading styles are
   overridden explicitly rather than trusted to the eyebrow class. */
.tma-event-label {
	margin: 0 0 12px;
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-description {
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.65;
	color: var( --wp--preset--color--neutral-800 );
	max-width: 66ch;
}

.tma-event-description > :first-child {
	margin-top: 0;
}

.tma-event-description :where( ul, ol ) {
	padding-left: 1.25em;
}

.tma-event-description li + li {
	margin-top: 0.35em;
}

/* "You'll walk away with": a tinted panel in the event's palette with
   numbered discs. Ink on the 500 discs, not white -- white fails on yellow and
   lime 500, and ink passes on all six. */
.tma-event-takeaways {
	margin-top: var( --wp--preset--spacing--xl );
	padding: 26px 28px;
	border-radius: var( --wp--custom--radius--card );
	background: var( --tma-ev-tint );
}

.tma-event-takeaways-title {
	margin: 0 0 18px;
	font-size: var( --wp--preset--font-size--heading-4 );
	font-weight: 700;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-takeaways ol {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tma-takeaway;
}

.tma-event-takeaways li {
	display: grid;
	grid-template-columns: 26px minmax( 0, 1fr );
	gap: 12px;
	align-items: start;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
	color: var( --wp--preset--color--neutral-800 );
	counter-increment: tma-takeaway;
}

.tma-event-takeaways li::before {
	content: counter( tma-takeaway );
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var( --tma-ev-main );
	color: var( --wp--preset--color--neutral-950 );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	line-height: 1;
}

.tma-event-speaker-section {
	margin-top: var( --wp--preset--spacing--xl );
}

.tma-event-speaker {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 22px;
	border: 1px solid var( --wp--preset--color--neutral-200 );
	border-radius: var( --wp--custom--radius--card );
}

.tma-event-speaker-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	background: var( --tma-ev-tint );
	color: var( --wp--preset--color--neutral-900 );
	font-family: var( --wp--preset--font-family--poppins );
	font-size: 1.5rem;
	font-weight: 700;
}

.tma-event-speaker-text {
	min-width: 0;
}

.tma-event-speaker-name {
	margin: 0;
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-speaker-title {
	margin: 2px 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--neutral-700 );
}

.tma-event-speaker-bio {
	margin: 8px 0 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	color: var( --wp--preset--color--neutral-800 );
}

.tma-event-secondary {
	position: sticky;
	top: calc( var( --wp--custom--nav--header-height, 58px ) + 20px );
	scroll-margin-top: calc( var( --wp--custom--nav--header-height, 58px ) + 20px );
}

@container ( max-width: 900px ) {
	.tma-event-secondary {
		position: static;
	}
}

.tma-event-panel {
	--tma-event-panel-pad: 20px;

	padding: var( --tma-event-panel-pad );
	border: 1px solid var( --wp--preset--color--neutral-200 );
	border-radius: var( --wp--custom--radius--card );
	background: var( --wp--preset--color--neutral-000 );
	box-shadow: 0 16px 36px -24px rgba( 8, 18, 25, 0.35 );
}

.tma-event-panel-title {
	margin: 0;
	font-size: var( --wp--preset--font-size--heading-4 );
	font-weight: 700;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-panel-lede {
	margin: 4px 0 0;
	font-size: var( --wp--preset--font-size--caption );
	color: var( --wp--preset--color--neutral-700 );
}

/* A definition list rather than the old emoji-prefixed paragraphs: the labels
   are real labels, so assistive tech reads "Date: …" instead of "calendar
   emoji". */
.tma-event-meta {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 10px 18px;
	margin: 20px 0;
	align-items: baseline;
}

.tma-event-meta dt {
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-meta dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--neutral-800 );
}

.tma-event-meta:last-child {
	margin-bottom: 0;
}

/* HubSpot form. The look -- the --hsf-* variables the renderer themes itself
   from -- is shared with the hubspot-form block and lives in style.css section
   16, reached through the `tma-hsform` class on the wrapper. Only what is
   specific to this narrow panel is left here.

   Reserved height, so the form arriving does not shove the privacy note and
   everything under it down the page. Tuned to the current registration form;
   it only has to be close, since the panel has nothing below it but the note. */
.tma-event-form .hs-form-html {
	min-height: var( --tma-event-form-min, 420px );
}

/* The panel is narrow enough that a button sized to its text looks stranded. */
.tma-event-form .hsfc-NavigationRow__Buttons {
	justify-content: stretch;
}

.tma-event-form .hsfc-Button {
	width: 100%;
	font-weight: 600;
}

.tma-event-privacy {
	margin: 16px 0 0;
	font-size: var( --wp--preset--font-size--caption );
	line-height: 1.5;
	color: var( --wp--preset--color--neutral-700 );
}

.tma-event-privacy strong {
	display: block;
	color: var( --wp--preset--color--neutral-900 );
}

.tma-event-embed iframe {
	width: 100%;
	border: 0;
	border-radius: var( --wp--custom--radius--image );
	aspect-ratio: 16 / 9;
}

/* A registration form, not a video: it needs height, not a 16:9 box that
   would be ~200px tall in the sidebar.

   The embed is a third party's page inside an iframe, so its real height
   cannot be measured from here and this is a fixed guess. Too short clips the
   submit button, which is unforgivable; too tall leaves dead space, which is
   merely untidy -- so it errs generous. Tune it in one place with
   `--tma-event-form-height` if Contrast change their layout. */
.tma-event-embed .tma-event-contrast {
	aspect-ratio: auto;
	height: var( --tma-event-form-height, 560px );
	/* Full-bleed to the panel edges, so the only inset is the form's own. */
	border-radius: 0;
}

/* The Contrast form already pads its own content. Nesting it inside the
   panel's padding doubled the inset and squeezed an already narrow form, so
   the embed is pulled back out to the panel's inner edge. */
.tma-event-panel .tma-event-embed {
	margin-inline: calc( -1 * var( --tma-event-panel-pad ) );
	/* Running edge to edge removes the side inset that was separating it from
	   the detail list above, so that gap is restored deliberately. */
	margin-top: var( --wp--preset--spacing--m );
}

/* Stacked under 900px the panel is full width, so the form has room and stays
   short. On a phone it wraps again and needs the height back. */
@container ( max-width: 520px ) {
	.tma-event-embed .tma-event-contrast {
		height: var( --tma-event-form-height-narrow, 680px );
	}
}

/* Another page's content below the event (render.php). Its blocks bring their
   own spacing and grounds, so this only separates it from the event above
   and leaves a page's full-width bands free to run edge to edge. */
.tma-event-related {
	padding-bottom: var( --wp--preset--spacing--xxxl );
}

.tma-event-related > :first-child {
	margin-top: 0;
}

.tma-event-related > .alignfull:last-child {
	margin-bottom: calc( -1 * var( --wp--preset--spacing--xxxl ) );
}