/* GENERATED — do not edit by hand.
   Scoped to .buzz-events-wrap from canonical design-system/buzz-base.css
   via tools/scope-css.py. Replicates the platform build step.
   Reconcile with the official pipeline before promotion (Laurie). */

/* ============================================================
   PAGE-SPECIFIC - Public Events Calendar
   Everything here is namespaced `bcal-` so it never collides with the
   shared base `.cal-*` date-picker component. Colors/spacing/type all
   come from the design tokens. Square corners throughout (brand rule);
   the only rounded things are the toggle + tag pills baked into base,
   and the 4px state dots (same as the base today-marker).
   ============================================================ */

/* Page frame: the widget sits in a white square card on the page bg,
   matching how it embeds on a rescue's WordPress page. */
.buzz-events-wrap .bcal-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-2xl);
}
.buzz-events-wrap .bcal-card {
  background: var(--color-card);
  border: var(--border-default);
}
.buzz-events-wrap .bcal-card-pad {
  padding: var(--space-3xl) var(--space-4xl) var(--space-4xl);
}

/* Icons inside clickable controls never capture pointer events, so a click
   on the icon always lands on its button (fixes "clicking the arrow does
   nothing" in browsers that treat fill:none SVG interiors as click-through). */
.buzz-events-wrap .bcal-iconbtn svg, .buzz-events-wrap .bcal-switch-btn svg, .buzz-events-wrap .bcal-chip svg, .buzz-events-wrap .bcal-more svg, .buzz-events-wrap .bcal-cal-link svg, .buzz-events-wrap .bcal-modal-close svg, .buzz-events-wrap .filter-chip svg, .buzz-events-wrap .bcal-evcard svg, .buzz-events-wrap .animal-card-pub svg { pointer-events: none; }

/* ─── Top toolbar: view switcher + sort ──────────────────────── */
.buzz-events-wrap .bcal-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.buzz-events-wrap .bcal-toolbar-spacer { flex: 1; }

/* Segmented view switcher (square, orange active) */
.buzz-events-wrap .bcal-switch {
  display: inline-flex;
  border: var(--border-default);
}
.buzz-events-wrap .bcal-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--space-md);
  background: var(--color-card);
  border: none;
  border-right: var(--border-default);
  font-family: inherit;
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  color: var(--color-text-body);
  cursor: pointer;
  transition: color var(--transition-default), background var(--transition-default);
}
.buzz-events-wrap .bcal-switch-btn:last-child { border-right: none; }
.buzz-events-wrap .bcal-switch-btn svg { width: 15px; height: 15px; }
.buzz-events-wrap .bcal-switch-btn:hover { color: var(--color-action); }
.buzz-events-wrap .bcal-switch-btn.active {
  background: var(--color-action);
  color: #fff;
}
.buzz-events-wrap .bcal-switch-btn.active:hover { color: #fff; }

/* ─── Month bar: big title + nav ─────────────────────────────── */
.buzz-events-wrap .bcal-monthbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.buzz-events-wrap .bcal-title {
  font-size: var(--text-page-title);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-page-title);
  line-height: var(--leading-tight);
}
.buzz-events-wrap .bcal-nav { display: inline-flex; align-items: center; gap: var(--space-md); }
.buzz-events-wrap .bcal-nav-arrows { display: inline-flex; align-items: center; gap: var(--space-xs); }

/* Square icon button - canonical dashed-orange-ring-on-white hover */
.buzz-events-wrap .bcal-iconbtn {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: var(--border-default);
  color: var(--color-text-body);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color var(--transition-default), border-color var(--transition-default);
}
.buzz-events-wrap .bcal-iconbtn svg { width: 16px; height: 16px; stroke-width: 1.5; }
.buzz-events-wrap .bcal-iconbtn:hover {
  border: 1.5px dashed var(--color-action);
  color: var(--color-action);
}
.buzz-events-wrap .bcal-today-btn {
  border-radius: var(--radius-input);
  padding: 0 var(--space-md);
  width: auto;
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
}

/* ─── Filter chips row ───────────────────────────────────────── */
.buzz-events-wrap .bcal-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.buzz-events-wrap .bcal-filter-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  margin-right: var(--space-xs);
}
.buzz-events-wrap .bcal-filter-icon svg { width: 16px; height: 16px; }
.buzz-events-wrap .bcal-chip-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.buzz-events-wrap .bcal-chip-cat svg { width: 13px; height: 13px; }

/* ─── MONTH VIEW: 7-column grid ──────────────────────────────── */
.buzz-events-wrap .bcal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-header);
  border: var(--border-default);
  border-bottom: none;
}
.buzz-events-wrap .bcal-weekday {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-body);
  border-right: var(--border-soft);
}
.buzz-events-wrap .bcal-weekday:last-child { border-right: none; }

.buzz-events-wrap .bcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: var(--border-default);
  border-top: var(--border-default);
}
.buzz-events-wrap .bcal-cell {
  min-height: 124px;
  padding: var(--space-sm);
  border-right: var(--border-default);
  border-bottom: var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.buzz-events-wrap .bcal-cell.is-outside { background: var(--color-header); }
.buzz-events-wrap .bcal-cell.is-past .bcal-daynum { color: var(--color-text-disabled); }
.buzz-events-wrap .bcal-daynum {
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  align-self: flex-start;
}
.buzz-events-wrap .bcal-cell.is-outside .bcal-daynum { color: var(--color-text-disabled); }
/* Today: orange filled circle behind the number, matching the Buzz
   calendar component's round day markers. */
.buzz-events-wrap .bcal-cell.is-today .bcal-daynum {
  background: var(--color-action);
  color: #fff;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Event chip - buzz-blue (state) → orange (action) on hover */
.buzz-events-wrap .bcal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 3px 7px;
  background: var(--buzz-primary, var(--color-buzz-blue));
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-default);
}
.buzz-events-wrap .bcal-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
.buzz-events-wrap .bcal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzz-events-wrap .bcal-chip:hover { background: var(--color-action); }
.buzz-events-wrap .bcal-more {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--color-action);
  cursor: pointer;
  text-align: left;
  padding: 1px 0 0;
  transition: color var(--transition-default);
}
.buzz-events-wrap .bcal-more:hover { color: var(--color-text-body); }

/* ─── LIST VIEW: mini grid (left) + event cards (right) ──────── */
.buzz-events-wrap .bcal-listwrap {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
}
.buzz-events-wrap .bcal-mini {
  border: var(--border-default);
  background: var(--color-card);
}
.buzz-events-wrap .bcal-mini-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-header);
  border-bottom: var(--border-default);
}
.buzz-events-wrap .bcal-mini-wd {
  text-align: center;
  padding: 7px 0;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-body);
}
.buzz-events-wrap .bcal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: var(--space-xs);
}
/* Each cell is the click target; the round marker sits behind the number */
.buzz-events-wrap .bcal-mini-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 0 6px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: default;
}
.buzz-events-wrap .bcal-mini-cell.has-events { cursor: pointer; }
.buzz-events-wrap .bcal-mini-day {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-button);
  color: var(--color-text-body);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.buzz-events-wrap .bcal-mini-cell.is-outside .bcal-mini-day { color: var(--color-text-disabled); }
.buzz-events-wrap .bcal-mini-cell.has-events .bcal-mini-day {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
/* hover: dashed orange ring on white, same as the calendar's day buttons */
.buzz-events-wrap .bcal-mini-cell.has-events:not(.is-today):not(.is-selected):hover .bcal-mini-day {
  background: var(--color-card);
  box-shadow: inset 0 0 0 1.5px var(--color-action);
  color: var(--color-action);
}
/* selected (the day you clicked to filter): orange ring */
.buzz-events-wrap .bcal-mini-cell.is-selected:not(.is-today) .bcal-mini-day {
  box-shadow: inset 0 0 0 1.5px var(--color-action);
  color: var(--color-action);
}
/* today: filled orange circle, consistent with the month view */
.buzz-events-wrap .bcal-mini-cell.is-today .bcal-mini-day {
  background: var(--color-action);
  color: #fff;
}
.buzz-events-wrap .bcal-mini-dots {
  display: flex;
  gap: 3px;
  height: 5px;
  align-items: center;
}
.buzz-events-wrap .bcal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--buzz-primary, var(--color-buzz-blue));
}
.buzz-events-wrap .bcal-mini-cell.is-today .bcal-dot { background: #fff; }

/* Selected-day banner above the list */
.buzz-events-wrap .bcal-day-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-header);
  border: var(--border-default);
  margin-bottom: var(--space-md);
  font-size: var(--text-button);
  color: var(--color-text-body);
}

/* Event card */
.buzz-events-wrap .bcal-evcard {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border-default);
  background: var(--color-card);
  cursor: pointer;
  transition: border-color var(--transition-default);
}
.buzz-events-wrap .bcal-evcard + .bcal-evcard { margin-top: var(--space-md); }
.buzz-events-wrap .bcal-evcard:hover { border-color: var(--color-action); }

.buzz-events-wrap .bcal-dateblock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: var(--space-sm) var(--space-sm);
  background: var(--color-header);
  border: var(--border-default);
}
.buzz-events-wrap .bcal-dateblock .d {
  font-size: var(--text-page-title);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}
.buzz-events-wrap .bcal-dateblock .m {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin-top: 3px;
}

.buzz-events-wrap .bcal-evbody { flex: 1; min-width: 0; }
/* Featured-image thumbnail on list cards (shown only when the event has one) */
.buzz-events-wrap .bcal-evthumb {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  align-self: flex-start;
  border: var(--border-default);
  background: var(--color-header);
  overflow: hidden;
}
.buzz-events-wrap .bcal-evthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buzz-events-wrap .bcal-evbadges {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.buzz-events-wrap .bcal-badge-featured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: var(--buzz-primary, var(--color-buzz-blue));
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.buzz-events-wrap .bcal-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
.buzz-events-wrap .bcal-cat svg { width: 13px; height: 13px; }
.buzz-events-wrap .bcal-evtitle {
  font-size: var(--text-body-large);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-card-title);
  margin-bottom: 2px;
}
.buzz-events-wrap .bcal-evsub {
  font-size: var(--text-button);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.buzz-events-wrap .bcal-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-button);
  color: var(--color-text-body);
  margin-top: 5px;
}
.buzz-events-wrap .bcal-meta svg { width: 14px; height: 14px; color: var(--color-text-muted); flex-shrink: 0; }

/* List-view empty state spacing */
.buzz-events-wrap .bcal-list-empty {
  padding: var(--space-4xl) var(--space-2xl);
  text-align: center;
  color: var(--color-text-muted);
  border: 2px dashed var(--color-border);
}
.buzz-events-wrap .bcal-list-empty svg { width: 40px; height: 40px; color: var(--color-border); margin-bottom: var(--space-md); }
.buzz-events-wrap .bcal-list-empty-text { font-size: var(--text-body-large); color: var(--color-text-body); font-weight: var(--weight-medium); }

/* ─── EVENT DETAIL MODAL ─────────────────────────────────────── */
.buzz-events-wrap #bcal-modal .modal { max-width: 640px; }
.buzz-events-wrap #bcal-modal .modal-header { align-items: flex-start; gap: var(--space-lg); }
.buzz-events-wrap .bcal-modal-titles { flex: 1; min-width: 0; }
.buzz-events-wrap .bcal-modal-title {
  font-size: var(--text-card-title);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-card-title);
  line-height: var(--leading-tight);
}
.buzz-events-wrap .bcal-modal-sub {
  font-size: var(--text-button);
  color: var(--color-text-muted);
  margin-top: 4px;
}
/* Square close button with the canonical icon-button hover (brand: no circles) */
.buzz-events-wrap .bcal-modal-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: var(--border-default);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition-default), border-color var(--transition-default); border-radius: 50%;}
.buzz-events-wrap .bcal-modal-close svg { width: 16px; height: 16px; }
.buzz-events-wrap .bcal-modal-close:hover { border: 1.5px dashed var(--color-action); color: var(--color-action); }

.buzz-events-wrap .bcal-modal-section {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: var(--border-soft);
}
.buzz-events-wrap .bcal-modal-section svg { width: 16px; height: 16px; color: var(--color-text-muted); }
.buzz-events-wrap .bcal-modal-section-title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
/* Featured image banner (full-bleed across the modal body top) */
.buzz-events-wrap .bcal-modal-hero {
  margin: calc(-1 * var(--space-xl)) -22px var(--space-xl);
  height: 220px;
  background: var(--color-header);
  border-bottom: var(--border-default);
  overflow: hidden;
}
.buzz-events-wrap .bcal-modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.buzz-events-wrap .bcal-modal-desc {
  font-size: var(--text-button);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2xl);
}
/* Match the body text to the Time/Location size (beats the theme's p/li reset). */
.buzz-events-wrap .bcal-modal-desc p,
.buzz-events-wrap .bcal-modal-desc li,
.buzz-events-wrap .bcal-modal-desc span,
.buzz-events-wrap .bcal-modal-desc div { font-size: var(--text-button); }
/* Images placed inside the rich-text description render inline, square-cornered */
.buzz-events-wrap .bcal-modal-desc img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-md) 0;
  border: var(--border-default);
}
.buzz-events-wrap .bcal-modal-desc p { margin-bottom: var(--space-sm); }
.buzz-events-wrap .bcal-modal-desc p:last-child { margin-bottom: 0; }

/* Venue name links out to Google Maps */
.buzz-events-wrap .bcal-maplink {
  color: var(--color-action);
  font-weight: var(--weight-semibold);
}
.buzz-events-wrap .bcal-maplink:hover { color: var(--color-text-body); }
.buzz-events-wrap .bcal-modal-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.buzz-events-wrap .bcal-modal-fact { display: flex; gap: var(--space-md); }
.buzz-events-wrap .bcal-modal-fact-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-header);
  border: var(--border-default);
  color: var(--color-text-muted);
}
.buzz-events-wrap .bcal-modal-fact-icon svg { width: 16px; height: 16px; }
.buzz-events-wrap .bcal-modal-fact-label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.buzz-events-wrap .bcal-modal-fact-value {
  font-size: var(--text-button);
  color: var(--color-text-body);
  line-height: var(--leading-snug);
}

/* Featured-animals strip inside the modal */
.buzz-events-wrap .bcal-animals { margin-bottom: var(--space-xl); }
.buzz-events-wrap .bcal-animals-label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.buzz-events-wrap .bcal-animals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

/* ── Public animal card (reusable site-wide) ──────────────────
   Vertical card: square photo, centered orange name, short
   description, then Breed / Sex / Age rows (Lucide icon + value). */
.buzz-events-wrap .animal-card-pub {
  display: flex;
  flex-direction: column;
  border: var(--border-default);
  background: var(--color-card);
  cursor: pointer;
  transition: border-color var(--transition-default);
  text-align: left;
  font-family: inherit;
  padding: 0;
}
.buzz-events-wrap .animal-card-pub:hover { border-color: var(--color-action); }

/* Square photo (1:1), never circular */
.buzz-events-wrap .animal-card-pub-photo {
  aspect-ratio: 1 / 1;
  background: var(--color-header);
  border-bottom: var(--border-default);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.buzz-events-wrap .animal-card-pub-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.buzz-events-wrap .animal-card-pub-photo .ph svg {
  width: 38px;
  height: 38px;
  color: var(--color-text-disabled);
  stroke-width: 1.5;
}

.buzz-events-wrap .animal-card-pub-name {
  text-align: center;
  color: var(--color-action);
  font-size: var(--text-body-large);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-card-title);
  padding: var(--space-md) var(--space-md) 0;
}
.buzz-events-wrap .animal-card-pub-desc {
  text-align: center;
  font-size: var(--text-button);
  color: var(--color-text-body);
  line-height: var(--leading-snug);
  padding: 5px var(--space-md) var(--space-md);
}
.buzz-events-wrap .animal-card-pub-attrs {
  margin-top: auto;
  border-top: var(--border-soft);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.buzz-events-wrap .animal-card-pub-attr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-button);
  color: var(--color-text-body);
}
.buzz-events-wrap .animal-card-pub-attr svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Footer add-to-calendar links */
.buzz-events-wrap .bcal-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border-soft);
}
.buzz-events-wrap .bcal-cal-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  color: var(--color-action);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-default);
}
.buzz-events-wrap .bcal-cal-link svg { width: 15px; height: 15px; }
.buzz-events-wrap .bcal-cal-link:hover { color: var(--color-text-body); }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .buzz-events-wrap .bcal-listwrap { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .buzz-events-wrap .bcal-mini { max-width: 340px; }
  .buzz-events-wrap .bcal-modal-grid { flex-direction: column; gap: var(--space-md); }
  .buzz-events-wrap .bcal-card-pad { padding: var(--space-2xl) var(--space-xl) var(--space-3xl); }
  .buzz-events-wrap .bcal-cell { min-height: 96px; }
  .buzz-events-wrap .bcal-grid-scroll { overflow-x: auto; }
  .buzz-events-wrap .bcal-grid, .buzz-events-wrap .bcal-weekdays { min-width: 620px; }
}
@media (max-width: 560px) {
  .buzz-events-wrap .bcal-monthbar { flex-direction: column; align-items: stretch; gap: var(--space-md); }
  .buzz-events-wrap .bcal-title { font-size: var(--text-card-title); }
}

/* Phone widths: the 620px min-width above (set for tablet-ish 561–860px
   screens, where cramming 7 columns any narrower would make day numbers and
   chips illegible) is wider than the viewport itself on a phone, which is
   exactly what forces the horizontal scrollbar reported on mobile. Below
   560px, drop that forced min-width so the existing repeat(7, 1fr) grid
   shrinks to fit the screen instead, and tighten cell padding, day-number
   size, and chip size so the shrunk columns stay legible without scrolling. */
@media (max-width: 560px) {
  .buzz-events-wrap .bcal-grid-scroll { overflow-x: visible; }
  .buzz-events-wrap .bcal-grid, .buzz-events-wrap .bcal-weekdays { min-width: 0; }
  .buzz-events-wrap .bcal-cell { min-height: 60px; padding: 3px; gap: 3px; }
  .buzz-events-wrap .bcal-daynum { font-size: 11px; }
  .buzz-events-wrap .bcal-weekday { padding: var(--space-xs) 2px; font-size: 9px; }
  .buzz-events-wrap .bcal-chip { padding: 2px 4px; font-size: 9px; gap: 3px; }
  .buzz-events-wrap .bcal-chip svg { width: 9px; height: 9px; }
}

/* List view on phones: the date badge (56px) and featured-image thumbnail
   (92px) are both fixed-width, so together with their gaps they leave very
   little room for the title/time/address text once the card itself is only
   ~280-320px wide. Shrinking the thumbnail and tightening the card's own
   padding/gap gives the text column enough room to stay readable instead of
   being crushed into a sliver. */
@media (max-width: 560px) {
  .buzz-events-wrap .bcal-evcard { padding: var(--space-sm); gap: var(--space-sm); }
  .buzz-events-wrap .bcal-dateblock { min-width: 48px; padding: var(--space-xs); }
  .buzz-events-wrap .bcal-evthumb { width: 56px; height: 56px; }
  .buzz-events-wrap .bcal-evtitle { font-size: var(--text-button); }
}


/* ── Embedding fixes for the shortcode inside a theme page ─────────────────── */

/* The design system maps body -> .buzz-events-wrap (min-height:100vh + page
   background). Inside a theme page that would force a full-viewport block and
   also affect the detached modal host, so size the calendar wrapper to content. */
.buzz-events-wrap.buzz-events-calendar {
	min-height: 0;
	background: transparent;
}

/* Event detail popup: force a viewport-centered overlay, immune to theme
   flexbox resets or stacking. ID + !important so nothing can shift it. */
.buzz-events-wrap #bcal-modal.modal-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
}
.buzz-events-wrap #bcal-modal.modal-overlay.open {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Cosmetic tweaks (batch): image top padding, header weekday, multi-time rows. */
.buzz-events-wrap .bcal-modal-hero { margin-top: var(--space-lg); }
.buzz-events-wrap .bcal-dateblock .wd {
	display: block;
	font-size: 11px;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	line-height: 1;
	margin-bottom: 2px;
}
.buzz-events-wrap #bcal-modal-time > div + div { margin-top: 2px; }

/* Location block (popup + list): plain name, address lines, website | Map. */
.buzz-events-wrap .bcal-loc-links { margin-top: 2px; }
.buzz-events-wrap .bcal-loc-link { color: var(--color-action); text-decoration: none; }
.buzz-events-wrap .bcal-loc-link:hover { text-decoration: underline; }

/* Popup Time + Location must render identically. Force the leaf elements so a
   theme reset (div/span/a { font-size:15px }) can't leak in and desync them. */
.buzz-events-wrap .bcal-modal-fact-value,
.buzz-events-wrap .bcal-modal-fact-value div,
.buzz-events-wrap .bcal-modal-fact-value a {
	font-size: var(--text-button);
}
.buzz-events-wrap .bcal-modal-fact-value,
.buzz-events-wrap .bcal-modal-fact-value div {
	color: var(--color-text-body);
}
.buzz-events-wrap .bcal-modal-fact-value a.bcal-loc-link { color: var(--color-action); }

/* List card meta (Time + Location) — same treatment. */
.buzz-events-wrap .bcal-meta,
.buzz-events-wrap .bcal-meta span,
.buzz-events-wrap .bcal-meta div,
.buzz-events-wrap .bcal-meta a {
	font-size: var(--text-button);
	line-height: var(--leading-normal);
}
.buzz-events-wrap .bcal-meta,
.buzz-events-wrap .bcal-meta span,
.buzz-events-wrap .bcal-meta div {
	color: var(--color-text-body);
}
.buzz-events-wrap .bcal-meta a.bcal-loc-link { color: var(--color-action); }

/* List card: multi-line location, pin aligned to the top. */
.buzz-events-wrap .bcal-meta-loc { align-items: flex-start; }

/* Even spacing between weekday / day / month in the date badge. */
.buzz-events-wrap .bcal-dateblock { gap: 1px; }
.buzz-events-wrap .bcal-dateblock .wd { margin-bottom: 0; }
.buzz-events-wrap .bcal-dateblock .m { margin-top: 0; }

/* Unified date badge: primary-color fill, white text (popup, list, widget). */
.buzz-events-wrap .bcal-dateblock {
	background: var(--buzz-primary, var(--color-text-primary));
	border: none;
}
.buzz-events-wrap .bcal-dateblock .d { color: #fff; }
.buzz-events-wrap .bcal-dateblock .m { color: rgba(255, 255, 255, 0.85); }

/* Location link icons (website + map). */
.buzz-events-wrap .bcal-loc-ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* Location links keep the action color (icons + text), even inside meta rows. */
.buzz-events-wrap .bcal-loc-links a.bcal-loc-link,
.buzz-events-wrap .bcal-loc-links a.bcal-loc-link span { color: var(--color-action); }
.buzz-events-wrap .bcal-loc-links a.bcal-loc-link .bcal-loc-ic { color: var(--color-text-muted); }
.buzz-events-wrap .bcal-loc-link { display: inline; }
/* Top-align the leading Time/Location icon with the first text line. */
.buzz-events-wrap .bcal-meta { align-items: flex-start; }
.buzz-events-wrap .bcal-meta > svg { margin-top: 3px; flex-shrink: 0; }
/* Frontend embed: no full-viewport min-height. */
.buzz-events-wrap.buzz-events-calendar { min-height: 0; }


/* Location link text (incl. the "Map" span) keeps the link color; icon stays muted. */
.buzz-events-wrap .bcal-meta a.bcal-loc-link span { color: var(--color-action); }
.buzz-events-wrap .bcal-meta a.bcal-loc-link .bcal-loc-ic { color: var(--color-text-muted); }

/* Date badge: tight line-height on all lines so its height matches the widget's. */
.buzz-events-wrap .bcal-dateblock .d,
.buzz-events-wrap .bcal-dateblock .m,
.buzz-events-wrap .bcal-dateblock .wd { line-height: 1; }

/* Long values (facebook URLs, full addresses) wrap instead of overflowing.
   List-card meta rows (Time + Location + Website/Map, built by locListHTML())
   share markup with the popup but were missing this same treatment — a long
   address or event URL had no spaces to break on, so it just ran off the
   right edge of a narrow card instead of wrapping onto a new line. */
.buzz-events-wrap .bcal-modal-fact-value,
.buzz-events-wrap .bcal-modal-fact-value a,
.buzz-events-wrap .bcal-modal-fact-value div { overflow-wrap: anywhere; word-break: break-word; }
.buzz-events-wrap .bcal-meta,
.buzz-events-wrap .bcal-meta > span,
.buzz-events-wrap .bcal-meta > div,
.buzz-events-wrap .bcal-loc,
.buzz-events-wrap .bcal-loc-link {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────
   Month loading state

   Navigating months refetches from the REST endpoint. Without a busy
   state the new month renders against no data and flashes the empty
   message for as long as the request takes. Instead: the month grid
   dims behind a spinner, and the list view swaps in placeholder cards
   the same shape as the real ones so nothing jumps when they arrive.
   ───────────────────────────────────────────────────────────── */

.buzz-events-wrap #bcal-month-view { position: relative; }

.buzz-events-wrap .bcal-card.is-loading .bcal-grid-scroll,
.buzz-events-wrap .bcal-card.is-loading .bcal-mini {
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.buzz-events-wrap .bcal-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* Only the month view gets a spinner: the list view swaps in placeholder
   cards, and an overlay on top of those would just obscure them. The script
   stamps the current view on the card so this needs no :has() support. */
.buzz-events-wrap .bcal-card.is-loading[data-view="month"] .bcal-loader { display: flex; }

.buzz-events-wrap .bcal-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #d8dde3);
  border-top-color: var(--buzz-primary, var(--color-buzz-blue, #3f6f9e));
  animation: bcal-spin 700ms linear infinite;
}

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

/* Placeholder cards -------------------------------------------------- */

.buzz-events-wrap .bcal-evcard--skeleton {
  cursor: default;
  pointer-events: none;
}

/* The real card's date block is a solid brand-coloured tile. Left as-is it
   dominates a row of otherwise pale placeholders, so it flattens to neutral
   while loading. */
.buzz-events-wrap .bcal-evcard--skeleton .bcal-dateblock {
  background: var(--color-hover-bg, #eef1f4);
  border-color: transparent;
  box-shadow: none;
}

.buzz-events-wrap .bcal-evcard--skeleton .bcal-dateblock .bcal-skel {
  background-color: rgba(15, 30, 50, 0.09);
}

.buzz-events-wrap .bcal-skel {
  display: block;
  border-radius: 4px;
  background: var(--color-hover-bg, #eef1f4);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: bcal-shimmer 1.3s ease-in-out infinite;
}

.buzz-events-wrap .bcal-skel--xs    { width: 22px; height: 8px;  margin: 2px auto; }
.buzz-events-wrap .bcal-skel--md    { width: 26px; height: 18px; margin: 2px auto; }
.buzz-events-wrap .bcal-skel--chip  { width: 84px; height: 20px; border-radius: 999px; }
.buzz-events-wrap .bcal-skel--title { width: 62%;  height: 16px; margin: 10px 0 8px; }
.buzz-events-wrap .bcal-skel--line  { width: 45%;  height: 11px; margin: 6px 0; }
.buzz-events-wrap .bcal-skel--short { width: 30%; }

@keyframes bcal-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Screen-reader-only live region ------------------------------------- */

.buzz-events-wrap .bcal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .buzz-events-wrap .bcal-spinner,
  .buzz-events-wrap .bcal-skel { animation: none; }
  .buzz-events-wrap .bcal-card.is-loading #bcal-month-view,
  .buzz-events-wrap .bcal-card.is-loading .bcal-mini { transition: none; }
}