html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  overflow-x: clip; /* prevent horizontal scrollbar from full-bleed calc(-50vw+50%) sections; 'clip' (unlike 'hidden') does not create a scroll container, so position:sticky works correctly */
  scrollbar-gutter: stable; /* always reserve vertical scrollbar space so content width — and therefore the navbar — never shifts between scrollable and non-scrollable pages */
  --app-header-h: 72px; /* approximate header (navbar + mb-3) height; used by the sticky-footer fill calc so header + main reaches the viewport bottom independent of footer height */
  --footer-peek-h: 48px; /* sliver of the footer left visible at the bottom of short pages as a "more below" cue (SiteStickyFooterLayoutPolish-1) */
}

body {
    background: ghostwhite;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Sticky footer shell (ShortPageFooterPushDownFix-2, refined by SiteStickyFooterLayout-1): body above
   is a full-height flex column. The public content wrapper is the only .container that is a direct
   child of body (the nav's and the footer's .container are nested deeper), so it is the flex item
   between header and footer. It grows to absorb leftover vertical space, and its <main> fills that
   wrapper. The footer never shrinks. No fixed/absolute positioning, no per-page spacers.

   The min-height makes the wrapper fill the viewport below the header (header + main ≈ viewport), so
   on short pages the footer is pushed to the bottom even when the footer itself is taller than the
   remaining viewport (the tall mobile marketing footer would otherwise ride up because body's 100vh
   budget was fully consumed by header + footer, leaving no free space for main to grow). On long pages
   the content exceeds this minimum and the page scrolls naturally. The 100vh line is the fallback for
   browsers without dvh; the 100dvh line wins where supported and tracks the visible mobile viewport.

   --footer-peek-h is also subtracted (SiteStickyFooterLayoutPolish-1) so a small sliver of the footer
   stays visible at the bottom of short pages as a "more content below" cue, instead of the footer
   sitting exactly at/just below the fold. */
body > .container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - var(--app-header-h) - var(--footer-peek-h));
  min-height: calc(100dvh - var(--app-header-h) - var(--footer-peek-h));
}

body > .container > main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

.site-logo {
  height: 40px;
  width: auto;
}

.header-avatar {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f97316;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  margin-left: .25rem;
  transition: background .15s;
}

.header-avatar:hover {
  background: #ea580c;
  color: #fff;
}

.header-avatar:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* ── Public header — mobile menu ────────────────────────────────────── */

@media (max-width: 575.98px) {
  .navbar-collapse .navbar-nav {
    align-items: stretch !important;
  }

  .navbar-collapse .navbar-nav + .navbar-nav {
    border-top: 1px solid #dee2e6;
    padding-top: .375rem;
    margin-top: .375rem;
  }

  .navbar-collapse .nav-link {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
}

/* Active public nav item — a slightly heavier weight only, in keeping with EventsLog's restrained
   style. No underline, no tab indicator. The weight change flows naturally into the mobile menu. */
.navbar-light .navbar-nav .nav-link.active {
  font-weight: 600;
}

/* Desktop nav hover — lightweight SaaS-style affordance: a very light blue pill on hover/focus with
   a small radius and a smooth transition. Desktop only (≥576px, where the bar is horizontal); the
   collapsed mobile menu is left untouched. Scoped to .nav-link, so the outlined Request Access
   button keeps its own hover. */
@media (min-width: 576px) {
  .navbar-light .navbar-nav .nav-link {
    border-radius: .375rem;
    transition: background-color .15s ease;
  }

  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link:focus-visible {
    background-color: #eff4fb;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Skip-to-content link ────────────────────────────────────────────── */

.skip-to-main:focus {
  position: fixed !important;
  top: 0;
  left: 0;
  width: auto !important;
  height: auto !important;
  padding: .5rem 1.125rem !important;
  background: #fff;
  color: #212529;
  font-weight: 600;
  font-size: .9375rem;
  z-index: 9999;
  margin: 0 !important;
  border: 2px solid #0d6efd !important;
  border-radius: 0 0 .375rem 0;
  clip: auto !important;
  white-space: normal !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── Public Organizer Page (.op-*) ──────────────────────────────────────── */

.op-page {
  padding-bottom: 2.5rem;
}

/* Full-width banner (fills Bootstrap container, outside .op-page 760px constraint) */

.op-banner-full {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

@media (min-width: 576px) {
  .op-banner-full {
    height: 320px;
  }
}

.op-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* op-page stacks after the banner; identity-group card handles the logo overlap */

.op-page.op-has-banner {
  position: relative;
  z-index: 1;
}

/* Centered inner content wrapper — used inside full-width section bands */

.op-inner {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Identity group: centered card with max-width; white panel when banner present */

.op-identity-group {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem;
}

.op-has-banner .op-identity-group {
  background: #fff;
  border-radius: .5rem;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  margin-bottom: 1.5rem;
}

/* No-banner fallback: full-width soft hero band */

.op-page:not(.op-has-banner) .op-identity-group {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: #f8f9fa;
  padding: 3rem 0 2rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 2rem;
}

.op-page:not(.op-has-banner) .op-identity {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0;
}

.op-page:not(.op-has-banner) .op-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* Identity: logo + heading + tagline */

.op-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.op-has-banner .op-identity {
  flex-direction: column;
  gap: .75rem;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .op-has-banner .op-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0;
  }
}

.op-logo-wrap {
  flex-shrink: 0;
}

.op-has-banner .op-logo-wrap {
  margin-top: -36px;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .op-has-banner .op-logo-wrap {
    margin-top: -48px;
    margin-bottom: 0;
  }
}

.op-logo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.op-has-banner .op-logo {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .op-has-banner .op-logo {
    width: 96px;
    height: 96px;
  }
}

.op-identity-text {
  flex: 1;
  min-width: 0;
  padding-top: .25rem;
}

.op-has-banner .op-identity-text {
  padding-top: 0;
}

@media (min-width: 576px) {
  .op-has-banner .op-identity-text {
    padding-top: .5rem;
  }
}

.op-heading {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .op-heading {
    font-size: 2.25rem;
  }
}

.op-tagline {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Link / CTA buttons */

.op-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 2rem;
}

.op-has-banner .op-actions {
  margin-bottom: 0;
  margin-top: .25rem;
}

@media (min-width: 576px) {
  .op-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.op-link-btn {
  display: block;
  padding: .5rem 1.375rem;
  border: 1.5px solid #343a40;
  border-radius: 2rem;
  color: #212529;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}

.op-link-btn:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
}

.op-link-btn:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* Content sections */

.op-sections {
  margin-bottom: 1.5rem;
}

.op-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.op-section .op-inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.op-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .625rem;
}

.op-section-body {
  line-height: 1.75;
  margin-bottom: 0;
}

/* Section variant bands — horizontal page blocks */

.op-section--light {
  background: #ffffff;
}

.op-section--accent {
  background: #dbeafe;
}

.op-section--dark {
  background: #212529;
  color: #fff;
}

.op-section--dark .op-section-title {
  color: #fff;
}

.op-section--dark .op-section-body {
  color: #dee2e6;
}

.op-section--soft-blue {
  background: #eff6ff;
}

.op-section--soft-warm {
  background: #fffbeb;
}

.op-section--soft-green {
  background: #f0fdf4;
}

/* Upcoming events */

.op-events {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  /* No top divider before the events group — the uppercase section heading provides the separation
     (OrganizerEventListSpacingPolish-1). padding-top keeps space above the heading; the larger
     margin-bottom adds breathing room after the last event before the next section. */
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.op-events-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-event-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0;
}

.op-event-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.op-event-date-badge {
  flex: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  background: #f1f3f5;
  border-radius: .375rem;
  text-align: center;
  padding: .375rem .25rem;
  line-height: 1;
}

.op-event-date-month {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  margin-bottom: .1875rem;
}

.op-event-date-day {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: #212529;
  line-height: 1;
}

/* Third badge line (organizer page): the year, matching the small muted month line above the day.
   Only rendered where an .op-event-date-year span exists, so the /events badge is unaffected. */
.op-event-date-year {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  color: #6c757d;
  margin-top: .1875rem;
  line-height: 1;
}

/* Public event date badge — calm navy/gray hierarchy on a modestly larger, more legible badge
   (OrganizerPublicPagePolish-4; extended to the /events list in PublicEventsListStyleConsistency-1).
   Applies to both the organizer page (.op-events) and the /events listing (.hp-event-list) so the
   two badges match. Readability comes from size/weight, not bright color. */
.op-events .op-event-date-badge,
.hp-event-list .op-event-date-badge {
  flex: 0 0 58px;          /* ~20% larger than the base 48px */
  min-height: 62px;        /* ~20% larger than the base 52px */
  padding: .5rem .25rem;
}

.op-events .op-event-date-month,
.hp-event-list .op-event-date-month {
  font-size: .75rem;       /* slightly larger */
  color: #1e3a5f;          /* muted navy */
}

.op-events .op-event-date-day,
.hp-event-list .op-event-date-day {
  font-size: 1.625rem;     /* dominant — largest/boldest */
  color: #1e293b;          /* strong near-black navy */
}

.op-events .op-event-date-year,
.hp-event-list .op-event-date-year {
  font-size: .6875rem;     /* slightly larger, still secondary */
  color: #495057;          /* muted gray, readable (AA) */
  font-weight: 600;
}

.op-event-content {
  flex: 1;
  min-width: 0;
  padding-top: .375rem;
}

.op-event-title {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: #2c7ac7;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: .375rem;
}

.op-event-title:hover,
.op-event-title:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.op-event-title:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

.op-event-meta {
  font-size: .8125rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Contact */

.op-contact {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.op-contact-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-contact address {
  font-style: normal;
}

.op-contact-line {
  margin-bottom: .375rem;
  line-height: 1.5;
}

.op-contact-line:last-child {
  margin-bottom: 0;
}

.op-contact-link {
  color: #212529;
  text-decoration: none;
}

.op-contact-link:hover {
  text-decoration: underline;
}

.op-contact-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Labeled contact rows (OrganizerPublicPagePolish-1): a visible field label above each value, with
   a decorative leading icon (envelope / phone / map marker). */
/* Contact rows (OrganizerPublicPagePolish-4): icon is a fixed left gutter aligned to the label
   line; the label and value share the right column, so the value aligns under the label text — not
   under the icon. Same pattern for Email, Phone, and Address. */
.op-contact-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1rem;
}

.op-contact-row:last-child {
  margin-bottom: 0;
}

.op-contact-icon {
  flex: 0 0 1.1rem;
  text-align: center;
  font-size: .8125rem;
  /* Match the .75rem uppercase label's line box so the icon centers on the label text rather than
     floating above it (OrganizerContactConnectOrderPolish-1; fine-tuned in
     OrganizerContactIconAlignmentFineTune-1). */
  line-height: 1.125rem;
  margin-top: .1875rem;
  color: #6c757d;
}

.op-contact-row-body {
  min-width: 0;
}

.op-contact-row-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  margin-bottom: .25rem;
  line-height: 1.5;
}

.op-contact-row-value {
  margin-bottom: 0;
  line-height: 1.5;
}

/* Footer note */

.op-footer {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
}

.op-footer-note {
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}
/* ── Admin image preview ─────────────────────────────────────── */
.admin-preview-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  display: block;
}

.admin-preview-banner {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  display: block;
  margin-top: .25rem;
}
/* ── Focal point preview frame ───────────────────────────────────── */
.media-focal-frame {
  position: relative;
  overflow: hidden;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  cursor: crosshair;
  display: block;
  margin-bottom: .5rem;
}

.media-focal-frame--banner {
  aspect-ratio: 16 / 5;
  width: 100%;
}

.media-focal-frame--logo {
  aspect-ratio: 1 / 1;
  width: 120px;
  border-radius: 50%;
}

.media-focal-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.media-focal-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.07s ease, top 0.07s ease;
}

.media-focal-marker::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 50% 50% / 60% 1.5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 50% 50% / 1.5px 60% no-repeat;
}

.media-focal-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}

@keyframes focalPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.media-focal-marker--pulse {
  animation: focalPulse 0.22s ease-out;
}

/* ── Public Event Page (.ep-*) ──────────────────────────────────────── */

.ep-page {
  padding-bottom: 2.5rem;
}

.ep-page.ep-has-banner {
  position: relative;
  z-index: 1;
}

/* Full-width banner */

.ep-banner-full {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

@media (min-width: 576px) {
  .ep-banner-full {
    height: 320px;
  }
}

.ep-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header group: white card when banner present; full-width hero when no banner */

.ep-header-group {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 1.75rem;
}

.ep-has-banner .ep-header-group {
  background: #fff;
  border-radius: .5rem;
  padding: 0 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  margin-bottom: 1.5rem;
}

/* No-banner: contained gradient hero card */

.ep-page:not(.ep-has-banner) .ep-header-group {
  background: linear-gradient(135deg, #f3f6fa 0%, #eef3f8 100%);
  border: 1px solid #d9e2ec;
  border-radius: .75rem;
  margin-top: 1rem;
  padding: 2rem 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.ep-page:not(.ep-has-banner) .ep-identity {
  padding-top: 0;
}

.ep-page:not(.ep-has-banner) .ep-actions {
  margin-top: 1.25rem;
}

/* No-banner hero: the soft gradient background (#f3f6fa→#eef3f8) drops the countdown green and
   muted #6c757d text below WCAG AA (4.5:1) — measured 4.06:1 and 4.20:1 worst case. Darken these
   text colors in the no-banner scope only; banner events keep their colors on the white card,
   where they already pass. WCAG 2.1 SC 1.4.3 (PublicEventNoBannerContrastFix-1). */
.ep-page:not(.ep-has-banner) .ep-meta-countdown {
  color: #157347;
}

.ep-page:not(.ep-has-banner) .ep-organizer,
.ep-page:not(.ep-has-banner) .ep-meta-secondary,
.ep-page:not(.ep-has-banner) .ep-status-msg,
.ep-page:not(.ep-has-banner) .ep-action-note {
  color: #5c636a;
}

/* Identity: logo + title + organizer byline */

.ep-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.ep-has-banner .ep-identity {
  flex-direction: column;
  gap: .75rem;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding-top: 0;
  }
}

/* Organizer logo */

.ep-logo-wrap {
  flex-shrink: 0;
}

.ep-has-banner .ep-logo-wrap {
  margin-top: -36px;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-logo-wrap {
    margin-top: -48px;
    margin-bottom: 0;
  }
}

.ep-logo {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.ep-has-banner .ep-logo {
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .ep-has-banner .ep-logo {
    width: 96px;
    height: 96px;
  }
}

/* Header text: title + byline */

.ep-header-text {
  flex: 1;
  min-width: 0;
  padding-top: .25rem;
}

.ep-has-banner .ep-header-text {
  padding-top: 0;
}

@media (min-width: 576px) {
  .ep-has-banner .ep-header-text {
    padding-top: .5rem;
  }
}

.ep-status-badge {
  display: inline-block;
  margin-bottom: .375rem;
}

.ep-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .ep-title {
    font-size: 2.25rem;
  }
}

.ep-organizer {
  font-size: .9375rem;
  color: #6c757d;
  margin-bottom: 0;
  line-height: 1.5;
}

.ep-organizer-link {
  color: #2c7ac7;
  font-weight: 500;
  text-decoration: none;
}

.ep-organizer-link:hover,
.ep-organizer-link:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.ep-organizer-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Meta rows: date/time prominent; timezone, location, type muted below */

.ep-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .875rem;
  margin-bottom: .875rem;
}

.ep-meta-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.5;
}

.ep-meta-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  font-size: .875rem;
  color: #6c757d;
  line-height: 1.5;
}

.ep-meta-sep {
  color: #adb5bd;
  user-select: none;
}

.ep-meta-type {
  font-style: italic;
}

/* Upcoming-event countdown line: between the date row and the location/category row.
   Bootstrap success green (#198754) — more visible than the muted secondary row, a
   positive upcoming-event signal. Semibold (600) to match the date row's emphasis.
   Informational only — not a status/badge. */
.ep-meta-countdown {
  font-size: .9375rem;
  font-weight: 600;
  color: #198754;
  line-height: 1.5;
}

/* Action buttons */

.ep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}

.ep-status-msg {
  width: 100%;
  font-size: .9375rem;
  color: #6c757d;
  margin-bottom: .25rem;
}

/* Explanatory note shown in the action area when a Register/Donate button is hidden because its
   time window is not open. Small muted line — neutral, not an alert; secondary to lifecycle notices. */
.ep-action-note {
  width: 100%;
  font-size: .875rem;
  color: #6c757d;
  margin-top: .25rem;
  margin-bottom: 0;
}

/* Completed-event informational notice — replaces the muted .ep-status-msg for Status=Completed.
   Soft-yellow band draws attention more than the prior soft-blue; blue text and icon keep the
   notice reading as informational, not as an error or validation warning. */
.ep-completed-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  margin-bottom: .75rem;
  background-color: #fff8db;
  border: 1px solid #f3d36b;
  border-radius: .5rem;
  color: #0d3b8f;
}

.ep-completed-notice-icon {
  font-size: 1.25rem;
  color: #2563eb;
  flex-shrink: 0;
  line-height: 1;
}

.ep-completed-notice-text {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0d3b8f;
}

.ep-actions .btn {
  padding: .625rem 1.25rem;
  font-size: 1rem;
}

/* Content body */

.ep-body {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Public note — organizer-controlled short visitor message rendered near the top of the body.
   Calm neutral informational container: soft light-blue tint + border, no status colors, no icon,
   no title. Visible but intentionally secondary to the hero's Completed/Cancelled lifecycle notices.
   Negative side margins cancel .ep-body's 1rem inset so the card background aligns with the hero
   card edge; the 1.25rem horizontal padding matches the hero header-group's left padding so the
   text starts on the same column as the hero title/meta. */
.ep-public-note {
  margin-top: 1.25rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1rem 1.25rem;
  background-color: #f4f8fc;
  border: 1px solid #d6e3f0;
  border-radius: .5rem;
}

.ep-public-note-text {
  margin-bottom: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: #344054;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Facts section — groups the core event facts (short description, About, and the schedule/location/
   capacity details). Rendered as a full-width band using the same full-bleed technique and Soft Blue
   background (#eff6ff) as the page-builder ".ep-section--soft-blue" option, rather than another white
   card — this reduces card repetition (hero/notice/organizer) and gives the schedule/where-when more
   presence as a section of the page. Class name retained from FactsCardImplementation-1. */
.ep-facts-card {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #eff6ff;
}

/* Card owns the outer top/bottom padding — drop the leading/trailing subsection padding so it does
   not double against the card edge. First child may be short description, About, or the details
   section (all conditional except details, which is always last). Inter-subsection rhythm and the
   .ep-short-desc/.ep-about dividers are unchanged. */
.ep-facts-card > :first-child {
  padding-top: 0;
}

.ep-facts-card > :last-child {
  padding-bottom: 0;
}

/* About / description */

.ep-about {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

.ep-section-heading {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .625rem;
}

.ep-section-body {
  line-height: 1.75;
  margin-bottom: 0;
}

/* Details grid: schedule, location, capacity */

.ep-details-section {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
}

.ep-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
}

@media (min-width: 576px) {
  .ep-details-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.ep-details-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  margin-bottom: .625rem;
}

.ep-address {
  font-style: normal;
  line-height: 1.65;
  color: #495057;
}

/* Outbound map/directions links in the Location block (EventLocationDirections-1).
   Lightweight — one subtle primary link + a secondary text link; not a heavy button group,
   so it never competes with the Register/Donate CTAs. */
.ep-directions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1rem;
  margin-top: .6rem;
}

/* Both links use the standard EventsLog contextual link style (matches .ep-organizer-link):
   same size and weight, normal-weight contextual link color — not buttons/CTAs. */
.ep-directions-primary,
.ep-directions-secondary {
  font-size: .9375rem;
  font-weight: 500;
  color: #2c7ac7;
  text-decoration: none;
}

.ep-directions-primary:hover,
.ep-directions-primary:focus-visible,
.ep-directions-secondary:hover,
.ep-directions-secondary:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.ep-directions-primary i,
.ep-directions-secondary i {
  margin-right: .35rem;
}

/* Icons stay slightly muted/secondary so the text remains the primary element — they match the
   other event-detail fact icons (#212529 @ .7) rather than the link color. */
.ep-directions i,
.ep-directions .fa-solid {
  color: #212529;
  opacity: .7;
}

.ep-directions-secondary:hover {
  text-decoration: underline;
}

/* Schedule block — improved hierarchy and scannability */

.ep-schedule-heading {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  margin-bottom: .625rem;
}

.ep-details-icon {
  font-size: .875rem;
  flex-shrink: 0;
  opacity: .7;
}

.ep-schedule-day-group + .ep-schedule-day-group {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid #e9ecef;
}

.ep-schedule-date {
  font-size: 1rem;
  font-weight: 700;
  color: #343a40;
  margin-bottom: .375rem;
  line-height: 1.4;
}

.ep-schedule-sessions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ep-schedule-session {
  display: flex;
  flex-direction: column;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.ep-schedule-session + .ep-schedule-session {
  border-top: 1px solid #f1f3f5;
}

.ep-session-title {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.4;
}

.ep-session-time {
  font-size: .9375rem;
  color: #5c6672;
  line-height: 1.4;
  margin-bottom: 0;
}

.ep-schedule-tz {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: #6c757d;
  margin-top: .75rem;
  padding-top: .625rem;
  border-top: 1px solid #e9ecef;
  margin-bottom: 0;
}

.ep-schedule-tz .fa-clock {
  color: #adb5bd;
  font-size: .75rem;
  flex-shrink: 0;
}

/* Short description: intro copy above About */

.ep-short-desc {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

/* Event page content sections */

.ep-sections {
  margin-bottom: 1.5rem;
}

.ep-section {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.ep-section .ep-inner {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.ep-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .625rem;
}

.ep-section--default {
  /* white background; border from .ep-section */
}

.ep-section--light {
  background: #f8f9fa;
  border-bottom-color: #e3e6ea;
}

.ep-section--accent {
  background: #eef4fb;
  border-bottom: none;
}


.ep-section--dark {
  background: #212529;
  color: #fff;
  border-bottom: none;
}

.ep-section--dark .ep-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ep-section--dark .ep-section-title {
  color: #fff;
}

.ep-section--dark .ep-section-body {
  color: #dee2e6;
}

.ep-section--soft-blue {
  background: #eff6ff;
}

.ep-section--soft-warm {
  background: #fffbeb;
}

.ep-section--soft-green {
  background: #f0fdf4;
}

/* Footer note */

.ep-footer {
  margin-top: 2rem;
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-bottom: 1rem;
}

.ep-footer-note {
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Event detail share buttons ─────────────────────────────────────── */

.ep-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.ep-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  color: #6c757d;
  background: transparent;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}

.ep-share-button:hover {
  border-color: #343a40;
  color: #212529;
  background: #f8f9fa;
  text-decoration: none;
}

.ep-share-button:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* ── Event detail organizer card ─────────────────────────────────────── */

/* Negative side margins cancel .ep-body's 1rem inset so the card background aligns with the hero
   card edge; the 1.25rem horizontal padding matches the hero header-group's left padding so the
   organizer label/content starts on the same column as the hero title/meta. */
.ep-organizer-section {
  margin-top: 2.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
}

.ep-organizer-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .625rem;
}

.ep-organizer-section-link {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #2c7ac7;
  text-decoration: none;
}

.ep-organizer-section-link:hover,
.ep-organizer-section-link:focus-visible {
  color: #1f5e9e;
}

/* Underline only the organizer name on hover/focus — not the logo image or the arrow. */
.ep-organizer-section-link:hover span:not(.ep-organizer-section-arrow),
.ep-organizer-section-link:focus-visible span:not(.ep-organizer-section-arrow) {
  text-decoration: underline;
}

.ep-organizer-section-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

.ep-organizer-section-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #dee2e6;
  flex-shrink: 0;
}

.ep-organizer-section-arrow {
  flex-shrink: 0;
  font-size: .75rem;
  color: #adb5bd;
}

/* Action page (register / donate) event/organizer context line */

.action-page-context {
  font-size: 1.0625rem;
  color: #495057;
  margin-bottom: 1.5rem;
}

/* ── Public banner family ─────────────────────────────────────────── */

.public-banner {
  width: 100%;
  overflow: hidden;
  background-color: #e9ecef;
  display: block;
}

.public-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.public-banner--hero {
  height: 220px;
}

@media (min-width: 576px) {
  .public-banner--hero {
    height: 320px;
  }
}

.public-banner--action {
  height: 140px;
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .public-banner--action {
    height: 200px;
  }
}

/* Action page (register / donate) compact organizer banner */

.action-page-banner {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: .375rem;
  margin-bottom: 1.25rem;
}

/* ── Homepage (.hp-*) ─────────────────────────────────────────────── */

.hp-hero {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 2.5rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe5f1;
  margin-bottom: 2.5rem;
}

.hp-hero-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5rem;
}

@media (min-width: 576px) {
  .hp-hero-title {
    font-size: 2.75rem;
  }
}

.hp-hero-lead {
  font-size: 1.0625rem;
  color: #6c757d;
  margin-bottom: 0;
  max-width: 52ch;
}

.hp-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: 0;
}

.hp-event-list {
  /* No top divider before the first event (PublicEventsListSpacingAndCssDeployCheck-1) — the page's
     "Upcoming Events" hero heading and the section's top padding provide the separation. The bottom
     margin adds breathing room after the last event before the footer. Row separators between events
     come from .op-event-card's border-bottom (unchanged). */
  margin-bottom: 2.5rem;
}

.hp-org-cta {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: #f8fbff;
  border-top: 1px solid #dbe5f1;
  margin-top: 2.5rem;
}

/* ── Public page full-bleed section system ─────────────────────────────── */

/* Breaks out of the Bootstrap container so section backgrounds reach the
   viewport edges, while content re-aligns with the container via the
   inverse calc. 50% refers to the containing block (<main>) width, not
   the element's own width, so the math works at every breakpoint. */
.public-page-intro {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  background: linear-gradient(135deg, #f8fbff 0%, #eef4fb 100%);
  border-bottom: 1px solid #dbe5f1;
  margin-bottom: 0;
}

.public-page-intro h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: #212529;
}

@media (min-width: 576px) {
  .public-page-intro h1 {
    font-size: 2.25rem;
  }
}

.public-page-intro p {
  color: #6c757d;
  font-size: 1rem;
  margin-bottom: 0;
  max-width: 60ch;
}

.public-page-content {
  padding-top: 2rem;
}

/* Public static/content-page contextual links (PublicStaticPageLinkStyle-1): one consistent
   EventsLog blue for in-content links on About / Terms / Refunds (and reusable for future static
   content). No underline at rest; underline + visible focus on hover/keyboard. Scoped to this
   class only — NOT a global anchor change, and intentionally not auto-applied to all content. */
.public-content-link {
  color: #2c7ac7;
  text-decoration: none;
}

.public-content-link:hover,
.public-content-link:focus-visible {
  color: #1f5e9e;
  text-decoration: underline;
}

.public-content-link:focus-visible {
  outline: 2px solid #258cfb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Shared subtle surface for bordered form cards on public pages (matches the registration
   page's card treatment so public forms look consistent). Pair with Bootstrap `border rounded p-3`. */
.public-form-card {
  background-color: #fbfcfe;
}

/* ── Marketing homepage (MarketingHomeOrganizerPivot-1 / MarketingHomeVisualRefinement-1) ──
   Organizer-acquisition homepage. Reuses .hp-hero / .hp-org-cta full-width bands and
   .public-page-content; this block adds the section/card/tag/chip vocabulary plus a warm,
   scoped CTA accent (#b45309). The .btn-mk-* classes are scoped — they do NOT override
   Bootstrap's global .btn-primary, so other pages are unaffected. */

/* Scoped marketing CTA. Softer, welcoming primary: light-blue fill, navy border, near-black text
   (dark text on #cbe0fb ≈ 12:1, passes WCAG AA). Hover/focus fills navy with white text (~11:1).
   Scoped to .btn-mk-primary — does NOT touch Bootstrap's global .btn-primary. */
.btn-mk-primary {
  background-color: #cbe0fb;
  border-color: #1e3a5f;
  color: #111827;
}

.btn-mk-primary:hover,
.btn-mk-primary:focus {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.btn-mk-outline {
  background-color: transparent;
  border-color: #1e3a5f;
  color: #1e3a5f;
}

.btn-mk-outline:hover,
.btn-mk-outline:focus {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

.btn-mk-primary:focus-visible,
.btn-mk-outline:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* Full-width section bands — the background defines chapter separation. Each band breaks out to
   the full viewport using the same calc technique as .hp-hero / .ep-section, then re-pads so its
   content aligns to the same centered container content edge as the hero. Bands sit flush;
   alternating tint/white surfaces mark each chapter (no rounded section cards). */
.mk-fullband {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background: #fff;
}

.mk-fullband--tint {
  background: #f5f8fc;
}

/* Section heading: near-black content anchor + a short warm accent rule (the one orange touch). */
.mk-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  margin-bottom: .875rem;
}

.mk-section-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: .5rem;
  background: #b45309;
  border-radius: 2px;
}

/* Hero heading + reserved (CSS-only) visual panel */
.mk-hero-title {
  color: #111827;
}

.mk-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  padding: 2.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  box-shadow: 0 1px 10px rgba(30, 58, 95, .15);
}

/* Compact 3-stage lifecycle teaser inside the hero panel — vertical, icon-led, short labels,
   no numbers/paragraphs. Differs from the horizontal numbered "How it works" cards below.
   The node is a wrapper <span> (not the Font Awesome <i>), so flex centering is not overridden
   by Font Awesome's `.fa-solid { display: inline-block }`. */
.mk-lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mk-lifecycle-step {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.mk-lifecycle-node {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.mk-lifecycle-node i {
  font-size: 1.1rem;
  line-height: 1;
}

/* Connector line linking each node to the next (fills the flex gap). */
.mk-lifecycle-step:not(:last-child) .mk-lifecycle-node::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.5rem;
  background: rgba(255, 255, 255, .25);
}

.mk-lifecycle-label {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-size: 1rem;
}

.mk-section-intro {
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.mk-attendee-onramp {
  font-size: .9375rem;
}

/* Audience categories as compact organization-type tiles (not filter chips). */
.mk-audience-tile {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: .625rem;
  padding: .8rem .9rem;
  font-size: .9375rem;
  line-height: 1.3;
  color: #344054;
}

.mk-audience-tile i {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: #1e3a5f;
  font-size: 1rem;
}

.mk-step {
  height: 100%;
}

.mk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e9eff7;
  color: #1e3a5f;
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: .875rem;
}

.mk-step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: .25rem;
}

.mk-step-text {
  font-size: .9375rem;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 0;
}

.mk-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: .75rem;
  padding: 1.5rem;
}

.mk-card--soon {
  background: #fbfcfe;
}

.mk-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .625rem 0 .375rem;
}

/* Element+class selector (i.mk-card-icon) raises specificity above Font Awesome's
   `.fa-solid { display: inline-block }`, which loads after site.css and would otherwise win at
   equal specificity and disable the flex centering. line-height:1 prevents vertical glyph drift. */
i.mk-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #eef2f7;
  color: #1e3a5f;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.mk-card--soon .mk-card-icon {
  background: #f1f3f5;
  color: #9aa4b2;
}

.mk-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.mk-card-text {
  font-size: .9375rem;
  color: #495057;
  line-height: 1.6;
  margin-bottom: 0;
}

.mk-final-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: .5rem;
}

/* Final CTA: a calm light band (inherits .hp-org-cta's light background + top border) with extra
   padding for separation. Navy primary + navy-outline secondary keep button styling consistent
   with nav and hero. */
.mk-final-cta {
  margin-top: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.mk-final-text {
  color: #6c757d;
  max-width: 60ch;
}

/* PublicFooterPolish-3: text-focused closing CTA — a left-aligned, width-constrained content block
   anchored to the container's left edge (no icon). Reads as product copy rather than a centered
   marketing banner. Button classes (.btn-mk-primary / .btn-mk-outline) are unchanged. */
.mk-final-inner {
  max-width: 640px;
}

.mk-tag {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .5rem;
  border-radius: 999px;
}

.mk-tag--now {
  background: #e7f5ec;
  color: #157347;
}

.mk-tag--early {
  background: #fff4e0;
  color: #9a6700;
}

.mk-tag--soon {
  background: #eef1f5;
  color: #5c636a;
}

/* ── Org page share buttons ──────────────────────────────────────────── */

.op-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .375rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding-bottom: .25rem;
}

.op-page:not(.op-has-banner) .op-share-actions {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.op-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  color: #6c757d;
  background: transparent;
  text-decoration: none;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background-color .15s;
}

.op-share-button:hover {
  border-color: #343a40;
  color: #212529;
  background: #f8f9fa;
  text-decoration: none;
}

.op-share-button:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

/* ── Org page profile links (Connect section) ────────────────────────── */

.op-profile-links {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
}

.op-profile-links-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6c757d;
  margin-bottom: .875rem;
}

.op-profile-links-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

@media (min-width: 576px) {
  .op-profile-links-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.op-profile-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.375rem;
  border: 1.5px solid #343a40;
  border-radius: 2rem;
  color: #212529;
  background-color: transparent;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}

.op-profile-link:hover {
  background-color: #212529;
  color: #fff;
  text-decoration: none;
}

.op-profile-link:focus-visible {
  outline: 3px solid #258cfb;
  outline-offset: 2px;
}

.op-profile-link-icon {
  flex-shrink: 0;
  width: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Org page editor — sticky jump nav on desktop */

@media (min-width: 992px) {
  .org-page-editor-nav-sticky {
    position: sticky;
    top: 1rem;
  }
}

/* Org page editor — nav link default + active state */

.org-page-editor-nav a {
  color: #6c757d;
  transition: color 0.15s;
}

.org-page-editor-nav a.ope-nav-active {
  color: #212529;
  font-weight: 600;
}

@media (min-width: 992px) {
  .org-page-editor-nav a {
    padding-left: 0.5rem;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .org-page-editor-nav a.ope-nav-active {
    border-left-color: #0d6efd;
  }
}

/* Org page editor — floating back to top button */

.org-page-editor-backtop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0.75;
  transition: opacity 0.15s;
}

.org-page-editor-backtop:hover {
  opacity: 1;
  color: #fff;
}

/* ── OrgDesk Event Edit — horizontal section nav ────────────────────── */

.event-edit-section-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: .125rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: .375rem;
  margin-bottom: 1.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.event-edit-section-nav a {
  flex-shrink: 0;
  padding: .3125rem .75rem;
  font-size: .875rem;
  color: #6c757d;
  text-decoration: none;
  border-radius: .25rem;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}

.event-edit-section-nav a:hover {
  color: #212529;
  background-color: #f1f3f5;
}

.event-edit-section-nav a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.event-edit-section-nav a.event-edit-nav-active {
  color: #212529;
  font-weight: 600;
  background-color: #e8f0fe;
}

/* Push anchor targets below the sticky section nav */
#panel-publish,
#panel-event-details,
#panel-schedule,
#panel-location,
#panel-registration,
#panel-donations,
#panel-checkin,
#panel-internal {
  scroll-margin-top: 2.5rem;
}

/* OrgDesk Event Edit — floating back-to-top button */

.event-edit-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0.75;
  transition: opacity 0.15s;
}

.event-edit-back-to-top:hover {
  opacity: 1;
  color: #fff;
}

/* OrgDesk Event Edit — publish card subtle tint */

.event-edit-publish-card {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* ── Operational search control ──────────────────────────────────────── */

.operational-search {
  max-width: 720px;
}

/* ── Front Desk mobile polish ────────────────────────────────────────── */

.fd-card-registered {
  background-color: #f3f7f4;
}

.fd-selected {
  background-color: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.fd-selected:hover {
  background-color: #bfdbfe;
  color: #1e3a8a;
  border-color: #60a5fa;
}

.fd-page-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #198754;
  flex-shrink: 0;
}

.fd-page-dot-closed {
  background-color: #6c757d;
}

.fd-actor-line {
  font-size: 0.75rem;
}

.fd-visitor-badge {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

@media (max-width: 767.98px) {
  .fd-event-card-row {
    flex-direction: column;
  }
  .fd-event-controls {
    align-items: flex-start !important;
    width: 100%;
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
  }
  .fd-primary-btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

/* ── Admin layout footer ─────────────────────────────────────────────── */

.admin-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  color: #6c757d;
  padding: 1.75rem 0;
  font-size: .875rem;
}

/* ── Admin layout — back to top button ───────────────────────────────── */

.admin-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e2d40;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  z-index: 1035;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s;
}

.admin-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.admin-back-to-top:hover {
  background: #111e2b;
  color: #fff;
}

/* ── Public site footer ───────────────────────────────────────────────── */

.site-footer {
  background-color: #282A35;
  color: #f8f9fa;
}

.site-footer-muted {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
}

.site-footer-link {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.site-footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer-link:focus-visible {
  outline: 2px solid #9ec5fe;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer brand column (PublicFooterPolish-1) */
.site-footer-logo {
  height: 34px;
  width: auto;
}

.site-footer-brand-text {
  color: rgba(255, 255, 255, .70);
  font-size: .9rem;
  max-width: 34ch;
  margin-top: .75rem;
  margin-bottom: 0;
}

/* Footer column headings + link lists. Headings carry the column separation (PublicFooterPolish-2,
   Option B): brighter, heavier, and a touch more letter-spacing rather than vertical divider lines. */
.site-footer-heading {
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

/* Decorative footer inline icon (e.g. envelope) — inherits the muted footer tone, sits before its
   link with a small gap. aria-hidden in markup keeps it out of the accessibility tree. */
.site-footer-icon {
  color: rgba(255, 255, 255, .55);
  margin-right: .4rem;
}

.site-footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.site-footer-links li + li {
  margin-top: .5rem;
}

/* Bottom bar divider */
.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ── Event context sidebar navigation ────────────────────────────────── */

.event-sidebar {
  padding: .75rem 0;
}

@media (min-width: 768px) {
  .event-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
}

.event-sidebar-group-label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #495057;
  padding: 0 .75rem;
  margin-top: 0;
  margin-bottom: .25rem;
}

.event-sidebar-group + .event-sidebar-group {
  margin-top: 1rem;
  border-top: 1px solid #e9ecef;
  padding-top: .5rem;
}

.event-sidebar-nav li {
  list-style: none;
}

.event-sidebar-nav a,
.event-sidebar-nav .event-sidebar-item--disabled {
  display: block;
  padding: .3125rem .75rem;
  font-size: .875rem;
  color: #495057;
  text-decoration: none;
  border-radius: .25rem;
  border-left: 3px solid transparent;
  transition: color .15s, background-color .15s;
}

.event-sidebar-nav a:hover {
  color: #212529;
  background-color: #f1f3f5;
  text-decoration: none;
}

.event-sidebar-nav a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
  border-radius: .25rem;
}

.event-sidebar-nav a[aria-current="page"] {
  color: #212529;
  font-weight: 600;
  background-color: #e8f0fe;
  border-left-color: #0d6efd;
}

.event-sidebar-item--disabled {
  color: #adb5bd;
  cursor: default;
}

.event-sidebar-item--disabled-reason {
  display: block;
  font-size: .7rem;
  color: #adb5bd;
  padding: 0 .75rem .3125rem 1rem;
  line-height: 1.3;
}

.event-sidebar-sub-item a,
.event-sidebar-sub-item .event-sidebar-item--disabled {
  padding-left: 1.75rem;
  font-size: .8125rem;
}

.event-sidebar-escape {
  padding: .5rem .75rem;
  border-top: 1px solid #e9ecef;
  margin-top: .75rem;
}

.event-sidebar-escape a {
  font-size: .8125rem;
  color: #6c757d;
  text-decoration: none;
}

.event-sidebar-escape a:hover {
  color: #212529;
  text-decoration: underline;
}

/* Mobile typography and tap density polish */
@media (max-width: 767.98px) {
  .event-sidebar-nav a,
  .event-sidebar-nav .event-sidebar-item--disabled {
    padding-top: .8125rem;
    padding-bottom: .8125rem;
    font-size: 1rem;
    font-weight: 500;
  }

  .event-sidebar-nav a {
    color: #2f343b;
  }

  .event-sidebar-sub-item a,
  .event-sidebar-sub-item .event-sidebar-item--disabled {
    font-size: .9rem;
  }

  .event-sidebar-group-label {
    font-size: .875rem;
  }
}

/* Event Menu trigger button — mobile only (d-md-none keeps it off desktop) */
.event-menu-trigger {
  --bs-btn-color: #343a40;
  --bs-btn-border-color: #6c757d;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-weight: 500;
}

/* Responsive column separator — md+: right border */
.event-sidebar-col {
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .event-sidebar-col {
    border-right: 1px solid #dee2e6;
  }
}

/* ── Mobile identity-card tightening — event detail + organizer ──────── */

@media (max-width: 575.98px) {
  .ep-has-banner .ep-header-group {
    padding: 0 1rem 1rem;
  }

  .ep-has-banner .ep-logo-wrap {
    margin-top: -28px;
    margin-bottom: .25rem;
  }

  .ep-has-banner .ep-logo {
    width: 64px;
    height: 64px;
  }

  .ep-has-banner .ep-identity {
    gap: .5rem;
  }

  .ep-title {
    font-size: 1.5rem;
  }

  .ep-meta {
    margin-top: .625rem;
    margin-bottom: .625rem;
  }

  .ep-share-actions {
    margin-top: 1rem;
    gap: .375rem;
    justify-content: flex-end;
  }

  .op-has-banner .op-identity-group {
    padding: 0 1rem 1rem;
  }

  .op-has-banner .op-logo-wrap {
    margin-top: -28px;
    margin-bottom: .25rem;
  }

  .op-has-banner .op-logo {
    width: 64px;
    height: 64px;
  }

  .op-has-banner .op-identity {
    gap: .5rem;
  }

  .op-heading {
    font-size: 1.5rem;
  }

  .op-share-actions {
    margin-top: .5rem;
    gap: .375rem;
    justify-content: flex-end;
  }
}

.event-operator-bottom-nav {
  margin-top: 4.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #ccc;
}

.event-operator-bottom-nav .btn {
  min-width: 4.5rem;
}

/* ============================================================================
   Recurring schedule page (/s/{slug}-{id}) — RecurringEvents-PublicUX-SchedulePage-1
   Scoped s-* classes only. Recurring-only page; no bleed into op-*/ep-*/one-off
   pages. Reuses .op-share-* (share buttons) and .hp-event-list/.op-event-card
   (upcoming cards) read-only, without modifying them.
   ============================================================================ */

/* Banner — fills the Bootstrap container width (matches the organizer hero banner) */
.s-banner {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: .5rem;
  display: block;
}

.s-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 576px) {
  .s-banner {
    height: 300px;
  }
}

/* Hero / identity */
.s-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* Tight gap so the Next Session block reads as a continuation of the hero. */
  margin-bottom: 1.25rem;
}

/* No banner: a soft hero band so the page still looks intentional */
.s-hero--plain {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  padding: 1.75rem 1.5rem;
  margin-top: .25rem;
}

/* With banner: white card that overlaps the banner slightly */
.s-hero--has-banner {
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .09);
  padding: 1.25rem 1.5rem;
  margin-top: -2.5rem;
  position: relative;
  z-index: 1;
}

.s-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.s-logo-wrap {
  flex-shrink: 0;
}

.s-logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
  display: block;
}

.s-hero--has-banner .s-logo {
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

@media (min-width: 576px) {
  .s-logo {
    width: 88px;
    height: 88px;
  }
}

.s-hero-text {
  min-width: 0;
}

.s-eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0 0 .25rem;
}

.s-title {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 .35rem;
}

@media (min-width: 576px) {
  .s-title {
    font-size: 2rem;
  }
}

.s-org {
  margin: 0;
  color: var(--bs-secondary-color, #6c757d);
}

.s-hero-actions {
  flex-shrink: 0;
}

/* Content — spans the full container width so every section (Next session, When it
   meets, Upcoming dates, Hosted by) shares the same left/right rhythm as the hero/banner
   instead of floating in a narrower column. */
.s-content {
  width: 100%;
}

.s-section {
  margin-bottom: 2.25rem;
}

.s-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.s-section-icon {
  /* Charcoal, not link-blue — supports the heading without drawing attention. */
  color: #495057;
  font-size: 1rem;
}

.s-section-lead {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0 0 1rem;
}

/* Next session spotlight — the strongest informational block on the page, but a calm
   neutral surface (no accent border / tint) so it reads as a continuation of the hero,
   not a selected/alert card. */
.s-next-session {
  display: flex;
  align-items: stretch;
  gap: 1.1rem;
  /* Soft blue so the panel and the date badge share a matching cool treatment. */
  border: 1px solid #c7dceb;
  border-radius: .6rem;
  background: #eff6ff;
  padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
}

.s-next-badge {
  flex-shrink: 0;
  width: 76px;
  border-radius: .5rem;
  /* Soft blue accent matching the outer panel — readable dark-blue text,
     not a dark "stat widget" tile. */
  background: #c2e7ff;
  border: 1px solid #9cdbf1;
  color: #08008f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  line-height: 1.1;
}

.s-next-badge-month {
  text-transform: uppercase;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.s-next-badge-day {
  font-size: 1.6rem;
  font-weight: 700;
}

.s-next-badge-year {
  font-size: .75rem;
  opacity: .85;
}

.s-next-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.s-next-eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  font-weight: 700;
  color: #495057;
  margin: 0 0 .15rem;
}

.s-next-title {
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bs-body-color, #212529);
}

.s-next-title:hover {
  text-decoration: underline;
}

.s-next-meta {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: .2rem 0 .4rem;
}

/* Relative-time line ("Starts in N days") — informational, warm to match the badge. */
.s-next-starts {
  font-weight: 600;
  color: #8f4700;
  margin: 0 0 .85rem;
}

.s-next-cta {
  align-self: flex-start;
}

/* Hosted-by — compact organizer trust block */
.s-organizer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  background: #fff;
  padding: .85rem 1rem;
  margin-bottom: 2.25rem;
}

.s-organizer-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background-color: #f8f9fa;
}

.s-organizer-text {
  min-width: 0;
  flex: 1 1 auto;
}

.s-organizer-eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
}

.s-organizer-name {
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--bs-body-color, #212529);
}

a.s-organizer-name:hover {
  text-decoration: underline;
}

/* When it meets — pattern presented as schedule cards */
.s-pattern-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

@media (min-width: 576px) {
  .s-pattern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .s-pattern-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.s-pattern-card {
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  background: #fff;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.s-pattern-card-cadence {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: .25rem;
}

.s-pattern-card-time {
  font-weight: 500;
  color: var(--bs-body-color, #212529);
}

.s-pattern-card-duration {
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 400;
  margin-left: .15rem;
}

.s-pattern-card-location {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin-top: .4rem;
}

.s-pattern-card-pin {
  color: var(--bs-secondary-color, #adb5bd);
  margin-right: .35rem;
}

.s-tz-note {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .8125rem;
  margin: .65rem 0 0;
}

/* Empty state */
.s-empty {
  border: 1px dashed #d6d9dd;
  border-radius: .5rem;
  background: #f8f9fa;
  padding: 2rem 1.25rem;
  text-align: center;
}

.s-empty-icon {
  font-size: 1.75rem;
  color: var(--bs-secondary-color, #adb5bd);
  margin-bottom: .5rem;
}

.s-empty-title {
  font-weight: 600;
  margin: 0 0 .25rem;
}

.s-empty-text {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0;
}

/* ============================================================================
   Organizer page (/o) — recurring event card treatment
   RecurringEvents-PublicUX-OrganizerCards-1
   Additive op-recurring-* classes + a card modifier. Applied only to recurring
   cards (EventSeriesId.HasValue). Base .op-event-card / one-time cards are NOT
   modified and must stay visually identical.
   ============================================================================ */

/* Recurring modifier carries no border accent — the card must not read as
   selected/active. The amber status badge alone signals "recurring schedule". */
.op-event-card--recurring {
  /* intentionally no border/background change to the base card */
}

/* Status marker, deliberately NOT link-blue: soft amber pill with dark text so
   it reads as a status, distinct from the blue title link. */
.op-recurring-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #8a5a00;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 999px;
  padding: .18rem .7rem;
  margin-bottom: .35rem;
}

/* Card-level location, shown once when every pattern rule shares the same concise location
   (CardPolish-1). Secondary weight so it doesn't compete with the title. */
.op-recurring-cardloc {
  font-size: .8125rem;
  font-weight: 500;
  color: #6c757d;
  margin: 0 0 .4rem;
}

/* Pattern rules — cadence-first hierarchy (CardPolish-1). Each rule stacks a lead cadence token
   over a secondary time/duration/location detail line, so multi-rule cards scan down a clean
   left edge and wrap cleanly on mobile (no mid-segment breaks, no orphaned separators). */
.op-recurring-patterns {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0 0 .4rem;
}

.op-recurring-cadence {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  line-height: 1.3;
}

.op-recurring-detail {
  display: block;
  font-size: .8125rem;
  color: #6c757d;
  line-height: 1.35;
}

.op-recurring-next-label {
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin-right: .2rem;
}

.op-recurring-relative {
  color: var(--bs-secondary-color, #6c757d);
}

/* "View full schedule" link on a Regular activities block (OrganizerPage-RegularActivities-1).
   Lightweight contextual link; the activity title is also a link to /s. */
.op-recurring-viewlink {
  display: inline-block;
  margin-top: .35rem;
  font-size: .9375rem;
  font-weight: 500;
}

/* ============================================================================
   Featured Recurring Schedule card (OrganizerPage-FeaturedRecurringSchedule-1).
   Shown when the organizer has only 1–2 recurring schedules in list mode, so a
   single offering reads as a primary offering, not a thin list row. A calm white
   panel (same surface tokens as .op-schedule / .op-profile-links) whose extra size
   is earned by real content: title, cadence, locations, next 3 dates, CTA.
   ============================================================================ */
.op-featured-activity {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
}

.op-featured-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.25;
  margin: .4rem 0 .25rem;
}

.op-featured-title:hover,
.op-featured-title:focus-visible {
  color: #2c7ac7;
  text-decoration: underline;
}

.op-featured-cardloc {
  font-size: .9375rem;
  font-weight: 500;
  color: #6c757d;
  margin: 0 0 .75rem;
}

.op-featured-patterns {
  display: flex;
  flex-direction: column;
  gap: .9rem;            /* modest breathing room between distinct recurrence-rule groups */
  margin: .5rem 0 1rem;
}

.op-featured-cadence {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-body-color, #212529);
  line-height: 1.3;
}

.op-featured-detail {
  display: block;
  font-size: .875rem;
  color: #6c757d;
  line-height: 1.4;
}

/* Upcoming next-3 preview — the content that earns the card's extra height and
   proves the schedule is live, without duplicating the /s timetable. */
.op-featured-upcoming {
  border-top: 1px solid #e3e8ef;
  padding-top: 1rem;
  margin-bottom: 1.1rem;
}

.op-featured-upcoming-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c757d;
  margin: 0 0 .5rem;
}

.op-featured-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.op-featured-upcoming-list li {
  font-size: .9375rem;
  color: #212529;
  font-variant-numeric: tabular-nums;
}

.op-featured-occ-loc {
  color: #6c757d;
}

.op-featured-cta {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

.op-featured-cta:hover,
.op-featured-cta:focus-visible {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .op-featured-activity {
    padding: 1.25rem 1.25rem;
  }
  .op-featured-title {
    font-size: 1.3125rem;
  }
}

/* ============================================================================
   Activity Schedule (OrganizerPage-ActivitySchedule-1) — day-grouped rendering of
   weekly recurring rules on /o. Compact, lean rows; no grid/table; same layout on
   desktop and mobile. Additive op-schedule-* classes only.
   ============================================================================ */

/* Single light panel around the schedule body — matches the /o card surface
   (white, soft blue-grey border, rounded, comfortable padding, no heavy shadow). */
.op-schedule {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
}

/* Shared location shown once under the heading (single-location schedules). */
.op-schedule-location {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: -.25rem 0 1.1rem;
}

/* Day section header — simple but clear: weight + a definite divider, generous top space. */
.op-schedule-day {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5rem 0 .25rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #e3e8ef;
}

/* First day sits flush with the panel top (or the shared-location line). */
.op-schedule-location + .op-schedule-day,
.op-events-label + .op-schedule-day {
  margin-top: 0;
}

.op-schedule-rows {
  display: flex;
  flex-direction: column;
}

/* Aligned two columns: time | activity. Grid (not a table) so times and titles
   line up across all rows of a day. */
.op-schedule-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: baseline;
  gap: .15rem 1rem;
  padding: .55rem 0;
}

.op-schedule-row + .op-schedule-row {
  border-top: 1px solid #f1f4f8;
}

.op-schedule-time {
  color: #495057;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.op-schedule-activity {
  min-width: 0;
}

.op-schedule-title {
  font-weight: 500;
  text-decoration: none;
}

.op-schedule-title:hover,
.op-schedule-title:focus-visible {
  text-decoration: underline;
}

/* Mixed-location: muted, smaller, on its own line beneath the title. */
.op-schedule-loc {
  display: block;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .875rem;
  margin-top: .1rem;
}

@media (max-width: 575.98px) {
  .op-schedule {
    padding: 1rem 1.1rem;
  }

  /* Mobile: stack time above the activity (same conceptual day → entries layout). */
  .op-schedule-row {
    grid-template-columns: 1fr;
    gap: .1rem;
  }
}

/* ============================================================================
   Event detail page (/e) — recurring "More dates in this schedule" block
   RecurringEvents-PublicUX-OccurrenceAffordance-1 (placement: -OccurrenceAffordancePlacement-1)
   Additive ep-recurring-* classes. Rendered only for recurring occurrences whose
   schedule page is publicly reachable, low in the page (after Schedule/Location,
   before the Organizer card). Supportive — deliberately lighter than the hero.
   One-time event pages render none of this and base .ep-* styles are not modified.
   ============================================================================ */

/* Neutral, low-emphasis supporting card — no accent color, soft border. */
.ep-recurring-more {
  background: #f8f9fa;
  border: 1px solid #eceef0;
  border-radius: .5rem;
  padding: 1rem 1.1rem;
  margin: 1.5rem 0;
}

.ep-recurring-more-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

.ep-recurring-more-note {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
  margin: 0;
}

.ep-recurring-more-link {
  font-weight: 500;
  font-size: .9375rem;
}

.ep-recurring-siblings {
  list-style: none;
  padding: 0;
  margin: 0 0 .65rem;
}

.ep-recurring-sibling + .ep-recurring-sibling {
  border-top: 1px solid #eef0f2;
}

.ep-recurring-sibling-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  text-decoration: none;
  color: var(--bs-link-color, #0d6efd);
  padding: .4rem 0;
}

.ep-recurring-sibling-link:hover time {
  text-decoration: underline;
}

.ep-recurring-sibling-loc {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9rem;
}

/* ============================================================================
   Schedule page (/s) — Upcoming dates, grouped by month
   RecurringEvents-PublicUX-ScheduleUpcomingDates-1
   Scoped s-upcoming-* classes. Date-focused rows (the title repeats across a
   recurring schedule, so it is intentionally omitted here). Reuses no shared
   op-event-card styles.
   ============================================================================ */

/* Subtle warm divider marking the transition from the schedule summary ("When it meets")
   to individual occurrence browsing. Thin light-warm line with generous spacing — no heavy hr. */
.s-upcoming {
  border-top: 1px solid #e7e2d6;
  padding-top: 2.25rem;
  margin-top: .5rem;
}

.s-upcoming-count {
  color: var(--bs-secondary-color, #6c757d);
}

.s-upcoming-month + .s-upcoming-month {
  margin-top: 1.25rem;
}

.s-upcoming-month-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0 0 .4rem;
}

.s-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  overflow: hidden;
  background: #fff;
}

.s-upcoming-row + .s-upcoming-row {
  border-top: 1px solid #f0f1f3;
}

.s-upcoming-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .55rem;
  padding: .6rem .9rem;
  text-decoration: none;
  color: var(--bs-body-color, #212529);
}

.s-upcoming-link:hover {
  background: #f8f9fa;
}

.s-upcoming-link:hover .s-upcoming-date {
  text-decoration: underline;
}

.s-upcoming-date {
  font-weight: 600;
  color: var(--bs-link-color, #0d6efd);
}

.s-upcoming-time {
  color: var(--bs-body-color, #212529);
}

.s-upcoming-sep {
  color: var(--bs-secondary-color, #adb5bd);
}

.s-upcoming-loc {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .9375rem;
}