/* ==========================================================================
   WhatToDo Baja — Unified Stylesheet
   Sections:
     1. CSS Variables
     2. Reset & Base
     3. Layout (header, sidebar, content, footer)
     4. Components (event-card, event-detail, modal, calendar, filters,
        featured-carousel, CTA, day-header, badges, action buttons)
     5. Pages (homepage, submit form, submitted)
     6. Utilities
     7. Responsive (@media queries)
   ========================================================================== */

/* === 1. CSS Variables === */
:root {
  --bg: #FFF8F2;
  --card-bg: #FFFFFF;
  --coral: #FB4000;
  --coral-light: rgba(251, 64, 0, 0.08);
  /* coral for small text on light backgrounds (brand coral is 3.4:1 there) */
  --coral-text: #B52E00;
  --sea: #0E5563;
  --teal: #008A05;
  --teal-light: rgba(0,138,5,0.08);
  /* green for text on light and green-tinted backgrounds */
  --teal-text: #007104;
  --text: #222222;
  --text-muted: #676767;
  /* warm brown-gray for secondary UI text; AA on cream, sand and white */
  --text-soft: #736455;
  /* secondary text on dark surfaces (#1a1a1a new-events preview): 6.8:1 */
  --text-on-dark-muted: #9CA3AF;
  --border: #E8DDD0;
  --shadow: 0 2px 10px rgba(180,100,40,0.06);
  --shadow-hover: 0 6px 16px rgba(180,100,40,0.12);
  --radius: 10px;
  --day-strip-h: 77px;
  --max-width: 80rem;
  --sidebar-w: 14rem;
  --cal-sidebar-w: 18rem;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* === Display font: self-hosted (website/fonts, SIL OFL), latin + latin-ext ===
   font-display: optional: if the file is not here within the browser's short
   block period, this page view keeps the fallback and never swaps later, so
   nothing moves. Returning visits have it cached. Preloaded in the page head. */
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/dela-gothic-one-latin.Zyf5r4V-4g.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/dela-gothic-one-latin-ext.M92ZuSSZ8g.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === 2. Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  background: linear-gradient(160deg, var(--coral), #fccc70);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  background-attachment: fixed;
}

/* === 3. Layout === */

/* --- Header --- */
.header {
  position: relative;
  background: transparent;
  color: white;
  border-bottom: none;
  z-index: 30;
  flex-shrink: 0;
}

.header__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header__brand {
  min-width: 0;
  flex-shrink: 1;
}

.header__title-link,
.header__title-link:hover,
.header__title-link:visited,
.header__title-link:active {
  text-decoration: none !important;
  color: inherit;
}

.header__title {
  font-family: 'Dela Gothic One', var(--font);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  color: white;
  white-space: nowrap;
  text-transform: capitalize;
}

.header__subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font);
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-top: 0.3rem;
  min-height: 1.3em;
}
/* "N events added X ago" line is hidden (Sep 2026) via the hidden attribute in
   index.html / east-side.html; JS still updates the text. Remove the attribute to restore. */
.header__subtitle[hidden] {
  display: none;
}

/* The feed's h1 ("Events in …") styled as the town line it replaced; block,
   not flex, so the line can end in an ellipsis on a narrow phone. */
.header__subtitle.header__h1 {
  display: block;
  line-height: 1.3;
}
@media (max-width: 767px) {
  /* "Things to do in" plus three towns on one line (Scott, 2026-10-10): the
     size follows the screen width (the line is ~29.5 font-sizes long) and
     tops out at the usual 0.8rem. */
  .header__inner--towns #header-towns.header__h1 {
    font-size: min(0.8rem, calc((100vw - 2.25rem) / 29.5));
    letter-spacing: 0;
    text-overflow: clip;
  }
}

.header__subtitle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
}

.header__subtitle-text {
  transition: opacity 0.3s ease;
}

.header__subtitle-text.fading {
  opacity: 0;
}

/* Live indicator */
.live-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 8px;
  vertical-align: middle;
}

.live-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F78E50;
  position: relative;
}

.live-indicator__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #F78E50;
  animation: livePulse 2s ease-in-out infinite;
}

.live-indicator--fetching .live-indicator__dot::after {
  animation: liveSpin 0.8s linear infinite;
}

.live-indicator--offline .live-indicator__dot {
  background: #9ca3af;
}

.live-indicator--offline .live-indicator__dot::after {
  animation: none;
}

.live-indicator__text {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.live-indicator--offline .live-indicator__text {
  color: var(--text-muted);
}

.live-indicator__timestamp {
  color: var(--text-muted);
  font-size: 0.65rem;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.8); }
}

@keyframes liveSpin {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Header actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* CTA button — hidden on mobile */
.header__cta {
  display: none;
  align-items: center;
  gap: 0.375rem;
  background: white;
  color: #222222;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  white-space: nowrap;
}

.header__cta:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.header__cta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Mobile: show short CTA label, hide desktop label */
.header__cta-text--desktop {
  display: none;
}

.header__cta-text--mobile {
  display: inline;
}

/* Mobile language toggle — globe button */
.header__lang-mobile {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: white;
  color: #222222;
  border: none;
  border-radius: 9999px;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.header__lang-mobile:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.header__lang-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.header__lang-text {
  font-size: 0.75rem;
  font-weight: 700;
}

/* Theme dropdown in header */
.header__theme-dropdown {
  position: relative;
}
.header__theme-trigger {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 9999px;
  padding: 0.375rem 0.5rem 0.375rem 0.625rem;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
}
.header__theme-trigger:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.5);
}
.header__theme-label {
  line-height: 1;
}
.header__theme-chevron {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.header__theme-dropdown[data-open] .header__theme-chevron {
  transform: rotate(180deg);
}
.header__theme-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border: 1px solid #E8DDD0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 120px;
  z-index: 100;
  overflow: hidden;
}
.header__theme-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: #222222;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}
.header__theme-option:hover {
  background: #F7F7F7;
}
.header__theme-option--active {
  color: var(--coral);
}
.header__theme-desc {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.75rem;
}

/* --- Hamburger Menu --- */
.header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #222222;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.header__hamburger:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.header__hamburger-icon {
  flex-shrink: 0;
}

.hamburger-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.hamburger-overlay--visible {
  opacity: 1;
}

.hamburger-overlay[hidden] {
  display: none;
}

.hamburger-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  width: 300px;
  background: var(--card-bg, #fff);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  padding: 1.5rem 0;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.hamburger-panel--visible {
  transform: translateX(0);
}

.hamburger-panel__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, background 0.15s ease;
  text-align: left;
  opacity: 0;
  transform: translateX(20px);
}

.hamburger-panel--visible .hamburger-panel__item {
  opacity: 1;
  transform: translateX(0);
}

.hamburger-panel--visible .hamburger-panel__item:nth-child(2) {
  transition-delay: 0.06s;
}

.hamburger-panel--visible .hamburger-panel__item:nth-child(3) {
  transition-delay: 0.12s;
}

.hamburger-panel--visible .hamburger-panel__item:nth-child(4) {
  transition-delay: 0.18s;
}

.hamburger-panel__item:hover {
  background: #f5f5f5;
}

.hamburger-panel__item svg {
  flex-shrink: 0;
  color: #666;
}

.hamburger-panel[hidden] {
  display: none;
}

.hamburger-panel__close {
  display: flex;
  margin-left: auto;
  margin-right: 1rem;
  margin-bottom: 0.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  color: #555;
  transition: background 0.15s ease;
}

.hamburger-panel__close:hover {
  background: #EBEBEB;
}

.hamburger-panel__close:focus {
  outline: none;
}

.hamburger-panel__divider {
  height: 1px;
  background: #e5e5e5;
  margin: 0.5rem 1.5rem;
}

.hamburger-panel__social {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
  justify-content: center;
}

.hamburger-panel__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  transition: background 0.2s, color 0.2s;
}

.hamburger-panel__social-link:hover {
  background: #FB4000;
  color: #fff;
}

/* --- Site Footer --- */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  margin-top: 2rem;
  border-top: 1px solid #e5e5e5;
}

.site-footer__social {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #666;
  transition: background 0.2s, color 0.2s;
}

.site-footer__social-link:hover {
  background: #FB4000;
  color: #fff;
}

.site-footer__text {
  font-size: 0.8rem;
  color: #222;
  margin: 0;
}

.site-footer__text + .site-footer__text {
  margin-top: 0.5rem;
}

/* Feed pages: the page closes on the same navy band it opens with (the
   region banner), full-bleed, so the end of the feed is unmistakable and the
   legal name is legible. Wordmark and tagline left, site links right, then
   the legal line and social links. The deep bottom padding keeps everything
   clear of the fixed Top / Menu buttons. */
.site-footer--feed {
  position: relative; /* paints above full-bleed box-shadow hacks (sponsors footnote) */
  z-index: 1;
  margin-top: 0;
  padding: 0;
  border-top: 0;
  background: #172a40;
  color: #fff;
  text-align: left;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5.5rem;
}

/* Mobile first: two columns, brand across the top, towns left, actions
   right. Desktop: one row of four columns. */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "brand brand"
    "west actions"
    "east actions";
  gap: 1.75rem 1.5rem;
}

.site-footer__brand { grid-area: brand; }
.site-footer__group--west { grid-area: west; }
.site-footer__group--east { grid-area: east; }
.site-footer__actions { grid-area: actions; }

.site-footer__wordmark {
  display: inline-block;
  font-family: 'Dela Gothic One', var(--font);
  font-size: 1.5rem;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
}

.site-footer__wordmark:hover,
.site-footer__wordmark:focus-visible {
  color: #fccc70;
}

.site-footer__tagline {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__heading {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.site-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Tap targets: each link is a full line, roughly 40px tall on phones */
.site-footer__links a,
.site-footer__links button {
  display: inline-block;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__links button:hover,
.site-footer__links button:focus-visible {
  color: #fccc70;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__connect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

.site-footer__bottom {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
}

.site-footer__legal {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: #fccc70;
}

/* Same pill as the header's globe toggle */
.site-footer__lang {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: none;
  border-radius: 9999px;
  background: #fff;
  color: #222222;
  font-family: var(--font);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.site-footer__lang:hover,
.site-footer__lang:focus-visible {
  background: #fccc70;
}

.site-footer__lang-text {
  font-size: 0.75rem;
  font-weight: 700;
}

.site-footer--feed .site-footer__social {
  margin: 0;
  gap: 0.75rem;
}

.site-footer--feed .site-footer__social-link {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.site-footer--feed .site-footer__social-link:hover,
.site-footer--feed .site-footer__social-link:focus-visible {
  background: #fccc70;
  color: #172a40;
}

@media (min-width: 768px) {
  .site-footer__inner {
    padding-top: 3rem;
  }

  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    grid-template-areas: "brand west east actions";
    gap: 2rem 3rem;
  }

  .site-footer__wordmark {
    font-size: 1.75rem;
  }

  .site-footer__tagline {
    max-width: 22rem;
  }

  .site-footer__connect {
    justify-content: flex-start;
    gap: 1.5rem;
    margin-top: 3rem;
  }
}

@media (max-width: 767px) {
  .site-footer__inner {
    padding-top: 2rem;
  }
}

.site-footer__link {
  color: inherit;
  text-decoration: underline;
}

.site-footer__link:hover {
  color: #FB4000;
}

/* --- Sponsor Slot (rotating slider above the feed) --- */
/* Tamara slide (first child) is relative-positioned and drives the slot's height.
   All other slides absolute-position over the same area, so the slot stays
   the natural compact size of the photo banner regardless of CTA content. */
.sponsor-slot {
  margin: 1rem 1.25rem;
  border-radius: 12px;
  border-bottom: 1px solid #E8DDD0;
  overflow: hidden;
  position: relative;
}

/* Caption underneath the sponsor banner. Flex layout + nowrap keeps the
   "Become a sponsor" link on the SAME line as the lead sentence regardless
   of viewport. Lives inside the .sponsor-block wrapper so the midfeed clone
   carries it along. */
.sponsor-slot__caption {
  margin: -0.25rem 1.25rem 0.75rem;
  font-family: var(--font);
  font-size: 0.78rem;
  line-height: 1.35;
  color: #6B5742;
  display: flex;
  justify-content: center;
  align-items: baseline;
  /* Wraps (the link moves to its own line) rather than running off a narrow
     phone; the Spanish caption is longer than most screens. */
  flex-wrap: wrap;
  text-align: center;
  text-wrap: balance;
  gap: 0 0.3em;
}
.sponsor-slot__caption-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.sponsor-slot__caption-link:hover,
.sponsor-slot__caption-link:focus-visible {
  text-decoration-thickness: 2px;
}
@media (max-width: 767px) {
  .sponsor-slot__caption {
    margin: -0.25rem 0.75rem 0.75rem;
    font-size: 0.72rem;
  }
  /* Top banner only: tight gaps so the first events sit above the fold. */
  .sponsor-block:not(.sponsor-block--midfeed) > .sponsor-slot {
    margin: 0.5rem 0.75rem;
  }
  .sponsor-block:not(.sponsor-block--midfeed) > .sponsor-slot__caption {
    margin: -0.25rem 0.75rem 0;
  }
}

/* Mid-feed sponsor block: zero the inner side margins so the banner + caption
   align flush with .main's own padding. Without this, mid-feed insets stack
   .main's 0.75rem padding on top of .sponsor-slot's 0.75rem margin (= 24px),
   visually wider than the top banner which sits in mob-sticky-wrap with no
   parent padding (12px total). */
.sponsor-block--midfeed > .sponsor-slot,
.sponsor-block--midfeed > .sponsor-slot__caption,
#events-container > .sponsor-block > .sponsor-slot,
#events-container > .sponsor-block > .sponsor-slot__caption {
  margin-left: 0;
  margin-right: 0;
}
/* The top banner leads the feed, above the featured panel */
#events-container > .sponsor-block:not(.sponsor-block--midfeed) {
  margin-bottom: 0.75rem;
}

.sponsor-slot .sponsor-slot__slide {
  margin: 0;
  border-radius: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* Driver slide is the first VISIBLE slide (set by the rotator JS, not :first-child)
   so the slot keeps its height after expiring sponsors are date-guarded out. */
.sponsor-slot .sponsor-slot__slide--driver {
  position: relative;
}

.sponsor-slot .sponsor-slot__slide--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.sponsor-slot .sponsor-slot__slide--exiting {
  opacity: 0;
  transform: scale(0.96);
}

.sponsor-slot--single .sponsor-slot__slide--active {
  transition: none;
}

/* Round the credit bar's bottom corners to match the slot's border-radius
   (transform on the slide creates a stacking context that breaks the slot's
   overflow-hidden clipping in some browsers, so round explicitly here) */
.sponsor-slot .ad-space-mobile__credit {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Banner-format Be a Sponsor CTA — same visual language as the inline cta-sponsor card */
.cta-banner {
  position: relative;
  background: #1f1812;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100%;
  overflow: hidden;
}

/* Decorative watermark star — pinned to top-right, coral semi-transparent */
.cta-banner__decor {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  transform: rotate(12deg);
  color: rgba(251, 64, 0, 0.45);
  pointer-events: none;
  line-height: 0;
  z-index: 0;
}

.cta-banner__decor svg {
  width: 2.25rem;
  height: 2.25rem;
}

.cta-banner__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}

.cta-banner__eyebrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Dela Gothic One', var(--font);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}


.cta-banner__subtext {
  font-family: var(--font);
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
  color: #f5ede3;
  max-width: 30rem;
  font-weight: 500;
  text-wrap: balance;
}

.cta-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--coral);
  color: #fff;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 10px rgba(251, 64, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.cta-banner__link:hover .cta-banner__cta {
  background: #d35820;
  transform: translateY(-1px);
}

/* Mobile — fit the CTA inside Tamara's natural compact height (~96px slot).
   Whole card is a clickable link, so the visual button is dropped on mobile;
   subtext picks up an arrow via ::after to signal tap action. */
@media (max-width: 767px) {
  .sponsor-slot {
    margin: 1rem 0.75rem;
  }
  .cta-banner__link {
    gap: 0.45rem;
    padding: 0.4rem 0.875rem;
  }
  .cta-banner__eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }
  /* Short orange divider line under the eyebrow — mobile only */
  .cta-banner__eyebrow::after {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: var(--coral);
    margin-top: 0.45rem;
    border-radius: 1px;
  }
  .cta-banner__subtext {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  /* Append arrow to subtext on mobile — replaces the hidden button as tap hint */
  .cta-banner__subtext::after {
    content: ' →';
    color: var(--coral);
    font-weight: 700;
  }
  .cta-banner__cta {
    display: none; /* drop button on mobile — entire card is the link */
  }
  .cta-banner__decor svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.cta-banner__note {
  margin: 0.5rem 0 0;
  font-family: var(--font);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
  max-width: 28rem;
}

/* --- Ad Space (mobile — below filters, above events) --- */
.ad-space-mobile {
  display: flex;
  min-height: 9.5rem;
  margin: 1.5rem 1.25rem 0.75rem;
  border: 2px dashed #B89B7A;
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6B5742;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font);
}

/* Filled state — actual sponsor image */
.ad-space-mobile--filled {
  border: none;
  background: transparent;
  padding: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: normal;
}

.ad-space-mobile__link {
  display: block;
  width: 100%;
  text-decoration: none;
}

/* Photo area — aspect ratio matches the image's photo region (text band cropped via overflow) */
.ad-space-mobile__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1528 / 305;
  overflow: hidden;
  background: #000;
}

/* Banner-format sponsor slides — self-contained creatives (brand baked into image, no credit
   band). The wrap fills the slot's full height; the image uses object-fit:contain so it stays
   uncropped at its native aspect, letterboxing into leftover space so every slide in the
   rotator renders at the same height. Aspect below sized for the current sponsor banner; add
   a sub-modifier (e.g. .ad-space-mobile--banner-tall) if a future banner has a different ratio. */
.ad-space-mobile--banner .ad-space-mobile__image-wrap {
  aspect-ratio: 1290 / 344;
  height: 100%;
  background: #fff;
}
.ad-space-mobile--banner .ad-space-mobile__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ad-space-mobile__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.ad-space-mobile__link:hover .ad-space-mobile__img {
  transform: scale(1.02);
}

/* Credit band — replaces the text strip that was baked into the image */
.ad-space-mobile__credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #000;
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(0.7rem, 3.2vw, 1.125rem);
  padding: 0.375rem 0.5rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}

.ad-space-mobile__credit-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ad-space-mobile__cta-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  opacity: 0.85;
}

.ad-space-mobile__pill {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* --- Sidebar Group (wraps category + calendar sidebars) --- */
.sidebar-group {
  display: none; /* hidden on mobile */
  background: #F5EDE3;
  border-color: #E8DDD0;
}

/* --- Sidebar --- */
.sidebar {
  display: none; /* hidden on mobile by default */
  background: #F5EDE3;
  border-color: #E8DDD0;
}

.sidebar__section {
  border-color: #E8DDD0;
  padding: 0.375rem 1.25rem;
  border-bottom: 1px solid #E8DDD0;
}

.sidebar__section:first-child {
  padding-top: 0.5rem;
}

.sidebar__section:last-child {
  border-bottom: none;
}

.sidebar__heading {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sidebar__heading-icon {
  font-size: 0.85rem;
}

.sidebar__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

/* All/None toggle */
.sidebar__cat-toggles {
  display: flex;
  background: #F0E6DA;
  border-radius: 6px;
  padding: 2px;
  gap: 0.125rem;
}

.sidebar__cat-toggle-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-soft);
  background: transparent;
  border: none;
  padding: 0.2rem 0.6rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  line-height: 1;
}

.sidebar__cat-toggle-btn:hover {
  color: #6A5A4A;
}

.sidebar__cat-toggle-btn--active {
  background: #FFF5ED;
  color: #222222;
  box-shadow: 0 1px 3px rgba(180,100,40,0.08);
  font-weight: 700;
}

/* "Things To Do" total */
.sidebar__total-count {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: #222222;
}

.sidebar__total-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.sidebar__total-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 700;
}

.sidebar__total-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  background: var(--coral);
  border: 1px solid var(--coral);
  padding: 2px 8px;
  border-radius: 9999px;
  min-width: 28px;
  text-align: center;
  line-height: 1.2;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

/* Zero results — red warning badge */
.sidebar__total-number--zero {
  background: #D94D3B;
  border-color: #D94D3B;
  animation: badgePulse 0.4s ease;
}

@keyframes badgePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Sidebar Language Toggle */
.sidebar__lang-section {
  display: none; /* hidden on mobile, shown via desktop media query */
}

.sidebar__lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sidebar__lang-icon {
  width: 14px;
  height: 14px;
  color: #B0B0B0;
  flex-shrink: 0;
}

.sidebar__lang-track {
  display: flex;
  align-items: center;
  background: #F7F7F7;
  border: 1px solid #EBEBEB;
  border-radius: 9999px;
  padding: 3px;
  font-weight: 600;
  flex: 1;
  position: relative;
}

.sidebar__lang-btn {
  flex: 1;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-family: var(--font);
  font-weight: 600;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.sidebar__lang-btn:hover {
  color: #222222;
}

.sidebar__lang-btn--active {
  background: #fff;
  color: #222222;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border: 1px solid #EBEBEB;
}

/* Town items */
.sidebar__towns {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sidebar__town {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555555;
}

.sidebar__town:hover {
  background: #FFF5ED;
}

.sidebar__town--active,
.sidebar__town--active:hover {
  background: #E5D9CE;
  color: #222222;
  font-weight: 700;
}

.sidebar__town--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sidebar__town--disabled:hover {
  background: transparent;
}

.sidebar__town-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #C4A882;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.sidebar__town--active .sidebar__town-icon {
  color: var(--coral);
  opacity: 1;
}

.sidebar__town-name {
  flex: 1;
}

.sidebar__town--disabled .sidebar__town-name {
  color: var(--text-muted);
}

.sidebar__town-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6A5A4A;
  background: #F0E6DA;
  padding: 2px 8px;
  border-color: #E8DDD0;
  border: 1px solid #E8DDD0;
  border-radius: 9999px;
  min-width: 28px;
  text-align: center;
  line-height: 1.2;
}

.sidebar__town--active .sidebar__town-count {
  background: #F5EDE3;
  color: #5A4A3A;
  border-color: #E8DDD0;
  font-weight: 700;
}

.sidebar__town--disabled .sidebar__town-count {
  background: #F7F7F7;
}

/* sidebar__time-range-section moved to sidebar-group__pills (spanning row) */

/* Free events filter */
.sidebar__free-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--font);
  background: transparent;
  font-weight: 500;
  color: #555555;
  transition: background 0.15s ease, transform 0.1s ease;
  width: 100%;
  text-align: left;
}

.sidebar__free-filter:hover {
  background: #FFF5ED;
  color: #222222;
}

.sidebar__free-filter::before {
  display: none;
}

.sidebar__free-filter--active {
  background: #E5D9CE;
  color: #222222;
  font-weight: 700;
}

.sidebar__free-icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #C4A882;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.sidebar__free-filter--active .sidebar__free-icon {
  color: var(--coral);
  opacity: 1;
}

.sidebar__free-name {
  flex: 1;
}

.sidebar__free-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6A5A4A;
  background: #F0E6DA;
  padding: 2px 8px;
  border: 1px solid #E8DDD0;
  border-radius: 9999px;
  min-width: 28px;
  text-align: center;
  line-height: 1.2;
}

.sidebar__free-count:empty {
  display: none;
}

.sidebar__free-filter--active .sidebar__free-count {
  background: #E8DDD0;
  color: #6A5A4A;
  border-color: #D8CDB0;
}

/* Clear filters pill */
@keyframes clearFilterSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sidebar__clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #FFF5ED;
  border: 1px solid #E8DDD0;
  border-radius: 9999px;
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: var(--font);
  animation: clearFilterSlideIn 0.2s ease-out;
  margin-top: 0.35rem;
}
.sidebar__clear-filters:hover {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
}
.sidebar__clear-filters:hover svg {
  stroke: white;
}
.sidebar__clear-filters[hidden] {
  display: none;
}

/* --- Sidebar Time Dropdown (stdd) --- */
.stdd {
  position: relative;
}

.stdd__trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid #E8DDD0;
  border-radius: 0.625rem;
  background: #FFF5ED;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  color: #222222;
  cursor: pointer;
  transition: all 0.15s ease;
}

.stdd__trigger:hover {
  border-color: #CCC;
}

.stdd__trigger--open {
  border-color: #C4A882;
  box-shadow: 0 0 0 1px #C4A882;
}

.stdd__trigger-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: #717171;
  flex-shrink: 0;
}

.stdd__trigger-label {
  flex: 1;
  text-align: left;
}

.stdd__chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: #717171;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.stdd__trigger--open .stdd__chevron {
  transform: rotate(180deg);
}

.stdd__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFF5ED;
  border: 1px solid #E8DDD0;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(120,90,50,0.1);
  padding: 0.5rem 0.625rem;
  z-index: 30;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.stdd__panel--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.stdd__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.1s ease;
}

.stdd__item:hover {
  background: #FFF5ED;
}

.stdd__item--active {
  background: #E5D9CE;
  color: #222222;
}

.stdd__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.375rem;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.stdd__check svg {
  width: 0.75rem;
  height: 0.75rem;
  display: none;
}

.stdd__item--active .stdd__check {
  background: #222222;
  border-color: #222222;
}

.stdd__item--active .stdd__check svg {
  display: block;
  color: white;
}

.stdd__item-icon {
  display: none;
}

.stdd__item-label {
  flex: 1;
  text-align: left;
}

/* --- Time-of-Day Filter --- */
.time-filter {
  display: flex;
  gap: 2px;
  background: #F7F7F7;
  border: 1px solid #EBEBEB;
  border-radius: 10px;
  padding: 3px;
}

.time-filter__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-filter__btn:hover {
  color: #222222;
}

.time-filter__btn--active {
  background: #fff;
  color: #222222;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid #EBEBEB;
}

.time-filter__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Mobile Sticky Wrap --- */
.mob-sticky-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f6ede3;
  padding-top: 0.25rem;
  padding-bottom: 0px;
  border-bottom: 1px solid #EBEBEB;
  box-shadow: 0 -1rem 0 white;
}

.mob__panel-time {
  padding: 0 0.5rem;
  margin-bottom: 0.75rem;
}

.mob__panel-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

/* --- Mobile Filters --- */
.mob-only {
  display: none;
}

.mob {
  display: none;
  background: #F5EDE3;
}

.mob__row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem 0.25rem;
}

.mob__divider {
  width: 1px;
  height: 1.25rem;
  background: #EBEBEB;
  flex-shrink: 0;
}

/* Filters button */
.mob__filters-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #EBEBEB;
  background: white;
  color: #222222;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mob__filters-btn--active,
.mob__filters-btn--open {
  background: #222222;
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.mob__filters-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.mob__filters-label {
  white-space: nowrap;
}

.mob__filters-badge {
  background: white;
  color: #222222;
  font-size: 10px;
  font-weight: 700;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mob__filters-badge[hidden] {
  display: none;
}

.mob__chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s ease;
}

.mob__filters-btn--open .mob__chevron {
  transform: rotate(180deg);
}

/* Pin icon */
.mob__pin-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: #F25745;
}

/* Town pills */
.mob__town {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.mob__town--active {
  background: #222222;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.mob__town--disabled {
  background: white;
  color: #B0B0B0;
  border-color: #EBEBEB;
  text-decoration: line-through;
  text-decoration-color: #B0B0B0;
  cursor: not-allowed;
}

/* Row 2: Category pills */
.mob__categories-row {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.mob__pills {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  flex: 1;
}

.mob__pill {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #EBEBEB;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mob__pill--active {
  background: #222222;
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.mob__pill-overflow {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

/* Free toggle */
.mob__free-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #EBEBEB;
  background: white;
  color: #008A05;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mob__free-btn--active {
  background: #008A05;
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0,138,5,0.12);
}

/* Expandable panel */
.mob__panel {
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.mob__panel[hidden] {
  display: none;
}

.mob__panel-inner {
  padding: 0.5rem 1rem 1rem;
  border-top: 1px solid #EBEBEB;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mob__panel-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mob__panel-pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #EBEBEB;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mob__panel-pill--active {
  background: #222222;
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.mob__panel-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.mob__panel-pill--active .mob__panel-pill__dot {
  background: white !important;
}

.mob__panel-pill__count {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 2px;
}

.mob__panel-pill--active .mob__panel-pill__count {
  opacity: 0.9;
}

/* Panel free toggle */
.mob__panel-free {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  width: 100%;
  border: 1px solid #EBEBEB;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mob__panel-free--active {
  background: rgba(0,138,5,0.1);
  color: #008A05;
  border-color: rgba(0,138,5,0.2);
}

.mob__panel-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 2px solid #EBEBEB;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.mob__panel-free--active .mob__panel-checkbox {
  background: #008A05;
  border-color: #008A05;
}

.mob__panel-checkbox::after {
  content: '';
  display: none;
}

.mob__panel-free--active .mob__panel-checkbox::after {
  display: block;
  content: '\2713';
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* Panel language toggle */
.mob__panel-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mob__panel-lang-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: #B0B0B0;
  flex-shrink: 0;
}

.mob__panel-lang-track {
  display: flex;
  align-items: center;
  background: #F7F7F7;
  border: 1px solid #EBEBEB;
  border-radius: 9999px;
  padding: 0.25rem;
  font-weight: 600;
  flex: 1;
  position: relative;
}

.mob__panel-lang-btn {
  flex: 1;
  padding: 0.375rem 0.75rem;
  font-family: var(--font);
  font-size: 0.75rem;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.mob__panel-lang-btn--active {
  background: white;
  color: #222222;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid #EBEBEB;
}

/* Panel actions */
.mob__panel-actions {
  display: flex;
  gap: 0.5rem;
}

.mob__panel-clear {
  flex: 1;
  padding: 0.625rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: #222222;
  background: none;
  border: 1px solid #EBEBEB;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mob__panel-clear:hover {
  background: #F7F7F7;
}

.mob__panel-show {
  flex: 1;
  padding: 0.625rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: #222222;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mob__panel-show:hover {
  background: black;
}

/* Result count */
.mob__count {
  padding: 0 1rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mob__count-cat {
  color: #222222;
}

.mob__count-free {
  color: #008A05;
}

/* Bottom border */
.mob__border {
  height: 1px;
  background: #EBEBEB;
}

/* --- V3 Mobile Filters --- */

/* Row 1: Town dropdown + Time dropdown + Free */
.mob__row--v3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Same side gutter as the date pills under it */
  padding: 0.5rem 0.75rem 0.25rem;
}

/* Vertical dividers between Row 1 items */
.mob__row-divider {
  width: 1px;
  height: 1.25rem;
  background: #E8DDD0;
  flex-shrink: 0;
}

/* Town dropdown trigger: same box as the category dropdown beside it */
.mob__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #E8DDD0;
  background: #FFF5ED;
  color: #222222;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.mob__dropdown-trigger:hover {
  border-color: #C4A882;
}

.mob__dropdown-trigger--active {
  border-color: #CCCCCC;
}

/* Town and Categories split the row evenly; a long pick ellipsizes. */
#mob-town-trigger {
  overflow: visible;
  flex: 1;
  justify-content: flex-start;
}

/* 320px phones: the category dots give their room to "Categorías". */
@media (max-width: 359px) {
  .mob__dropdown-wrap .mob__cat-dots {
    display: none;
  }
}

#mob-town-trigger .mob__dropdown-label {
  max-width: none;
  flex: 1;
  text-align: left;
}

.mob__dropdown-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.mob__dropdown-icon--coral {
  color: var(--coral);
}

.mob__dropdown-label {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob__dropdown-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--coral);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.mob__dropdown-extra[hidden] {
  display: none;
}

.mob__dropdown-chevron {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease;
  color: #717171;
  flex-shrink: 0;
}

.mob__dropdown-trigger--open {
  border-color: #C4A882;
  box-shadow: 0 0 0 1px #C4A882;
}

.mob__dropdown-trigger--open .mob__dropdown-chevron {
  transform: rotate(180deg);
}

/* Dropdown overlay panel */
.mob__dropdown-panel {
  position: absolute;
  top: 100%;
  left: 1rem;
  right: auto;
  min-width: 180px;
  z-index: 50;
  background: #FFF5ED;
  border: 1px solid #E8DDD0;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(120,90,50,0.1);
  padding: 0.375rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mob__dropdown-panel--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Dropdown checkbox row */
.mob__dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.mob__dropdown-item:hover {
  background: #FFF5ED;
}

.mob__dropdown-item--active {
  background: #E5D9CE;
  color: #222222;
  font-weight: 600;
}

.mob__dropdown-item-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.mob__dropdown-item--active .mob__dropdown-item-icon {
  opacity: 0.7;
}

.mob__dropdown-time-icon {
  display: none;
}

.mob__dropdown-item-label {
  flex: 1;
}

.mob__dropdown-item-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6A5A4A;
  background: #F0E6DA;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid #E8DDD0;
  min-width: 28px;
  text-align: center;
  line-height: 1.2;
}

.mob__dropdown-item--active .mob__dropdown-item-count {
  background: #F5EDE3;
  color: #5A4A3A;
  border-color: #E8DDD0;
  font-weight: 700;
}

/* Dropdown check icons */
.mob__dropdown-check {
  color: #C4A882;
}
.mob__dropdown-item--active .mob__dropdown-check {
  color: var(--coral);
}

/* Free button (v3 — row 1) */
.mob__free-v3 {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #EBEBEB;
  background: white;
  color: #008A05;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mob__free-v3--active {
  background: #008A05;
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Hide free event filter (desktop + mobile) */
.sidebar__section:has(.sidebar__free-filter),
.sidebar__free-filter,
.mob__free-v3,
.mob__row-divider--free {
  display: none !important;
}

/* Town & time triggers fill the row equally */
.mob__dropdown-trigger {
  flex: 1;
  min-width: 0;
}

/* --- Category Accordion --- */
.mob__cat-accordion {
  margin: 0 1rem 0;
  border: 1px solid #E8DDD0;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: background 0.15s ease;
  background: #FFF5ED;
}

.mob__cat-accordion--open {
  background: #FFF5ED;
}

/* Accordion header (collapsed view) */
.mob__cat-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  color: #222222;
  width: 100%;
  text-align: left;
}

.mob__cat-dots {
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
}

.mob__cat-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1px solid #F5EDE3;
  margin-left: -4px;
}

.mob__cat-dot:first-child {
  margin-left: 0;
}

.mob__cat-header-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  white-space: nowrap;
}

/* Mini-pills for active categories in collapsed view */
.mob__cat-mini-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.375rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.mob__cat-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color 0.15s ease;
}

.mob__cat-clear:hover {
  color: #222222;
}

.mob__cat-clear[hidden] {
  display: none;
}

.mob__cat-clear-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: #C4A882;
}

.mob__cat-chevron {
  width: 1rem;
  height: 1rem;
  color: #222222;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mob__cat-accordion--open .mob__cat-chevron {
  transform: rotate(180deg);
}

/* Accordion body (expanded category list) */
.mob__cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.mob__cat-accordion--open .mob__cat-body {
  max-height: 30rem;
}

.mob__cat-body-inner {
  padding: 0.125rem 0.375rem 0.5rem;
  border-top: 1px solid #E8DDD0;
}

/* In the filter row beside Towns: the header is the trigger, the list drops
   below the whole row as a panel (positioned against .mob__dropdown-wrap). */
.mob__dropdown-wrap > .mob__cat-accordion {
  margin: 0;
  flex: 1;
  min-width: 0;
  height: 2.25rem;
  display: flex;
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mob__dropdown-wrap > .mob__cat-accordion:hover,
.mob__dropdown-wrap > .mob__cat-accordion--open {
  border-color: #C4A882;
}

.mob__dropdown-wrap > .mob__cat-accordion--open {
  box-shadow: 0 0 0 1px #C4A882;
}

.mob__dropdown-wrap > .mob__cat-accordion .mob__cat-header {
  padding: 0 0.75rem;
  min-width: 0;
}

.mob__dropdown-wrap > .mob__cat-accordion .mob__cat-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: #717171;
}

.mob__dropdown-wrap .mob__cat-body {
  position: absolute;
  top: 100%;
  left: 1rem;
  right: 1rem;
  z-index: 50;
  margin-top: 0.25rem;
  max-height: min(30rem, 70vh);
  overflow-y: auto;
  background: #FFF5ED;
  border: 1px solid #E8DDD0;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(120,90,50,0.1);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mob__dropdown-wrap .mob__cat-accordion--open .mob__cat-body {
  max-height: min(30rem, 70vh);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mob__dropdown-wrap .mob__cat-body-inner {
  border-top: none;
}

/* All/None toggle at top of accordion body */
.mob__cat-toggles {
  display: flex;
  width: fit-content;
  margin-left: auto;
  background: #F0E6DA;
  border-radius: 0.5rem;
  padding: 0.125rem;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.mob__cat-toggle-btn {
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.mob__cat-toggle-btn:hover {
  color: #6A5A4A;
}

.mob__cat-toggle-btn--active {
  background: white;
  color: #222222;
  box-shadow: 0 1px 3px rgba(180,100,40,0.08);
}

#mob-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Category list items */
.mob__cat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border: 1px solid #E8DDD0;
  background: transparent;
  font-family: var(--font);
  border-radius: 0.375rem;
  text-align: left;
  transition: all 0.15s ease;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-soft);
}


.mob__cat-item--active {
  background: #E5D9CE;
  color: #222222;
  font-weight: 700;
  border-color: #D5C9BD;
}

.mob__cat-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.mob__cat-item--active .mob__cat-item-dot {
  opacity: 1;
}

.mob__cat-item-name {
  font-size: 0.7rem;
  white-space: nowrap;
}

.mob__cat-item-count {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6A5A4A;
  background: #F0E6DA;
  padding: 1px 6px;
  border: 1px solid #E8DDD0;
  border-radius: 9999px;
  min-width: 0;
  text-align: center;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.mob__cat-item--active .mob__cat-item-count {
  font-weight: 700;
}

/* --- Event Count Row + View Toggle --- */
.mob__count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 1rem;
}

.mob__count-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5A4A3A;
  white-space: nowrap;
}

.mob__count-number {
  font-size: 1rem;
  font-weight: 800;
  color: #222222;
}

.mob__count-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* Mobile count group — holds count + clear together */
.mob__count-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* Mobile clear filters pill */
.mob__clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  border: 1px solid #E8DDD0;
  border-radius: 9999px;
  background: #FFF5ED;
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  animation: clearFilterSlideIn 0.2s ease-out;
}
.mob__clear-filters:hover {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
}
.mob__clear-filters[hidden] {
  display: none !important;
}

.mob__view-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: #F0E6DA;
  border-radius: 6px;
  padding: 2px;
}

.mob__view-toggle-icon {
  display: none;
}

.mob__view-toggle-sep {
  color: #E8DDD0;
  font-size: 0.6875rem;
  margin: 0 0.125rem;
  user-select: none;
}

.mob__view-toggle-option {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mob__view-toggle-option:hover {
  color: #6A5A4A;
}

.mob__view-toggle-option--active {
  background: #FFF5ED;
  color: #222222;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(180,100,40,0.08);
  font-weight: 700;
}

.mob__view-toggle-hide-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Dropdown panel relative container */
.mob__dropdown-wrap {
  position: relative;
}

/* --- Mobile Filter Toggle Strip --- */
.mob__filter-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
  border: none;
  background: #F5EDE3;
  border-bottom: 1px solid #E8DDD0;
  width: 100%;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: color 0.15s;
}

/* Collapsible filter content */
.mob__filter-collapsible {
  max-height: 500px;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.mob__filter-collapsible--hidden {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

/* Mobile date header area */
.mob__date-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.75rem;
  padding: 0;
  background: #F5EDE3;
  color: #5A4A3A;
}

.mob__date-header[hidden] {
  display: none;
}

.mob__date-header .day-strip {
  flex: 1;
  min-width: 0;
}

.mob__view-toggle-btn {
  display: none; /* hidden on desktop */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #EBEBEB;
  border-radius: 12px;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 0.5rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.mob__view-toggle-btn:hover {
  background: #F7F7F7;
  color: #222222;
}

.mob__view-icon {
  width: 16px;
  height: 16px;
}

/* --- Mobile Calendar Wrapper --- */
.mob__calendar-wrap {
  padding: 0.75rem;
  background: #FFF5ED;
  border-radius: 12px;
  margin: 0 0.75rem 0.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  border: 1px solid #EBEBEB;
}

.mob__calendar-wrap[hidden] {
  display: none;
}

.mob__calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem;
  margin-bottom: 0.625rem;
}

.mob__calendar-month-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #5A4A3A;
  text-transform: capitalize;
}

.mob__calendar-prev,
.mob__calendar-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #E8DDD0;
  border-radius: 50%;
  background: #FFF5ED;
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: background 0.15s ease;
  padding: 0.25rem;
}

.mob__calendar-prev:hover,
.mob__calendar-next:hover,
.mob__calendar-close:hover {
  background: #F7F7F7;
}

.mob__calendar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: auto;
}

/* --- Calendar Sidebar (desktop lg+) --- */
.calendar-sidebar {
  display: none;
  background: #F5EDE3;
  border-color: #E8DDD0;
  min-width: 17rem;
}

.calendar-sidebar__section {
  padding: 0.75rem;
  padding-bottom: 0.625rem;
}

.calendar-sidebar__divider {
  height: 1px;
  background: #E8DDD0;
}

#calendar-grid-desktop {
  padding: 0.75rem;
}

/* --- Content Layout (sidebar + main) --- */
.content-layout {
  max-width: var(--max-width);
  margin: 0 auto;
}

.main-column {
  flex: 1;
  min-width: 0;
}

/* --- Category Filter --- */
.category-filter {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.category-filter__btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #555555;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  width: 100%;
  text-align: left;
}

.category-filter__btn:hover {
  background: #FFF5ED;
  color: #222222;
}

.category-filter__btn--active,
.category-filter__btn--active:hover {
  background: #E5D9CE;
  color: #222222;
  font-weight: 700;
}

.category-filter__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.category-filter__btn--active .category-filter__dot {
  opacity: 1;
}

.category-filter__name {
  flex: 1;
}

/* Count — matches town count style */
.category-filter__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6A5A4A;
  background: #F0E6DA;
  padding: 2px 8px;
  border: 1px solid #E8DDD0;
  border-radius: 9999px;
  min-width: 28px;
  text-align: center;
  line-height: 1.2;
}

.category-filter__count:empty {
  display: none;
}

.category-filter__btn--active .category-filter__count {
  background: #F5EDE3;
  color: #5A4A3A;
  border-color: #E8DDD0;
  font-weight: 700;
}

/* --- Main Content --- */
.main {
  flex: 1;
  min-width: 0;
  padding: 0 1rem 2rem;
}

/* --- Homepage intro + town copy (server-rendered, ENG-507) --- */
.home-intro {
  padding: 0.75rem 0 0.5rem;
  container-type: inline-size;
}

.home-intro__title {
  /* Scales with the feed column so the headline stays on one line wherever
     the column is wide enough (~3.5% of its width), between 18px and 26px. */
  font-size: clamp(1.125rem, 3.5cqi, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.home-intro__lead {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

.home-about {
  margin-top: 2rem;
  padding: 1.75rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
}

.home-about h2 {
  font-family: 'Dela Gothic One', var(--font);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.home-about__lead,
.home-about__links {
  color: var(--text-muted);
  max-width: 60ch;
}

.home-about__links {
  margin-top: 0.5rem;
}

.home-about a {
  color: var(--coral-text);
  font-weight: 700;
  text-decoration: none;
}

.home-about a:hover {
  text-decoration: underline;
}

/* The towns as stops down the Pacific coast, north to south: an icon marker
   per town joined by a dotted shoreline. */
.home-about__coast {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.home-about__stop {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-bottom: 1.5rem;
}

.home-about__stop:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 1px);
  top: 2.875rem;
  bottom: 0.375rem;
  border-left: 2px dotted var(--sea);
}

.home-about__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--coral);
  color: #fff;
}

.home-about__marker svg {
  width: 1.25rem;
  height: 1.25rem;
}

.home-about__stop h3 {
  font-family: 'Dela Gothic One', var(--font);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0.375rem 0 0.25rem;
}

.home-about__stop p {
  color: var(--text-muted);
  max-width: 56ch;
  margin-bottom: 0.25rem;
}

.home-about__stop a {
  font-size: 0.875rem;
}

.home-about__mission {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.home-about__mission h3 {
  font-family: 'Dela Gothic One', var(--font);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}

.home-about__mission p {
  color: var(--text);
  max-width: 60ch;
  margin-top: 0.625rem;
}

/* List-your-event and sponsor buttons under the mission line. */
.home-about__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.875rem;
}

.home-about a.home-about__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--coral);
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}

.home-about__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.home-about a.home-about__btn--primary {
  background: var(--coral);
  color: #fff;
}

.home-about a.home-about__btn--primary:hover {
  background: #d35820;
  border-color: #d35820;
  text-decoration: none;
}

.home-about a.home-about__btn--secondary {
  background: transparent;
  color: var(--coral-text);
}

.home-about a.home-about__btn--secondary:hover {
  background: var(--coral-light);
  text-decoration: none;
}

.home-intro__lead a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 0.2em;
}

.home-intro__lead a:hover {
  color: var(--coral);
  text-decoration-color: currentColor;
}

.home-about__when {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.home-about a.home-about__pill {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.home-about a.home-about__pill:hover {
  border-color: var(--coral);
  color: var(--coral);
  text-decoration: none;
}

/* --- Town pages on the homepage shell (ENG-516) --- */
/* No sponsor banner above it on town pages, so the intro needs its own
   breathing room under the date tabs. */
.town-intro {
  padding-top: 1.5rem;
}

.town-intro__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.town-intro__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--coral);
  color: #fff;
}

.town-intro__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.town-intro__nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

a.town-intro__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

a.town-intro__pill--places svg {
  color: var(--text-muted);
}

a.town-intro__pill svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--coral);
}

a.town-intro__pill:hover {
  border-color: var(--coral);
  color: var(--coral-text, #B52E00);
}

/* Hidden once the visitor changes the town selection (leaveTownPage) */
.town-intro[hidden] {
  display: none;
}


[data-home-lang][hidden] {
  display: none;
}

/* The homepage arrives with server-rendered event cards; don't show the
   "Loading events..." spinner above cards that are already there. */
.main:has(#events-container > .day-group) #loading {
  display: none;
}

/* --- Floating Button Group --- */
.floating-group {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.floating-group[hidden] {
  display: none !important;
}

.floating-group__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.floating-group__btn:hover {
  transform: translateY(-2px);
}

.floating-group__btn--top {
  gap: 0.375rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.floating-group__btn--top:hover {
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.floating-group__btn--menu {
  width: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.floating-group__btn--menu:hover {
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* === 4. Components === */

/* --- Loading --- */
.loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--coral);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Error --- */
.error {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.error button {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 20px;
  font-family: var(--font);
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- Day Group --- */
.day-group {
  margin-top: 0;
  scroll-margin-top: calc(var(--day-strip-h) + 8px);
  padding-bottom: 1rem;
}

.day-group__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.375rem;
  position: sticky;
  /* Below the region banner when it is pinned on the feeds (ENG-498) */
  top: calc(var(--region-banner-h, 0px) - 1px);
  z-index: 9;
  background: #F5EDE3;
  border-bottom: 1px solid #E8DDD0;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
}

.day-group__header.is-stuck {
  box-shadow: 0px 5px 10px rgba(120,80,30,0.08);
}

.day-group__header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: transparent;
}

/* Calendar icon before day headers */
.day-group__header::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8A7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.day-group__label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #222222;
  white-space: nowrap;
  /* "HOY — SÁBADO, 10 DE OCTUBRE" outgrows a 320px phone: end in an ellipsis */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-group__line {
  flex: 1;
  height: 1px;
  background: transparent;
}

/* Today highlight */
.day-group--today .day-group__header::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008A05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.day-group--today .day-group__label {
  color: var(--teal-text);
  padding-left: 0;
}

.day-group--today .day-group__label::before,
.day-group--today .day-group__label::after {
  display: none;
}

/* --- Day Strip --- */
.day-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px;
  margin: 0;
  background: #FFF5ED;
  border: 1px solid #E8DDD0;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.day-strip::-webkit-scrollbar {
  display: none;
}

.day-strip__month {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  width: 1.5rem;
  text-align: center;
  position: sticky;
  left: -6px;
  z-index: 2;
  background: #FFF5ED;
  align-self: stretch;
  flex-shrink: 0;
  margin: -6px 0 -6px -6px;
  padding-left: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.day-strip__day {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.75rem;
  padding: 6px 2px;
  border: none;
  border-radius: 12px;
  background: #FFF8F2;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s ease;
}

.day-strip__day:disabled {
  cursor: default;
}

.day-strip__weekday {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin-bottom: 2px;
}

.day-strip__date {
  font-size: 14px;
  font-weight: 700;
  color: #222222;
  line-height: 1;
  margin-bottom: 6px;
}

.day-strip__day:disabled .day-strip__date {
  color: #222222;
}

.day-strip__count {
  font-size: 9px;
  font-weight: 700;
  color: var(--coral-text);
  line-height: 10px;
  background: #F0F0F0;
  border-radius: 9999px;
  min-width: 1.1rem;
  text-align: center;
  padding: 2px 4px;
}

.day-strip__count-spacer {
  height: 1rem;
  width: 1rem;
}

/* Today */
.day-strip__day--today {
  background: rgba(0,138,5,0.06);
  box-shadow: inset 0 0 0 1.5px rgba(0,138,5,0.18);
}

.day-strip__day--today .day-strip__weekday {
  color: #008A05;
  opacity: 0.7;
}

.day-strip__day--today .day-strip__date {
  color: var(--teal-text);
}

.day-strip__day--today .day-strip__count {
  background: rgba(0,138,5,0.12);
  color: var(--teal-text);
}

.day-strip__day--today:not(:disabled):hover {
  background: rgba(0,138,5,0.1);
  opacity: 1;
}

/* Active (scroll-spy selected) */
.day-strip__day--active:not(.day-strip__day--today) {
  background: var(--coral);
  color: white;
  box-shadow: 0 1px 3px rgba(251,64,0,0.25);
}

.day-strip__day--active:not(.day-strip__day--today) .day-strip__date {
  color: white;
}

.day-strip__day--active:not(.day-strip__day--today) .day-strip__weekday {
  color: rgba(255,255,255,0.8);
}

.day-strip__day--active:not(.day-strip__day--today) .day-strip__count {
  background: rgba(255,255,255,0.25);
  color: white;
}

/* Day strip selected state (for listing pages) */
.day-strip__day--selected {
  background: #222 !important;
  color: white !important;
}
.day-strip__day--selected .day-strip__weekday,
.day-strip__day--selected .day-strip__date,
.day-strip__day--selected .day-strip__count {
  color: white !important;
}

.day-strip__day-name {
  color: var(--coral);
}

/* --- Calendar Grid --- */
.cal-grid__divider {
  height: 1px;
  background: #E8DDD0;
  margin: 1.25rem 0;
}

.cal-grid__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto;
  margin: 1rem auto 0;
  padding: 0.4rem 1.25rem;
  background: #F0E6DA;
  color: #6A5A4A;
  border: 1px solid #E8DDD0;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cal-grid__more:hover {
  background: #E5D9CE;
  color: #222222;
}

.cal-grid__month {
  margin-bottom: 0;
}

.cal-grid__month-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #222222;
  text-transform: capitalize;
  margin-bottom: 0.75rem;
  text-align: center;
  letter-spacing: 0.025em;
}

.cal-grid__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: 6px;
  margin-bottom: 0.5rem;
}

.cal-grid__dow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.05em;
}

.cal-grid__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-grid__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 3rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 2px;
}

.cal-grid__cell--empty {
  cursor: default;
}

.cal-grid__num {
  font-size: 0.875rem;
  font-weight: 700;
  color: #4A3A2A;
  line-height: 1;
}

.cal-grid__count {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-soft);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #F0E6DA;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cal-grid__cell--past .cal-grid__num {
  color: #DDD4CA;
}
.cal-grid__cell--past .cal-grid__count {
  background: #EDE5DC;
  color: #C4B8AA;
}

.cal-grid__cell--disabled {
  cursor: default;
}
.cal-grid__cell--disabled .cal-grid__num {
  color: #DDD4CA;
}

.cal-grid__cell--today {
  background: rgba(0,138,5,0.06);
  border: 1px solid rgba(0,138,5,0.18);
}
.cal-grid__cell--today .cal-grid__num {
  font-weight: 800;
  color: var(--teal-text);
}

.cal-grid__cell--selected {
  background: var(--coral);
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 2px 6px rgba(251, 64, 0, 0.25);
}
.cal-grid__cell--selected .cal-grid__num {
  color: white;
  font-weight: 700;
}
.cal-grid__cell--selected .cal-grid__count {
  background: rgba(255,255,255,0.25);
  color: white;
}

/* Today + selected = green filled */
.cal-grid__cell--today.cal-grid__cell--selected {
  background: #008A05;
  border-color: #008A05;
  box-shadow: 0 1px 2px rgba(0,138,5,0.15);
}
.cal-grid__cell--today.cal-grid__cell--selected .cal-grid__num {
  color: white;
}

.cal-grid__cell--has-events:not(.cal-grid__cell--today):not(.cal-grid__cell--selected):not(.cal-grid__cell--past) {
  background: #FFF5ED;
}

.cal-grid__cell--has-events .cal-grid__count {
  background: #E8DDD0;
  color: var(--coral-text);
}

.cal-grid__cell--has-events:hover:not(.cal-grid__cell--selected) {
  background: #F0E8E0;
}

.cal-grid__cell--has-events:hover:not(.cal-grid__cell--selected) .cal-grid__num {
  color: #222222;
}

/* Mobile calendar variant */
.cal-grid--mobile .cal-grid__month-label {
  display: none;
}
.cal-grid--mobile .cal-grid__header {
  margin-bottom: 0.375rem;
}
.cal-grid--mobile .cal-grid__dow {
  font-size: 10px;
}
.cal-grid--mobile .cal-grid__cell {
  height: 2.5rem;
}
.cal-grid--mobile .cal-grid__num {
  font-size: 0.75rem;
}
.cal-grid--mobile .cal-grid__count {
  background: #F0F0F0;
  color: var(--text-muted);
}
.cal-grid--mobile .cal-grid__cell--selected .cal-grid__count {
  background: rgba(255,255,255,0.25);
  color: white;
}

/* --- Featured Events ---
   A soft gold panel of featured events, each a horizontal card like the feed's
   (poster left, details right), stacked so every one is in view: none sits
   behind a carousel swipe or a button (Scott, 2026-10-12). */
.featured-events {
  margin: 0.5rem 0 0.75rem;
  padding: 0.25rem 0.625rem 0.625rem;
  background: #FFF6DE;
  border: 1px solid #F1D58C;
  border-radius: 16px;
}

.featured-events__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A5300;
  margin: 0 0 8px 0;
  padding: 0.5rem 0.125rem 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.featured-events__heading svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #E3A008;
}

.featured-events__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 768px) {
  .featured-events__track {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.featured-events__card {
  display: flex;
  flex-direction: row;
  min-height: 7rem;
  border-radius: 12px;
  border: 1px solid #F1E2B8;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  background: var(--card-bg);
  box-shadow: 0 1px 4px rgba(150,110,20,0.08);
  transition: box-shadow 0.2s ease;
}

.featured-events__card:hover {
  box-shadow: 0 6px 16px rgba(150,110,20,0.16);
}

/* The poster as a column, like the feed card's image */
.featured-events__img {
  display: block;
  flex: 0 0 7rem;
  width: 7rem;
  align-self: stretch;
  /* No intrinsic height: the details set the card's height, the poster fills it */
  contain: size;
  object-fit: cover;
  object-position: center 10%;
  pointer-events: none;
  background: #EBEBEB;
}

.featured-events__info {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.featured-events__pill {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 4px;
}

.featured-events__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 2px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-events__meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* --- Featured Events Modal --- */
.featured-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.featured-modal--open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.featured-modal__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 550px;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 1;
}

.featured-modal__topbar-wrap {
  flex-shrink: 0;
  width: 100%;
  background: #fff;
  z-index: 3;
}

.featured-modal__content {
  flex: 1;
  position: relative;
  background: #fff;
  border-radius: 0;
  overflow: hidden auto;
  width: 100%;
  min-height: 0;
  box-shadow: 0 0 60px rgba(0,0,0,0.3);
  padding: 0;
}

/* Scroll-down hint: only shown when image covers the full modal viewport */
.featured-modal__content.modal--scroll-hint::after {
  content: '▼  Scroll for details  ▼';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  text-align: center;
  padding: 2rem 0 0.75rem;
  background: linear-gradient(transparent, rgba(255,255,255,0.95) 50%);
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s;
}

.featured-modal__content.modal--scrolled::after {
  opacity: 0;
}

/* Reuse event-details styles inside modal */
.featured-modal__content.event-card__details {
  padding: 0;
  border-top: none;
}

.featured-modal .featured-modal__content .event-details__meta-row--spread,
.featured-modal .featured-modal__content .event-details__title,
.featured-modal .featured-modal__content .event-details__meta,
.featured-modal .featured-modal__content .event-details__description,
.featured-modal .featured-modal__content .event-details__actions {
  padding-left: 1rem;
  padding-right: 1rem;
}

.event-details__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.75rem 0 0;
  color: var(--text-primary, #1a1a1a);
}

.featured-modal .featured-modal__content .event-details__actions {
  padding-bottom: 1.5rem;
}

.featured-modal__content .event-details__image-wrap {
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.featured-modal__content .event-details__image-frame {
  padding: 0;
  margin: 0;
  border-radius: 0;
  cursor: default;
  pointer-events: none;
}

.featured-modal__content .event-details__image-frame::after {
  display: none;
}

.featured-modal__content .event-details__image {
  border-radius: 0;
  width: 100%;
  object-fit: contain;
  display: block;
}

/* Hide "View Flyer" link inside featured modal */
.featured-modal .featured-modal__content .event-details__image-link {
  display: none !important;
}

.featured-modal__topbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid #eee;
}

.featured-modal__close {
  border: none;
  background: none;
  color: #333;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  line-height: 1;
}

.featured-modal__share-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.featured-modal__share-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Thin divider between the WhatsApp and copy-link icons */
.featured-modal__share-group .featured-modal__share {
  border-left: 1px solid #d4d4d4;
  border-radius: 0;
}

.featured-modal__share,
.featured-modal__wa-share {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #333;
  font-size: 0.875rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
  text-decoration: none;
}

.featured-modal__wa-share {
  color: #128c7e;
}

.featured-modal__wa-share svg {
  width: 20px;
  height: 20px;
}

.featured-modal__share:hover {
  color: #000;
}

.featured-modal__wa-share:hover {
  color: #075e54;
}

.featured-modal__share:focus-visible,
.featured-modal__wa-share:focus-visible {
  outline: 2px solid #075e54;
  outline-offset: 2px;
  border-radius: 4px;
}

.featured-modal__close svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.featured-modal__close:hover {
  color: #000;
}

.featured-modal__arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2;
}

.featured-modal__arrow:hover {
  background: #f1f1f1;
}

/* --- Subscribe Modal --- */
/* Step 2 (success) is center-aligned; Step 1 stays left-aligned. */
/* Targeted via :has() — Step 2 contains .subscribe-modal__social */
.subscribe-modal__container:has(.subscribe-modal__social) {
  text-align: center;
}

.subscribe-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.subscribe-modal--open {
  display: flex;
  animation: subscribeModalFadeIn 200ms ease-out;
}
.subscribe-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.subscribe-modal__container {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, var(--card-bg, #fff) 0%, var(--card-bg, #fff) 55%, #FFF1E4 100%);
  color: var(--text, #222);
  border-radius: var(--radius, 10px);
  padding: 28px 24px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  animation: subscribeModalScaleIn 200ms ease-out;
}
.subscribe-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #717171);
  cursor: pointer;
  border-radius: 50%;
}
.subscribe-modal__close:hover {
  background: rgba(0, 0, 0, 0.05);
}
.subscribe-modal__close:focus,
.subscribe-modal__close:focus-visible {
  outline: 2px solid var(--coral, #FB4000);
  outline-offset: 2px;
  background: rgba(0, 0, 0, 0.08);
}
.subscribe-modal__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 10px;
  background: var(--coral-light, rgba(251, 64, 0, 0.12));
  color: var(--coral, #FB4000);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.subscribe-modal__title {
  margin: 0 0 14px;
  font-family: 'Dela Gothic One', var(--font);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text, #222);
  text-wrap: balance;
}
.subscribe-modal__locations {
  margin: -2px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral, #FB4000);
}
.subscribe-modal__subhead {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-muted, #717171);
}
.subscribe-modal__fineprint {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #717171);
  opacity: 0.85;
}
.subscribe-modal__proof {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted, #717171);
}
.subscribe-modal__proof strong {
  color: var(--text, #222);
  font-weight: 700;
}
.subscribe-modal__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #222);
}
.subscribe-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.subscribe-modal__field {
  display: block;
}
.subscribe-modal__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.subscribe-modal__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid var(--border, #E8DDD0);
  border-radius: var(--radius, 10px);
  background: var(--bg, #FFF8F2);
  color: var(--text, #222);
  box-sizing: border-box;
  font-family: var(--font);
}
.subscribe-modal__input:focus {
  outline: none;
  border-color: var(--coral, #FB4000);
  box-shadow: 0 0 0 3px rgba(251, 64, 0, 0.15);
}
.subscribe-modal__submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--coral) 0%, #F78E50 100%);
  border: 0;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
  font-family: var(--font);
  box-shadow: 0 2px 8px rgba(251, 64, 0, 0.3);
}
.subscribe-modal__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 70%
  );
  transform: translateX(-150%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.subscribe-modal__submit:hover:not(:disabled)::before {
  transform: translateX(150%);
}
.subscribe-modal__submit:hover:not(:disabled) {
  opacity: 0.9;
  transform: scale(1.01);
}
.subscribe-modal__submit:disabled {
  opacity: 0.7;
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  .subscribe-modal__submit::before {
    display: none;
  }
}
.subscribe-modal__error {
  margin: 0;
  font-size: 13px;
  color: #c0392b;
}
.subscribe-modal__wa-escape {
  display: block;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted, #717171);
  text-align: center;
  text-decoration: none;
}
.subscribe-modal__wa-escape:hover {
  color: var(--coral, #FB4000);
  text-decoration: underline;
}
.subscribe-modal__wa-escape:focus-visible {
  outline: 2px solid var(--coral, #FB4000);
  outline-offset: 2px;
  border-radius: 2px;
}
.subscribe-modal__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 4px auto 12px;
  border-radius: 50%;
  background: rgba(46, 174, 102, 0.12);
  color: #2eae66;
}
.subscribe-modal__success-icon svg {
  width: 32px;
  height: 32px;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: subscribeModalCheckDraw 450ms cubic-bezier(0.65, 0, 0.45, 1) 80ms forwards;
}
@keyframes subscribeModalCheckDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .subscribe-modal__success-icon svg {
    stroke-dashoffset: 0;
    animation: none;
  }
}
.subscribe-modal__social {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 12px 0 18px;
}
.subscribe-modal__social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  color: var(--text, #222);
  font-family: var(--font);
}
.subscribe-modal__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.subscribe-modal__social-icon svg {
  width: 36px;
  height: 36px;
}
.subscribe-modal__social-btn--ig .subscribe-modal__social-icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.subscribe-modal__social-btn--fb .subscribe-modal__social-icon {
  background: #1877F2;
}
.subscribe-modal__social-btn:hover .subscribe-modal__social-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.subscribe-modal__social-btn--ig:hover .subscribe-modal__social-icon {
  box-shadow: 0 12px 28px rgba(214, 36, 159, 0.38);
}
.subscribe-modal__social-btn--fb:hover .subscribe-modal__social-icon {
  box-shadow: 0 12px 28px rgba(24, 119, 242, 0.38);
}
.subscribe-modal__social-btn:focus-visible .subscribe-modal__social-icon {
  outline: 2px solid var(--coral, #FB4000);
  outline-offset: 4px;
}
.subscribe-modal__social-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #222);
}
.subscribe-modal__dismiss {
  display: block;
  margin: 4px auto 0;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--text-muted, #717171);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font);
}
.subscribe-modal__dismiss:hover {
  text-decoration: underline;
}

@keyframes subscribeModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes subscribeModalScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
  .subscribe-modal__container {
    max-width: 100%;
    padding: 24px 18px 20px;
  }
  .subscribe-modal__social {
    gap: 24px;
  }
  .subscribe-modal__social-icon {
    width: 64px;
    height: 64px;
  }
  .subscribe-modal__social-icon svg {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscribe-modal--open,
  .subscribe-modal__container {
    animation: none;
  }
}

/* --- Recurring Series --- */
.recurring-series {
  padding: 1rem;
  border-top: 1px solid #eee;
  background: #f9fafb;
}
.recurring-series__heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.625rem;
}
.recurring-series__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recurring-series__item {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  color: var(--text-primary, #1a1a1a);
  background: #fff;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.recurring-series__item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.recurring-series__item--active,
.recurring-series__item--active:hover {
  background: var(--coral, #FB4000);
  color: #fff;
  border-color: var(--coral, #FB4000);
  font-weight: 600;
  cursor: default;
}
.recurring-series__item--past {
  color: #9ca3af;
  border-color: #e5e7eb;
  background: #f9fafb;
  cursor: default;
}

.event-schedule {
  padding: 1rem 1rem 0.25rem;
  border-top: 1px solid #eee;
  background: #f9fafb;
}
.event-schedule__heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.event-schedule__rows { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.event-schedule__days { font-weight: 600; color: var(--text-primary, #1a1a1a); }
.event-schedule__times { color: var(--text-primary, #1a1a1a); }

/* --- Time Range Pills --- */

/* Desktop time-range pills are now inside the sidebar (sidebar__time-range-section) */

/* --- Time Range Toggle Bar --- */
.time-range-toggle {
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #FFF5ED;
  border-radius: 10px;
  border: 1px solid #E8DDD0;
  padding: 3px;
  gap: 0;
}
.time-range-toggle__slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 50px;
  background: var(--coral, #FB4000);
  border-radius: 8px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.time-range-toggle__item {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-soft);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  position: relative;
  z-index: 1;
  transition: color 0.25s ease, background 0.2s ease;
}
.time-range-toggle__item:hover {
  color: #5A4A3A;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
}
.time-range-toggle__item--active {
  color: #fff;
  font-weight: 600;
}
.time-range-toggle__item--active:hover {
  color: #fff;
  background: none;
}
.time-range-toggle__count {
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  color: inherit;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.time-range-toggle__item--active .time-range-toggle__count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
/* A range with no events this week: nothing to jump to */
.time-range-toggle__item:disabled {
  opacity: 0.45;
  cursor: default;
}
.time-range-toggle__item:disabled:hover {
  background: none;
}

/* Keep old pill class as alias for toggle */
.time-range-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Mobile placement */
/* Time range row (standalone) */
.mob__time-range {
  padding: 4px 12px 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mob__time-range > .time-range-pills,
.mob__time-range > .time-range-toggle {
  flex: 1;
  min-width: 0;
}
/* Calendar icon button at the end of the date pills (it replaced the Later
   pill): any later day is one tap away. Same box as the filter dropdowns,
   coral while the strip/calendar is open. */
.mob__cal-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid #E8DDD0;
  border-radius: 0.75rem;
  background: #FFF5ED;
  color: #6A5A4A;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mob__cal-toggle:hover {
  border-color: #C4A882;
}
/* Scrolled past this week (time-range.js setActivePill('later')): the
   calendar is the way to later days, so it takes an orange outline. */
.mob__cal-toggle--later {
  border-color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral);
  color: var(--coral);
}
.mob__cal-toggle--open,
.mob__cal-toggle--open:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.mob__cal-view-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 12px 2px;
}
.mob__cal-view-row[hidden] {
  display: none !important;
}
.mob__cal-view-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: #F0E6DA;
  border-radius: 6px;
  padding: 2px;
}
.mob__cal-view-opt {
  padding: 0.125rem 0.5rem;
  border: none;
  border-radius: 5px;
  background: none;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mob__cal-view-opt--active {
  background: #FFF5ED;
  color: #222;
  box-shadow: 0 1px 3px rgba(180,100,40,0.08);
}
.mob__time-range .time-range-pills,
.mob__time-range .time-range-toggle {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding-bottom: 2px;
}
.mob__time-range .time-range-toggle__item {
  padding: 7px 12px;
  font-size: 0.9rem;
  gap: 3px;
}
.mob__time-range .time-range-toggle {
  padding: 2px;
}
.mob__time-range .time-range-toggle__count {
  font-size: 0.6rem;
  padding: 0 4px;
  min-width: 16px;
  display: none;
}
.mob__time-range .time-range-toggle__item--active .time-range-toggle__count {
  display: inline-flex;
}
.mob__time-range .time-range-pills::-webkit-scrollbar {
  display: none;
}

/* Day strip: highlight days in active time range */
.day-strip__day--in-range {
  background: rgba(251, 64, 0, 0.08);
  border-color: rgba(251, 64, 0, 0.25);
}
.cal-grid__cell--in-range {
  background: rgba(251, 64, 0, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(251, 64, 0, 0.25);
  border-radius: 6px;
}

/* --- Event Card --- */
.event-card {
  background: white;
  border: 1px solid #E8DDD0;
  border-left: none;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(180,100,40,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* --- One-time events vs regular happenings (feed-sections.mjs) ---
   A day lists its one-time events as cards, then its regulars (weekly
   classes, series) as compact rows in one white list. */
/* Each section's title is a colored band that sticks under the day header
   while its section scrolls by (the day header is 44px tall on desktop,
   32px on phones, under the sticky filter bar). */
.feed-section__title {
  position: sticky;
  top: calc(var(--region-banner-h, 0px) + 44px - 1px);
  z-index: 8;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px #F5EDE3; /* page-colored halo, so cards scroll under it cleanly */
}
.feed-section--one-time > .feed-section__title {
  background: #FFF0E8;
  color: #B4421A;
}
.feed-section--regular > .feed-section__title {
  background: #EAF6F2;
  color: #1F6E64;
}
@media (max-width: 767px) {
  .feed-section__title {
    top: calc(var(--sticky-wrap-h, 0px) + var(--region-banner-h, 0px) + 32px - 1px);
  }
}
.feed-section--regular {
  margin-bottom: 0.75rem;
}
.feed-section__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid #E8DDD0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(180,100,40,0.06);
}
.feed-row + .feed-row {
  border-top: 1px solid #F0E6DA;
}
.feed-row__link {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: inherit;
  text-decoration: none;
}
.feed-row__link > .feed-row__body,
.feed-row__link > .event-card__details-chevron {
  align-self: center;
}
.feed-row__link:hover {
  background: #FFFAF5;
}
/* A poster column, not a small square: 80px wide, at least 96px tall, and
   as tall as the row (a long name or wrapped meta makes it bigger). The
   whole poster shows, letterboxed on the category's tint. */
.feed-row__thumb {
  position: relative;
  flex: 0 0 5rem;
  width: 5rem;
  min-height: 6rem;
  border-radius: 10px;
  overflow: hidden;
}
.feed-row__thumb .event-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feed-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.feed-row__top {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.feed-row__name {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-row__meta {
  display: flex;
  gap: 0.25rem 0.75rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-soft);
  min-width: 0;
}
.feed-row__link > .event-card__details-chevron,
.event-card__go .event-card__details-chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: #C4A882;
}
/* The same arrow on one-time event cards, at the right edge, mid-height */
.event-card__go {
  flex: 0 0 auto;
  display: flex;
  align-self: center;
  padding-right: 0.75rem;
}
/* The Cuatro Vientos group card sits above the rows inside the regular section */
.feed-section--regular > .event-card {
  margin-bottom: 0.5rem;
}

.event-card__row {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  min-height: 9rem;
}

.event-card:hover {
  box-shadow: 0 6px 16px rgba(180,100,40,0.12);
  border-color: #E8D4C0;
  transform: translateY(-2px);
}

.event-card__image-wrap {
  flex-shrink: 0;
  width: 7rem;
  min-height: 9rem;
  position: relative;
  overflow: hidden;
  background: #EBEBEB;
}

.event-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.event-card__row:hover .event-card__image {
  transform: scale(1.05);
}

.event-card__body {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.event-card__top {
  display: flex;
  flex-wrap: wrap; /* a long price ("RSVP MX$1850") drops under the badge on a 320px phone instead of being cut */
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.35rem;
}

.event-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.event-card__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Badge colors — translucent backgrounds */
.event-card__badge--yoga { background: rgba(42, 157, 143, 0.08); color: #20776D; }
.event-card__badge--yoga::before { background: #2A9D8F; }
.event-card__badge--meditation { background: rgba(155, 93, 229, 0.08); color: #7B3FBF; }
.event-card__badge--meditation::before { background: #9B5DE5; }
.event-card__badge--dance { background: rgba(242, 87, 69, 0.08); color: #BA4335; }
.event-card__badge--dance::before { background: #F25745; }
.event-card__badge--fitness { background: rgba(6, 182, 212, 0.08); color: #067590; }
.event-card__badge--fitness::before { background: #06B6D4; }
.event-card__badge--sports { background: rgba(37, 99, 235, 0.08); color: #1D4ED8; }
.event-card__badge--sports::before { background: #2563EB; }
.event-card__badge--social { background: rgba(244, 162, 97, 0.08); color: #95633B; }
.event-card__badge--social::before { background: #F4A261; }
.event-card__badge--arts { background: rgba(233, 196, 106, 0.12); color: #816A21; }
.event-card__badge--arts::before { background: #E9C46A; }
.event-card__badge--kids { background: rgba(242, 132, 130, 0.1); color: #B84644; }
.event-card__badge--kids::before { background: #F28482; }
.event-card__badge--food { background: rgba(214, 40, 40, 0.08); color: #C92626; }
.event-card__badge--food::before { background: #d62828; }
.event-card__badge--markets { background: rgba(87, 204, 153, 0.1); color: #2D7954; }
.event-card__badge--markets::before { background: #57CC99; }
.event-card__badge--music { background: rgba(109, 89, 122, 0.1); color: #6D597A; }
.event-card__badge--music::before { background: #6D597A; }
.event-card__badge--ceremonies { background: rgba(192, 132, 252, 0.1); color: #9333EA; }
.event-card__badge--ceremonies::before { background: #C084FC; }
.event-card__badge--retreats { background: rgba(56, 189, 248, 0.1); color: #0272AB; }
.event-card__badge--retreats::before { background: #38BDF8; }
.event-card__badge--community { background: rgba(120, 113, 108, 0.08); color: #706964; }
.event-card__badge--community::before { background: #78716C; }

.event-card__price {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(235,235,235,0.5);
  color: #222222;
  white-space: nowrap;
}

.event-card__price--free {
  background: rgba(0,138,5,0.1);
  color: #007904;
}

.event-card__price--tickets {
  background: rgba(168, 85, 247, 0.1);
  color: #7C3AED;
}

.event-card__price--reservation {
  background: rgba(42, 157, 143, 0.1);
  color: #20766B;
}

.event-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.375;
  margin-bottom: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.15s ease;
}

/* No orange hover on card title */
.event-card__row:hover .event-card__title {
  color: inherit;
}

/* Server-rendered cards link the title to /events/{slug} for crawlers;
   it reads exactly like the plain title (ENG-507). */
.event-card__title-link {
  color: inherit;
  text-decoration: none;
}

.event-card__meta {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.event-card__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.event-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.event-card__meta-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #57534e;
}

.event-card__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.event-card__icon--clock,
.event-card__icon--pin,
.event-card__icon--venue,
.event-card__icon--organizer,
.event-card__icon--calendar {
  color: #F25745;
}

.event-card__footer {
  display: none;
}

.event-card__details-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #222222;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.event-card__details-btn:hover {
  color: var(--coral);
}

.event-card__details-btn .event-card__details-chevron {
  display: none;
}

.event-card__details-btn::after {
  content: ' \2192';
  transition: transform 0.2s ease;
  display: inline-block;
}

.event-card__details-btn:hover::after {
  transform: translateX(3px);
}

.event-card__details-chevron {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
}

/* Expanded details below card row */
.event-card__details {
  padding: 1rem 0.75rem 0.25rem;
  border-top: 1px solid var(--border);
}

/* --- Expanded Details Content --- */
.event-details__image-wrap {
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.event-details__image {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  cursor: zoom-in;
}

.event-details__image:hover {
  opacity: 0.92;
}

/* Image frame — relative so link can sit inside */
.event-details__image-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.event-details__image-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

.event-details__image-link {
  position: absolute;
  bottom: 0.625rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.event-details__image-link:hover {
  color: #ffffff;
}

/* Expanded card metadata */
.event-details__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0;
  margin-bottom: 0;
  border-bottom: 1px solid #f0ece8;
  font-size: 0.9375rem;
}

.event-details__meta--pills {
  padding-bottom: 0.5rem;
  border-bottom: none;
}

.event-details__meta--organizer {
  padding-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: none;
}

.event-details__meta-row--spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
}

.event-card__meta-item--free span {
  color: #15803d;
  font-weight: 600;
}

.event-card__meta-item--free .event-card__icon {
  color: #16a34a;
}

/* Collapse button at bottom of expanded card */
.event-details__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 0;
  margin-top: 0.25rem;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.event-details__collapse:hover {
  color: var(--text);
}

/* Clean description */
.event-details__description {
  padding: 0.75rem 0;
  margin-bottom: 0;
}

.event-details__summary {
  font-size: 1rem;
  color: #1c1917;
  line-height: 1.7;
  margin: 0;
}

/* Original post toggle */
.event-details__original-toggle {
  margin-bottom: 0.75rem;
}

.event-details__original-summary {
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
  padding: 0.25rem 0;
  transition: color 0.2s;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.event-details__original-summary::-webkit-details-marker {
  display: none;
}

.event-details__original-summary::before {
  content: '\25B6';
  font-size: 0.5rem;
  transition: transform 0.2s;
}

.event-details__original-toggle[open] .event-details__original-summary::before {
  transform: rotate(90deg);
}

.event-details__original-summary:hover {
  color: var(--text);
}

.event-details__original {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0ece8;
}

/* Original post collapsible (details/summary) */
.event-details__original-post {
  margin: 0.5rem 0 0.75rem;
}

.event-details__original-post summary {
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
  padding: 0.25rem 0;
  transition: color 0.2s;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.event-details__original-post summary::-webkit-details-marker {
  display: none;
}

.event-details__original-post summary::before {
  content: '\25B6';
  font-size: 0.5rem;
  transition: transform 0.2s;
}

.event-details__original-post[open] summary::before {
  transform: rotate(90deg);
}

.event-details__original-post summary:hover {
  color: var(--text);
}

.event-details__original-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: 0.5rem 0 0;
  padding: 0.625rem 0.75rem;
  background: #fafaf9;
  border-radius: 6px;
  border: 1px solid #f0ece8;
}

/* Action buttons */
.event-details__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
  box-shadow: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.event-details__btn:hover {
  opacity: 1;
}

.event-details__btn--whatsapp {
  background: #5eed94;
  color: #1a1a1a;
  border-color: #5eed94;
}

.event-details__btn--whatsapp:hover {
  background: #45e87f;
  border-color: #45e87f;
}

.event-details__btn--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
}

.event-details__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.event-details__actions .event-details__btn {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}

/* Full-width link button (Website/Tickets) */
.event-details__actions .event-details__btn--link {
  flex: 1 1 100%;
  width: 100%;
}

.event-details__btn--website {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}
.event-details__btn--website:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.event-details__btn--tickets {
  background: #7c3aed;
  color: white;
  border-color: #7c3aed;
}
.event-details__btn--tickets:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.event-details__btn--email {
  background: #f59e0b;
  color: #1a1a1a;
  border-color: #f59e0b;
}
.event-details__btn--email:hover {
  background: #d97706;
  border-color: #d97706;
}

.event-details__btn--map {
  background: #16a34a;
  color: white;
  border-color: #16a34a;
}
.event-details__btn--map:hover {
  background: #15803d;
  border-color: #15803d;
}

.event-details__btn--share {
  background: #fff;
  color: #1a1a1a;
  border-color: #d4d4d4;
  cursor: pointer;
  font-weight: 600;
  box-shadow: none;
}

.event-details__btn--share:hover {
  background: #f5f5f5;
  color: #1a1a1a;
  border-color: #d4d4d4;
}

.event-details__btn--share.is-copied,
.featured-modal__share.is-copied {
  opacity: 0.7;
}

/* Share row (ENG-505): WhatsApp + copy link side by side under a quiet
   label, so sharing reads as its own action, not a second contact button. */
.event-details__share {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
}

.event-details__share-label {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-left: 0.25rem;
}

.event-details__share .event-details__btn {
  width: 100%;
  min-height: 44px;
}

.event-details__btn--wa-share {
  background: #075e54;
  color: white;
  border-color: #075e54;
}

.event-details__btn--wa-share:hover {
  background: #054a42;
  border-color: #054a42;
  color: white;
}

.event-details__share .event-details__btn:focus-visible {
  outline: 2px solid #075e54;
  outline-offset: 2px;
}

/* Event Details Summary Box */
.event-details__summary-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #222222;
}

.event-details__summary-row span:last-child {
  font-weight: 500;
}

.event-details__summary-icon {
  flex-shrink: 0;
}

.event-details__summary-icon--clock { color: #F25745; }
.event-details__summary-icon--pin { color: #F25745; }
.event-details__summary-icon--user { color: #F25745; }
.event-details__summary-icon--price {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008A05;
  font-weight: 700;
  font-size: 0.75rem;
}

/* --- Cuatro Vientos Group --- */
.cv-group {
  margin-bottom: 0.75rem;
}

.cv-group .event-card {
  height: auto;
}

.cv-group .event-card__row {
  height: auto;
  cursor: pointer;
}

.cv-group .event-card__footer {
  display: block;
}

.cv-group__toggle::after {
  content: ' \203A';
  transition: transform 0.2s ease;
  display: inline-block;
}

.cv-group__toggle:hover::after {
  transform: translateX(3px);
}

.cv-group__events {
  border-top: 1px solid #EBEBEB;
  padding: 0;
}

.cv-group__events[hidden] {
  display: none;
}

/* CV inner event rows */
.cv-event-row {
  cursor: pointer;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #EBEBEB;
}

.cv-event-row:last-child {
  border-bottom: none;
}

.cv-event-row__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.cv-event-row__name {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.cv-event-row__desc {
  font-size: 0.8125rem;
  color: #44403c;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.cv-event-row__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.75rem;
  margin-bottom: 0.25rem;
}

.cv-event-row__toggle {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #222222;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.cv-event-row__toggle:hover {
  color: var(--coral);
}

.cv-event-row__details {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  background: #F7F7F7;
  border-radius: 8px;
}

.cv-event-row__details[hidden] {
  display: none;
}

.cv-event-row__details .event-details__btn {
  display: inline;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.15);
  text-underline-offset: 2px;
}

.cv-event-row__details .event-details__btn:hover {
  color: var(--coral);
  opacity: 1;
}

.cv-event-row__details .event-details__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.75rem;
}

.cv-event-row__details .event-details__actions .event-details__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
}

.cv-event-row__details .event-details__actions .event-details__btn--link {
  flex: 1 1 100%;
  width: 100%;
}

.cv-event-row__details .event-details__actions .event-details__btn--map {
  background: #16a34a;
  color: white;
  border: 1px solid #16a34a;
}

.cv-event-row__details .event-details__actions .event-details__btn--map:hover {
  background: #15803d;
  border-color: #15803d;
}

.cv-event-row__details .event-details__actions .event-details__btn--whatsapp {
  background: #25D366;
  color: white;
  border: 1px solid #25D366;
}

.cv-event-row__details .event-details__actions .event-details__btn--whatsapp:hover {
  background: #1fb855;
}

.cv-event-row__details .event-details__actions .event-details__btn--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: white;
  border: none;
}

.cv-event-row__details .event-details__actions .event-details__btn--share {
  background: #1a1a1a;
  color: white;
  border: 1px solid #1a1a1a;
}

.cv-event-row__details .event-details__actions .event-details__btn--share:hover {
  background: #333;
}

.cv-event-row__chevron {
  transition: transform 0.2s;
  display: inline-block;
  vertical-align: middle;
}

.cv-event-row--open .cv-event-row__chevron {
  transform: rotate(90deg);
}

/* --- Be a Sponsor CTA Card --- */
.cta-sponsor {
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0 1.25rem;
  background: #1f1812;
  border: 1px solid #2d2218;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cta-sponsor:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  border-color: var(--coral);
}

.cta-sponsor__decor {
  transition: transform 0.4s ease, color 0.25s ease;
}

.cta-sponsor:hover .cta-sponsor__decor {
  transform: rotate(80deg);
  color: rgba(251, 64, 0, 0.32);
}

.cta-sponsor__link {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

.cta-sponsor__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: 'Dela Gothic One', var(--font);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}

/* Decorative watermark star — subtle, pinned to top-right of the card */
.cta-sponsor__decor {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  transform: rotate(12deg);
  color: rgba(251, 64, 0, 0.45);
  pointer-events: none;
  line-height: 0;
  z-index: 0;
}

.cta-sponsor__decor svg {
  width: 2.25rem;
  height: 2.25rem;
}

/* Body — dark warm with white text */
.cta-sponsor__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 1.25rem;
  color: #fff;
  gap: 0.5rem;
}

.cta-sponsor__subtext {
  font-family: var(--font);
  font-size: 1rem;
  margin: 0;
  line-height: 1.4;
  color: #f5ede3;
  max-width: 30rem;
  font-weight: 500;
}

.cta-sponsor__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--coral);
  color: #fff;
  border-radius: 9999px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 10px rgba(251, 64, 0, 0.3);
  transition: gap 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cta-sponsor__cta svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.2s ease;
}

.cta-sponsor:hover .cta-sponsor__cta {
  gap: 0.6rem;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 64, 0, 0.35);
  background: #d35820;
}

.cta-sponsor:hover .cta-sponsor__cta svg {
  transform: translateX(2px);
}

.cta-sponsor__note {
  margin: 0.5rem 0 0;
  font-family: var(--font);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
  max-width: 28rem;
}

/* Mobile — inline cta-sponsor card mirrors the compact mobile banner CTA:
   coral divider under eyebrow, no button, arrow appended to subtext, no note */
@media (max-width: 767px) {
  .cta-sponsor__inner {
    gap: 0.45rem;
    padding: 0.875rem 1rem;
  }
  .cta-sponsor__eyebrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }
  .cta-sponsor__eyebrow::after {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: var(--coral);
    margin-top: 0.45rem;
    border-radius: 1px;
  }
  .cta-sponsor__subtext {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  .cta-sponsor__subtext::after {
    content: ' →';
    color: var(--coral);
    font-weight: 700;
  }
  .cta-sponsor__cta {
    display: none;
  }
  .cta-sponsor__note {
    display: none;
  }
  .cta-sponsor__decor svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* --- Subscribe CTA Card --- */
.cta-subscribe {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.cta-subscribe__link {
  text-decoration: none;
  color: inherit;
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.cta-subscribe__link:focus-visible {
  outline: 2px solid var(--coral, #FB4000);
  outline-offset: 2px;
}

.cta-subscribe__image-wrap {
  position: relative;
  height: 15rem;
}

.cta-subscribe__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cta-subscribe:hover .cta-subscribe__image {
  transform: scale(1.05);
}

.cta-subscribe__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.15) 100%);
}

.cta-subscribe__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  color: white;
  margin-bottom: 0.5rem;
}

.cta-subscribe__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem;
  color: white;
}

.cta-subscribe__title {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.25;
  color: white;
}

.cta-subscribe__subtext {
  font-family: var(--font);
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.3;
}

.cta-subscribe__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: white;
  color: #1a1a1a;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.cta-subscribe:hover .cta-subscribe__cta {
  background: rgba(255,255,255,0.9);
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  background: #FFF5ED;
  border: 1px dashed #E8DDD0;
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  color: var(--text-soft);
  margin: 1.5rem;
}

.empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-state__text {
  font-size: 1rem;
  font-weight: 600;
  color: #5A4A3A;
  margin-bottom: 0.25rem;
}

.empty-state__sub {
  font-size: 0.875rem;
  color: var(--text-soft);
  margin-top: 0.25rem;
}

.empty-state__clear {
  margin-top: 1rem;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.empty-state__clear:hover {
  background: #D45520;
  transform: translateY(-1px);
}
/* The empty state's action is a button when it clears filters and a link when
   it points at /submit (ENG-467). Same pill either way. */
a.empty-state__clear {
  display: inline-block;
  text-decoration: none;
}

/* --- Fullscreen Image Modal --- */
.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.image-modal.image-modal--open {
  display: flex;
}
.image-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.image-modal__close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.image-modal__close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

/* Scroll container — fit-to-height by default */
.image-modal__scroll {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.image-modal__img {
  max-height: 100vh;
  max-width: 100vw;
  object-fit: contain;
  cursor: zoom-in;
  transition: none;
}

/* Zoomed state */
.image-modal--zoomed .image-modal__scroll {
  overflow: auto;
}
.image-modal--zoomed .image-modal__img {
  max-height: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  margin: auto;
  cursor: zoom-out;
}

/* --- Stale Data Banner --- */
.stale-banner {
  background: #f59e0b;
  color: #000;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

/* --- New Events Pill --- */
.new-events-pill {
  position: relative;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pillBounceIn 0.4s ease;
}

.new-events-pill__preview {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  margin-top: 8px;
  background: #1a1a1a;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  max-height: 50vh;
  overflow-y: auto;
  width: max-content;
  min-width: 250px;
  max-width: min(400px, 90vw);
}

.new-events-pill__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.new-events-pill__btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.new-events-pill__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F78E50;
  box-shadow: 0 0 6px 2px rgba(247, 142, 80, 0.5);
  flex-shrink: 0;
}

.new-events-pill__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(247, 142, 80, 0.5);
  animation: pillPulse 2s ease-in-out infinite;
}

@keyframes pillPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(2); opacity: 0; }
}

.new-events-pill__caret {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.new-events-pill__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.new-events-pill__preview.open {
  display: block;
}

.new-events-pill__preview-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  font-size: 0.875rem;
  color: #e5e7eb;
  transition: background 0.1s ease;
}

.new-events-pill__preview-item:hover {
  background: rgba(255,255,255,0.08);
}

.new-events-pill__preview-item:last-child {
  border-bottom: none;
}

.new-events-pill__date {
  font-weight: 600;
  color: #F78E50;
  margin-right: 6px;
}

.new-events-pill__town {
  color: var(--text-on-dark-muted);
  font-size: 0.75rem;
}

.new-events-pill__more {
  padding: 8px 16px;
  font-size: 0.75rem;
  color: var(--text-on-dark-muted);
  text-align: center;
}

.new-events-pill__dismiss {
  display: flex;
  justify-content: center;
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.new-events-pill__dismiss-btn {
  background: none;
  border: none;
  color: var(--text-on-dark-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 12px;
}

.new-events-pill__dismiss-btn:hover {
  color: #fff;
}

.new-events-pill--desktop {
  display: none;
}

@keyframes pillBounceIn {
  0% { opacity: 0; transform: translateY(-10px); }
  60% { transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Highlight uses box-shadow transition */
.event-card--highlight {
  box-shadow: 0 0 0 3px rgba(247, 142, 80, 0.5) !important;
  transition: box-shadow 3s ease;
}

/* --- Entrance Animations --- */
.feed-animated .event-card,
.feed-animated .day-group__header,
.feed-animated .cta-card,
.feed-animated .cta-sponsor,
.feed-animated .cta-subscribe {
  opacity: 0;
  transform: translateY(12px);
}

.feed-animated .event-card.revealed,
.feed-animated .day-group__header.revealed,
.feed-animated .cta-card.revealed,
.feed-animated .cta-sponsor.revealed,
.feed-animated .cta-subscribe.revealed {
  animation: feedEntrance 0.35s ease forwards;
}

@keyframes feedEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Mega Menu --- */
.mega-menu{position:relative;z-index:30;background:#F5EDE3;border-bottom:1px solid #E8DDD0}
.mega-menu__trigger-row{display:flex;align-items:center;padding:0.5rem 1.25rem}
.mega-menu__trigger{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:white;border:1px solid #E8DDD0;border-radius:0.625rem;font-family:var(--font);font-size:0.9rem;font-weight:700;color:#222;cursor:pointer;transition:all 0.15s;width:100%}
.mega-menu__trigger:hover{border-color:#222;box-shadow:0 0 0 1px #222}
.mega-menu__trigger--open{border-color:#222;box-shadow:0 0 0 1px #222}
.mega-menu__trigger-chevron{color:#9A8A7A;transition:transform 0.2s}
.mega-menu__trigger--open .mega-menu__trigger-chevron{transform:rotate(180deg)}
.mega-menu__panel{position:absolute;top:100%;left:0;right:0;background:white;border-top:2px solid #E8DDD0;box-shadow:0 8px 30px rgba(120,80,30,0.12);z-index:50;border-radius:0 0 12px 12px;max-height:70vh;overflow-y:auto;padding:1rem 1.25rem}
.mega-menu__sections{display:flex;flex-direction:column;gap:1rem}
.mega-menu__section{}
.mega-menu__heading{display:block;font-size:0.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-soft);margin-bottom:0.5rem}
.mega-menu__pills{display:flex;flex-wrap:wrap;gap:0.4rem}
.mega-menu__pill{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.875rem;color:#222;text-decoration:none;background:transparent;border:1px solid #E8DDD0;padding:0.5rem 1rem;border-radius:9999px;font-weight:500;transition:all 0.15s;line-height:1.2}
.mega-menu__pill:hover{background:#fff;border-color:#222;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.mega-menu__pill--active{background:#F0E6DA;border-color:#E8DDD0;font-weight:600}
.mega-menu__pill--cta{color:var(--coral);border-color:var(--coral);font-weight:600}
.mega-menu__pill--cta:hover{background:var(--coral);color:white}
.mega-menu__pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* --- Listing Page --- */
.listing-filters{background:white;position:sticky;top:var(--region-banner-h,0px);z-index:20;border-bottom:1px solid var(--border)}
.listing-filters__bar{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.75rem 1rem;align-items:flex-start}
.listing-filters__dropdown-wrap{position:relative}
.listing-filters__count-row{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 1rem;border-top:1px solid var(--border);font-size:0.85rem}

.listing-empty{text-align:center;padding:3rem 2rem;color:var(--text-muted)}
.listing-empty p{margin-bottom:1rem;font-size:0.95rem}
.listing-empty__clear{background:none;border:1px solid var(--coral);color:var(--coral);padding:0.5rem 1.25rem;border-radius:9999px;font-weight:600;font-size:0.85rem;cursor:pointer;transition:all 0.15s}
.listing-empty__clear:hover{background:var(--coral);color:white}

/* Scroll margin for sticky filter */
.ep-day-header[data-date]{scroll-margin-top:180px}

/* Listing page desktop layout */
.listing-layout{max-width:var(--max-width);margin:0 auto}
.listing-sidebar-group{display:none}
.listing-sidebar{display:none}
.listing-calendar-sidebar{display:none}
.listing-desktop-toolbar{display:none}
.listing-mobile-filters{background:#F5EDE3;position:sticky;top:var(--region-banner-h,0px);z-index:20;border-bottom:1px solid var(--border)}

/* --- Accent/CTA Overrides --- */
.event-details__summary-icon--clock,
.event-details__summary-icon--pin,
.event-details__summary-icon--user {
  color: #F25745;
}

.event-card__cta,
.event-card__share-btn--copy,
.submit-cta__btn {
  background: linear-gradient(135deg, #F2A63A, var(--coral));
  color: white;
}
.event-card__cta:hover,
.submit-cta__btn:hover {
  background: linear-gradient(135deg, #E8983A, #D94D3B);
}

/* Calendar — warm highlight */
.cal-day--has-events {
  background: rgba(251, 64, 0, 0.12);
  color: var(--coral);
}
.cal-day--today {
  border-color: var(--coral);
  background: linear-gradient(135deg, #F2A63A, var(--coral));
  color: white;
}

/* Mobile town bar */
.mobile-town-bar__btn--active {
  background: linear-gradient(135deg, #F2A63A, var(--coral));
  color: white;
  border-color: transparent;
}

/* Mobile filters */
.mobile-filters__apply-btn {
  background: linear-gradient(135deg, #F2A63A, var(--coral));
  color: white;
}

/* Filter pills */
.filter-pill--active {
  background: rgba(251, 64, 0, 0.1);
  color: var(--coral);
  border-color: var(--coral);
}

/* Submit CTA */
.submit-cta {
  background: #FFF5ED;
  border-color: #E8DDD0;
}

/* --- Infinite Scroll --- */
.scroll-sentinel {
  height: 1px;
  width: 100%;
  visibility: hidden;
}

.scroll-end {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* === 5. Pages === */
/* (submit.html and submitted.html share header/navigation styles above) */

/* === 6. Utilities === */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* === 7. Responsive === */

/* --- Mobile (max-width: 767px) --- */
@media (max-width: 767px) {
  html {
    overflow-x: hidden;
  }

  .day-group__header {
    /* Below the sticky filter wrap, which itself sits below the region banner */
    top: calc(var(--sticky-wrap-h, 0px) + var(--region-banner-h, 0px) - 1px);
    z-index: 9;
  }

  .header {
    background: linear-gradient(160deg, var(--coral), #fccc70);
  }

  .header__inner {
    padding: 0.5rem 1rem;
    flex-wrap: nowrap;
  }

  .header__brand {
    min-width: 0;
    flex-shrink: 1;
  }

  .header__title {
    font-size: 1.25rem;
  }

  .header__subtitle {
    font-size: 0.8rem;
  }

  /* The town line gets its own full-width row under the title so the
     language/menu buttons can't squeeze it onto two lines. */
  .header__inner--towns {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .header__inner--towns > .header__brand {
    display: contents;
  }

  /* On the narrowest phones the title shrinks rather than pushing the
     buttons onto a row of their own (same as before the town line). */
  .header__inner--towns .header__title-link {
    min-width: 0;
    flex: 1 1 0;
  }

  .header__inner--towns #header-towns {
    order: 1;
    flex-basis: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content-layout {
    background: transparent;
  }

  .main-column {
    background: #F5EDE3;
  }

  .ad-space-mobile {
    display: flex;
    min-height: 5.875rem;
    margin: 1rem 0.75rem 0.5rem;
    border-radius: 10px;
  }

  .main {
    padding: 0.25rem 0.75rem calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  .mob-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f6ede3;
    padding-top: 0;
    padding-bottom: 0px;
    border-bottom: none;
    box-shadow: none;
  }

  .day-group__header {
    background: #F5EDE3;
    box-shadow: none;
  }
  .day-group__header.is-stuck {
    box-shadow: 0px 5px 10px rgba(120,80,30,0.08);
  }

  /* Mobile filters bar visible */
  .mob {
    display: block;
  }

  .mob-only {
    display: block;
  }

  .cta-subscribe__image-wrap {
    height: 13.5rem;
  }

  .cta-subscribe__inner {
    padding: 0.5rem 1rem 0.75rem;
  }

  .cta-subscribe__title {
    font-size: 1.35rem;
  }


  /* Show view toggle and FABs on mobile */
  .mob__view-toggle-btn {
    display: flex;
  }

  /* Day strip scrolls away on mobile (not sticky) */
  .day-strip {
    position: relative;
    padding: 0.25rem;
    z-index: 1;
    margin: 0;
  }

  .day-strip__day {
    width: calc((100% - 12px) / 7);
    min-width: 0;
    flex-shrink: 0;
  }

  /* Day group headers scroll margin */
  .day-group {
    scroll-margin-top: 8px;
  }

  /* Floating group positioning */
  .floating-group {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: 1rem;
  }

  /* Filter toggle hover */
  .mob__filter-toggle:hover {
    color: #6A5A4A;
  }
  .mob__filter-toggle-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
  }
  .mob__filter-toggle--collapsed .mob__filter-toggle-chevron {
    transform: rotate(180deg);
  }

  /* V3 Compact Cards — mobile only */

  /* Horizontal row — height driven by thumbnail + padding */
  .event-card__row {
    flex-direction: row;
    align-items: center;
    min-height: 0;
    height: auto;
    padding: 0.5rem 0;
  }

  /* Thumbnail — 104px wide, at least square, grows with taller cards */
  .event-card__image-wrap {
    width: 6.5rem;
    min-width: 6.5rem;
    height: auto;
    min-height: 6.5rem;
    max-height: none;
    aspect-ratio: auto;
    align-self: stretch;
    border-radius: 8px;
    margin: 0 0 0 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
  }

  .event-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  /* Card spacing */
  .event-card {
    margin-bottom: 0.5rem;
    border-radius: 10px;
  }

  .event-card__body {
    padding: 0.25rem 0.75rem;
    gap: 0;
    justify-content: center;
    min-height: 0;
  }

  /* Badge + price */
  .event-card__top {
    margin-bottom: 0.375rem;
    line-height: 1.2;
  }

  .event-card__badge {
    font-size: 11px;
    padding: 1px 6px;
  }

  .event-card__price {
    font-size: 12px;
    padding: 1px 6px;
  }

  /* Title — up to two lines, then truncated */
  .event-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.25rem;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .event-card__meta {
    font-size: 0.875rem;
    gap: 0.25rem;
    margin-bottom: 0;
    margin-top: 0.125rem;
    flex-direction: column;
  }

  /* Rows wrap so the venue drops to its own line rather than being cut off */
  .event-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    line-height: 1.4;
  }

  .event-card__meta-item:has(.event-card__icon--venue) span {
    white-space: normal;
  }

  /* Hide organizer */
  .event-card__meta-item:has(.event-card__icon--organizer) {
    display: none !important;
  }

  /* Hide date — the day-group header above already shows it, and at the
     readable meta size it crowded the time into an ellipsis */
  .event-card__meta .event-card__meta-item:has(.event-card__icon--calendar) {
    display: none;
  }

  .event-card__meta-item {
    white-space: nowrap;
  }

  /* Keep the time whole */
  .event-card__meta .event-card__meta-item:has(.event-card__icon--clock) {
    flex-shrink: 0;
  }

  .event-card__meta-item span {
    font-weight: 400 !important;
  }

  .event-card__icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  /* Hide footer */
  .event-card__footer {
    display: none !important;
  }

  /* On mobile, full-screen featured modal */
  .featured-modal__container {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    gap: 0;
  }

  .featured-modal__content {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .featured-modal__content .event-details__image-wrap {
    border-radius: 0;
  }

  .featured-modal__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .featured-modal__arrow--left {
    left: 8px;
  }

  .featured-modal__arrow--right {
    right: 8px;
  }

  .featured-modal__topbar {
    border-radius: 0;
  }
}




/* --- sm breakpoint (640px+) — show full CTA text, subtitle --- */
@media (min-width: 640px) {
  .header__inner {
    padding: 0.75rem 1.5rem;
  }

  .header__subtitle {
    display: flex;
  }

  .header__cta {
    display: flex;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

  .header__lang-mobile {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    gap: 0.375rem;
  }

  .header__lang-text {
    font-size: 0.875rem;
  }

  .header__lang-icon {
    width: 1rem;
    height: 1rem;
  }

  .header__cta-text--desktop {
    display: inline;
  }

  .header__cta-text--mobile {
    display: none;
  }
}

/* --- md breakpoint (768px+) — desktop layout --- */
@media (min-width: 768px) {
  .header__inner {
    padding: 1.25rem 1.5rem;
  }

  .header__title {
    font-size: 1.5rem;
  }

  .header__subtitle {
    font-size: 0.875rem;
  }

  .ad-space-mobile__credit {
    font-size: 1.5rem;
    padding: 0.5rem 0.75rem;
  }

  /* Language toggle stays in header on all sizes */
  .sidebar__lang-section {
    display: none;
  }

  /* Hide mobile filters and date strip on desktop */
  .mob {
    display: none;
  }

  .mob__date-header,
  .mob__calendar-wrap,
  .mob-sticky-wrap {
    display: none;
  }

  .content-layout {
    display: flex;
    max-width: var(--max-width);
    gap: 0;
    padding: 0;
    margin: 0 auto 2rem;
    background: #F5EDE3;
    border-radius: 12px;
    padding-top: 0;
    overflow: visible;
    box-shadow: none;
    position: relative;
    z-index: 25;
    min-height: 100vh;
  }

  /* Show sidebar group on desktop */
  .sidebar-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #F5EDE3;
    border-right: 1px solid #E8DDD0;
    border-radius: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }

  /* Spanning rows above the two columns */
  .sidebar-group__pills {
    width: 100%;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid #E8DDD0;
  }
  .sidebar-group__pills .time-range-pills,
  .sidebar-group__pills .time-range-toggle {
    gap: 0;
  }
  .sidebar-group__clear {
    width: 100%;
    padding: 0.25rem 1rem;
  }
  .sidebar-group__clear:has(.sidebar__clear-filters[hidden]) {
    display: none;
  }

  .sidebar-group__columns {
    display: flex;
    flex: 1;
    min-height: 0; /* allow columns to shrink */
  }

  /* Category sidebar */
  .sidebar {
    display: block;
    width: 17rem;
    padding: 0;
    border-right: 1px solid #E8DDD0;
    overflow-y: auto;
    height: 100%;
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Main content */
  .main-column {
    background: #F5EDE3;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-y: clip;
  }

  .main {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  /* Day group headers — desktop */
  .day-group__header {
    padding: 0.75rem 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.75rem;
    box-shadow: none;
  }
  .day-group__header.is-stuck {
    box-shadow: 0px 5px 10px rgba(120,80,30,0.08);
  }

  /* Desktop: wider image + larger content padding */
  .event-card__image-wrap {
    width: 8rem;
  }
  .event-card__body {
    padding: 1rem 1.25rem;
  }

  /* Calendar sidebar */
  .calendar-sidebar {
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
  }

  /* Scroll fade indicators on sidebar and calendar */
  .sidebar,
  .calendar-sidebar {
    mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);
  }

  /* New events pill — desktop */
  .new-events-pill--mobile {
    display: none;
  }
  .new-events-pill--desktop {
    display: flex;
    position: sticky;
    top: 50px;
    z-index: 25;
    height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .new-events-pill--desktop .new-events-pill__btn {
    padding: 14px 20px 14px 22px;
    font-size: 1rem;
    gap: 12px;
  }
  .new-events-pill--desktop .new-events-pill__dot {
    width: 12px;
    height: 12px;
  }
  .new-events-pill--desktop .new-events-pill__caret {
    width: 16px;
    height: 16px;
  }
  .new-events-pill--desktop .new-events-pill__preview {
    min-width: 350px;
    max-width: 500px;
  }
  .new-events-pill--desktop .new-events-pill__preview-item {
    padding: 14px 20px;
    font-size: 1rem;
  }
  .new-events-pill--desktop .new-events-pill__date {
    font-size: 1rem;
  }
  .new-events-pill--desktop .new-events-pill__town {
    font-size: 0.85rem;
  }
  .new-events-pill--desktop .new-events-pill__dismiss-btn {
    font-size: 0.85rem;
    padding: 6px 16px;
  }

  /* Listing page desktop layout */
  .listing-layout{display:flex;background:#F5EDE3;border-radius:12px 12px 0 0;position:relative;z-index:25;min-height:100vh}
  .listing-sidebar-group{display:flex;flex-direction:column;flex-shrink:0;background:#F5EDE3;position:sticky;top:var(--region-banner-h,0px);align-self:flex-start;height:calc(100vh - var(--region-banner-h,0px));overflow:visible}
  .listing-sidebar-group>.mega-menu{flex-shrink:0}
  .listing-sidebar-columns{display:flex;flex:1;min-height:0;overflow:hidden}
  .listing-sidebar{display:block;width:17rem;max-height:calc(100vh - var(--region-banner-h,0px));overflow-y:auto;scrollbar-width:none;border-right:1px solid #E8DDD0}
  .listing-sidebar::-webkit-scrollbar{display:none}
  .listing-sidebar .sidebar__section{border-color:#E8DDD0;padding:0.375rem 1.25rem}
  .listing-main{flex:1;min-width:0;background:#F5EDE3;padding:0}
  .listing-mobile-filters{display:none}
  .listing-desktop-toolbar{display:none}
  .listing-feed{padding:0 1.25rem;margin-top:0.5rem}
}

/* --- lg breakpoint (1024px+) --- */
@media (min-width: 1024px) {
  .header__inner {
    padding: 0.75rem 2rem;
  }

  .header__title {
    font-size: 1.875rem;
  }

  /* Show calendar sidebar inside group */
  .calendar-sidebar {
    display: block;
    width: var(--cal-sidebar-w);
    overflow-y: auto;
    max-height: 100vh;
    scrollbar-width: none;
  }

  .calendar-sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Hide time filter from category sidebar at lg+ */
  .sidebar .sidebar__time-section {
    display: none;
  }

  /* Main content gets more padding at lg */
  .main-column {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Desktop: wider image */
  .event-card__image-wrap {
    width: 10rem;
  }

  /* Listing calendar sidebar */
  .listing-calendar-sidebar{display:block;width:var(--cal-sidebar-w,18rem);max-height:100vh;overflow-y:auto;scrollbar-width:none;border-right:1px solid #E8DDD0}
  .listing-calendar-sidebar::-webkit-scrollbar{display:none}
  .listing-calendar-sidebar .calendar-sidebar__section{padding:0.75rem;padding-bottom:0.625rem}
  .listing-calendar-sidebar .calendar-sidebar__divider{height:1px;background:#E8DDD0}
  .listing-calendar-sidebar__grid{padding:0.75rem}
  .listing-sidebar .sidebar__time-section{display:none}
}

/* --- xl breakpoint (1280px+) --- */
@media (min-width: 1280px) {
  .event-card__image-wrap {
    width: 13rem;
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .live-indicator__dot::after {
    animation: none;
  }
  .header__subtitle-text {
    transition: none;
  }
  .featured-events__img {
    transition: none;
  }
  .feed-animated .event-card,
  .feed-animated .day-group__header,
  .feed-animated .cta-card {
    opacity: 1;
    transform: none;
  }
  .feed-animated .event-card.revealed,
  .feed-animated .day-group__header.revealed,
  .feed-animated .cta-card.revealed {
    animation: none;
  }
  .new-events-pill {
    animation: none;
  }
  .event-card--highlight {
    transition: none;
  }
}

/* East Side staging-page banner (only used on /east-side preview).
   Tells the user they're on the gated 5-town preview, not the public homepage. */
/* === Cross-region banner (homepage ↔ /los-cabos) ===
   Sticky navy strip above the header. Only the sentence is the link; the
   NEW ticket-stub tag on the homepage is decoration (the Los Cabos page has
   no tag). The × hides it for the visit (js/region-banner.js), which
   also publishes --region-banner-h so the sticky filter bar / sidebar sit
   below it instead of under it. */
/* Scrolls away with the page everywhere except the event feeds (/, /los-cabos,
   /la-ventana), which carry --sticky and keep it pinned (ENG-498). On those,
   js/region-banner.js publishes the banner height as --region-banner-h so the
   sticky filter bar, day headers and sidebar sit below it; elsewhere it is 0. */
.region-banner {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.55rem 2.75rem 0.55rem 1rem;
  background: #172a40;
  color: #fff;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.region-banner--sticky { position: sticky; top: 0; }
.region-banner[hidden] { display: none; }
.region-banner__body {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.region-banner__link {
  color: inherit;
  text-decoration: none;
}
.region-banner__link em {
  font-style: normal;
  font-weight: 800;
}
.region-banner__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.region-banner__link:hover .region-banner__arrow { text-decoration: none; }
.region-banner__link:focus-visible {
  outline: 2px solid #fccc70;
  outline-offset: 3px;
  border-radius: 2px;
}
.region-banner__tail { white-space: nowrap; }
.region-banner__arrow {
  font-weight: 800;
  color: var(--coral);
}
/* Ticket-stub tag: side notches via mask */
.region-banner__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Dela Gothic One', var(--font);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.75rem 0.27rem;
  border-radius: 3px;
  background: var(--coral);
  color: #fff;
  transform: rotate(-3deg);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px), radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px), radial-gradient(circle at 100% 50%, transparent 4px, #000 4.5px);
  mask-composite: intersect;
}
.region-banner__close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.region-banner__close:hover { opacity: 1; background: rgba(255,255,255,0.12); }
.region-banner__close:focus-visible { outline: 2px solid #fccc70; opacity: 1; }
@media (max-width: 767px) {
  .region-banner { padding: 0.5rem 2.5rem 0.5rem 0.75rem; }
  .region-banner__tag { font-size: 0.7rem; }
}
/* Sticky chrome sits below the banner (0 once it is closed) */
.mob-sticky-wrap { top: var(--region-banner-h, 0px); }
@media (min-width: 768px) {
  .sidebar-group {
    top: var(--region-banner-h, 0px);
    height: calc(100vh - var(--region-banner-h, 0px));
  }
}

/* /los-cabos: no sponsor block above the feed; the mid-feed clones still show */
.sponsor-block--top-hidden { display: none; }

/* Region link rows in the Towns list: styled like a town row, but they
   navigate to the other side instead of filtering. Deliberately NOT
   .sidebar__town / .mob__dropdown-item so filters.js ignores them. */
.sidebar__region-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: background 0.15s ease;
}
.sidebar__region-link:hover { background: #FFF5ED; color: var(--coral); }
.sidebar__region-link .sidebar__town-icon { color: #C4A882; opacity: 0.8; }
.sidebar__region-link:hover .sidebar__town-icon,
.sidebar__region-link:hover .sidebar__region-link__chev,
.mob__dropdown-link:hover .sidebar__region-link__chev { color: var(--coral); opacity: 1; }
.sidebar__region-link__chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: #C4A882;
  flex-shrink: 0;
}
.mob__dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
}
.mob__dropdown-link:hover { background: #FFF5ED; color: var(--coral); }

/* === Submit form: day-picker schedule block (ENG-482) ===
   Chips follow the submit page's .town-pill: coral when on, 44px targets. */
.form-label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: var(--text);
}
.sched-row { margin-top: 8px; }
.sched-row + .sched-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sched-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sched-row__head .form-label { margin-bottom: 0; }
.sched-days {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.sched-chip {
  flex: 1 1 0;
  min-width: 0; /* 7 chips must fit a 320px phone */
  min-height: 44px;
  padding: 0 2px;
  font-family: var(--font);
  font-size: 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.sched-chip:hover:not(:disabled) {
  border-color: var(--coral);
  background: var(--coral-light);
}
.sched-chip[aria-pressed="true"],
.sched-chip[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.sched-chip:disabled { cursor: default; opacity: 0.6; }
.sched-chip:focus-visible,
.sched-link:focus-visible,
.sched-add:focus-visible,
.sched-remove:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.sched-caption,
.sched-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.sched-link,
.sched-add,
.sched-remove {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.sched-link:disabled { cursor: default; opacity: 0.6; }
.sched-add {
  margin-top: 12px;
  font-size: 1rem;
}
.sched-times { margin-top: 10px; }
/* min-width 0: phones' native time inputs otherwise push past the card */
.sched-times .form-group { margin-bottom: 0; min-width: 0; }
/* Edit mode, read-only schedule: repeat toggle + frequency are locked */
.repeat-locked { opacity: 0.6; }
.form-checkbox.repeat-locked,
.repeat-locked label,
.repeat-locked input { cursor: default; }
.sched-times input:disabled {
  background: var(--bg);
  color: var(--text-muted);
  cursor: default;
}
@media (max-width: 360px) {
  .sched-days { gap: 3px; }
  .sched-chip { font-size: 13px; padding: 0; }
  .sched-times { gap: 0.5rem; }
  .sched-times .flatpickr-mobile { padding-left: 0.5rem; padding-right: 0.25rem; }
}
.sched-summary {
  margin: 0 0 1.25rem;
  padding: 12px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.sched-summary__warn {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: #c0392b;
}
.sched-summary--readonly { margin: 4px 0 0; }
#schedule-readonly[hidden],
#schedule-readonly-line[hidden],
#schedule-block[hidden],
#schedule-summary[hidden],
#schedule-cap[hidden],
#schedule-offday[hidden],
#recurring-multiday-helper[hidden],
.sched-add[hidden],
.sched-remove[hidden],
.sched-link[hidden],
.sched-caption[hidden] { display: none; }

/* ===== Town places directory (/towns/{slug}/places, ENG-527) =====
   Built on the venue page's header and section styles (.vp-*); each venue is
   one row: next event's flyer (or the venue's initial), name, what is on
   next or the street, and the upcoming count. */
.tp-sec { padding-bottom: 8px; }
.tp-row { display: grid; grid-template-columns: 56px 1fr auto; column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--vp-line); color: inherit; text-decoration: none; }
.tp-row:last-child { border-bottom: 0; }
.tp-row:hover .tp-row__name, .tp-row:focus-visible .tp-row__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tp-row__img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: #F3EEE8; display: flex; align-items: center; justify-content: center; }
.tp-row__img--none { font-family: 'Dela Gothic One', var(--font); font-size: 20px; color: #B8A898; }
.tp-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-row__name { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--text); }
.tp-row__next { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row__addr { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-row__count { font-size: 12px; font-weight: 700; color: var(--vp-ink); background: rgba(217, 56, 0, 0.08); border-radius: 9999px; min-width: 26px; padding: 3px 8px; text-align: center; font-variant-numeric: tabular-nums; }

.tp-map { position: relative; margin: 14px 20px 0; border-radius: 12px; overflow: hidden; background: #E8DDD0; }
.tp-map__frame { position: relative; }
.tp-map__frame[hidden] { display: none; }
.tp-map__img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 272; }
.tp-map__dots--tall { display: none; }
/* Count dots drawn over the static image, placed by staticMapLayout. */
.tp-map__dots { position: absolute; inset: 0; pointer-events: none; }
.tp-map__dot { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 9999px; background: var(--vp-ink, #D93800); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.45); }
.tp-map__dot[hidden], .tp-map__dots[hidden] { display: none; }
.tp-map__dot { transition: transform 0.12s ease; }
.tp-map__dot--hot { z-index: 2; transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--text), 0 2px 6px rgba(0, 0, 0, 0.45); }
.tp-pin--hot { z-index: 6; }
.tp-pin--hot .tp-pin__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--text), 0 2px 6px rgba(0, 0, 0, 0.45); }
.tp-pin--hot .tp-pin__name { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .tp-map__dot { transition: none; } }
.tp-map__open { position: absolute; z-index: 3; left: 10px; bottom: 10px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9999px; background: var(--text); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.tp-map__open:hover { background: var(--vp-ink); }
.tp-map__open:disabled { opacity: 0.7; cursor: progress; }
.tp-map__open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tp-map--live { height: 360px; }
.tp-map--live .tp-map__img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.tp-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-map__caption { margin: 6px 20px 0; font-size: 12px; color: var(--text-muted); }
.tp-cards { display: grid; gap: 14px; padding-top: 12px; }
/* overflow: clip, not hidden: a hidden overflow would make the card the
   sticky header's scrollport and the header would never stick (Scott, 2026-10-05). */
.tp-card { border: 1px solid var(--vp-line); border-radius: 14px; overflow: clip; background: #fff; }
.tp-card__head { position: sticky; top: calc(var(--region-banner-h, 0px) + var(--tp-kinds-h, 0px)); z-index: 2; display: grid; grid-template-columns: 60px 1fr; column-gap: 12px; align-items: start; padding: 12px 12px 10px; background: #fff; box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.12); }
.tp-card__map-link { display: block; }
.tp-card__map { display: block; width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: #556b4f; }
.tp-card__map--none { background: #E8DDD0; }
.tp-card__id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tp-card__title { display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; }
.tp-card__name { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--text); }
.tp-card__title:hover .tp-card__name, .tp-card__title:focus-visible .tp-card__name { text-decoration: underline; text-underline-offset: 3px; }
.tp-card__kind { font-size: 12px; color: var(--text-muted); }
/* Outlined, like the kind pills above (Scott, 2026-10-05). */
.tp-card__events { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--vp-line); border-radius: 9999px; background: #fff; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.tp-card__events-n { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tp-card__events:hover { border-color: var(--vp-ink); }
.tp-card__events:focus-visible { outline: 2px solid var(--vp-ink); outline-offset: 2px; }
.tp-card__body { display: flex; flex-direction: column; min-width: 0; padding: 0 12px 12px; }
.tp-card__sec { padding-top: 8px; }
.tp-card__sec h3 { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.tp-card__ev { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; align-items: center; padding: 6px 0; color: inherit; text-decoration: none; }
.tp-card__ev:hover .tp-card__ev-name, .tp-card__ev:focus-visible .tp-card__ev-name { text-decoration: underline; text-underline-offset: 2px; }
.tp-card__thumb { display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: contain; background: #F3EEE8; }
.tp-card__ev-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-card__ev-name { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-card__when { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-card[hidden] { display: none; }
@media (min-width: 768px) { .tp-card__head { grid-template-columns: 72px 1fr; padding: 16px 16px 12px; } .tp-card__map { width: 72px; height: 72px; } .tp-card__body { padding: 0 16px 14px; } }
/* Kind filters, styled like the feed sidebar's category chips
   (.category-filter__btn): colour dot, name, count pill; wrapped. */
/* The chip bar sticks under the region banner as the list scrolls; card
   headers stick just below it (--tp-kinds-h, published by the page script).
   Phones: one sideways-scrolling row so the bar stays one chip tall;
   from tablet up the chips wrap (Scott, 2026-10-10). */
.tp-kinds { display: flex; flex-wrap: nowrap; gap: 6px; padding: 12px 20px 10px; background: #fff; overflow-x: auto; scrollbar-width: none; box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.12); }
.tp-kinds::-webkit-scrollbar { display: none; }
/* Pinned only when the page script runs: it publishes the heights the
   layers below offset by, and without it the chips do nothing anyway
   (Codex #514). */
.tp--js .tp-kinds { position: sticky; top: var(--region-banner-h, 0px); z-index: 3; }
.tp-kinds .tp-pill { flex: 0 0 auto; }
@media (min-width: 768px) { .tp-kinds { flex-wrap: wrap; overflow-x: visible; } }
.tp-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem 0.45rem 0.75rem; border: 0; border-radius: 8px; background: #FFF5ED; color: #555555; font-family: var(--font); font-size: 0.8rem; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background 0.15s ease; }
.tp-pill:hover { background: #F5EADF; color: #222222; }
.tp-pill--on, .tp-pill--on:hover { background: #E5D9CE; color: #222222; font-weight: 700; }
.tp-pill:focus-visible { outline: 2px solid var(--vp-ink); outline-offset: 2px; }
.tp-pill__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.08); opacity: 0.55; }
.tp-pill--on .tp-pill__dot { opacity: 1; }
.tp-pill__dot[data-kind="wellness"] { background: #2A9D8F; }
.tp-pill__dot[data-kind="food_drink"] { background: #d62828; }
.tp-pill__dot[data-kind="culture"] { background: #c9a633; }
.tp-pill__dot[data-kind="market_shop"] { background: #3da673; }
.tp-pill__dot[data-kind="stay_outdoors"] { background: #0284C7; }
.tp-pill__dot[data-kind="other"] { background: #78716C; }
.tp-pill__n { font-size: 0.75rem; font-weight: 600; color: #6A5A4A; background: #F0E6DA; padding: 2px 8px; border: 1px solid #E8DDD0; border-radius: 9999px; min-width: 28px; text-align: center; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tp-pill--on .tp-pill__n { background: #F5EDE3; color: #5A4A3A; font-weight: 700; }
.tp-towns { padding-top: 22px; }
.tp-towns h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.tp-towns__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 0; }
.tp-towns__region { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.tp-towns__row { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-town { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--vp-line); border-radius: 9999px; background: #fff; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.tp-town svg { width: 14px; height: 14px; color: var(--vp-ink); }
.tp-town:hover { border-color: var(--vp-ink); }
.tp-none { padding: 12px 0 4px; font-size: 14px; color: var(--text-muted); }
.tp-row[hidden], .tp-none[hidden] { display: none; }
.tp-quiet { margin: 6px 20px 0; border-top: 1px solid var(--vp-line); }
.tp-quiet__summary { cursor: pointer; list-style: none; padding: 14px 0; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tp-quiet__summary::-webkit-details-marker { display: none; }
.tp-quiet > .tp-sec { padding-left: 0; padding-right: 0; }
/* Map pins (satellite): a coral dot with the upcoming count centred on the
   spot, the venue name as a white tag beside it; names from zoom 15 only. */
.tp-pin { position: absolute; transform: translate(-13px, -13px); display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-family: var(--font); cursor: pointer; white-space: nowrap; }
.tp-pin__dot { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 9999px; background: var(--vp-ink, #D93800); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.45); }
.tp-pin__name { display: none; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.96); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.tp-map__canvas--names .tp-pin__name { display: inline-block; }
.tp-pin:hover, .tp-pin:focus-visible { z-index: 5; }
.tp-pin:hover .tp-pin__name, .tp-pin:focus-visible .tp-pin__name { display: inline-block; }
.tp-pin:focus-visible .tp-pin__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--vp-ink, #D93800); }
.tp-pin[hidden] { display: none; }
.tp-iw { font-family: var(--font); max-width: 220px; }
.tp-iw__name { display: block; font-size: 15px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.tp-iw__next { margin-top: 3px; font-size: 13px; color: var(--text-muted); }
@media (min-width: 768px) { .tp-map--live { height: 440px; } }
/* Desktop: the map in a sticky left column (tall frame), the list on the
   right (Scott, 2026-10-09). The column is as wide as the tall frame can be
   while still fitting the viewport, so the dots stay on their venues. */
@media (min-width: 1024px) {
  /* Two columns from the top: title + map pinned on the left, chips + list
     on the right starting level with the title (Scott, 2026-10-10). The map
     never runs below the fold: its 540x600 frame is as tall as the
     viewport allows under the title (--tp-head-h, published by the page
     script) and the column is as wide as that frame, never under 300px so
     a very short window cannot collapse it (Codex #514). */
  .tp-layout--map { display: grid; grid-template-columns: clamp(300px, calc((100vh - var(--region-banner-h, 0px) - var(--tp-head-h, 96px) - 48px) * 0.9), 44%) minmax(0, 1fr); gap: 0 24px; align-items: start; padding: 0 20px; }
  .tp-side { position: sticky; top: var(--region-banner-h, 0px); }
  .tp-side .vp-id { padding: 14px 0 10px; }
  .tp-layout--map .tp-map, .tp-layout--map .tp-map__caption { margin-left: 0; margin-right: 0; }
  .tp-layout--map .tp-map { margin-top: 0; }
  /* The <picture> serves the 540x600 frame here; show its dot layer. */
  .tp-layout--map .tp-map__img { aspect-ratio: 540 / 600; }
  .tp-layout--map .tp-map__dots--wide { display: none; }
  .tp-layout--map .tp-map__dots--tall:not([hidden]) { display: block; }
  .tp-layout--map .tp-map--live { height: auto; aspect-ratio: 540 / 600; }
  /* Chips level with the title, list right under them. */
  .tp-layout--map .tp-main .tp-kinds { padding: 14px 0 8px; }
  .tp-layout--map .tp-main .tp-live { padding-top: 6px; }
  .tp-layout--map .tp-main .vp-sec, .tp-layout--map .tp-main .tp-quiet { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
}

/* ===== Venue profile page (/venues/*, ENG-511) ===== */
.vp { --vp-ink: #D93800; --vp-line: #E8DDD0; background: #fff; padding-bottom: 20px; }
.vp svg { display: block; }
.vp-map { display: block; width: 100%; height: 150px; object-fit: cover; background: #556b4f; }
.vp-id { padding: 14px 20px 0; }
.vp-name { font-family: 'Dela Gothic One', var(--font); font-weight: 400; font-size: 31px; line-height: 1.08; letter-spacing: -0.015em; color: var(--text); }
.vp-kind { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.vp-kind a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.vp-actions { display: grid; gap: 6px; padding: 12px 20px 0; }
/* A darker take on the header gradient (ENG-525); the shadow keeps white text legible on the light end. */
.vp-dir { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 12px; background: linear-gradient(160deg, #E03A00, #F2913F); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; text-shadow: 0 1px 2px rgba(120, 30, 0, 0.35); }
.vp-dir svg { width: 18px; height: 18px; }
.vp-contacts { display: flex; gap: 6px; }
.vp-contacts:empty { display: none; }
.vp-btn { flex: 1 1 0; max-width: calc(25% - 5px); min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--vp-line); border-radius: 12px; color: var(--text); font-size: 11px; font-weight: 600; text-decoration: none; }
.vp-contacts:has(> :nth-child(5)) .vp-btn { max-width: none; }
/* Six buttons (every contact plus Reviews): two rows of three, so labels like
   "Instagram" keep their width on a phone. */
.vp-contacts:has(> :nth-child(6)) { flex-wrap: wrap; }
.vp-contacts:has(> :nth-child(6)) .vp-btn { flex: 1 1 calc(33.333% - 4px); }
.vp-btn svg { width: 18px; height: 18px; }
.vp-dir:focus-visible, .vp-btn:focus-visible, .vp-card:focus-visible, .vp-row__main:focus-visible > .vp-row__img, .vp-pill:focus-visible, .vp-weekbar .day-strip__day:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 2px; }
.vp-rule { border: 0; border-top: 1px solid var(--vp-line); margin: 14px 20px 0; }
.vp-sec { padding: 18px 20px 4px; }
.vp-sec h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.vp-sec__head { display: flex; justify-content: space-between; align-items: baseline; }
.vp-sec__head span { font-size: 13px; color: var(--text-muted); }
.vp-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.vp-day { display: flex; align-items: center; gap: 8px; padding: 14px 2px 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.vp-day--today { color: #256B29; }
.vp-day svg { width: 16px; height: 16px; }
.vp-card { display: flex; align-items: center; gap: 12px; padding: 8px; margin-bottom: 8px; border: 1px solid var(--vp-line); border-radius: 10px; text-decoration: none; color: inherit; background: #fff; }
.vp-card__img { width: 80px; height: 80px; flex: none; border-radius: 8px; object-fit: contain; background: #F3EEE8; }
.vp-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vp-card__body .event-card__badge { align-self: flex-start; }
.vp-card__title { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text); }
.vp-card__time { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text-muted); }
.vp-card__time svg { width: 16px; height: 16px; color: var(--vp-ink); }
.vp-pill[hidden] { display: none; }
/* Recurring events as a week (ENG-525): the homepage day strip, then one
   section per weekday with a compact row per class. */
/* Compact venue bar, shown by script once the name scrolls off (ENG-525). */
.vp-stick { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 52px; background: #fff; border-bottom: 1px solid var(--vp-line); box-shadow: 0 2px 8px rgba(120, 80, 30, 0.08); transform: translateY(-100%); visibility: hidden; transition: transform .15s ease, visibility .15s; }
.vp-stick--on { transform: none; visibility: visible; }
.vp-stick__in { max-width: 640px; height: 100%; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; }
.vp-stick__name { font-family: 'Dela Gothic One', var(--font); font-size: 16px; line-height: 1.15; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-stick__kind { font-size: 12.5px; line-height: 1.3; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vp-stuck .vp-wday__head { top: 52px; }
@media (prefers-reduced-motion: reduce) { .vp-stick { transition: none; } }
.vp-weekbar { margin-top: 12px; }
.vp-weekbar .day-strip__day { flex: 1 1 0; min-width: 0; }
.vp-weekbar .day-strip__day:disabled { opacity: 0.4; }
.vp-weekbar .day-strip__day--has-events:not(.day-strip__day--today) { background: #fff; box-shadow: inset 0 0 0 1px var(--vp-line); }
.vp-wday__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 14px -20px; padding: 11px 20px; background: #FBF8F4; border-top: 1px solid var(--vp-line); border-bottom: 1px solid var(--vp-line); font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #222; }
.vp-weekbar + .vp-wday .vp-wday__head { margin-top: 16px; }
.vp-wday__head::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8A7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat; }
.vp-wday--today .vp-wday__head { color: var(--teal-text); }
.vp-wday--today .vp-wday__head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008A05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.vp-wday__today, .vp-pill--today { background: rgba(0, 138, 5, 0.06); box-shadow: inset 0 0 0 1.5px rgba(0, 138, 5, 0.18); color: var(--teal-text); }
.vp-wday__today { padding: 3px 10px; border-radius: 999px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.vp-wday__n { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.vp-row { display: grid; grid-template-columns: 80px 1fr; column-gap: 12px; row-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--vp-line); }
.vp-wday__head + .vp-row { padding-top: 0; }
.vp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.vp-row__main { display: contents; color: inherit; text-decoration: none; }
/* display: contents gives the link no box, so focus shows on its parts. */
.vp-row__main:focus-visible .vp-row__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* The flyer fills the row's height without setting it (contain: size). */
.vp-row__img { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; width: 80px; min-height: 80px; contain: size; border-radius: 10px; object-fit: contain; background: #F3EEE8; }
.vp-row__body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-row__name { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text); }
.vp-row__time { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.vp-row__time svg { width: 16px; height: 16px; color: var(--vp-ink); }
.vp-pills { grid-column: 2; grid-row: 2; display: flex; flex-wrap: nowrap; gap: 5px; overflow: clip; overflow-clip-margin: 6px; }
.vp-pills--all { flex-wrap: wrap; }
.vp-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 8px; border: 1px solid var(--vp-line); border-radius: 999px; background: #fff; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.vp-pill--today { border-color: transparent; font-weight: 600; }
.vp-pill--more { border-style: dashed; color: var(--vp-ink); font-weight: 600; }
.vp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vp-empty { padding: 18px 20px 0; font-size: 14px; color: var(--text-muted); }
/* The site's "Reach thousands" block, as on /insta (.insta-reach). */
.vp-reach { margin: 24px 16px 4px; padding: 1.5rem 1.25rem; border: none; border-radius: 24px; background: #222; text-align: left; }
.vp-reach h2 { font-size: 1.125rem; line-height: 1.2; margin: 0; color: #fff; text-wrap: balance; }
.vp-reach .home-about__cta-row { flex-direction: column; gap: .6rem; margin-top: .9rem; }
.vp-reach a.home-about__btn { justify-content: center; min-height: 56px; font-family: system-ui, -apple-system, sans-serif; font-size: 1.1875rem; text-decoration: none; }
.vp-reach a.home-about__btn--primary { background: linear-gradient(135deg, #E03A00 0%, #EC7432 100%) border-box; border-color: transparent; }
.vp-reach a.home-about__btn--secondary { color: #fff6ed; border-color: #fff6ed; }
.vp-reach a.home-about__btn--secondary:hover { background: rgba(255, 246, 237, 0.1); }
.vp-reach a.home-about__btn:focus-visible { outline: 3px solid #fff6ed; outline-offset: 2px; }
.vp-reach .home-about__btn svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.vp-404 { text-align: center; padding: 3rem 2rem; }
.vp-404 h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.vp-404 p { color: var(--text-muted); margin-bottom: 1.5rem; }
.vp-404 a { color: var(--coral); font-weight: 600; }
.vp-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20, 12, 6, 0.55); overflow-y: auto; }
.vp-modal[hidden] { display: none; }
/* Pop-up first frame while the event page loads */
.vp-skel__img { display: block; width: 100%; height: 260px; object-fit: contain; background: #F3ECE4; }
.vp-skel__when { margin-top: 8px; font-size: 15px; color: var(--text-muted); }
.vp-skel__line { height: 12px; margin-top: 16px; border-radius: 6px; background: linear-gradient(90deg, #F1EBE4 25%, #F8F3EE 50%, #F1EBE4 75%); background-size: 200% 100%; animation: vp-shimmer 1.2s linear infinite; }
.vp-skel__line--short { width: 60%; margin-top: 10px; }
@keyframes vp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vp-skel__line { animation: none; } }
.vp-modal__panel { max-width: 640px; min-height: 100%; margin: 0 auto; background: #fff; }

/* Host pages (/hosts/<slug>): a link-in-bio profile over the venue page's
   schedule. Photo or an initials tile, name, tagline, their links, then the
   same .vp-* sections. */
.hp-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 20px 0; }
.hp-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: #F3EEE8; box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(120, 80, 30, 0.18); }
.hp-initials { display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; border-radius: 50%; font-family: 'Dela Gothic One', var(--font); font-size: 44px; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(120, 80, 30, 0.18); }
/* Six stable tints (host-profile.mjs nameHue) so a photo-less host still reads as a person, not a gap. */
.hp-initials--0 { background: linear-gradient(160deg, #E03A00, #F2913F); }
.hp-initials--1 { background: linear-gradient(160deg, #0E5563, #2C8C9E); }
.hp-initials--2 { background: linear-gradient(160deg, #007104, #4CAF50); }
.hp-initials--3 { background: linear-gradient(160deg, #7A3E9D, #B47BD6); }
.hp-initials--4 { background: linear-gradient(160deg, #B52E00, #E8702A); }
.hp-initials--5 { background: linear-gradient(160deg, #1F6FEB, #63A4FF); }
.hp-name { margin-top: 14px; text-align: center; }
.hp-tagline { margin-top: 8px; max-width: 34ch; font-size: 16px; line-height: 1.4; color: var(--text-soft); }
.hp-kind { margin-top: 6px; }
.hp-summary { padding: 12px 20px 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.hp-actions { gap: 8px; }
.hp-actions .vp-contacts { justify-content: center; }
.hp-claim { display: block; min-height: 40px; line-height: 40px; border: 1px dashed var(--vp-line); border-radius: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-soft); text-decoration: none; }
.hp-claim:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 2px; }
/* Venue page: street under the kind, the share row and the town directory
   link under the buttons, and "Similar places nearby" after the schedule. */
.vp-addr { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--text-muted); }
.vp-addr svg { width: 15px; height: 15px; flex: none; color: var(--vp-ink); }
.vp-actions .vp-share { margin-top: 6px; }
.vp-similar__list { margin-top: 6px; }
/* "More venues in {town}" / "See everything at {venue}": one quiet tile in
   ink (no brand orange): icon, label, a neutral count badge, chevron. */
.vp-more-tile { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 8px 12px 8px 14px; border: 1px solid var(--vp-line, #E8DDD0); border-radius: 12px; background: #fff; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.vp-more-tile:hover { background: #FBF8F4; border-color: #D9CBB9; }
.vp-more-tile:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 2px; }
.vp-more-tile__icon { display: flex; color: var(--text-muted); }
.vp-more-tile__icon svg { width: 20px; height: 20px; }
.vp-more-tile__text { flex: 1; min-width: 0; }
.vp-more-tile__count { flex: none; min-width: 28px; padding: 2px 9px; border-radius: 9999px; background: #F3EEE8; color: var(--text); font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.vp-more-tile__chev { flex: none; width: 16px; height: 16px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .vp-more-tile { transition: none; } }
/* "More at {venue}" on the event page: the venue page's cards, then a link to it. */
.ep-more { border-top: 1px solid var(--vp-line); }
.vp-card__venue, .vp-row__venue { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.vp-card__venue svg, .vp-row__venue svg { width: 14px; height: 14px; flex: none; color: var(--vp-ink); }
/* "Hosted by" on cards and event pages links to the host's page when it has one. */
.event-card__host { color: inherit; text-decoration: underline; text-decoration-color: rgba(103, 103, 103, 0.45); text-underline-offset: 2px; }
.event-card__host:hover { text-decoration-color: currentColor; }
/* Venue name in the event pop-up: a pill to the venue page, like the event page's. */
.event-card__venue-pill { display: inline-flex; align-items: center; padding: 0.1rem 0.6rem; border: 1px solid #E8DDD0; border-radius: 9999px; background: #fff; color: inherit; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.event-card__venue-pill:hover { border-color: var(--coral); color: var(--coral-text, #B52E00); }

/* Desktop venue page (.vp--split): the place (map, name, buttons) stays in
   view on the left while the one-time and recurring schedule scrolls on the
   right. "Reach thousands" closes the right column, so the sticky column ends
   with the schedule and never slides over it. The name never leaves the
   screen, so the compact bar is off. Scoped
   to the venue page: the host page and the event page's "More at" section
   share .vp. Phones keep one column. */
@media (min-width: 1024px) {
  /* The place column is 456px (380px + 20%, Scott 2026-10-10). */
  .ep-content-wrap--narrow .ep-main:has(> .vp--split) { max-width: 1120px; }
  .vp--split { display: grid; grid-template-columns: 456px minmax(0, 1fr); align-items: start; }
  .vp--split .vp-side { position: sticky; top: 16px; padding-bottom: 20px; border-right: 1px solid var(--vp-line); }
  .vp--split .vp-map { height: 343px; } /* 220px, +30% then +20% (Scott, 2026-10-10) */
  .vp--split > .vp-rule, body:has(.vp--split) .vp-stick { display: none; }
  .vp--split .vp-main { min-width: 0; padding: 0 12px; }
  body.vp-stuck .vp--split .vp-wday__head { top: 0; }
  .vp--split .vp-reach { margin: 24px 0 4px; }
  .vp--split .vp-reach .home-about__cta-row { flex-direction: row; }
  .vp--split .vp-reach a.home-about__btn { flex: 1 1 0; }
}
/* Short laptop screens: a smaller map keeps the whole place column in view. */
@media (min-width: 1024px) and (max-height: 820px) {
  .vp--split .vp-map { height: 218px; } /* 140px, +30% then +20% */
}

/* Host directory (/hosts): one section per region, a card per public host. */
.hd { --vp-ink: #D93800; --vp-line: #E8DDD0; background: #fff; padding: 0 20px 24px; }
.hd-head { padding: 18px 0 6px; }
.hd-head h1 { font-family: 'Dela Gothic One', var(--font); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; color: var(--text); }
.hd-head p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.hd-pills { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none; }
.hd-pills::-webkit-scrollbar { display: none; }
.hd-pills a { flex: none; padding: 7px 14px; border: 1px solid var(--vp-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.hd-pills a:focus-visible, .hd-card:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 2px; }
.hd-sec { padding-top: 18px; }
.hd-sec h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.hd-sec__sub { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.hd-grid { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .hd-grid { grid-template-columns: 1fr 1fr; } }
.hd-card { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--vp-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.hd-card__photo { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; background: #F3EEE8; }
.hd-card__initials { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: none; border-radius: 50%; font-family: 'Dela Gothic One', var(--font); font-size: 22px; line-height: 1; color: #fff; }
.hd-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-card__name { font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--text); }
.hd-card__tagline { font-size: 13px; line-height: 1.35; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-card__next { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.hd-card__next svg { width: 14px; height: 14px; flex: none; color: var(--vp-ink); }
.hd-empty { padding: 16px 0; font-size: 14px; color: var(--text-muted); }
body.vp-locked { overflow: hidden; }
@media (min-width: 700px) {
  .vp-map { height: 240px; }
  .vp-modal__panel { margin: 32px auto; min-height: 0; border-radius: 12px; overflow: hidden; }
}

/* === Low-bandwidth first screen (docs/superpowers/plans/2026-10-03-low-bandwidth-first-screen.md) === */

/* Thumbnail slot: the box is reserved and tinted by category before the image
   arrives; the image fades in when decoded. A failed image leaves the tint. */
.img-slot {
  background: var(--tint, #EBEBEB);
}
.img-slot--community { --tint: rgba(120, 113, 108, 0.18); }
.img-slot--social     { --tint: rgba(244, 162, 97, 0.22); }
.img-slot--yoga       { --tint: rgba(42, 157, 143, 0.20); }
.img-slot--dance      { --tint: rgba(242, 87, 69, 0.18); }
.img-slot--meditation { --tint: rgba(155, 93, 229, 0.18); }
.img-slot--music      { --tint: rgba(109, 89, 122, 0.20); }
.img-slot--food       { --tint: rgba(214, 40, 40, 0.16); }
.img-slot--arts       { --tint: rgba(233, 196, 106, 0.28); }
.img-slot--workshop   { --tint: rgba(161, 98, 7, 0.18); }
.img-slot--kids       { --tint: rgba(242, 132, 130, 0.22); }
.img-slot--ceremonies { --tint: rgba(192, 132, 252, 0.20); }
.img-slot--markets    { --tint: rgba(138, 177, 125, 0.24); }
.img-slot--retreats   { --tint: rgba(56, 189, 248, 0.20); }
.img-slot--fitness    { --tint: rgba(5, 150, 105, 0.18); }
.img-slot--sports     { --tint: rgba(37, 99, 235, 0.18); }

/* Cross-fade only when scripts run: the inline onload that sets .is-loaded
   never fires without them, and the image must still show. */
html.js .img-slot .event-card__image {
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.5s ease;
}
html.js .img-slot .event-card__image.is-loaded {
  opacity: 1;
}
.img-slot--failed .event-card__image {
  display: none;
}

/* Server-rendered nodes are already on screen: never hide them for the
   entrance animation, and never replay it on them. */
.feed-animated .event-card--ssr,
.feed-animated .event-card--ssr.revealed,
.feed-animated .day-group__header--ssr,
.feed-animated .day-group__header--ssr.revealed {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Ghost shapes: only where the data genuinely has not arrived yet. */
.skeleton {
  display: block;
  background: linear-gradient(90deg, #EFE7DD 0%, #F7F1EA 50%, #EFE7DD 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}
.skeleton--pill  { width: 4.5rem; height: 1.1rem; border-radius: 999px; }
.skeleton--title { width: 80%; height: 1.05rem; margin: 0.55rem 0 0.6rem; }
.skeleton--line  { width: 100%; height: 0.8rem; margin: 0.35rem 0; }
.skeleton--short { width: 55%; }
.event-card--ghost { pointer-events: none; }
.event-card--ghost .event-card__body { justify-content: center; }
.event-details__description--pending { padding: 0.25rem 0 0.5rem; }
.event-details__description--pending .skeleton--line { height: 0.9rem; margin: 0.5rem 0; }
.loading--ghost { text-align: left; padding: 0; }
.loading--ghost .loading__spinner { display: none; }
@keyframes skeletonShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  html.js .img-slot .event-card__image { transition: none; }
}

/* Reserve the space scripts fill in, so the server-rendered page does not
   jump when they arrive. Measured 2026-10-03 at 390px and 1366px. */
/* Sponsor rotator: the slides are absolutely positioned and the active one is
   chosen by script; until then the slot has no height. Banners are 1292x344. */
.sponsor-slot:not(:has(.sponsor-slot__slide--active)) {
  aspect-ratio: 1292 / 344;
}
/* Mobile time-range toggle: built by script into an empty strip. */
.mob__time-range {
  min-height: 44px;
}

/* Lite mode (js/network.js): photos off until asked. The slot keeps its tint. */
.lite-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #E8DDD0;
  border-radius: 10px;
  background: #FFF5ED;
  font-size: 0.8rem;
  color: #6B5742;
}
.lite-banner__btn {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid #E8DDD0;
  border-radius: 999px;
  background: white;
  font: inherit;
  font-weight: 700;
  color: #222;
  cursor: pointer;
}
.img-slot--deferred .event-card__image,
.featured-events__card--deferred .featured-events__img {
  visibility: hidden;
}

/* "Chat on WhatsApp" pill (js/whatsapp-chat.js). Bottom left: the feed's
   floating menu / back-to-top group owns bottom right. Hidden until the
   module mounts it; ships dark behind CHAT_BUTTON_LIVE. */
.wa-chat {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #25D366;
  color: #0b3d1f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.wa-chat:hover { background: #1ebe5b; }
.wa-chat:focus-visible { outline: 2px solid #0b3d1f; outline-offset: 2px; }
.wa-chat__icon { flex: none; }
.wa-chat[hidden] { display: none; }