/**
 * E1 Events: "Next up" + "Upcoming" (Figma Review Events 210:5614; baseline cards 210:5719 ...
 * 210:5783, Next up 210:5690 ... 210:5833, SEE MORE 255:8495).
 *
 * Markup: inc/events.php (`[lts_events view="next|list"]`, wrapped by the lts/events-next-up and
 * lts/events-upcoming patterns). Behaviour (SEE MORE): assets/js/lts-paged.js + inc/paged.php; details dialog: assets/js/lts-events.js.
 *
 * Drawn (1440): section title 48/50 Deep, centred. Next up: one card 844 x 498 (r22, shadow),
 * text column 64 from the left, photo 382 wide on the right (r10 bottom-left), 47 below the title.
 * Upcoming: chips 28 below the title, cards 352 x 358 in three columns (gap 40 across, 34 down,
 * a 1136 grid), SEE MORE 76 below the last row. Card: Clear, r22 (square top-left), card shadow;
 * a Horizon format tab (45 tall, pill on the right, label Medium 14 caps +1px) on top; title
 * Medium 28/28; meta 12/18 caps +1px; copy 18/24; "Led by" 18 with the name Medium + underline;
 * MORE DETAILS 14 caps + arrow, 36 above the card edge. Next up uses the same parts at 40/35
 * (title) and 14 (meta), and a Horizon topic pill (232 x 37, r39, 12 caps +0.13em) bottom left.
 *
 * Small text is Tide Dark (the J10 small-text rule); the topic pill and the tab are Horizon + Tide
 * Dark / Deep. Derived (no tablet / mobile frames): four columns from 1760 (the wide page column),
 * three from 1280, two to 782, one at <= 781; Next up stacks (photo on top) below 1024.
 *
 * Link colour: the parent paints `.entry-content a` and `.kd-card a` with `var(--kd-color-link)`
 * (0,3,1), so the card sets that token (and the hovered link re-points it) instead of racing
 * the rule on specificity.
 */

/* -- Section titles + spacing --------------------------------------------------- */

.lts-events-next,
.lts-events-upcoming {
	--lts-ev-title-gap: 2.9375rem; /* 47: title -> Next up card */
}
.lts-events-upcoming {
	--lts-ev-title-gap: 1.75rem; /* 28: title -> chips */
}

.lts-events__title.wp-block-heading {
	margin: 0 0 var(--lts-ev-title-gap);
	color: var(--wp--preset--color--contrast);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 50 / 48 */
	text-align: center;
	text-wrap: balance;
}

/* The page owl (.entry-content > * + *) must not stack on top of the section's own rhythm. */
.entry-content > .lts-events-next,
.entry-content > .lts-events-upcoming {
	margin-block-start: 7.25rem; /* 116: card -> next title */
}

/* Chips inside the section: the pattern group's own bottom padding (55) carries the gap to the cards. */
.lts-events-upcoming .lts-term-chips-section {
	padding-block: 0 3.4375rem;
}
.lts-events-upcoming > * + .lts-term-chips-section,
.lts-events-upcoming .lts-term-chips-section + * {
	margin-block-start: 0;
}

.lts-events-empty {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--body-ink);
}

/* -- Card (both variants) -------------------------------------------------------- */

.lts-event-card {
	/* A Clear face: small text stays Tide Dark even inside a dark band. */
	--lts-accent-text: var(--wp--custom--color--small-text);
	--lts-ev-pad: 2rem; /* 32 */
	--kd-color-link: var(--lts-accent-text); /* the card's links: Tide Dark */
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 22.375rem; /* 358 */
	margin: 0;
	padding: 0 var(--lts-ev-pad) 2.25rem; /* 36 */
	border-radius: 0 var(--wp--custom--radius--card)
		var(--wp--custom--radius--card) var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: clip;
	color: var(--wp--preset--color--body-ink);
}

/* Cards the chips filter out, or SEE MORE has not reached yet. [hidden] must beat `display:flex`
   (lts-term-chips.css states the same for `.lts-events-list [hidden]`); the fold is a class so the
   chip script's `hidden` and this paging never undo each other, and it only exists with JS. */
.lts-event-card[hidden],
html.lts-js .lts-event-card.is-paged-out {
	display: none;
}

/* Format tab: Horizon, a pill on the right, flush with the card's top-left. */
.lts-event-card .lts-event-card__tab {
	display: flex;
	align-items: center;
	align-self: flex-start;
	box-sizing: border-box;
	min-height: 2.8125rem; /* 45 */
	margin: 0 0 0 calc(-1 * var(--lts-ev-pad));
	padding: 0 2.125rem 0 var(--lts-ev-pad);
	border-radius: 0 3.125rem 3.125rem 0;
	/* Colour = the format's (Event Type picker, set inline by inc/events.php); Horizon when the type has none. */
	background: var(--lts-pillar-bg, var(--wp--preset--color--tint));
	color: var(--lts-pillar-fg, var(--wp--custom--color--small-text));
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.4286; /* 20 / 14 */
	letter-spacing: 0.0714em; /* 1px at 14px */
	text-transform: uppercase;
}

/* Title: Medium 28/28 on a two-line slot, so the meta line sits at the same height across a row. */
.lts-event-card .lts-event-card__title {
	--lts-h3-size: var(--wp--preset--font-size--xx-large);
	display: flex;
	align-items: flex-end;
	min-height: 3.5rem; /* two lines */
	margin: 1.25rem 0 0; /* 20 below the tab */
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--lts-h3-size);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1;
	letter-spacing: 0;
}

/* Meta: Medium 12/18 caps, Tide Dark. */
.lts-event-card .lts-event-card__meta {
	margin: 0.625rem 0 0; /* 10 */
	color: var(--lts-accent-text);
	font-size: 0.75rem;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.5; /* 18 / 12 */
	letter-spacing: 0.0833em; /* 1px at 12px */
	text-transform: uppercase;
}

/* Copy: Regular 18/24 (the body size). */
.lts-event-card .lts-event-card__excerpt {
	margin: 0.8125rem 0 0; /* 13 */
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3043; /* 24 / 18.4 */
}

/* "Led by": the name is Medium + underline, Tide Dark. Bottom block: pushed down with the link. */
.lts-event-card .lts-event-card__host {
	margin: auto 0 0;
	padding-top: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25; /* 23 / 18.4 */
}
.lts-event-card .lts-event-card__host-name {
	color: var(--lts-accent-text);
	font-weight: var(--wp--custom--typography--weight-medium);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* MORE DETAILS: Medium 14/18 caps + arrow, Tide Dark. The one link in the card. */
:is(.lts-events-list, .lts-events-next) .lts-event-card a.lts-event-card__more {
	display: flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.375rem;
	margin-block: 1.625rem 0; /* 26 below "Led by" */
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.2857; /* 18 / 14 */
	letter-spacing: 0.0714em;
	text-transform: uppercase;
	text-decoration: none;
}
.lts-events-list
	.lts-event-card:not(:has(.lts-event-card__host))
	a.lts-event-card__more {
	margin-block-start: auto;
}
.lts-event-card .lts-event-card__more::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background-color: currentcolor;
	-webkit-mask: var(--lts-arrow-icon) center / contain no-repeat;
	mask: var(--lts-arrow-icon) center / contain no-repeat;
	transition: transform var(--kd-transition-fast);
}
:is(.lts-events-list, .lts-events-next)
	.lts-event-card
	a.lts-event-card__more:hover {
	--kd-color-link: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.lts-event-card .lts-event-card__more:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.lts-event-card .lts-event-card__more:hover::after {
		transform: none;
	}
}

/* -- Upcoming grid ---------------------------------------------------------------- */

.lts-events-list {
	max-width: 71rem; /* 1136 */
	margin-inline: auto;
}
.lts-events-list .lts-events-list__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.125rem 2.5rem; /* 34 down, 40 across */
	align-items: stretch;
}

/* SEE MORE: only with JS (the script reveals the rest of the list); 76 below the last row. */
.lts-events-list .lts-events-more {
	display: none;
	justify-content: center;
	margin-block-start: 4.75rem;
}
html.lts-js .lts-events-list .lts-events-more:not([hidden]) {
	display: flex;
}

/* -- Next up ---------------------------------------------------------------------- */

.lts-events-next .lts-event-card--next {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 23.875rem; /* 382 photo */
	max-width: 52.75rem; /* 844 */
	min-height: 31.125rem; /* 498 */
	margin-inline: auto;
	padding: 0;
	border-radius: var(--wp--custom--radius--card);
}
.lts-events-next .lts-event-card--next:not(:has(.lts-event-card__photo)) {
	grid-template-columns: minmax(0, 1fr);
}

.lts-event-card--next .lts-event-card__body {
	--lts-ev-pad: 4rem; /* 64 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 0 4.875rem 1.875rem 0; /* 30 below the pill; 78 right = the drawn 320 text column */
}
.lts-event-card--next
	.lts-event-card__body
	> :not(.lts-event-card__tab, .lts-event-card__topic) {
	margin-inline-start: var(--lts-ev-pad);
}

.lts-event-card--next .lts-event-card__tab {
	margin-inline-start: 0; /* the body has no side padding: the tab is already flush */
	padding-inline-end: 4rem;
}

/* Order drawn: tab, date line (14), title (40/35), host, copy, link, topic pill. */
.lts-event-card--next .lts-event-card__meta {
	margin-block-start: 4.125rem; /* 66 */
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.0714em;
	line-height: 1.2857; /* 18 / 14 */
}
.lts-event-card--next .lts-event-card__title {
	--lts-h3-size: var(--wp--preset--font-size--xxx-large);
	display: block;
	min-height: 0;
	margin-block-start: 0.8125rem; /* 13 */
	line-height: 0.875; /* 35 / 40 */
}
.lts-event-card--next .lts-event-card__host {
	margin-block: 0.4375rem 0; /* 7 */
	padding-top: 0;
}
.lts-event-card--next .lts-event-card__excerpt {
	margin-block-start: 2.125rem; /* 34 */
	line-height: 1.2778; /* 23 / 18 */
}
.lts-events-next .lts-event-card--next a.lts-event-card__more {
	margin-block-start: 1.25rem; /* 20 */
}
.lts-event-card--next .lts-event-card__topic {
	margin: 4.125rem 0 0 2.8125rem; /* 66 below the link, 45 from the edge */
	padding: 0.5rem 1.125rem;
	border-radius: 2.4375rem; /* 39 */
	/* Colour = the pillar's (Category picker, set inline by inc/events.php); Horizon when it has none. */
	background: var(--lts-pillar-bg, var(--wp--preset--color--tint));
	color: var(--lts-pillar-fg, var(--wp--preset--color--contrast));
	font-size: 0.75rem;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.3333; /* 16 / 12 */
	letter-spacing: 0.13em; /* 1.56px at 12px */
	text-transform: uppercase;
}

.lts-event-card--next .lts-event-card__photo {
	align-self: stretch;
	min-width: 0;
	margin: 0;
	border-bottom-left-radius: 0.625rem; /* 10 */
	overflow: clip;
}
.lts-event-card--next .lts-event-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -- Wide (derived, Brian's QA 10-15): four columns once the page column fits four cards at
   about the drawn 352 (1760: column ~1486, cards ~341). The list then spans the column, and
   SEE MORE pages by two full rows (8; lts-paged.js reads --lts-paged-per-page). -------- */

@media (min-width: 1760px) {
	.lts-events-list {
		--lts-paged-per-page: 8;
		max-width: none;
	}
	.lts-events-list .lts-events-list__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -- Below 1280 (derived): two columns; Next up stacks below 1024 ------------------- */

@media (max-width: 1279.98px) {
	.lts-events-list .lts-events-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 1023.98px) {
	.lts-events-next .lts-event-card--next {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.lts-event-card--next .lts-event-card__photo {
		grid-row: 1;
		aspect-ratio: 16 / 9;
		border-radius: 0;
	}
	.lts-event-card--next .lts-event-card__body {
		--lts-ev-pad: 2rem;
		grid-row: 2;
		padding-block-start: 0;
	}
	.lts-event-card--next .lts-event-card__tab {
		margin-block-start: 0;
		padding-inline-end: 2.125rem;
	}
	.lts-event-card--next .lts-event-card__meta {
		margin-block-start: 1.5rem;
	}
	.lts-event-card--next .lts-event-card__topic {
		margin-block-start: 2rem;
		margin-inline-start: 1.25rem;
	}
}

/* -- Mobile (<= 781): one column, a tighter card -------------------------------------- */

@media (max-width: 781.98px) {
	.lts-events-list .lts-events-list__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.lts-event-card {
		--lts-ev-pad: 1.5rem;
		min-height: 0;
	}
	.lts-event-card--next .lts-event-card__body {
		--lts-ev-pad: 1.5rem;
		padding-inline-end: 1.5rem;
	}
	.lts-events-list .lts-events-more {
		margin-block-start: 2.5rem;
	}
	.entry-content > .lts-events-next,
	.entry-content > .lts-events-upcoming {
		margin-block-start: 4rem;
	}
	.lts-events-next,
	.lts-events-upcoming {
		--lts-ev-title-gap: 2rem;
	}
	.lts-events-upcoming {
		--lts-ev-title-gap: 1.5rem;
	}
}

/* -- Event details dialog (MORE DETAILS) ----------------------------------------------------
   Design canvas "LTS Event Details" (Alain 2026-10-14): a centred pop-up from 782 up, a bottom sheet
   below (content scrolls inside, the call to action pinned at the bottom). Markup: inc/events.php
   (one <template> per card + one <dialog>), behaviour: assets/js/lts-events.js. */

.lts-dialog-open {
	overflow: hidden; /* The page behind stays put while the dialog scrolls. */
}

.lts-event-dialog {
	box-sizing: border-box;
	width: min(47.5rem, calc(100% - 3rem)); /* 760 */
	max-width: none;
	max-height: calc(100dvh - 4rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 1.5rem; /* 24 */
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1.875rem 5rem rgba(4, 46, 56, 0.35);
	overflow: hidden;
}

.lts-event-dialog[open] {
	display: flex;
	flex-direction: column;
}

.lts-event-dialog::backdrop {
	background: rgba(4, 46, 56, 0.58); /* Deep */
}

.lts-event-dialog__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: inherit;
}

.lts-event-dialog__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lts-event-dialog__handle {
	display: none;
}

.lts-event-dialog__close {
	position: absolute;
	z-index: 2;
	top: 1.125rem;
	right: 1.125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem; /* 48 */
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 0.25rem 0.875rem rgba(4, 46, 56, 0.2);
	cursor: pointer;
}

.lts-event-dialog__close:hover {
	background: var(--wp--preset--color--tint);
}

.lts-event-dialog__close:focus-visible,
.lts-event-dialog__cta:focus-visible,
.lts-event-dialog__soon a:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 3px;
}

.lts-event-dialog__photo {
	margin: 0;
}

.lts-event-dialog__photo img {
	display: block;
	width: 100%;
	height: 18.75rem; /* 300 */
	object-fit: cover;
}

.lts-event-dialog__body {
	display: flex;
	flex-direction: column;
	gap: 1.125rem; /* 18 */
	padding: 2rem 3rem 1.75rem; /* 32 48 28 */
}

.lts-event-dialog__photo + .lts-event-dialog__body {
	padding-top: 2rem;
}

.lts-event-dialog__scroll:not(.has-photo) .lts-event-dialog__body {
	padding-top: 5rem; /* No photo: clear the close button. */
}

.lts-event-dialog__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.lts-event-dialog__pill {
	padding: 0.5rem 1.125rem;
	border-radius: 3.125rem;
	background: var(--lts-pillar-bg, var(--wp--preset--color--tint));
	color: var(--lts-pillar-fg, var(--wp--preset--color--contrast));
	font-size: 0.875rem;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.3;
}

.lts-event-dialog__title {
	margin: 0;
	font-size: 2.375rem; /* 38 */
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.15;
}

.lts-event-dialog__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem 1.75rem;
	margin: 0;
	padding: 1.25rem 0;
	border-block: 1px solid rgba(4, 46, 56, 0.14);
	list-style: none;
	font-size: 1.0625rem; /* 17 */
}

.lts-event-dialog__facts li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.lts-event-dialog__facts svg {
	flex: none;
	color: var(--wp--preset--color--accent-2);
}

.lts-event-dialog__host {
	margin: 0;
	color: var(--wp--preset--color--accent-2);
	font-weight: var(--wp--custom--typography--weight-medium);
}

.lts-event-dialog__excerpt {
	margin: 0;
	font-size: 1.125rem; /* 18 */
	line-height: 1.55;
}

.lts-event-dialog__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding: 1.5rem 3rem 2rem; /* 24 48 32 */
	border-top: 1px solid rgba(4, 46, 56, 0.1);
	background: var(--wp--preset--color--base);
}

.lts-event-dialog .lts-event-dialog__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3.5rem; /* 56 */
	padding: 0 2rem;
	border-radius: 3.125rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.lts-event-dialog .lts-event-dialog__cta:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

.lts-event-dialog__cta svg {
	width: 1.125rem;
	height: 1.125rem;
}

.lts-event-dialog__helper,
.lts-event-dialog__soon {
	margin: 0;
	font-size: 0.9375rem; /* 15 */
}

.lts-event-dialog .lts-event-dialog__soon a {
	color: var(--wp--preset--color--accent-2);
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
	.lts-event-dialog[open] {
		animation: lts-dialog-in 180ms ease-out;
	}
}

@keyframes lts-dialog-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

/* Phone: a bottom sheet. */
@media (max-width: 781.98px) {
	.lts-event-dialog {
		width: 100%;
		max-height: 92dvh;
		margin: auto 0 0;
		border-radius: 1.5rem 1.5rem 0 0;
	}

	.lts-event-dialog__handle {
		display: block;
		width: 2.75rem;
		height: 0.3125rem;
		margin: 0.625rem auto 0.375rem;
		border-radius: 0.1875rem;
		background: rgba(4, 46, 56, 0.25);
	}

	.lts-event-dialog__close {
		top: 1.75rem;
		right: 1.875rem;
		width: 2.75rem; /* 44 */
		height: 2.75rem;
	}

	.lts-event-dialog__photo {
		margin: 0.375rem 1.25rem 0;
	}

	.lts-event-dialog__photo img {
		height: 12rem;
		border-radius: 1rem;
	}

	.lts-event-dialog__body,
	.lts-event-dialog__photo + .lts-event-dialog__body {
		gap: 1rem;
		padding: 1rem 1.25rem 1.5rem;
	}

	.lts-event-dialog__scroll:not(.has-photo) .lts-event-dialog__body {
		padding-top: 4.5rem;
	}

	.lts-event-dialog__title {
		font-size: 1.75rem; /* 28 */
	}

	.lts-event-dialog__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		padding: 1rem 0;
		font-size: 1rem;
	}

	.lts-event-dialog__excerpt {
		font-size: 1.0625rem;
	}

	.lts-event-dialog__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
		padding: 0.875rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
		text-align: center;
	}

	.lts-event-dialog .lts-event-dialog__cta {
		width: 100%;
	}

	@media (prefers-reduced-motion: no-preference) {
		.lts-event-dialog[open] {
			animation: lts-sheet-in 220ms ease-out;
		}
	}
}

@keyframes lts-sheet-in {
	from {
		transform: translateY(100%);
	}
}