/**
 * Sites For Elks Engine — "Modern" site design.
 *
 * Loaded only when the Modern design is active (see
 * ELKS_Plugin::enqueue_frontend_assets()), in addition to the base
 * elks-frontend.css. Every rule is scoped under `body.elks-modern` so it
 * never touches a Classic site. Colors and fonts come entirely from the
 * existing --elks-color-* / --elks-font-* custom properties emitted by the
 * palette and font pickers, so both keep working identically here.
 *
 * Only the Modern header, footer, and Home page are styled for now; every
 * other page type still resolves to its Classic template (see
 * ELKS_Page_Templates::load_template()) and is styled by elks-frontend.css.
 */

/* ================================================================
 * TYPE SCALE — px equivalents of the Classic scale (see
 * elks-frontend.css), so Modern reads consistently at the same
 * semantic roles.
 *
 *   Card / Section Heading  clamp(18px, 2.2vw, 22px) / 600
 *   Sub-heading             18px / 600    (e.g. "Rates", Policy title)
 *   Lead / Intro            16px / 600    (one framing statement per page, e.g. Hall Rental reminder banner)
 *   Body                    15px / 400    (primary descriptive copy)
 *   Body-secondary          13px / 400    (compliance/meta notes)
 * ================================================================ */

/* Qualified with an extra `html` ancestor purely to raise specificity to
   (0,1,2) so this body background reliably beats GroupBrief's own
   body.elksgb-frontend (0,1,1) no matter which plugin's stylesheet loads later.
   GroupBrief's pages never carry .elks-modern, so they're unaffected. */
html body.elks-modern {
	margin: 0;
	background: var(--elks-color-bg);
	color: var(--elks-color-text);
	font-family: var(--elks-font-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Shared outer width for the Modern header, hero, footer, and page-header
   title, so they all track one number instead of four hardcoded copies. The
   narrower reading-column widths (interior content, prose columns) are a
   separate, deliberately tighter concern and are NOT keyed off this. */
body.elks-modern {
	--elks-modern-width: 1280px;
}

body.elks-modern h1,
body.elks-modern h2,
body.elks-modern h3 {
	font-family: var(--elks-font-heading);
	color: var(--elks-color-heading);
	line-height: 1.2;
	margin: 0;
}

body.elks-modern a {
	color: var(--elks-color-accent);
}

/* ---------------------------------------------------------------- *
 * Header — clean, light, and deliberately NOT sticky
 *
 * It used to be position:sticky, top:0, z-index:100. That has to stay
 * gone: this header is tall (logo, organization name, and a nav that
 * wraps to two rows on a site with enough pages — see applyNavRows()
 * in elks-frontend.js), and its height varies by site and by screen
 * width. Pinned, it covered whatever an in-page anchor scrolled to:
 * jumping to a section from the About page's jump menu landed on the
 * section's heading and then hid it, so the first thing visible was
 * mid-paragraph text from further down. Out of normal flow there is
 * no way to offset for that without measuring the header at runtime;
 * in flow, native anchor scrolling lands correctly on its own and
 * this matches how the Classic header has always behaved.
 * ---------------------------------------------------------------- */

body.elks-modern .elks-modern-header {
	background: color-mix(in srgb, var(--elks-color-bg) 92%, #ffffff);
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 35%, transparent);
	backdrop-filter: saturate(1.1) blur(6px);
}

body.elks-modern .elks-modern-header-inner {
	max-width: var(--elks-modern-width);
	margin: 0 auto;
	padding: 12px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Gap between the identity block and the nav. 24px was generous for a
	   header that is already two stacked rows. */
	gap: 14px;
}

body.elks-modern .elks-modern-identity {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: var(--elks-color-heading);
}

/* Wide/landscape logo (a wordmark): stack it above the name, centered, with a
   tighter gap than the side-by-side row default. Square and vertical logos
   keep the row above. */
body.elks-modern .elks-modern-identity-landscape {
	flex-direction: column;
	text-align: center;
	gap: 10px;
}

body.elks-modern .elks-modern-logo-img {
	display: block;
	max-width: 140px;
	/* The site's own 720px breakpoint has long treated 64px as plenty; 96px
	   here was the largest single contributor to the header's height.
	   max-width stays at 140px, so a wide logo is unaffected. */
	max-height: 72px;
	width: auto;
	height: auto;
	border-radius: 6px;
}

body.elks-modern .elks-modern-org-name-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.elks-modern .elks-modern-org-name {
	font-family: var(--elks-font-heading);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

body.elks-modern .elks-modern-org-name-line2 {
	font-family: var(--elks-font-heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--elks-color-heading);
	margin-top: 2px;
}

/* Nav — same menu markup as Classic, presented as a light horizontal row. */
body.elks-modern .elks-modern-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* Row gap only -- the 22px between items is unchanged. Only shows up on
	   a site with enough pages for the nav to wrap. */
	gap: 4px 22px;
}

body.elks-modern .elks-modern-nav-menu li {
	margin: 0;
}

body.elks-modern .elks-modern-nav-menu a {
	display: inline-block;
	padding: 6px 2px;
	text-decoration: none;
	color: var(--elks-color-text);
	font-size: 15px;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

body.elks-modern .elks-modern-nav-menu a:hover,
body.elks-modern .elks-modern-nav-menu .current-menu-item > a {
	color: var(--elks-color-accent);
	border-bottom-color: var(--elks-color-accent);
}

/* ---------------------------------------------------------------- *
 * Home — long-scroll, section-stacked
 * ---------------------------------------------------------------- */

body.elks-modern .elks-modern-home {
	display: block;
}

/* Hero — capped at the header's own width, framed with a border and shadow
   rather than full-bleed. Carousel stays a fixed-height crop so every slide
   lines up consistently as it rotates; single photo and video are scaled by
   their own aspect ratio instead, so neither ever crops. */
body.elks-modern .elks-modern-hero {
	position: relative;
	box-sizing: border-box; /* 100% + 32px padding each side overflowed the
	                           viewport by exactly 64px -- these stylesheets
	                           carry no global box-sizing reset (see
	                           elks-frontend.css), so this rule needs its own. */
	width: 100%;
	overflow: hidden;
	padding: 32px 32px 0;
}

body.elks-modern .elks-modern-hero-media {
	width: 100%;
	max-width: var(--elks-modern-width);
	margin: 0 auto;
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 35%, transparent);
	box-shadow: 0 18px 48px -24px color-mix(in srgb, var(--elks-color-heading) 45%, transparent);
	overflow: hidden;
}

body.elks-modern .elks-modern-hero-media img,
body.elks-modern .elks-modern-hero-media .elks-carousel-img,
body.elks-modern .elks-modern-hero-media .elks-home-media-img {
	display: block;
	width: 100%;
	height: clamp(320px, 56vh, 620px);
	object-fit: cover;
}

/* Single photo only: no cropping, scaled by its own aspect ratio. */
body.elks-modern .elks-modern-hero-single_photo .elks-modern-hero-media img {
	height: auto;
	object-fit: initial;
}

/* Video keeps its natural aspect ratio, centered, rather than being cropped
   -- a different technique than the padding-percentage responsive-embed
   trick the base rule (elks-frontend.css) uses for Classic, so this block has
   to explicitly reset every property that trick depends on.

   Two of them were being silently inherited. The flat padding below
   overrides the base rule's padding-bottom: 56.25% but never its
   height: 0, so the container collapsed to just its own top/bottom
   padding; and the base rule's position: absolute on the embed -- meant
   to fill a percentage-padded box that does not exist here -- left the
   embed rendering at its correct full size and then being clipped away
   to a sliver by the collapsed container's overflow: hidden.

   The embed selector deliberately lists the same elements the base rule
   does (iframe, embed, object) plus video: resetting only some of them
   would leave exactly this bug in place for whichever oEmbed provider
   returns one of the others. YouTube and Vimeo both return an iframe
   today, so the extra two are insurance, not a live fix. */
body.elks-modern .elks-modern-hero-media.elks-home-media-video {
	height: auto;
	padding: 24px 32px;
}

body.elks-modern .elks-modern-hero-media.elks-home-media-video iframe,
body.elks-modern .elks-modern-hero-media.elks-home-media-video embed,
body.elks-modern .elks-modern-hero-media.elks-home-media-video object,
body.elks-modern .elks-modern-hero-media.elks-home-media-video video {
	position: static;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* The hero carousel needs no Modern-specific layout: .elks-modern-hero-media
   already clips, and the image rule above already fixes its height and
   object-fit. The old display:flex track and min-width slides belonged to
   the horizontal-scroll model this carousel no longer uses, and would have
   outranked the base crossfade rules; the prev/next rules styled buttons the
   markup no longer renders at all. */

body.elks-modern .elks-modern-hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 32px 32px;
	background: linear-gradient(to top, color-mix(in srgb, var(--elks-color-heading) 80%, transparent), transparent);
	pointer-events: none;
}

body.elks-modern .elks-modern-hero-title {
	max-width: var(--elks-modern-width);
	margin: 0 auto;
	color: var(--elks-color-on-heading);
	font-size: clamp(30px, 5vw, 52px);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* When no media is configured, the hero collapses to a simple text band. */
body.elks-modern .elks-modern-hero-none {
	padding: 0;
	background: color-mix(in srgb, var(--elks-color-heading) 16%, var(--elks-color-bg));
}

body.elks-modern .elks-modern-hero-none .elks-modern-hero-overlay {
	position: static;
	background: none;
	padding: clamp(56px, 10vw, 120px) 32px;
	text-align: center;
}

body.elks-modern .elks-modern-hero-none .elks-modern-hero-title {
	color: var(--elks-color-heading);
	text-shadow: none;
}

/* Section rhythm — generous whitespace, one clear top-to-bottom flow. */
body.elks-modern .elks-modern-sections {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 32px;
}

body.elks-modern .elks-modern-section {
	padding: clamp(48px, 8vw, 96px) 0;
}

body.elks-modern .elks-modern-section + .elks-modern-section {
	border-top: 1px solid color-mix(in srgb, var(--elks-color-muted) 30%, transparent);
}

body.elks-modern .elks-modern-welcome-content {
	font-size: 18px;
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-welcome-content h2 {
	font-size: clamp(24px, 3.4vw, 32px);
	margin: 0 0 18px;
}

body.elks-modern .elks-modern-welcome-content p {
	margin: 0 0 18px;
}

/* Visit Us — address / phone / hours together in one clean card. */
body.elks-modern .elks-modern-visit-card {
	background: color-mix(in srgb, var(--elks-color-bg) 85%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 32%, transparent);
	border-radius: 16px;
	padding: clamp(28px, 5vw, 44px);
	box-shadow: 0 10px 40px -24px color-mix(in srgb, var(--elks-color-heading) 60%, transparent);
}

body.elks-modern .elks-modern-visit-heading {
	font-size: clamp(22px, 3vw, 28px);
	margin: 0 0 24px;
}

body.elks-modern .elks-modern-visit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 28px;
}

body.elks-modern .elks-modern-visit-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--elks-color-accent);
	margin-bottom: 8px;
}

body.elks-modern .elks-modern-visit-value {
	display: block;
	font-size: 17px;
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.elks-modern .elks-modern-hours-list li {
	margin: 0 0 6px;
	font-size: 16px;
}

body.elks-modern .elks-modern-hours-label {
	font-weight: 600;
	color: var(--elks-color-heading);
}

/* Disclaimer — small print, but set apart in a subtle tinted card so it
   doesn't read as flat text lost on the page background. A lighter tint
   than .elks-modern-card, and deliberately not a warning-box treatment. */
body.elks-modern .elks-modern-disclaimer {
	max-width: 760px;
	margin: 0 auto clamp(48px, 8vw, 88px);
	padding: 18px 24px;
	background: color-mix(in srgb, var(--elks-color-heading) 12%, var(--elks-color-bg));
	border-radius: 12px;
	color: var(--elks-color-text);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

/* ---------------------------------------------------------------- *
 * Footer — a bit more considered than a bare copyright line
 * ---------------------------------------------------------------- */

body.elks-modern .elks-modern-footer {
	background: color-mix(in srgb, var(--elks-color-heading) 92%, #000000);
	color: var(--elks-color-on-heading);
	margin-top: 0;
	/* Cancels .elks-site-footer's own padding: 1.5rem 1rem (elks-frontend.css).
	   Every Modern footer element carries BOTH classes at once -- see
	   templates/modern/partials/elks-footer.php -- so that padding was not
	   being replaced by the Modern layout, it was stacking underneath
	   .elks-modern-footer-inner's, which supplies the real padding one level
	   down. The doubling was most of the footer's excess height.

	   Classic is untouched by this: its footer carries only
	   .elks-site-footer, so it never matches this selector. */
	padding: 0;
}

body.elks-modern .elks-modern-footer-inner {
	max-width: var(--elks-modern-width);
	margin: 0 auto;
	padding: 32px 24px 28px;
	text-align: center;
}

body.elks-modern .elks-modern-footer-contact {
	margin: 10px 0 0;
	font-size: 15px;
	color: color-mix(in srgb, var(--elks-color-on-heading) 82%, transparent);
}

body.elks-modern .elks-modern-footer-contact a {
	color: inherit;
	text-decoration: none;
}

body.elks-modern .elks-modern-footer-sep {
	margin: 0 10px;
	opacity: 0.6;
}

body.elks-modern .elks-modern-footer-links {
	margin: 14px 0 0;
	font-size: 14px;
}

body.elks-modern .elks-modern-footer-links a {
	color: var(--elks-color-on-heading);
	text-decoration: none;
	opacity: 0.9;
}

body.elks-modern .elks-modern-footer-links a:hover {
	opacity: 1;
	text-decoration: underline;
}

body.elks-modern .elks-modern-footer-extra {
	margin: 16px auto 0;
	max-width: 60ch;
	font-size: 14px;
	color: color-mix(in srgb, var(--elks-color-on-heading) 80%, transparent);
}

/* Now the footer's first line, not its last: no top margin, and enough
   presence to be read rather than skimmed past. Deliberately not a heading
   font and not bold -- this is a legal line, not a wordmark. */
body.elks-modern .elks-modern-footer-copyright {
	margin: 0;
	font-size: 15px;
	color: color-mix(in srgb, var(--elks-color-on-heading) 88%, transparent);
}

/* ---------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------- */

@media (max-width: 720px) {
	body.elks-modern .elks-modern-header-inner {
		padding: 14px 20px;
	}
	body.elks-modern .elks-modern-sections {
		padding: 0 20px;
	}
	body.elks-modern .elks-modern-nav-menu {
		gap: 4px 16px;
	}
	body.elks-modern .elks-modern-identity {
		gap: 10px;
	}
	body.elks-modern .elks-modern-logo-img {
		max-width: 90px;
		max-height: 64px;
	}
	body.elks-modern .elks-modern-org-name {
		font-size: 20px;
	}
	body.elks-modern .elks-modern-org-name-line2 {
		font-size: 16px;
	}
}

/* ================================================================ *
 * Interior pages (everything except Home) — Contact, Leadership,
 * History, Philanthropy. Shared page-header band + a reusable card.
 * ================================================================ */

/* Page-header band — same tint as Home's no-media hero, so interior
   pages read as clearly related to Home rather than a new language. */
body.elks-modern .elks-modern-page-header {
	background: color-mix(in srgb, var(--elks-color-heading) 16%, var(--elks-color-bg));
	/* Height only: the horizontal 32px, the centring and the title's own
	   font-size are deliberately unchanged. The old ceiling put 84px above
	   and below a single line of text, which read as a banner rather than a
	   label. The mobile block further down still overrides left/right
	   padding and is untouched. */
	padding: clamp(20px, 2.5vw, 32px) 32px;
	text-align: center;
}

body.elks-modern .elks-modern-page-header-title {
	max-width: var(--elks-modern-width);
	margin: 0 auto;
	color: var(--elks-color-heading);
	font-size: clamp(28px, 4.5vw, 46px);
}

/* Interior content wrapper — a touch wider than Home's reading column
   to hold the two-column layouts, with the same generous rhythm. */
body.elks-modern .elks-modern-interior {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 76px) 32px clamp(56px, 8vw, 96px);
}

body.elks-modern .elks-modern-intro {
	font-size: 18px;
	color: var(--elks-color-text);
	margin: 0 0 40px;
}

body.elks-modern .elks-modern-intro p {
	margin: 0 0 18px;
}

/* Reusable card — same visual language as Home's .elks-modern-visit-card
   (rounded, subtle border, soft palette-driven shadow), factored out so
   every interior page shares one definition instead of copy-pasting. */
body.elks-modern .elks-modern-card {
	background: color-mix(in srgb, var(--elks-color-bg) 85%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 32%, transparent);
	border-radius: 16px;
	padding: clamp(24px, 4vw, 40px);
	box-shadow: 0 10px 40px -24px color-mix(in srgb, var(--elks-color-heading) 60%, transparent);
}

body.elks-modern .elks-modern-card + .elks-modern-card {
	margin-top: 24px;
}

/* ---- Contact ---- */
body.elks-modern .elks-modern-contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

body.elks-modern .elks-modern-contact-detail {
	margin: 0 0 14px;
	font-size: 16px;
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-contact-detail a {
	color: var(--elks-color-accent);
}

body.elks-modern .elks-modern-contact-map-wrap {
	margin-top: 22px;
}

/* ---- Leadership ---- */
/* Sub-heading tier. */
body.elks-modern .elks-modern-roster-heading {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 20px;
}

body.elks-modern .elks-modern-officer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.elks-modern .elks-modern-officer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 26%, transparent);
	/* Body tier for the whole row, so the position label beside the name --
	   Body-emphasis, which has no size of its own -- reads at body size too. */
	font-size: 15px;
}

body.elks-modern .elks-modern-officer:last-child {
	border-bottom: 0;
}

/* Body-emphasis tier: font-size deliberately unset, so it inherits the row's
   Body size above (see the type scale in elks-frontend.css). */
body.elks-modern .elks-modern-officer-position {
	font-weight: 600;
	color: var(--elks-color-heading);
}

/* Body tier. */
body.elks-modern .elks-modern-officer-name {
	font-size: 15px;
	font-weight: 400;
	color: var(--elks-color-text);
	text-align: right;
}

/* ---- Two-column split (History + Philanthropy) ---- */
body.elks-modern .elks-modern-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

/* Sub-heading tier. */
body.elks-modern .elks-modern-column-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--elks-color-accent);
}

body.elks-modern .elks-modern-column-empty {
	color: var(--elks-color-muted);
	font-size: 15px;
}

/* Blocks — optional photo left/right, title/text body. */
body.elks-modern .elks-modern-block.elks-modern-block-has-photo {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	align-items: start;
}

body.elks-modern .elks-modern-block-photo-right.elks-modern-block-has-photo {
	grid-template-columns: 1fr 120px;
}

body.elks-modern .elks-modern-block-photo-right .elks-modern-block-photo {
	order: 2;
}

body.elks-modern .elks-modern-block-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Sub-heading tier: a block's title sits under its column's own Sub-heading,
   so it takes that tier rather than Card / Section Heading's larger size. */
body.elks-modern .elks-modern-block-title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-block-year {
	display: inline-block;
	margin-right: 10px;
	color: var(--elks-color-accent);
	font-weight: 700;
}

body.elks-modern .elks-modern-block-text {
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-block-text p {
	margin: 0 0 14px;
}

body.elks-modern .elks-modern-empty-note {
	color: var(--elks-color-muted);
	font-size: 15px;
}

body.elks-modern .elks-modern-empty-note a {
	color: var(--elks-color-accent);
}

@media (max-width: 760px) {
	body.elks-modern .elks-modern-contact-layout,
	body.elks-modern .elks-modern-columns {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	body.elks-modern .elks-modern-interior {
		padding-left: 20px;
		padding-right: 20px;
	}
	body.elks-modern .elks-modern-page-header {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ================================================================ *
 * Interior pages, batch 3 — Membership, Volunteer, Entertainment.
 * Shared button component + a couple of page-specific helpers.
 * ================================================================ */

/* Reusable button — primary (accent-filled) and secondary (outlined),
   both palette-driven, matching the visual weight of the card and
   page-header components. */
body.elks-modern .elks-modern-button {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--elks-color-accent);
	color: var(--elks-color-on-accent);
	font-family: var(--elks-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid var(--elks-color-accent);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	cursor: pointer;
}

body.elks-modern .elks-modern-button:hover {
	background: color-mix(in srgb, var(--elks-color-accent) 82%, #000000);
	border-color: color-mix(in srgb, var(--elks-color-accent) 82%, #000000);
	color: var(--elks-color-on-accent);
}

body.elks-modern .elks-modern-button-secondary {
	background: transparent;
	color: var(--elks-color-accent);
	border-color: var(--elks-color-accent);
}

body.elks-modern .elks-modern-button-secondary:hover {
	background: color-mix(in srgb, var(--elks-color-accent) 12%, transparent);
	color: var(--elks-color-accent);
	border-color: var(--elks-color-accent);
}

/* ---- Membership ---- */
body.elks-modern .elks-modern-cta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

body.elks-modern .elks-modern-cta-area {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

body.elks-modern .elks-modern-cta-desc {
	margin: 0;
	font-size: 16px;
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-cta-placeholder {
	margin: 0;
	color: var(--elks-color-muted);
	font-size: 15px;
	font-style: italic;
}

/* ---- Volunteer ---- */
body.elks-modern .elks-modern-roles-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.elks-modern .elks-modern-roles-list li {
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 26%, transparent);
}

body.elks-modern .elks-modern-roles-list li:last-child {
	border-bottom: 0;
}

body.elks-modern .elks-modern-role-name {
	display: block;
	font-weight: 600;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-role-description {
	display: block;
	margin-top: 4px;
	color: var(--elks-color-text);
}

/* ---- Shared: an embedded form inside a Modern card ---- */
body.elks-modern .elks-modern-form-section {
	margin-top: 40px;
}

@media (max-width: 760px) {
	body.elks-modern .elks-modern-cta-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ================================================================ *
 * Interior pages, batch 4 — Simple Content, Links, Photo Gallery.
 * (Simple Content needs no page-specific CSS — it reuses the shared
 * .elks-modern-interior / .elks-modern-intro wrappers as-is.)
 * ================================================================ */

/* ---- Links — clean card-style rows rather than a bare bulleted list. */
body.elks-modern .elks-modern-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

body.elks-modern .elks-modern-link-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--elks-color-bg) 85%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 32%, transparent);
	color: var(--elks-color-heading);
	text-decoration: none;
	font-weight: 600;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.elks-modern .elks-modern-link-row:hover {
	border-color: var(--elks-color-accent);
	box-shadow: 0 8px 30px -20px color-mix(in srgb, var(--elks-color-heading) 60%, transparent);
}

body.elks-modern .elks-modern-link-row::after {
	content: "\2197"; /* ↗ */
	margin-left: auto;
	color: var(--elks-color-accent);
	font-weight: 700;
}

/* ---- Photo Gallery — restyled grid/hover. The functional classes,
   IDs and data-attributes are left intact (see the template); these
   rules only override presentation and never touch `display` on the
   items, so the base .elks-photo-gallery-item-hidden { display:none }
   hide/show mechanism the load-more JS relies on keeps working. */
body.elks-modern .elks-photo-gallery-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 8px;
}

@media (max-width: 600px) {
	body.elks-modern .elks-photo-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

body.elks-modern .elks-photo-gallery-item {
	border-radius: 12px;
}

body.elks-modern .elks-photo-gallery-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.3s ease;
}

body.elks-modern .elks-photo-gallery-item:hover .elks-photo-gallery-img {
	transform: scale(1.05);
}

body.elks-modern .elks-photo-gallery-load-more-wrap {
	margin-top: 28px;
}

/* Small "Click to Enlarge" hint shown once above each group of
   lightbox-enabled thumbnails (Photo Gallery grid, Hall Rental floor
   plan + hall photos) — small, muted, unobtrusive. No JS involvement. */
body.elks-modern .elks-modern-lightbox-hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--elks-color-muted);
}

/* ================================================================ *
 * Interior pages, batch 5 (final) — Food & Beverage, Hall Rental,
 * Calendar. Completes the Modern rollout across all 14 page types.
 * ================================================================ */

/* ---- Shared helpers ---- */
body.elks-modern .elks-modern-reminder {
	margin: 0 0 24px;
	padding: 14px 20px;
	border-left: 3px solid var(--elks-color-accent);
	background: color-mix(in srgb, var(--elks-color-accent) 8%, transparent);
	border-radius: 8px;
	color: var(--elks-color-text);
	font-size: 16px;
	font-weight: 600;
}

body.elks-modern .elks-modern-compliance {
	margin: 0 0 32px;
	color: var(--elks-color-muted);
	font-size: 13px;
	line-height: 1.6;
}

body.elks-modern .elks-modern-compliance p {
	margin: 0;
}

body.elks-modern .elks-modern-compliance a {
	color: var(--elks-color-accent);
}

body.elks-modern .elks-modern-card-title {
	font-size: clamp(18px, 2.2vw, 22px);
	margin: 0 0 18px;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-section-heading {
	font-size: clamp(18px, 2.2vw, 22px);
	margin: 0 0 16px;
	color: var(--elks-color-heading);
}

/* Sidebar/main split, shared by Food & Beverage and Hall Rental. The
   columns space their own direct children via the flex gap, so the
   generic card+card top-margin is cancelled for those direct children
   only (nested card lists like Specials keep it). */
body.elks-modern .elks-modern-split {
	display: grid;
	grid-template-columns: minmax(280px, 340px) 1fr;
	gap: 32px;
	align-items: start;
}

body.elks-modern .elks-modern-split-sidebar,
body.elks-modern .elks-modern-split-main {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

body.elks-modern .elks-modern-split-sidebar > .elks-modern-card + .elks-modern-card,
body.elks-modern .elks-modern-split-main > .elks-modern-card + .elks-modern-card {
	margin-top: 0;
}

/* ---- Food & Beverage: Specials ---- */
body.elks-modern .elks-modern-special {
	padding: 18px;
}

body.elks-modern .elks-modern-special-has-photo .elks-modern-special-head {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 14px;
	align-items: start;
}

body.elks-modern .elks-modern-special-img {
	width: 64px;
	height: 64px;
	max-width: 64px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: transparent;
	border-radius: 8px;
	flex-shrink: 0;
}

body.elks-modern .elks-modern-special-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin: 0;
}

body.elks-modern .elks-modern-special-name {
	min-width: 0;
	font-weight: 600;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-special-price {
	font-weight: 700;
	color: var(--elks-color-accent);
	white-space: nowrap;
}

body.elks-modern .elks-modern-special-schedule {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--elks-color-accent);
}

body.elks-modern .elks-modern-special-desc {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--elks-color-text);
}

/* ---- Food & Beverage: Menu ---- */
body.elks-modern .elks-modern-menu-card > *:first-child {
	margin-top: 0;
}

/* Category photo (if any) + title sit inline as a flex row. The unified
   top/bottom spacing lives on this wrapper so .elks-modern-menu-card >
   *:first-child keeps zeroing the first category's top margin exactly as
   before; the photo and title are flex children with their own margins
   zeroed. */
body.elks-modern .elks-modern-menu-section-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-right: 16px;
	margin: 28px 0 14px;
}

/* An inline thumbnail beside the category title — object-fit: contain on
   a transparent background so it fits without cropping and the card shows
   through any letterboxing. Kept a touch smaller than Classic's 120px. */
/* The Category's own optional description, under its heading. */
body.elks-modern .elks-modern-menu-section-desc {
	margin: 0 0 14px;
	color: var(--elks-color-muted);
	font-size: 0.95rem;
}

body.elks-modern .elks-modern-menu-section-photo {
	width: 112px;
	height: 112px;
	object-fit: contain;
	background: transparent;
	border-radius: 8px;
	flex-shrink: 0;
	margin: 0 0 0 auto;
}

body.elks-modern .elks-modern-menu-section-title {
	font-size: clamp(22px, 2.8vw, 28px);
	margin: 0;
	padding-left: 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--elks-color-accent);
}

body.elks-modern .elks-modern-menu-items {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

body.elks-modern .elks-modern-menu-item {
	padding: 16px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 24%, transparent);
}

body.elks-modern .elks-modern-menu-items > .elks-modern-menu-item:last-child {
	border-bottom: 0;
}

body.elks-modern .elks-modern-menu-item-has-photo {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 16px;
	align-items: start;
}

body.elks-modern .elks-modern-menu-item-img {
	width: 72px;
	height: 72px;
	max-width: 72px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: transparent;
	border-radius: 8px;
	flex-shrink: 0;
}

body.elks-modern .elks-modern-menu-item-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

body.elks-modern .elks-modern-menu-item-name {
	min-width: 0;
	margin: 0;
	font-size: 17px;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-menu-item-price {
	font-weight: 700;
	color: var(--elks-color-accent);
	white-space: nowrap;
}

body.elks-modern .elks-modern-menu-item-desc {
	margin: 6px 0 0;
	color: var(--elks-color-text);
	font-size: 15px;
}

body.elks-modern .elks-modern-menu-item-variants {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

body.elks-modern .elks-modern-menu-item-variant {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 0;
	font-size: 15px;
}

body.elks-modern .elks-modern-menu-item-variant-label {
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-menu-item-variant-price {
	font-weight: 600;
	color: var(--elks-color-accent);
}

body.elks-modern .elks-modern-menu-item-addons {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	color: var(--elks-color-muted);
	font-size: 13px;
}

body.elks-modern .elks-modern-menu-item-addons li {
	margin: 0 0 2px;
}

/* ---- Hall Rental ---- */
body.elks-modern .elks-modern-rental-floor-plan {
	margin: 0 0 16px;
}

body.elks-modern .elks-modern-rental-photo-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Two or more rental spaces: each is its own card, so a visitor reads one
   room's details, photos and rates as a single unit before the next -- see
   templates/modern/elks-page-hall-rental.php. The card itself is the existing
   .elks-modern-card; these rules only handle what sits inside it. */
body.elks-modern .elks-modern-rental-space-name {
	margin-bottom: 0.75rem;
}

body.elks-modern .elks-modern-rental-space-rates {
	font-family: var( --elks-font-heading );
	color: var( --elks-color-heading );
	font-size: 18px;
	font-weight: 600;
	margin: 1.5rem 0 0.5rem;
}

body.elks-modern .elks-modern-rental-shared-fees-note {
	margin-top: 0;
}

body.elks-modern .elks-modern-rental-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

body.elks-modern .elks-modern-rental-photo-item .elks-modern-rental-photo-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

body.elks-modern .elks-modern-facility-list,
body.elks-modern .elks-modern-amenities-list,
body.elks-modern .elks-modern-rental-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.elks-modern .elks-modern-facility-list li {
	padding: 6px 0;
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-amenities-list li {
	padding: 10px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 24%, transparent);
}

body.elks-modern .elks-modern-amenities-list li:last-child {
	border-bottom: 0;
}

body.elks-modern .elks-modern-amenity-name {
	display: block;
	font-weight: 600;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-amenity-notes {
	display: block;
	color: var(--elks-color-text);
	font-size: 14px;
}

body.elks-modern .elks-modern-rental-contact-invite {
	margin: 0 0 12px;
	color: var(--elks-color-text);
}

body.elks-modern .elks-modern-rental-contact-list li {
	padding: 4px 0;
}

body.elks-modern .elks-modern-rental-contact-name {
	font-weight: 600;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-rental-contact-list a {
	color: var(--elks-color-accent);
}

/* The relocated "Questions About Your Event?" contact card now renders as
   a full-width band below the two-column split, so it no longer sits next
   to another .elks-modern-card — the adjacent-sibling margin rule can't
   fire. This restores consistent separation from the split above it, in
   the same 32px rhythm as .elks-modern-compliance's own bottom margin. */
body.elks-modern .elks-modern-contact-band {
	margin-top: 32px;
}

/* On narrow screens the three-column fee table scrolls horizontally
   inside this wrapper rather than crushing its columns — the table keeps
   a sensible minimum width and the wrapper clips/scrolls. */
body.elks-modern .elks-modern-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.elks-modern .elks-modern-fees-table {
	width: 100%;
	min-width: 440px;
	border-collapse: collapse;
}

body.elks-modern .elks-modern-fees-table th {
	text-align: left;
	padding: 12px 16px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--elks-color-muted);
	border-bottom: 2px solid color-mix(in srgb, var(--elks-color-muted) 30%, transparent);
}

body.elks-modern .elks-modern-fees-table td {
	padding: 14px 16px;
	color: var(--elks-color-text);
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 20%, transparent);
}

body.elks-modern .elks-modern-fees-table tr:last-child td {
	border-bottom: 0;
}

body.elks-modern .elks-modern-policy {
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 22%, transparent);
}

body.elks-modern .elks-modern-policy:last-child {
	border-bottom: 0;
}

body.elks-modern .elks-modern-policy-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--elks-color-heading);
}

body.elks-modern .elks-modern-policy-desc {
	margin: 0;
	font-size: 15px;
	color: var(--elks-color-text);
}

/* ---- Calendar — markup is verbatim from Classic (JS-driven); only
   colors/spacing/typography change here, scoped so Classic is untouched.
   The base .elks-calendar-* rules already use the palette variables, so
   these overrides only add Modern polish (rounded surfaces, the outlined
   nav buttons, roomier day cells, a card-style popover). The functional
   base rules — including .elks-calendar-carousel's popover space and the
   [hidden] section/popover display rules — are left to apply as-is. */
body.elks-modern .elks-calendar-carousel-nav {
	margin-bottom: 20px;
}

body.elks-modern .elks-calendar-carousel-prev,
body.elks-modern .elks-calendar-carousel-next {
	background: transparent;
	color: var(--elks-color-accent);
	border: 2px solid var(--elks-color-accent);
	border-radius: 999px;
	padding: 8px 20px;
	font-weight: 600;
	font-size: 15px;
	transition: background 0.15s ease;
}

body.elks-modern .elks-calendar-carousel-prev:hover,
body.elks-modern .elks-calendar-carousel-next:hover {
	background: color-mix(in srgb, var(--elks-color-accent) 12%, transparent);
}

body.elks-modern .elks-calendar-grid-section h2 {
	font-size: clamp(20px, 2.6vw, 26px);
	margin-bottom: 16px;
	text-align: center;
}

/* The rounded/clipped border lives on this wrapper div, not the <table>
   itself — border-radius + overflow:hidden + border-collapse:collapse on a
   table clips the table's own right/bottom edge in most browsers, leaving
   only some sides visible. The wrapper sidesteps that; the table keeps its
   base border-collapse/table-layout untouched. */
body.elks-modern .elks-modern-calendar-table-wrap {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 30%, transparent);
}

body.elks-modern .elks-calendar-month-grid th {
	padding: 10px 6px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.elks-modern .elks-calendar-month-grid-day,
body.elks-modern .elks-calendar-month-grid-blank {
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 22%, transparent);
	background: color-mix(in srgb, var(--elks-color-bg) 90%, #ffffff);
}

body.elks-modern .elks-calendar-month-grid-day {
	height: 5rem;
	padding: 8px;
}

body.elks-modern .elks-calendar-month-grid-event {
	border-radius: 6px;
	padding: 2px 6px;
	margin-bottom: 3px;
	font-size: 11px;
}

body.elks-modern .elks-calendar-popover {
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 32%, transparent);
	box-shadow: 0 12px 40px -18px color-mix(in srgb, var(--elks-color-heading) 60%, transparent);
	padding: 16px;
}

@media (max-width: 860px) {
	body.elks-modern .elks-modern-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ================================================================ *
 * Forms — Contact, Volunteer, Entertainment. The form markup comes
 * from the shared handlers (untouched); these rules just give the
 * plain inherited fields Modern's rounded, comfortable treatment with
 * an accent focus ring. Checkboxes/radios stay native.
 * ================================================================ */
body.elks-modern input[type="text"],
body.elks-modern input[type="email"],
body.elks-modern input[type="tel"],
body.elks-modern input[type="url"],
body.elks-modern input[type="number"],
body.elks-modern input[type="date"],
body.elks-modern textarea,
body.elks-modern select {
	padding: 11px 14px;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 45%, transparent);
	border-radius: 9px;
	background: color-mix(in srgb, var(--elks-color-bg) 92%, #ffffff);
	color: var(--elks-color-text);
	font-family: var(--elks-font-body);
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.elks-modern textarea {
	min-height: 120px;
}

body.elks-modern input[type="text"]:focus,
body.elks-modern input[type="email"]:focus,
body.elks-modern input[type="tel"]:focus,
body.elks-modern input[type="url"]:focus,
body.elks-modern input[type="number"]:focus,
body.elks-modern input[type="date"]:focus,
body.elks-modern textarea:focus,
body.elks-modern select:focus {
	outline: none;
	border-color: var(--elks-color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--elks-color-accent) 25%, transparent);
}

/* ---- About page (merged Leadership / Charity / History / Links) ----
   Baseline layout only, matching the interior page rhythm: the jump menu
   reads as a row of links, each stacked section separated by a rule. The
   section bodies reuse the standalone partials/CSS, so they're already
   styled. */
body.elks-modern .elks-modern-about-jump {
	margin: 0 0 40px;
}

body.elks-modern .elks-modern-about-jump-list {
	list-style: none;
	margin: 0;
	padding: 0 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	border-bottom: 1px solid color-mix(in srgb, var(--elks-color-muted) 40%, transparent);
}

body.elks-modern .elks-modern-about-jump-list a {
	font-weight: 600;
	color: var(--elks-color-heading);
	text-decoration: none;
}

body.elks-modern .elks-modern-about-jump-list a:hover,
body.elks-modern .elks-modern-about-jump-list a:focus {
	text-decoration: underline;
}

/* Deliberately quieter than the jump list at the top of the page: this is a
   way back out of a section, not navigation in its own right. Bare href="#"
   in the template, so it needs no anchor of its own. */
body.elks-modern .elks-modern-about-return-top {
	margin: 24px 0 0;
	text-align: right;
	font-size: 14px;
}

body.elks-modern .elks-modern-about-return-top a {
	color: var(--elks-color-muted);
	text-decoration: none;
}

body.elks-modern .elks-modern-about-return-top a:hover,
body.elks-modern .elks-modern-about-return-top a:focus {
	color: var(--elks-color-accent);
	text-decoration: underline;
}

body.elks-modern .elks-modern-about-section {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid color-mix(in srgb, var(--elks-color-muted) 40%, transparent);
}

body.elks-modern .elks-modern-about-section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Card / Section Heading tier. */
body.elks-modern .elks-modern-about-section-title {
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 600;
	color: var(--elks-color-heading);
	margin: 0 0 24px;
}

/* ---------------------------------------------------------------- *
 * Sponsors page
 *
 * The cards themselves are GroupBrief's own .elksgb-card/.elksgb-ad markup, reused
 * verbatim from ELKSGB_Ads::render_ad_html() so the image, alt text, Sponsor badge
 * and sponsored link can never drift from the feed's. elksgb.css is loaded
 * site-wide, so its own rules for those classes apply here too; everything
 * below either lays them out or repaints them in LSE's palette, so the page
 * looks like the rest of the site rather than like a feed column dropped into
 * it -- and still reads correctly if that stylesheet ever stops loading.
 *
 * auto-fit collapses the tracks it doesn't need, so justify-content:center
 * genuinely centers one, two or three cards instead of stranding them at the
 * left. No column count is hard-coded: more sponsors than fit simply wrap.
 * ---------------------------------------------------------------- */

body.elks-modern .elks-modern-sponsors-tier {
	margin-top: 56px;
}

body.elks-modern .elks-modern-sponsors-tier:first-of-type {
	margin-top: 0;
}

body.elks-modern .elks-modern-sponsors-tier-title {
	font-size: clamp(22px, 3vw, 30px);
	color: var(--elks-color-heading);
	text-align: center;
	margin: 0 0 28px;
}

body.elks-modern .elks-modern-sponsors-grid {
	display: grid;
	justify-content: center;
	align-items: start;
	gap: 24px;
}

body.elks-modern .elks-modern-sponsors-grid-premium {
	grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
}

body.elks-modern .elks-modern-sponsors-grid-standard {
	grid-template-columns: repeat(auto-fit, minmax(170px, 220px));
}

/* The grid's own gap owns the spacing between cards; .elksgb-card's stacking
   margin is for the feed's single column and would double it here. */
body.elks-modern .elks-modern-sponsors-grid .elksgb-card {
	margin-bottom: 0;
	background: var(--elks-color-bg);
	border: 1px solid color-mix(in srgb, var(--elks-color-muted) 45%, transparent);
	border-radius: 10px;
	padding: 16px;
}

body.elks-modern .elks-modern-sponsors-grid .elksgb-ad-premium {
	border-color: var(--elks-color-accent);
}

/* elksgb.css is only enqueued when the Community Feed module has booted, and
   the Sponsors page deliberately works without it (see ELKS_Sponsor_Ads). So the
   ad's own presentation is defined here in full -- shape as well as color --
   rather than only overriding colors on top of GroupBrief's rules. On a site
   that does run the feed, these simply win by specificity inside this grid. */
body.elks-modern .elks-modern-sponsors-grid .elksgb-ad {
	position: relative;
	text-align: center;
}

body.elks-modern .elks-modern-sponsors-grid .elksgb-ad-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
}

body.elks-modern .elks-modern-sponsors-grid .elksgb-ad-premium-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--elks-color-accent);
	color: var(--elks-color-on-accent);
}

body.elks-modern .elks-modern-sponsors-grid .elksgb-ad-text-link {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	background: var(--elks-color-accent);
	color: var(--elks-color-on-accent);
	font-weight: 600;
	text-decoration: none;
}

body.elks-modern .elks-modern-sponsors-grid .elksgb-ad-lightbox-trigger {
	display: block;
	border: 0;
	padding: 0;
	background: none;
	width: 100%;
}

/* A sponsor with an image but no destination URL renders as a <button> (the
   feed's lightbox trigger), and this page deliberately doesn't load that
   lightbox -- so it does nothing. Don't offer a click affordance for it. */
body.elks-modern .elks-modern-sponsors-grid button.elksgb-ad-lightbox-trigger {
	cursor: default;
}

@media (max-width: 480px) {
	body.elks-modern .elks-modern-sponsors-grid-premium,
	body.elks-modern .elks-modern-sponsors-grid-standard {
		grid-template-columns: minmax(0, 320px);
	}
}

/* Image alignment — WordPress's alignleft / alignright / aligncenter classes,
   as written from the classic editor's align buttons on Custom Pages (and any
   other page's the_content() output). A left/right image floats so text wraps
   around it; the intro area clears its own floats so nothing bleeds out. */
body.elks-modern .elks-modern-intro .alignleft {
	float: left;
	margin: 4px 24px 16px 0;
	max-width: 100%;
	height: auto;
}
body.elks-modern .elks-modern-intro .alignright {
	float: right;
	margin: 4px 0 16px 24px;
	max-width: 100%;
	height: auto;
}
body.elks-modern .elks-modern-intro .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
body.elks-modern .elks-modern-intro::after {
	content: "";
	display: table;
	clear: both;
}