/**
 * MSAD 2026 -- shared stylesheet for the SINGLE templates:
 * News Article ("MSAD News Article.dc.html") and Event Detail
 * ("MSAD Event Detail.dc.html"). Loads only in singles preview/live mode.
 */

/* Compact navy hero for singles */
.msad-h26__art-hero {
	background: var(--h26-navy);
	color: #fff;
}

.msad-h26__art-hero-inner {
	width: 100%;
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 34px var(--h26-gutter) 48px;
}

/* Admin/editor-only "Edit"/"Delete" quick actions, shown just below the
   hero on News/Video/Event/Listing singles (see
   inc/admin-quick-actions-2026.php). Only ever rendered for
   administrators/editors -- no visibility toggle needed here. */
.msad-h26__admin-actions {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: var(--h26-max);
	margin: 24px auto 0;
	padding: 0 var(--h26-gutter);
}

.msad-h26__admin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 22px;
	border-radius: var(--radius-md, 8px);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	color: #fff;
	transition: background-color var(--h26-transition);
}

.msad-h26__admin-btn--edit {
	background: transparent;
	border: 2px solid var(--h26-sky-700);
	color: var(--h26-sky-700);
}

.msad-h26__admin-btn--edit:hover,
.msad-h26__admin-btn--edit:focus-visible {
	background: var(--h26-sky-700);
	color: #fff;
}

.msad-h26__admin-btn--delete {
	background: var(--h26-danger);
}

.msad-h26__admin-btn--delete:hover,
.msad-h26__admin-btn--delete:focus-visible {
	background: var(--h26-danger-700);
}

.msad-h26__admin-btn--unpublish {
	background: var(--brand-cranberry);
	color: var(--white);
}

.msad-h26__admin-btn--unpublish:hover,
.msad-h26__admin-btn--unpublish:focus-visible {
	background: var(--brand-cranberry-700);
	color: var(--white);
}

.msad-h26__admin-btn--cancel {
	background: var(--h26-sky-700);
}

.msad-h26__admin-btn--cancel:hover,
.msad-h26__admin-btn--cancel:focus-visible {
	background: var(--h26-navy);
}

/* Pending items only -- Approve IS the same publish action as the
   Publish/Unpublish toggle, just labelled for the moderation context (the
   toggle itself is hidden while pending, so these never show together). */
.msad-h26__admin-btn--approve {
	background: var(--h26-green, #2f8f5b);
}

.msad-h26__admin-btn--approve:hover,
.msad-h26__admin-btn--approve:focus-visible {
	background: var(--h26-green-700, #1f6b41);
}

/* Decline moves it to Draft -- the exact same effect as Unpublish, so it
   reuses that same amber colour language. */
.msad-h26__admin-btn--decline {
	background: var(--brand-cranberry);
	color: var(--white);
}

.msad-h26__admin-btn--decline:hover,
.msad-h26__admin-btn--decline:focus-visible {
	background: var(--brand-cranberry-700);
	color: var(--white);
}

/* Event, News, and Video singles: one bordered toolbar card instead of
   four separate solid-colour blocks sitting side by side -- neutral at
   rest, each action's own colour shows up in its icon/label and on hover,
   no dividers (reads as one seamless bar) instead of the filter-pill look
   used elsewhere on the site. Video has no Cancel button (event-only), so
   it's left out of that one rule pair below.

   News and Events use the same split-grid layout (content column +
   sidebar), so on both the toolbar lives inside the first (content)
   column, above the flyer, instead of spanning both columns as its own
   full-width row -- that pushed the sidebar down with it; nested there,
   the sidebar stays level with the toolbar instead. Video has no sidebar/
   split layout at all, so this is purely a style match there. The banners
   (msad_h26_visibility_banners()) stay at the root level, full width,
   separate from the toolbar itself -- see inc/admin-quick-actions-2026.php. */
body.single-event .msad-h26__admin-actions,
body.single-post .msad-h26__admin-actions,
body.single-msad_video .msad-h26__admin-actions {
	gap: 0;
	width: fit-content;
	max-width: none;
	/* News and Events nest the toolbar as the first child of a single
	   content-column wrapper (News's grid used to have flyer/content/tags
	   as separate direct grid items -- that forced the tall sidebar, which
	   spans every row, to stretch the toolbar's own row and push the flyer
	   way down; restructured into one wrapper div so the split grid only
	   ever has 2 direct children, same as Events). Plain margin-bottom here
	   now controls the gap to the flyer/image/content below, consistently
	   across all three templates. */
	margin: 0 0 28px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 4px 14px rgba(15, 25, 52, 0.06);
	overflow: hidden;
}

/* No dividers between them -- reads as one seamless bar instead of four
   separate segments; a colour change on hover is enough of a boundary cue
   on its own. */
body.single-event .msad-h26__admin-btn,
body.single-post .msad-h26__admin-btn,
body.single-msad_video .msad-h26__admin-btn {
	flex: 0 0 110px;
	width: 110px;
	gap: 6px;
	min-height: 52px;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 13px;
	white-space: nowrap;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

/* Hover fill is a plain rectangle -- without matching the card's own
   rounded corners here, overflow:hidden on the card clips a sliver of it
   off in the first/last button's outer corners, leaving an uncoloured gap
   right where the rounding is. */
body.single-event .msad-h26__admin-btn:first-child,
body.single-post .msad-h26__admin-btn:first-child,
body.single-msad_video .msad-h26__admin-btn:first-child {
	border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
}

body.single-event .msad-h26__admin-btn:last-child,
body.single-post .msad-h26__admin-btn:last-child,
body.single-msad_video .msad-h26__admin-btn:last-child {
	border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

body.single-event .msad-h26__admin-btn i,
body.single-post .msad-h26__admin-btn i,
body.single-msad_video .msad-h26__admin-btn i {
	font-size: 15px;
}

body.single-event .msad-h26__admin-btn--edit,
body.single-post .msad-h26__admin-btn--edit,
body.single-msad_video .msad-h26__admin-btn--edit {
	color: var(--h26-sky-700);
}

body.single-event .msad-h26__admin-btn--edit:hover,
body.single-event .msad-h26__admin-btn--edit:focus-visible,
body.single-post .msad-h26__admin-btn--edit:hover,
body.single-post .msad-h26__admin-btn--edit:focus-visible,
body.single-msad_video .msad-h26__admin-btn--edit:hover,
body.single-msad_video .msad-h26__admin-btn--edit:focus-visible {
	background: var(--h26-band);
	color: var(--h26-sky-700);
}

body.single-event .msad-h26__admin-btn--unpublish,
body.single-post .msad-h26__admin-btn--unpublish,
body.single-msad_video .msad-h26__admin-btn--unpublish {
	background: transparent;
	color: var(--h26-accent-700);
}

body.single-event .msad-h26__admin-btn--unpublish:hover,
body.single-event .msad-h26__admin-btn--unpublish:focus-visible,
body.single-post .msad-h26__admin-btn--unpublish:hover,
body.single-post .msad-h26__admin-btn--unpublish:focus-visible,
body.single-msad_video .msad-h26__admin-btn--unpublish:hover,
body.single-msad_video .msad-h26__admin-btn--unpublish:focus-visible {
	background: var(--h26-band);
	color: var(--h26-accent-700);
}

body.single-event .msad-h26__admin-btn--cancel,
body.single-post .msad-h26__admin-btn--cancel {
	background: transparent;
	color: var(--h26-green-700);
}

body.single-event .msad-h26__admin-btn--cancel:hover,
body.single-event .msad-h26__admin-btn--cancel:focus-visible,
body.single-post .msad-h26__admin-btn--cancel:hover,
body.single-post .msad-h26__admin-btn--cancel:focus-visible {
	background: var(--h26-green-100);
	color: var(--h26-green-700);
}

/* Pending items only (Approve/Decline) -- Approve reuses the same green
   as Cancel/Uncancel above; the two never appear together (Cancel is
   events-only and only once already published, Approve only while
   pending), so sharing the colour causes no ambiguity on screen. */
body.single-event .msad-h26__admin-btn--approve,
body.single-post .msad-h26__admin-btn--approve,
body.single-msad_video .msad-h26__admin-btn--approve {
	background: transparent;
	color: var(--h26-green-700);
}

body.single-event .msad-h26__admin-btn--approve:hover,
body.single-event .msad-h26__admin-btn--approve:focus-visible,
body.single-post .msad-h26__admin-btn--approve:hover,
body.single-post .msad-h26__admin-btn--approve:focus-visible,
body.single-msad_video .msad-h26__admin-btn--approve:hover,
body.single-msad_video .msad-h26__admin-btn--approve:focus-visible {
	background: var(--h26-green-100);
	color: var(--h26-green-700);
}

/* Decline moves it to Draft -- the same effect as Unpublish, so it reuses
   that same amber colour language (also mutually exclusive on screen: the
   toggle is hidden while pending). */
body.single-event .msad-h26__admin-btn--decline,
body.single-post .msad-h26__admin-btn--decline,
body.single-msad_video .msad-h26__admin-btn--decline {
	background: transparent;
	color: var(--h26-accent-700);
}

body.single-event .msad-h26__admin-btn--decline:hover,
body.single-event .msad-h26__admin-btn--decline:focus-visible,
body.single-post .msad-h26__admin-btn--decline:hover,
body.single-post .msad-h26__admin-btn--decline:focus-visible,
body.single-msad_video .msad-h26__admin-btn--decline:hover,
body.single-msad_video .msad-h26__admin-btn--decline:focus-visible {
	background: var(--h26-band);
	color: var(--h26-accent-700);
}

body.single-event .msad-h26__admin-btn--delete,
body.single-post .msad-h26__admin-btn--delete,
body.single-msad_video .msad-h26__admin-btn--delete {
	background: transparent;
	color: var(--h26-danger);
}

body.single-event .msad-h26__admin-btn--delete:hover,
body.single-event .msad-h26__admin-btn--delete:focus-visible,
body.single-post .msad-h26__admin-btn--delete:hover,
body.single-post .msad-h26__admin-btn--delete:focus-visible,
body.single-msad_video .msad-h26__admin-btn--delete:hover,
body.single-msad_video .msad-h26__admin-btn--delete:focus-visible {
	background: var(--h26-danger-100);
	color: var(--h26-danger-700);
}

@media (max-width: 640px) {
	body.single-event .msad-h26__admin-actions,
	body.single-post .msad-h26__admin-actions,
	body.single-msad_video .msad-h26__admin-actions {
		flex-wrap: wrap;
		width: 100%;
	}

	body.single-event .msad-h26__admin-btn,
	body.single-post .msad-h26__admin-btn,
	body.single-msad_video .msad-h26__admin-btn {
		flex: 1 1 50%;
		width: auto;
		border-bottom: 1px solid var(--h26-border);
	}
}

/* Yellow "not visible to the public yet" banner -- shown right under the
   hero, only to managers, only while the item is a draft (see
   msad_h26_visibility_banner() in inc/admin-quick-actions-2026.php). Same
   solid yellow + on-accent text as the Unpublish button, deliberately
   loud/impossible to miss. Rounded corners + margin on every side (not
   flush/full-bleed against the hero) and constrained to the same
   max-width as the rest of the content column, matching the Directory
   listing's banner (see .msad-h26__visibility-banner in directory.css --
   that page has no hero to sit flush against, and this banner adopted its
   card look here too instead of the other way around). */
.msad-h26__visibility-banner {
	max-width: var(--h26-max);
	margin: 24px auto 20px;
	padding: 5px var(--h26-gutter);
	background: var(--h26-band);
	color: var(--h26-accent-700);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	border: 1px solid var(--h26-border);
	border-radius: var(--radius-md, 8px);
}

.msad-h26__visibility-banner + .msad-h26__visibility-banner {
	margin-top: 0;
}

.msad-h26__visibility-banner + .msad-h26__admin-actions {
	margin-top: 24px;
}

/* Events only -- "This event has been cancelled." Same everything as the
   yellow visibility banner (position, spacing, size, soft tint + border
   instead of a solid loud fill), just red instead of amber. */
.msad-h26__visibility-banner--cancelled {
	background: var(--h26-danger-100);
	color: var(--h26-danger-700);
}

/* Sits just under the hero now (moved out of it -- see
   inc bricks templates), on the page's plain white background, so this
   uses the same light-background treatment as the Directory listing's
   "← Back to Directory" link (assets/css/directory.css) instead of the
   light-on-navy colours a hero-nested link would need. */
.msad-h26__back-row {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 24px var(--h26-gutter) 0;
}

.msad-h26__art-back {
	font-weight: 700;
	font-size: 15px;
	color: var(--h26-sky-700);
	padding-bottom: 4px;
	box-shadow: inset 0 0 0 transparent;
	transition: box-shadow var(--h26-transition), color var(--h26-transition);
}

.msad-h26__art-back:hover,
.msad-h26__art-back:focus-visible {
	color: var(--h26-navy);
	box-shadow: inset 0 -2px 0 var(--h26-navy);
}

.msad-h26__art-kicker {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--h26-accent);
	margin-top: 26px;
}

.msad-h26__art-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: #fff;
	margin: 14px 0 0;
	max-width: 24ch;
	text-wrap: balance;
}

.msad-h26__art-title--event {
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1;
	max-width: 18ch;
	margin-top: 18px;
}

.msad-h26__art-byline {
	font-size: 14.5px;
	color: var(--h26-on-navy-strong);
	margin-top: 16px;
}

/* Event hero meta rows (date / venue) */
.msad-h26__art-meta {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 18px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--h26-on-navy-strong);
}

.msad-h26__art-meta i {
	color: var(--h26-accent);
	margin-right: 8px;
}

/* Body layout: content + (event) sidebar */
.msad-h26__art {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 22px var(--h26-gutter) 0;
}

/* News/Event singles get bottom breathing room "for free" from their
   trailing "More news"/"More events" section's own top padding -- the
   Single Video template has no such section after it, so without this the
   category pill sits right on top of the footer. */
.single-msad_video .msad-h26__art {
	padding-bottom: 52px;
}

.msad-h26__art--split {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 56px;
	align-items: start;
}

/* Video-first block (msad_video posts) */
.msad-h26__art-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #10131c;
	margin-bottom: 28px;
}

.msad-h26__art-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Portrait video (Facebook Reels via msad_h26_facebook_video_is_portrait(),
   or any other oEmbed provider -- e.g. YouTube Shorts -- reporting a taller-
   than-wide embed via the generic oembed_result filter, both in inc/
   news-2026.php) wrapped in this instead of stretching straight into the
   16:9 box above gets its own capped, centered 9:16 box, and :has()
   un-stretches the outer wrapper around it so it stops reserving landscape-
   shaped space. Ordinary landscape videos never get this class, so they're
   untouched by any of this. */
.msad-h26__art-video:has(> .msad-h26__video-portrait) {
	aspect-ratio: auto;
	background: none;
	display: flex;
	justify-content: center;
}

.msad-h26__video-portrait {
	position: static;
	width: 75%;
	max-width: 460px;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 28px;
}

.msad-h26__video-portrait iframe {
	position: static;
	width: 100%;
	height: 100%;
	border: 0;
}

.msad-h26__art-video-label {
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--h26-sky-700);
	margin-bottom: 10px;
}

/* Prose */
.msad-h26__art-content {
	font-size: 17px;
	line-height: 1.75;
	color: var(--h26-text);
	max-width: 68ch;
}

.msad-h26__art-content p {
	margin: 0 0 1.2em;
}

.msad-h26__art-content h2,
.msad-h26__art-content h3 {
	font-family: var(--h26-font-head);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--h26-navy);
	margin: 1.6em 0 0.6em;
}

.msad-h26__art-content h2 {
	font-size: 24px;
}

.msad-h26__art-content h3 {
	font-size: 19px;
}

.msad-h26__art-content a {
	color: var(--h26-sky-700);
	font-weight: 600;
}

.msad-h26__art-content a:hover {
	color: var(--h26-navy);
}

.msad-h26__art-content img {
	border-radius: 12px;
	height: auto;
}

.msad-h26__art-content ul,
.msad-h26__art-content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.msad-h26__art-content ul {
	list-style: disc;
}

.msad-h26__art-content ol {
	list-style: decimal;
}

.msad-h26__art-content blockquote {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--h26-navy);
	border-left: 4px solid var(--h26-accent);
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
}

/* Category pills under the article */
.msad-h26__art-tags {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--h26-border);
}

.msad-h26__art-tag {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1.5px solid var(--h26-cranberry);
	color: var(--h26-cranberry);
	font-weight: 700;
	font-size: 12.5px;
}

.msad-h26__art-tag:hover,
.msad-h26__art-tag:focus-visible {
	background: var(--h26-navy);
	border-color: var(--h26-navy);
	color: #fff;
}

/* Event sidebar card */
.msad-h26__art-side {
	position: sticky;
	top: 24px;
}

.msad-h26__art-side-card {
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 14px;
	padding: 26px 28px;
	box-shadow: 0 14px 34px rgba(15, 25, 52, 0.08);
}

.msad-h26__art-side-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--h26-border);
	font-size: 15px;
	line-height: 1.5;
	color: var(--h26-text);
}

.msad-h26__art-side-row:last-of-type {
	border-bottom: 0;
}

.msad-h26__art-side-row i {
	color: var(--h26-sky-700);
	margin-top: 3px;
}

.msad-h26__art-side-row strong {
	color: var(--h26-navy);
}

.msad-h26__art-side-card .msad-h26__btn--accent {
	width: 100%;
	min-height: 52px;
	font-size: 16px;
	margin-top: 16px;
}

/* Native Events Manager calendar choices inside the redesigned event card. */
.msad-h26__art-side-row:has(+ .msad-h26__event-calendar) {
	border-bottom: 0;
}

.msad-h26__calendar .em-event-add-to-calendar {
	background: var(--h26-cranberry);
	padding: 0 22px;
	border: 0;
	font-family: inherit;
	line-height: 1.4;
	gap: 12px;
	cursor: pointer;
}

.msad-h26__calendar .em-event-add-to-calendar:hover,
.msad-h26__calendar .em-event-add-to-calendar:focus-visible {
	background: var(--h26-cranberry-deep);
}

.msad-h26__calendar .em-event-add-to-calendar .em-icon-calendar {
	display: none;
}

.msad-h26__calendar .em-event-add-to-calendar::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.msad-h26__calendar .em-event-add-to-calendar[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(225deg);
}

.msad-h26__calendar .em-event-add-to-calendar:focus-visible {
	outline: 3px solid var(--h26-navy);
	outline-offset: 3px;
}

.msad-h26__calendar .em-event-add-to-calendar-content[aria-hidden="true"] {
	display: none;
}

.msad-h26__calendar .em-add-to-calendar-tooltip .tippy-box {
	border: 1px solid var(--h26-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(15, 25, 52, 0.14);
	font: inherit;
}

.msad-h26__calendar .em-add-to-calendar-tooltip .tippy-content {
	padding: 6px;
}

.msad-h26__calendar .em-event-add-to-calendar-content a {
	/* These two properties override Events Manager's own important rules. */
	padding: 11px 14px 11px 40px !important;
	color: var(--h26-navy) !important;
	width: 100%;
	min-height: 44px;
	border-radius: 6px;
	background-position: 12px 50%;
	font-size: 15px;
	line-height: 1.5;
}

.msad-h26__art-side-note {
	font-size: 13.5px;
	color: var(--h26-muted);
	text-align: center;
	margin-top: 10px;
}

/* Organizer strip (navy) under the sidebar card -- unused since the share
links below replaced it, kept in case a real organizer field is wired up
later. */
.msad-h26__art-side-org {
	background: var(--h26-navy);
	border-radius: 14px;
	padding: 22px 24px;
	margin-top: 16px;
}

.msad-h26__art-side-org-label {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--h26-accent);
}

.msad-h26__art-side-org-name {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: #fff;
	margin-top: 6px;
}

/* Share strip (navy) under the sidebar card -- same card treatment as the
organizer strip above. */
.msad-h26__art-side-share {
	background: var(--h26-navy);
	border-radius: 14px;
	padding: 13px 24px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.msad-h26__art-side-share-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 14.5px;
	color: #fff;
	white-space: nowrap;
	transition: color var(--h26-transition, 140ms ease);
}

.msad-h26__art-side-share-link i {
	font-size: 16px;
	color: #fff;
}

.msad-h26__art-side-share-link:hover,
.msad-h26__art-side-share-link:focus-visible {
	color: var(--h26-accent);
}

.msad-h26__art-side-share-sep {
	color: #fff;
	opacity: 0.5;
}

/* More news / related events */
.msad-h26__art-more {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 72px var(--h26-gutter) 0;
}

/* Responsive */
@media (max-width: 1024px) {
	.msad-h26__art--split {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.msad-h26__art-side {
		position: static;
	}

	/* Single Event: show the date/place card before the flyer on small screens,
	   keeping the existing Facebook/X share strip after the article. */
	.single-event #brxe-evbody {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-event #brxe-evbody > #brxe-evside {
		display: contents;
	}

	.single-event #brxe-evside > #brxe-evcard {
		grid-column: 1;
		grid-row: 1;
	}

	.single-event #brxe-evbody > #brxe-evcont {
		grid-column: 1;
		grid-row: 2;
	}

	.single-event #brxe-evside > #brxe-evshar {
		grid-column: 1;
		grid-row: 3;
		margin-top: 0;
	}

	/* Managers keep their existing toolbar above the details card on mobile. */
	.single-event #brxe-evbody[data-msad-event-admin-first] > [data-msad-event-admin-toolbar] {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
		font-size: 17px;
		line-height: 1.75;
		color: var(--h26-text);
	}

	.single-event [data-msad-event-admin-toolbar] p {
		margin: 0 0 1.2em;
	}

	.single-event #brxe-evbody[data-msad-event-admin-first] .msad-h26__admin-actions {
		margin-bottom: 0;
	}

	.single-event #brxe-evbody[data-msad-event-admin-first] #brxe-evcard {
		grid-row: 2;
	}

	.single-event #brxe-evbody[data-msad-event-admin-first] > #brxe-evcont {
		grid-row: 3;
	}

	.single-event #brxe-evbody[data-msad-event-admin-first] #brxe-evshar {
		grid-row: 4;
	}
}

@media (max-width: 720px) {
	.msad-h26__art-hero-inner {
		padding-top: 32px;
		padding-bottom: 36px;
	}

	.msad-h26__art {
		padding-top: 36px;
	}
}

/* Original event flyer on the event page (above the description). */
.msad-h26__art-flyer {
	margin: 0 0 26px;
}

.msad-h26__art-flyer img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
	cursor: zoom-in;
	border-radius: 14px;
	border: 1px solid var(--h26-border);
	box-shadow: 0 14px 34px rgba(15, 25, 52, 0.1);
}

/* Bricks' own image element wraps the <img> in an <a class="brxe-image
tag"> that is display:inline-block; width:auto by default -- it shrink-wraps
to the image's raw pixel size and left-aligns, which fights the margin:auto
centering above. Only relevant on the News template, where the featured
image is a real Bricks "image" element (link=lightbox); the Event page's
flyer is a plain the_post_thumbnail() <img> with no wrapping <a>. */
.msad-h26__art-flyer a.brxe-image {
	display: block;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
}

.msad-h26__art-flyer a.brxe-image img {
	max-width: 100%;
	width: auto;
	height: auto;
}