/*
 * Events pages (The Events Calendar): /events/ (list and month views), category archives and
 * single events (/event/<slug>/). Weekly program pages (/weekly/<slug>/) share the single event's markup and
 * most of its rules; their own bits are in single-weekly-program.css.
 *
 * Redesign POC (soft editorial, see editorial.css): paper and ink, an "(events)" kicker over a display title,
 * "(LIST) (MONTH)" in brackets, hairlines between list rows and around the month grid (a sibling of the
 * homepage's calendar block), a crimson tint for today. Single events: the date as a kicker, the title in
 * display capitals, a details panel with a crimson rule, the description at a comfortable measure and the
 * flyers in colour (they carry information, so no photo filter on them).
 * Templates: themes/sacred-roots/tribe/events/ (header, top bars, list event, single event, date lines).
 */

/*
 * The Events Calendar colors and fonts. Its --tec-* variables are declared on :root and many derive
 * from each other there, so override the base ones on the root element itself (only on event pages).
 * Higher specificity than TEC's :root rule, so load order doesn't matter.
 */
:root:has(> body.post-type-archive-tribe_events),
:root:has(> body.tax-tribe_events_cat),
:root:has(> body.single-tribe_events),
:root:has(> body.single-sr_weekly_program) {
	--sr-events-bg: var(--wp--preset--color--paper);
	--sr-events-ink: var(--wp--preset--color--ink);
	--sr-events-ink-soft: color-mix(in srgb, var(--wp--preset--color--ink) 68%, var(--wp--preset--color--paper));
	--sr-events-link: var(--wp--preset--color--accent-1);
	--sr-events-link-hover: color-mix(in srgb, var(--wp--preset--color--accent-1) 85%, black);
	--sr-events-line: color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	--sr-events-hairline: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);

	--tec-font-family-sans-serif: var(--wp--preset--font-family--label);
	--tec-font-family-base: var(--wp--preset--font-family--heading);

	--tec-color-text-primary: var(--sr-events-ink);
	--tec-color-text-primary-light: var(--sr-events-ink-soft);
	--tec-color-text-primary-hover: var(--sr-events-ink-soft);
	--tec-color-text-primary-active: var(--sr-events-ink);
	--tec-color-text-secondary: var(--sr-events-ink-soft);
	--tec-color-text-disabled: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);

	--tec-color-icon-primary: var(--sr-events-ink);
	--tec-color-icon-primary-alt: var(--sr-events-ink);
	--tec-color-icon-secondary: var(--sr-events-ink-soft);
	--tec-color-icon-active: var(--sr-events-link);
	--tec-color-icon-hover: var(--sr-events-link);
	--tec-color-icon-focus: var(--sr-events-link);
	--tec-color-icon-disabled: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent);
	--tec-color-event-icon: var(--sr-events-ink);
	--tec-color-event-icon-hover: var(--sr-events-link);

	/* TEC's blue accent becomes crimson (buttons, today marker, active states). */
	--tec-color-accent-primary: var(--sr-events-link);
	--tec-color-accent-primary-hover: var(--sr-events-link-hover);
	--tec-color-accent-primary-active: var(--sr-events-link-hover);
	--tec-color-accent-primary-background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
	--tec-color-accent-secondary: var(--sr-events-ink);
	--tec-color-accent-secondary-hover: var(--sr-events-ink-soft);
	--tec-color-accent-secondary-active: var(--sr-events-ink-soft);
	--tec-color-accent-secondary-background: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent);
	--tec-color-link-primary: var(--sr-events-ink);
	--tec-color-link-accent: var(--sr-events-link);
	--tec-color-link-accent-hover: var(--sr-events-link-hover);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--wp--preset--color--accent-1) 20%, transparent);
	--tec-color-background-secondary-multiday: color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
	--tec-color-background-secondary-multiday-hover: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);

	--tec-color-border-default: var(--sr-events-line);
	--tec-color-border-secondary: var(--sr-events-line);
	--tec-color-border-tertiary: var(--sr-events-ink-soft);
	--tec-color-border-hover: var(--sr-events-ink-soft);
	--tec-color-border-active: var(--sr-events-ink);

	--tec-color-background: var(--sr-events-bg);
	--tec-color-background-secondary: var(--sr-events-bg);
	--tec-color-background-secondary-hover: var(--sr-events-bg);
	--tec-color-background-transparent: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
	--tec-color-background-messages: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent);
	--tec-color-background-view-selector: var(--sr-events-bg);
	--tec-color-background-subscribe-list: var(--sr-events-bg);

	--tec-color-background-view-selector-list-item-hover: transparent;
	--tec-color-background-subscribe-list-item-hover: transparent;
	--tec-color-text-view-selector-list-item-hover: var(--sr-events-link);

	/* Page width: the site's gutters. */
	--sr-events-gutter: var(--sr-gutter);
	--tec-grid-width: 100%;
	--tec-grid-gutter-page: var(--sr-events-gutter);
	--tec-grid-gutter-page-small: var(--sr-events-gutter);

	--sr-events-text: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
}

body.post-type-archive-tribe_events,
body.tax-tribe_events_cat,
body.single-tribe_events,
body.single-sr_weekly_program {
	background-color: var(--sr-events-bg);
	color: var(--sr-events-ink);
}

/*
 * No focus box on mouse click in the calendar either (TEC adds its own :focus outlines, which beat the
 * site-wide rule in base.css). Keyboard focus keeps a crimson ring.
 */
.tribe-events-view.tribe-common.tribe-events :focus:not(:focus-visible),
.tribe-common .tribe-events-c-subscribe-dropdown :focus:not(:focus-visible) {
	outline: none;
}

.tribe-events-view.tribe-common.tribe-events :is(a, button):focus-visible {
	outline: 2px solid var(--sr-events-link);
	outline-offset: 3px;
}

/* Theme fonts in the calendar: headings in the display serif, everything else in Inter. */
body .tribe-common :is(.tribe-common-h1, .tribe-common-h2, .tribe-common-h3, .tribe-common-h4, .tribe-common-h5, .tribe-common-h6, .tribe-common-h7, .tribe-common-h8) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
}

.tribe-events-view.tribe-common.tribe-events,
.tribe-events-view.tribe-common.tribe-events :is(.tribe-common-b1, .tribe-common-b2, .tribe-common-b3) {
	font-family: var(--wp--preset--font-family--label);
}

/* The global outlined button (theme.json), for The Events Calendar's own buttons. */
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn,
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border,
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border-small,
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border: 1px solid var(--sr-events-link);
	border-radius: 0;
	background: transparent;
	color: var(--sr-events-link);
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn:is(:hover, :focus-visible),
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border-small:is(:hover, :focus-visible),
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:is(:hover, :focus-within) {
	background-color: var(--sr-events-link);
	color: var(--wp--preset--color--base);
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button-text {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:is(:hover, :focus-within) :is(.tribe-events-c-subscribe-dropdown__button-text, .tribe-common-c-svgicon__svg-fill) {
	color: var(--wp--preset--color--base);
	fill: var(--wp--preset--color--base);
}

/*
 * Calendar page (list, month).
 */
.tribe-block.tec-block__archive-events {
	margin-top: 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-l-container {
	min-height: 0;
	padding-top: 0;
	padding-bottom: 6vw;
}

/*
 * Page opening, in the spirit of .sr-page-head: "(events)" then the display title ("UPCOMING", or the month
 * with its year in italics), the "(LIST) (MONTH)" switch on the right, and the "Weekly programs:" line under a
 * hairline (moved under the heading by tribe/events/v2/components/header.php).
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title views"
		"note note";
	align-items: end;
	column-gap: 2rem;
	margin: 0;
	padding: 4.5vw 0 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-header > * {
	grid-column: 1 / -1;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-header__content-title:has(.tec-a11y-title-hidden) {
	position: absolute;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-c-events-bar {
	grid-area: views;
	z-index: 1;
	align-self: start;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-c-top-bar {
	/* Across both columns: "(LIST) (MONTH)" sits over its top right corner, beside the kicker. */
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.2rem 2.4rem;
	margin: 0;
	padding: 0;
}

.tribe-events-view.tribe-common.tribe-events .sr-events-heading-wrap {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.tribe-events-view.tribe-common.tribe-events .sr-events-kicker {
	margin: 0 0 1.4rem;
	font-weight: 600; /* The Events Calendar sets its paragraphs to 400; match the other pages' kickers. */
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .sr-events-heading.sr-display {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3rem, 8vw, 8.5rem);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .sr-events-heading em {
	display: block;
	color: var(--sr-events-link);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
}

/* TEC's empty actions box (shown with !important) would take the free space; the arrows take it instead. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-c-top-bar .tribe-events-c-top-bar__actions {
	position: absolute;
	margin-left: 0;
}

/* Category archives: The Events Calendar's own title for the category, as a smaller display line. */
.tribe-events .tribe-events-header .tribe-events-header__title {
	margin-bottom: 2rem;
}

.tribe-events .tribe-events-header .tribe-events-header__title :is(h1, h2).tribe-events-header__title-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.4rem, 4.6vw, 4.8rem);
	font-weight: 300;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

/* Month arrows: thin crimson chevrons in outlined squares, at the right end of the month's line, under
   "(LIST) (MONTH)". A missing arrow keeps its place. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar__nav {
	flex: 0 0 auto;
	margin: 0 0 0.6vw auto;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar__nav-list {
	display: flex;
	gap: 10px;
}

.tribe-events-view.tribe-common.tribe-events :is(a, button).tribe-events-c-top-bar__nav-link,
.tribe-events-view.tribe-common.tribe-events .sr-nav-slot::before {
	width: 46px;
	height: 46px;
}

.tribe-events-view.tribe-common.tribe-events :is(a, button).tribe-events-c-top-bar__nav-link {
	border: 1px solid var(--sr-events-link);
	transition: background-color 0.2s ease;
}

.tribe-events-view.tribe-common.tribe-events .sr-nav-slot::before {
	content: "";
	display: block;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link .tribe-common-c-btn-icon__icon-svg {
	width: 9px;
	height: 14px;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link .tribe-common-c-btn-icon__icon-svg path {
	fill: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events :is(a, button).tribe-events-c-top-bar__nav-link:is(:hover, :focus-visible) {
	background-color: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link:is(:hover, :focus-visible) .tribe-common-c-btn-icon__icon-svg path {
	fill: var(--wp--preset--color--base);
}

/*
 * "(LIST) (MONTH)": the view switch as bracketed links, the current one in crimson. No search bar (#46), so
 * the tabs are kept by tribe/events/v2/components/events-bar/views.php. On phones TEC folds them into a menu
 * button; here it shows the current view's name in brackets, and the menu lists the views the same way.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-events-bar__views {
	margin: 0;
	padding: 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__content {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list {
	gap: 0.6rem 2rem;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item {
	margin: 0;
	padding: 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item-link,
.tribe-events-view.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-link {
	padding: 0.3rem 0;
	color: var(--sr-events-ink);
}

/* Level with the "(events)" kicker. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-c-events-bar {
	margin-top: -0.3rem;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item-link::after {
	content: none !important;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item-icon {
	display: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector {
	width: auto;
}

/* inline-flex drops the template's spaces inside the label, so the brackets hug it: "(LIST)". */
.tribe-events-view.tribe-common.tribe-events :is(.tribe-events-c-view-selector__list-item-text, .tribe-events-c-view-selector__button-text) {
	display: inline-flex;
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

.tribe-events-view.tribe-common.tribe-events :is(.tribe-events-c-view-selector__list-item-text, .tribe-events-c-view-selector__button-text)::before {
	content: "(";
	margin-right: 0.12em;
	color: var(--sr-events-link);
	font-weight: 400;
}

.tribe-events-view.tribe-common.tribe-events :is(.tribe-events-c-view-selector__list-item-text, .tribe-events-c-view-selector__button-text)::after {
	content: ")";
	position: static;
	display: inline;
	height: auto;
	margin-left: 0.12em;
	background: none;
	transform: none;
	color: var(--sr-events-link);
	font-weight: 400;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item-link:is(:hover, :focus-visible) {
	color: var(--sr-events-link);
}

/* Phones: the menu button reads "(LIST) ▾" instead of an icon. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.4rem 0;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector--labels .tribe-events-c-view-selector__button:is(:hover, :focus, .tribe-events-c-view-selector__button--active) {
	color: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button::before {
	content: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button-icon {
	display: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button-text.tribe-common-a11y-visual-hide {
	position: static !important;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button-icon-caret-svg {
	display: block;
	flex: none;
	width: 9px;
	height: 6px;
	margin: 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button-icon-caret-svg path {
	fill: var(--sr-events-link);
}

.tribe-events-view.tribe-common:not(.tribe-common--breakpoint-medium).tribe-events .tribe-events-c-view-selector__content {
	top: 100%;
	right: 0;
	left: auto;
	min-width: 10rem;
	padding: 0.8rem 1.2rem;
	border: 1px solid var(--sr-events-line);
	border-radius: 0;
	background: var(--sr-events-bg);
	box-shadow: none;
}

.tribe-events-view.tribe-common:not(.tribe-common--breakpoint-medium).tribe-events .tribe-events-c-view-selector__list {
	flex-direction: column;
	gap: 0.2rem;
}

/*
 * "Weekly programs:" line (plugins/sacred-roots-site/includes/weekly-programs.php) and Editors' content above
 * the calendar, under the heading between hairlines. Two classes, to outrank TEC's `.tribe-common p` reset.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-before-html {
	grid-area: note;
	margin: 3.5vw 0 0;
	padding: 1.4rem 0;
	border-top: 1px solid var(--sr-events-hairline);
}

.tribe-events-before-html .sr-weekly-note {
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

.tribe-events-before-html .sr-weekly-note strong {
	margin-right: 0.6em;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sr-events-link);
}

.tribe-events-before-html .sr-weekly-note a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.tribe-events-before-html .sr-weekly-note a:is(:hover, :focus-visible) {
	color: var(--sr-events-link);
	text-decoration-color: currentColor;
}

/* It's for the calendar pages only. */
.single-tribe_events .sr-weekly-note {
	display: none;
}

/*
 * Editors' own content (Sacred Roots → Events page; plugins/sacred-roots-site/includes/events-page.php): above
 * and below the calendar, and above and below every event's description. An empty area prints nothing.
 * Inside the calendar The Events Calendar resets margins, links and buttons, so they're set here.
 */
.tribe-events-before-html .sr-events-area {
	margin: 0 0 17px;
}

.tribe-events-before-html .sr-events-area:last-child {
	margin-bottom: 0;
}

.tribe-events-after-html .sr-events-area {
	margin: 34px 0 0;
}

.tribe-common .sr-events-area {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--sr-events-text);
	font-weight: 300;
	line-height: 1.6;
}

.tribe-common .sr-events-area > *,
.sr-event__content .sr-events-area > * {
	margin: 0 0 17px;
}

.tribe-common .sr-events-area > :last-child,
.sr-event__content .sr-events-area > :last-child {
	margin-bottom: 0;
}

.sr-event__content .sr-events-area--above-description {
	margin-bottom: 16px;
}

.tribe-common .sr-events-area :is(p, li) a {
	color: var(--sr-events-link);
	text-decoration: underline;
}

.tribe-common .sr-events-area :is(p, li) a:hover,
.tribe-common .sr-events-area :is(p, li) a:focus {
	color: var(--sr-events-link-hover);
}

.tribe-common .sr-events-area :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	line-height: 1.1;
	color: var(--sr-events-ink);
}

.tribe-common .sr-events-area h2 {
	font-size: clamp(2rem, 3vw, 3rem);
	text-transform: uppercase;
}

.tribe-common .sr-events-area :is(h3, h4) {
	font-size: clamp(1.4rem, 1.8vw, 1.8rem);
}

.tribe-common .sr-events-area :is(ul, ol) {
	padding-left: 1.3em;
}

.tribe-common .sr-events-area ul {
	list-style: disc;
}

.tribe-common .sr-events-area ol {
	list-style: decimal;
}

.sr-events-area img {
	max-width: 100%;
	height: auto;
}

/* Buttons in Editors' content: the outlined button, unless a color was picked. */
.tribe-common .sr-events-area .wp-block-button__link,
.sr-event .sr-events-area .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0.85em 1.5em;
	border: 1px solid var(--sr-events-link);
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tribe-common .sr-events-area .wp-block-button__link:not(.has-background),
.sr-event .sr-events-area .wp-block-button__link:not(.has-background) {
	background-color: transparent;
}

.tribe-common .sr-events-area .wp-block-button__link:not(.has-text-color),
.sr-event .sr-events-area .wp-block-button__link:not(.has-text-color) {
	color: var(--sr-events-link);
}

.tribe-common .sr-events-area .wp-block-button__link:not(.has-background):is(:hover, :focus-visible),
.sr-event .sr-events-area .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
	background-color: var(--sr-events-link);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.sr-events-area .wp-block-button__link {
		transition: none;
	}
}

/* The event's place and map (Sacred Roots → Events page → Map), under the description. */
.sr-event__map {
	clear: both;
	margin: 34px 0 16px;
}

.sr-event__content .sr-event__venue {
	font-size: 0.9em;
}

.sr-event__map iframe {
	display: block;
	width: 100%;
	border: 0;
	filter: grayscale(1) sepia(0.15) contrast(0.95);
}

/* Bottom links: an empty slot keeps "Next Events" / "Dec ›" on the right. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item:empty {
	flex: 1;
}

/* Month headings in the list ("DECEMBER 2026"): small spaced capitals and a hairline. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__month-separator {
	margin: 0;
	padding: 2.6rem 0 1rem;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__month-separator::after {
	display: none;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

/*
 * List rows (template: tribe/events/v2/list/event.php): the start date as "DEC / 11" in large serif numerals,
 * the title and date lines, and the flyer on the right as a warm photo (colour on hover). Hairlines between
 * rows. The whole row opens the event: the title link is stretched over it (::after), and the calendar
 * links sit above that so they still work.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list {
	margin: 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__event-row.sr-event-row {
	display: block;
	margin: 0;
	border-top: 1px solid var(--sr-events-hairline);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__event-row.sr-event-row:last-child {
	border-bottom: 1px solid var(--sr-events-hairline);
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(6rem, 1.2fr) minmax(0, 7fr) minmax(0, 3.8fr);
	grid-template-areas: "date body thumb";
	column-gap: 3vw;
	align-items: start;
	margin: 0;
	padding: 2.6rem 0;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card:not(:has(.sr-event-card__thumb)) .sr-event-card__body {
	grid-column: 2 / -1;
}

.sr-event-card__date {
	grid-area: date;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sr-event-card__month {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sr-events-link);
}

.sr-event-card__day {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(3.6rem, 6vw, 6.4rem);
	font-weight: 300;
	line-height: 0.82;
	font-variant-numeric: lining-nums;
	color: var(--sr-events-ink);
}

.sr-event-card__thumb {
	grid-area: thumb;
	justify-self: end;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1;
}

.sr-event-card__body {
	grid-area: body;
	min-width: 0;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title {
	max-width: 22em;
	margin: 0 0 1.2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.9rem, 3vw, 3.1rem);
	font-weight: 300;
	line-height: 1.04;
	color: var(--sr-events-ink);
	transition: color 0.2s ease;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card:hover .tribe-events-calendar-list__event-title {
	color: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card:hover .sr-photo img {
	filter: none;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link,
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:visited,
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:hover,
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:focus {
	border: 0;
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* The stretched link covers the whole row. Keyboard focus draws its ring around the row. */
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:focus-visible::after {
	outline: 2px solid var(--sr-events-link);
	outline-offset: 2px;
}

/* Google Calendar and ICS stay their own links, above the row link. */
.tribe-common .sr-event-card .sr-event-meta--export a,
.sr-event-card .sr-event-meta--export a {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title {
		transition: none;
	}
}

/*
 * Text colored in the editor (<mark class="has-inline-color">). The editor writes a transparent background
 * inline, but kses can strip that style for editors without unfiltered_html, which would leave the
 * browser's yellow highlight.
 */
:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) mark.has-inline-color {
	background-color: transparent;
}

/* The old navy emphasis in event descriptions reads as ink on the paper pages. */
:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) mark.has-accent-2-color {
	color: var(--sr-events-ink) !important;
}

/*
 * A link whose text is colored (e.g. "Apply"): the underline takes the text's color, not the crimson link
 * color (owner request). The link drops its own underline and the colored text draws one.
 */
:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) a:has(> mark.has-inline-color) {
	text-decoration: none;
}

:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) a > mark.has-inline-color {
	text-decoration: underline;
	text-decoration-thickness: inherit;
	text-underline-offset: inherit;
}

/* Date, time and calendar links (tribe/events/sr-event-meta.php), list and single event. */
.sr-event-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--label);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--sr-events-ink);
}

.sr-event-meta li {
	margin: 0;
}

.tribe-common .sr-event-meta a,
.sr-event-meta a {
	color: inherit;
	text-decoration: none;
}

/* "(GOOGLE CALENDAR) (ICS)": bracketed links. */
.sr-event-meta--export {
	margin-top: 0.9rem;
}

.sr-event-meta--export .sr-event-meta__export {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
}

.tribe-common .sr-event-meta--export a,
.sr-event-meta--export a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sr-events-ink);
}

.sr-event-meta--export a::before,
.sr-event-meta--export a::after {
	color: var(--sr-events-link);
	font-weight: 400;
}

.sr-event-meta--export a::before {
	content: "(";
	margin-right: 0.12em;
}

.sr-event-meta--export a::after {
	content: ")";
	margin-left: 0.12em;
}

.tribe-common .sr-event-meta--export a:is(:hover, :focus-visible),
.sr-event-meta--export a:is(:hover, :focus-visible) {
	color: var(--sr-events-link);
}

.sr-event-meta .sr-event-meta__divider {
	display: none;
}

/*
 * "Subscribe to calendar" (#183): the outlined button; its menu floats under it, over the page, right-aligned
 * with it. Items underline on hover and keyboard focus. It closes on an outside click or Escape
 * (plugins/sacred-roots-site/assets/events-focus.js).
 */
.tribe-events .tribe-events-c-subscribe-dropdown__container {
	margin-top: 3rem;
}

.tribe-events .tribe-events-c-subscribe-dropdown {
	position: relative;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__content {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: var(--tec-z-index-dropdown);
	width: max-content;
	min-width: 100%;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__list {
	border: 1px solid var(--sr-events-line);
	border-radius: 0;
	background: var(--sr-events-bg);
	box-shadow: none;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__list-item a {
	font-family: var(--wp--preset--font-family--label);
	font-size: 14px;
	font-weight: 400;
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__list-item a:is(:hover, :focus-visible) {
	color: var(--sr-events-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Bottom of the list: "Previous Events / Next Events", and the phone month links, as bracketed links. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav {
	margin-top: 2rem;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item :is(a, button) {
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item :is(a, button):is(:hover, :focus-visible) {
	color: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item .tribe-common-c-svgicon path {
	fill: var(--sr-events-link);
}

/*
 * Month view: a hairline grid like the homepage's calendar block, weekday labels in spaced Inter capitals,
 * today tinted crimson.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month {
	margin-top: 3vw;
}

/* The grid's top edge (TEC only draws lines between rows and down the sides). */
.tribe-events-view.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__body {
	border-top: 1px solid var(--sr-events-line);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__header-column {
	padding: 0 0 0.8rem;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__header-column-title {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__header-column-title {
	padding-left: 12px;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-date-link {
	font-family: var(--wp--preset--font-family--label);
	font-size: 14px;
	font-weight: 500;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day {
	background: transparent;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events :is(.tribe-events-calendar-month__calendar-event-title-link, .tribe-events-calendar-month-mobile-events__mobile-event-title-link):is(:hover, :focus-visible) {
	color: var(--sr-events-link);
	border-color: currentColor;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-datetime {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--sr-events-ink-soft);
}

/* Days in the past and in other months: dimmed. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--past-month .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--next-month .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date {
	opacity: 0.6;
}

.tribe-events-view.tribe-common--breakpoint-medium.tribe-events :is(.tribe-events-calendar-month__day--past-month, .tribe-events-calendar-month__day--next-month) {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent);
}

/* Today: a crimson tint and a crimson date. */
.tribe-events-view.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--current {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--current :is(.tribe-events-calendar-month__day-date, .tribe-events-calendar-month__day-date-link, .tribe-events-calendar-month__day-date-daynum) {
	font-weight: 700;
	color: var(--sr-events-link);
}

/* Phones: TEC marks the selected day with a crimson square; its number is white. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
	color: var(--wp--preset--color--base);
	opacity: 1;
}

/*
 * Month view on phones: TEC marks a day button's keyboard focus only with a background, which hardly
 * shows on the paper. Add a ring in crimson (#20). Keyboard only, so taps look the same.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-cell--mobile:focus-visible {
	outline: 2px solid var(--sr-events-link);
	outline-offset: -2px;
}

/* Hover cards in the month grid: paper with a hairline. */
.tooltipster-base.tribe-events-tooltip-theme,
.tooltipster-base.tribe-events-tooltip-theme--hover {
	--tec-color-background-tooltip: var(--wp--preset--color--paper);
}

/* Empty states ("There are no upcoming events") and other notices. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-messages__message {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--sr-events-text);
	font-weight: 300;
	color: var(--sr-events-ink);
}

/*
 * Single event (template: tribe/events/sr-single-event.php) and weekly program (plugin block
 * sacred-roots/weekly-program, same classes). "(← BACK TO ALL EVENTS)", the date as a kicker, the title in
 * display capitals across the page; under a hairline, the details panel on the left (crimson rule) and the
 * description on the right with the flyers floated beside it.
 */
.single-tribe_events #tribe-events-pg-template,
.single-tribe_events .tribe-events-pg-template {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
}

.single-tribe_events .tribe-block.tec-block__single-event {
	margin: 0;
	max-width: none;
}

.sr-event {
	--sr-ev-gap: 4vw;
	padding: 2rem var(--sr-gutter) 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--sr-events-text);
	font-weight: 300;
	line-height: 1.6;
	color: var(--sr-events-ink);
}

.sr-event a {
	color: inherit;
}

/* "(← BACK TO ALL EVENTS)". inline-flex drops the template's spaces inside the brackets. */
.sr-event .sr-event__back {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

.sr-event .sr-event__back::before,
.sr-event .sr-event__back::after {
	color: var(--sr-events-link);
	font-weight: 400;
}

.sr-event .sr-event__back::before {
	content: "(";
	margin-right: 0.12em;
}

.sr-event .sr-event__back::after {
	content: ")";
	margin-left: 0.12em;
}

.sr-event .sr-event__back > span {
	margin-right: 0.45em;
	color: var(--sr-events-link);
}

.sr-event .sr-event__back:is(:hover, :focus-visible) {
	color: var(--sr-events-link);
}

.sr-event .sr-event__item {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	column-gap: var(--sr-ev-gap);
	align-items: start;
	padding-bottom: 5vw;
}

/* The title area spans the page; the details panel and the description sit side by side under it. */
.sr-event .sr-event__meta {
	display: contents;
}

.sr-event .sr-event__kicker {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 4.5vw 0 1.4rem;
	color: var(--sr-events-ink);
}

#tribe-events-pg-template .sr-event .sr-event__title,
.sr-event .sr-event__title {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0 0 3.5vw;
	padding-bottom: 3.5vw;
	border-bottom: 1px solid var(--sr-events-hairline);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.6rem, 5.6vw, 6.4rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

.sr-event .sr-event__title.sr-display em {
	display: inline-block;
	margin-top: 0.08em;
}

.sr-event .sr-event__title-dash {
	color: var(--sr-events-link);
}

/* Details: date, time, calendar links (and a weekly program's schedule and place), with a crimson rule. */
.sr-event .sr-event__details,
.sr-weekly-program .sr-event-meta--when {
	grid-column: 1;
	grid-row: 3;
	position: sticky;
	top: 2rem;
	padding: 0.2rem 0 0.2rem 1.4rem;
	border-left: var(--sr-rule);
}

.sr-event .sr-event-meta--when {
	font-size: 15px;
	line-height: 1.55;
}

.sr-event .sr-event-meta__date {
	font-weight: 500;
}

.sr-event__content {
	grid-column: 2;
	grid-row: 3;
	min-width: 0;
	font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
	line-height: 1.65;
}

.sr-event__content::after {
	content: "";
	display: table;
	clear: both;
}

/* A comfortable measure for the description; the flyers float beside it. */
.sr-event__content > :not(.sr-event__flyer, blockquote, .sr-event__map) {
	max-width: 34em;
}

.sr-event__content > :first-child,
.sr-event__flyer + :not(.sr-event__flyer) {
	margin-top: 0;
}

.sr-event__content p {
	margin: 0 0 1em;
}

.sr-event__content :is(ul, ol) {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
}

.sr-event__content li {
	margin: 0 0 0.25em;
	padding-left: 0.3em;
}

.sr-event__content li::marker {
	color: var(--sr-events-link);
}

.sr-event__content strong {
	font-weight: 600;
}

.sr-event__content :is(p, li) a {
	color: var(--sr-events-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sr-event__content :is(p, li) a:is(:hover, :focus-visible) {
	color: var(--sr-events-link-hover);
}

.sr-event__content :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 300;
	line-height: 1;
	color: var(--sr-events-ink);
}

.sr-event__content :is(h2, h3, h4) :is(strong, b) {
	font-weight: inherit;
}

.sr-event__content :is(h3, h4) {
	margin: 2rem 0 1rem;
	font-size: clamp(1.5rem, 2vw, 2rem);
}

/*
 * A section heading in the description (e.g. "Details" on Convergence 2026) and everything after it: a
 * display title and a panel with a crimson rule down its left.
 */
.sr-event__content h2 {
	clear: right;
	margin: 3.2rem 0 0;
	padding: 0 0 1.4rem 1.4rem;
	border-left: var(--sr-rule);
	font-size: clamp(2.2rem, 3.6vw, 3.6rem);
	text-transform: uppercase;
}

.sr-event__content h2 ~ :is(p, ul, ol, h3, h4, div) {
	margin-block: 0;
	padding-bottom: 1em;
	padding-left: 1.4rem;
	border-left: var(--sr-rule);
}

.sr-event__content h2 ~ :is(ul, ol) {
	padding-left: calc(1.4rem + 1.2em);
}

.sr-event__content h2 ~ :is(h3, h4) {
	padding-top: 1rem;
}

.sr-event__content h2 ~ :last-child {
	padding-bottom: 0.2rem;
}

/* The RSVP line the template adds when the description doesn't link to the registration form: the outlined button. */
.sr-event__content .sr-event__rsvp {
	margin: 0 0 1.6rem;
}

.sr-event__content .sr-event__rsvp a {
	display: inline-block;
	padding: 0.85em 1.5em;
	border: 1px solid var(--sr-events-link);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--sr-events-link);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sr-event__content .sr-event__rsvp a:is(:hover, :focus-visible) {
	background-color: var(--sr-events-link);
	color: var(--wp--preset--color--base);
}

/* Flyers: in colour (they carry the details), stacked on the right. Each opens the full-size image. */
.sr-event__flyer {
	float: right;
	clear: right;
	width: 42%;
	margin: 0 0 2rem 3vw;
}

.sr-event__flyer.sr-photo,
.sr-event__flyer {
	overflow: visible;
}

.sr-event__flyer a {
	display: block;
	overflow: hidden;
}

.sr-event__flyer img,
.sr-event__flyer.sr-photo img {
	display: block;
	width: 100%;
	height: auto;
	filter: none;
}

.sr-event__flyer.sr-photo:hover img {
	transform: none;
}

.sr-event__flyer a:hover img {
	transform: scale(1.015);
}

/* Previous and next events, under a hairline: "(← OCTOBER 24)" over the title. */
.sr-event__pagination {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 4vw;
	margin: 0 calc(-1 * var(--sr-gutter));
	padding: 3vw var(--sr-gutter) 5vw;
	border-top: 1px solid var(--sr-events-hairline);
}

.sr-event .sr-event__pagination-link {
	display: flex;
	flex: 0 1 auto;
	box-sizing: border-box;
	max-width: calc(50% - 2vw);
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	text-decoration: none;
}

.sr-event .sr-event__pagination-link--next {
	align-items: flex-end;
	text-align: right;
}

.sr-event__pagination-date {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sr-event__pagination-date::before,
.sr-event__pagination-date::after {
	color: var(--sr-events-link);
	font-weight: 400;
}

.sr-event__pagination-link--previous .sr-event__pagination-date::before {
	content: "( \2190\00a0";
}

.sr-event__pagination-link--previous .sr-event__pagination-date::after {
	content: " )";
}

.sr-event__pagination-link--next .sr-event__pagination-date::before {
	content: "( ";
}

.sr-event__pagination-link--next .sr-event__pagination-date::after {
	content: "\00a0\2192 )";
}

.sr-event__pagination-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 2.4vw, 2.5rem);
	font-weight: 300;
	line-height: 1.05;
	transition: color 0.2s ease;
}

.sr-event .sr-event__pagination-link:is(:hover, :focus-visible) .sr-event__pagination-title {
	color: var(--sr-events-link);
}

/* Phones (and narrow tablets): everything stacks. */
@media (max-width: 781px) {
	.tribe-events-view.tribe-common.tribe-events .tribe-events-header {
		padding-top: 2.4rem;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-events-kicker {
		margin-bottom: 1rem;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-events-heading.sr-display {
		font-size: clamp(2.8rem, 13vw, 4rem);
	}

	.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-c-top-bar {
		gap: 1rem 1.2rem;
	}

	.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar__nav {
		margin-bottom: 0.2rem;
		margin-left: auto;
	}

	.tribe-events-view.tribe-common.tribe-events :is(a, button).tribe-events-c-top-bar__nav-link,
	.tribe-events-view.tribe-common.tribe-events .sr-nav-slot::before {
		width: 40px;
		height: 40px;
	}

	.tribe-events-view.tribe-common.tribe-events .tribe-events-header .tribe-events-before-html {
		margin-top: 1.8rem;
		padding: 1.1rem 0;
	}

	.tribe-events-before-html .sr-weekly-note strong {
		display: block;
		margin: 0 0 0.3rem;
	}

	.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__month-separator {
		padding-top: 1.6rem;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-event-card {
		grid-template-columns: 4.4rem minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"date body"
			"thumb body";
		column-gap: 16px;
		row-gap: 1rem;
		padding: 1.6rem 0;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-event-card:not(:has(.sr-event-card__thumb)) .sr-event-card__body {
		grid-column: 2;
	}

	.sr-event-card__day {
		font-size: 3.2rem;
	}

	.sr-event-card__thumb {
		justify-self: start;
		max-width: none;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title {
		margin-bottom: 0.8rem;
		font-size: 1.75rem;
	}

	.tribe-events .tribe-events-c-subscribe-dropdown__container {
		margin-top: 2rem;
	}

	.sr-event {
		padding-top: 1.4rem;
	}

	.sr-event .sr-event__item {
		display: block;
		padding-bottom: 3rem;
	}

	.sr-event .sr-event__meta {
		display: block;
	}

	.sr-event .sr-event__kicker {
		margin: 2.4rem 0 1rem;
	}

	#tribe-events-pg-template .sr-event .sr-event__title,
	.sr-event .sr-event__title {
		margin-bottom: 1.6rem;
		padding-bottom: 1.6rem;
		font-size: clamp(2.3rem, 10.5vw, 3.4rem);
	}

	.sr-event .sr-event__details,
	.sr-weekly-program .sr-event-meta--when {
		position: static;
		margin-bottom: 2.2rem;
	}

	.sr-event__content > :not(.sr-event__flyer, blockquote, .sr-event__map) {
		max-width: none;
	}

	.sr-event__flyer {
		float: none;
		width: 100%;
		margin: 0 0 1.4rem;
	}

	.sr-event__flyer:last-of-type {
		margin-bottom: 2rem;
	}

	.sr-event__content h2 {
		margin-top: 2.4rem;
	}

	/*
	 * Previous and next stay side by side: two equal halves. A word too long for its half widens that half,
	 * and if both titles have such words, next moves below previous.
	 */
	.sr-event__pagination {
		flex-wrap: wrap;
		gap: 1.6rem 16px;
		padding: 1.8rem var(--sr-gutter) 3rem;
	}

	.sr-event .sr-event__pagination-link {
		flex: 1 1 0;
		max-width: none;
		min-width: auto;
	}

	.sr-event__pagination-title {
		font-size: 1.5rem;
	}
}