/* er-misc.css — embed, html-embed, lottie, before-after, audio-player, event-list, menu, animation-wrapper, social-feed */
/* ── HTML Embed ───────────────────────────────────────────── */
.el-html-embed { width: 100%; overflow: hidden; }
.el-html-embed__frame { width: 100%; border: none; display: block; min-height: 100px; }

/* ── Before/After Image Slider ───────────────────────────────── */
.el-before-after { position: relative; overflow: hidden; user-select: none; touch-action: none; line-height: 0; }
.el-before-after--empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; border: 2px dashed var(--site-border, transparent);
  border-radius: 12px; background: var(--site-surface-alt, transparent); line-height: normal;
}
.el-before-after__empty-label { color: var(--site-text-muted, currentColor); font-size: 14px; margin: 0; }
.el-before-after__image { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.el-before-after__image--after { position: absolute; inset: 0; }
.el-before-after__handle--horizontal {
  position: absolute; width: 4px; transform: translateX(-50%);
  background: var(--site-surface); cursor: ew-resize; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.el-before-after__handle--vertical {
  position: absolute; height: 4px; transform: translateY(-50%);
  background: var(--site-surface); cursor: ns-resize; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.el-before-after__grip {
  width: 32px; height: 32px; border-radius: 50%; background: var(--site-surface);
  border: 2px solid rgba(0,0,0,0.15); box-shadow: 0 2px 8px rgba(0,0,0,0.2); flex-shrink: 0;
}
.el-before-after__badge {
  position: absolute; bottom: 12px; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px;
  z-index: 1; pointer-events: none; line-height: normal;
}
.el-before-after__badge--before { left: 12px; }
.el-before-after__badge--after { right: 12px; }

/* ── Social Feed Embed ───────────────────────────────────── */
.el-social-feed { width: 100%; position: relative; }
.el-social-feed--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; color: var(--site-text-muted);
  border: 2px dashed var(--site-border, transparent);
  border-radius: var(--site-radius, 8px); background: var(--site-surface-alt);
}
.el-social-feed__empty-label { margin: 0; font-size: 14px; font-weight: 500; }
.el-social-feed__header { margin-bottom: 8px; }
.el-social-feed__platform-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--site-text-muted); }
.el-social-feed__embed { width: 100%; }
/* Non-card media aspect contract — 4/3 fallback for legacy social-feed
   iframe wrappers. Override per-instance via --social-feed-iframe-aspect. */
.el-social-feed__iframe-wrap { position: relative; width: 100%; aspect-ratio: var(--social-feed-iframe-aspect, var(--site-media-aspect-landscape, 4 / 3)); overflow: hidden; }
.el-social-feed__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ── Generic Embed (iframe) ──────────────────────────────── */
.el--embed,
.el-embed {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.el-embed { width: 100%; position: relative; }
.el-embed--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; color: var(--site-text-muted);
  border: 2px dashed var(--site-border, transparent);
  border-radius: var(--site-radius, 8px); background: var(--site-surface-alt);
}
.el-embed__empty-label { margin: 0; font-size: 14px; font-weight: 500; }
.el-embed__responsive { position: relative; width: 100%; height: 0; overflow: hidden; }
.el-embed__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.el-embed__iframe--auto { position: relative; width: 100%; border: none; }

/* ── Animation Wrapper ───────────────────────────────────────── */
/* Animation uses CSS custom properties for dynamic values */
/* Animate.css wrapper — no custom overrides, Animate.css controls everything */
.el-animate {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Countdown uses CSS custom properties for user colors */
.el-countdown { color: var(--el-countdown-color, inherit); }
.el-countdown__value { color: var(--el-countdown-accent, inherit); }
.el-countdown--cards .el-countdown__unit { border-color: var(--el-countdown-accent, transparent); }

/* Before/After uses CSS custom properties for dynamic values */
.el-before-after { border-radius: var(--el-ba-radius, 0); box-shadow: var(--el-ba-shadow, none); overflow: hidden; }
.el-before-after__image--after { clip-path: inset(0 0 0 var(--el-ba-position, 50%)); }
.el-before-after--vertical .el-before-after__image--after { clip-path: inset(var(--el-ba-position, 50%) 0 0 0); }
.el-before-after__handle--horizontal { left: var(--el-ba-position, 50%); top: 0; height: 100%; }
.el-before-after__handle--vertical { top: var(--el-ba-position, 50%); left: 0; width: 100%; }

/* Weather uses CSS custom properties for border-radius/shadow */
.el-weather { border-radius: var(--el-weather-radius, 0); box-shadow: var(--el-weather-shadow, none); }

.el-empty-state {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 24px;
  background: var(--empty-state-bg, transparent);
  color: var(--empty-state-text, inherit);
  border: 1px solid var(--empty-state-border, transparent);
  border-radius: var(--empty-state-radius, 12px);
  box-shadow: var(--empty-state-shadow, none);
}
.el-empty-state--left { justify-items: start; text-align: left; }
.el-empty-state--right { justify-items: end; text-align: right; }
.el-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--empty-state-text, currentColor) 10%, transparent);
}
.el-empty-state__heading {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
}
.el-empty-state__description {
  margin: 0;
  color: var(--empty-state-muted, color-mix(in srgb, var(--empty-state-text, currentColor) 72%, transparent));
  max-width: min(540px, 100%);
  overflow-wrap: break-word;
}
.el-empty-state__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--site-primary);
  color: var(--site-primary-fg);
}

/* Form wizard progress bar uses CSS custom property for width */
.el-form-wizard__progress-bar-fill { width: var(--wizard-progress, 0%); }

/* ── Audio Player ────────────────────────────────────────────── */
.el-audio-player { width: 100%; }
.el-audio-player--card { background: var(--site-bg, transparent); border: 1px solid var(--site-border); border-radius: 12px; --el-padding-default: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.el-audio-player--minimal { --el-padding-default: 8px 0; }
.el-audio-player__info { margin-bottom: 12px; }
.el-audio-player__title { font-size: 16px; font-weight: 600; margin: 0; }
.el-audio-player__artist { font-size: 13px; color: var(--site-text-muted); margin: 2px 0 0; }
.el-audio-player__controls { display: flex; align-items: center; gap: 12px; }
.el-audio-player__btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--site-primary); color: #fff; cursor: pointer;
  transition: background 0.15s; flex-shrink: 0;
}
.el-audio-player__btn:hover { opacity: 0.9; }
.el-audio-player--minimal .el-audio-player__btn { width: 32px; height: 32px; }
.el-audio-player__progress { flex: 1; position: relative; height: 6px; background: var(--site-border); border-radius: 3px; cursor: pointer; }
.el-audio-player__progress-fill { height: 100%; background: var(--site-primary); border-radius: 3px; transition: width 0.1s; }
.el-audio-player__time { font-size: 12px; color: var(--site-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.el-audio-player--empty { display: flex; align-items: center; justify-content: center; min-height: 80px; color: var(--site-text-muted); font-size: 14px; border: 2px dashed var(--site-border, transparent); border-radius: 12px; }

/* ── Event List ──────────────────────────────────────────────── */
.el-event-list { width: 100%; }
.el-event-list__heading { font-size: 24px; font-weight: 700; margin: 0 0 24px; color: var(--evl-heading, inherit); }
.el-event-list__list { display: flex; flex-direction: column; gap: 20px; }
.el-event-list__grid { display: flex; flex-direction: column; gap: 20px; }
.el-event-list--cards .el-event-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.el-event-list__cards { display: grid; gap: 20px; }
/* High-specificity bridge — `.el > :not(style)` (0,1,1) beats
   `.el-event-list__event` (0,1,0) and zeros hardcoded padding. */
.el.el--event-card > .el-event-list__event { padding: 16px 0; }
.el-event-list__event { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--site-border); }
.el-event-list__event:last-child { border-bottom: none; }
.el-event-list--cards .el-event-list__event {
  background: var(--site-bg, transparent); border: 1px solid var(--site-border); border-radius: 12px; padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.el-event-list__date-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; height: 56px; background: var(--site-primary); color: var(--evl-date, var(--site-text));
  border-radius: 10px; flex-shrink: 0;
}
.el-event-list__date-day { font-size: 20px; font-weight: 700; line-height: 1; }
.el-event-list__date-month { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.el-event-list__content { flex: 1; }
.el-event-list__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--evl-title, inherit); }
.el-event-list__venue { font-size: 13px; color: var(--evl-venue, var(--site-text-muted)); margin: 0 0 6px; }
.el-event-list__desc { font-size: 14px; color: var(--evl-desc, var(--site-text)); line-height: 1.5; margin: 0 0 8px; }
.el-event-list__cta { font-size: 14px; font-weight: 600; color: var(--evl-cta, var(--site-primary)); text-decoration: none; }
.el-event-list__cta:hover { text-decoration: underline; }
.el-event-list--empty { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--site-text-muted); font-size: 14px; }

/* ── Menu / Price List (Stage 9B compound) ───────────────────── */
/*
 * The parent `menu-price-list` renders via CompoundSectionRenderer and
 * stamps `--menu-*` CSS vars on the section frame. Each `menu-section`
 * child renders the category rail; each `menu-item` child renders a row.
 * Variant-driven visual treatments read `[style*="--menu-variant"]`
 * attribute-selector-style via the inline style var.
 */
.el-menu { width: 100%; }
.el-menu__heading { font-size: 24px; font-weight: 700; margin: 0 0 24px; color: var(--menu-heading, var(--site-foreground, inherit)); }
.el-menu__category {
  margin-bottom: 32px;
  border-radius: var(--menu-section-border-radius, 0);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.el-menu__category:last-child { margin-bottom: 0; }
.el-menu__category-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--menu-category-name, var(--site-foreground, inherit));
}
.el-menu__category-name > :is(h1, h2, h3, h4, h5, h6, p, div) {
  font-size: inherit; font-weight: inherit; margin: 0; color: inherit;
}
.el-menu__category-desc { font-size: 14px; color: var(--site-text-muted); margin: 0 0 16px; }
.el-menu__items { display: flex; flex-direction: column; }

.el-menu__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--site-border);
}
.el-menu__item:last-child { border-bottom: none; }
.el-menu__item-info { flex: 1; min-width: 0; }
.el-menu__item-row { display: flex; align-items: baseline; gap: 8px; }
.el-menu__item-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--menu-item-title, var(--site-foreground, inherit));
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.el-menu__item-desc {
  font-size: 13px;
  color: var(--menu-item-desc, var(--site-text-muted));
  margin: 2px 0 0;
  overflow-wrap: break-word;
}
.el-menu__item-price {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--menu-price, var(--site-accent, inherit));
}
/*
 * Currency prefix injection — authors set `currencyPrefix` on the parent;
 * the renderer emits `--menu-currency-prefix` and per-item
 * `data-menu-price-has-symbol="false"` when the authored price doesn't
 * already carry a recognised symbol/code. Only then does the ::before
 * pseudo insert the prefix. Safe against XSS — the renderer wraps the
 * prefix in quotes and escapes embedded quotes.
 */
.el-menu__item-price[data-menu-price-has-symbol='false']::before {
  content: var(--menu-currency-prefix, '');
}
.el-menu__item-image { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

/* Dotted leader (default) — a flex spacer with a repeating dot background. */
.el-menu__item-dots {
  flex: 1;
  border-bottom: 1px dotted var(--site-border, currentColor);
  transform: translateY(-4px);
  opacity: 0.5;
  min-width: 12px;
}

/* Price alignment variants — projected onto `--menu-price-align`. */
[style*='--menu-price-align:inline'] .el-menu__item-dots,
[style*="--menu-price-align: inline"] .el-menu__item-dots {
  display: none;
}
[style*='--menu-price-align:right'] .el-menu__item-dots,
[style*="--menu-price-align: right"] .el-menu__item-dots {
  display: none;
}
[style*='--menu-price-align:right'] .el-menu__item-price,
[style*="--menu-price-align: right"] .el-menu__item-price {
  margin-left: auto;
}

/* Variant: cards — each category rail gets a surface + hover treatment. */
[style*='--menu-variant:cards'] .el-menu__category,
[style*="--menu-variant: cards"] .el-menu__category {
  background: var(--menu-section-bg, var(--site-bg, transparent));
  border: 1px solid var(--site-border);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[style*='--menu-variant:cards'] .el-menu__category:hover,
[style*="--menu-variant: cards"] .el-menu__category:hover {
  transform: translateY(calc(-1 * var(--menu-section-hover-lift, 0px)));
  background: var(--menu-section-hover-bg, var(--menu-section-bg, var(--site-bg, transparent)));
  border-color: var(--menu-section-hover-border-color, var(--site-border));
  box-shadow: var(--menu-section-hover-shadow, 0 4px 12px rgba(0,0,0,0.08));
}
[style*='--menu-variant:cards'] .el-menu__item,
[style*="--menu-variant: cards"] .el-menu__item {
  border-bottom-color: transparent;
  padding: 8px 0;
}

/* Variant: elegant — serif headings, italic descriptions. */
[style*='--menu-variant:elegant'] .el-menu__category-name,
[style*="--menu-variant: elegant"] .el-menu__category-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 24px;
}
[style*='--menu-variant:elegant'] .el-menu__item-desc,
[style*="--menu-variant: elegant"] .el-menu__item-desc {
  font-style: italic;
}

.el-menu--empty { display: flex; align-items: center; justify-content: center; min-height: 120px; color: var(--site-text-muted); font-size: 14px; }

/* ── Tooltip ─────────────────────────────────────────────────── */
.el-tooltip {
  position: relative;
  display: inline-block;
}
.el-tooltip__trigger { display: inline-block; }
.el-tooltip__placeholder {
  display: inline-block;
  padding: 4px 8px;
  border: 1px dashed var(--site-border, transparent);
  color: var(--site-text-muted);
  font-size: 12px;
  border-radius: 4px;
}
.el-tooltip__bubble {
  position: absolute;
  z-index: 1000;
  padding: var(--tooltip-bubble-padding, 8px) calc(var(--tooltip-bubble-padding, 8px) * 1.25);
  background: var(--tooltip-bubble-bg, transparent);
  color: var(--tooltip-bubble-color, var(--site-text));
  border-radius: var(--tooltip-bubble-radius, 6px);
  max-width: var(--tooltip-bubble-max-width, 240px);
  font-size: var(--tooltip-bubble-font-size, 13px);
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  animation: el-tooltip-fade var(--tooltip-fade-duration, 180ms) ease-out;
}
.el-tooltip__bubble::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: var(--tooltip-arrow-size, 6px) solid transparent;
}
.el-tooltip__bubble--top {
  bottom: calc(100% + var(--tooltip-trigger-offset, 8px));
  left: 50%;
  transform: translateX(-50%);
}
.el-tooltip__bubble--top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--tooltip-bubble-bg, transparent);
  border-bottom: 0;
}
.el-tooltip__bubble--bottom {
  top: calc(100% + var(--tooltip-trigger-offset, 8px));
  left: 50%;
  transform: translateX(-50%);
}
.el-tooltip__bubble--bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--tooltip-bubble-bg, transparent);
  border-top: 0;
}
.el-tooltip__bubble--left {
  right: calc(100% + var(--tooltip-trigger-offset, 8px));
  top: 50%;
  transform: translateY(-50%);
}
.el-tooltip__bubble--left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--tooltip-bubble-bg, transparent);
  border-right: 0;
}
.el-tooltip__bubble--right {
  left: calc(100% + var(--tooltip-trigger-offset, 8px));
  top: 50%;
  transform: translateY(-50%);
}
.el-tooltip__bubble--right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--tooltip-bubble-bg, transparent);
  border-left: 0;
}
@keyframes el-tooltip-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Banner Bar ──────────────────────────────────────────────── */
.el-banner-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  --el-padding-default: var(--banner-bar-padding, 12px) calc(var(--banner-bar-padding, 12px) * 1.5);
  font-size: var(--banner-bar-font-size, 14px);
  /* Gradient layer wins when --banner-bar-bg-gradient is set; otherwise fall
     back to solid --banner-bar-bg. */
  background: var(--banner-bar-bg-gradient, var(--banner-bar-bg, var(--site-primary)));
  color: var(--banner-bar-color, var(--site-primary-fg));
  z-index: var(--banner-bar-z-index, auto);
  border-radius: var(--banner-bar-radius, 0px);
  box-shadow: var(--banner-bar-shadow, none);
}
.el-banner-bar--brand { background: var(--banner-bar-bg-gradient, var(--banner-bar-bg, var(--site-primary))); color: var(--banner-bar-color, var(--site-primary-fg)); }
.el-banner-bar--dark { background: var(--banner-bar-bg-gradient, var(--banner-bar-bg, transparent)); color: var(--banner-bar-color, currentColor); }
.el-banner-bar--warning { background: var(--banner-bar-bg-gradient, var(--banner-bar-bg, transparent)); color: var(--banner-bar-color, currentColor); }
.el-banner-bar--info { background: var(--banner-bar-bg-gradient, var(--banner-bar-bg, transparent)); color: var(--banner-bar-color, currentColor); }
.el-banner-bar__message { flex: 1; }
.el-banner-bar__cta {
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255,255,255,0.2);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.15s ease;
}
.el-banner-bar__cta:hover {
  background: var(--btn-hover-bg, transparent);
  color: var(--btn-hover-color, inherit);
  border-color: var(--btn-hover-border, transparent);
}
.el-banner-bar__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--banner-bar-dismiss-size, 16px);
  height: var(--banner-bar-dismiss-size, 16px);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--banner-bar-dismiss-color, currentColor);
  font-size: calc(var(--banner-bar-dismiss-size, 16px) * 1.2);
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.el-banner-bar__dismiss:hover { opacity: 1; }

/* Position mode modifiers — CSS can't var() a `position:` value */
.el-banner-bar--position-static { position: static; }
.el-banner-bar--position-sticky { position: sticky; top: 0; z-index: var(--banner-bar-z-index, 50); }
.el-banner-bar--position-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--banner-bar-z-index, 50);
}
.el-banner-bar--position-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--banner-bar-z-index, 50);
}

/* ── Lottie Animation ─────────────────────────────────────── */
.el-lottie-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.el-lottie-animation__player { display: block; max-width: 100%; }
.el-lottie-animation__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--site-surface-alt);
  border-radius: var(--site-radius, 0.5rem);
  color: var(--site-text-muted);
  font-size: 0.875rem;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Wave 7 — :focus-visible styling for interactive elements (a11y audit §D)
   Each rule scopes to the element root so it covers any focusable child
   (button, anchor, input). Uses the site accent token so themes carry through.
   ─────────────────────────────────────────────────────────────────────────── */
.el-modal :focus-visible,
.el-banner-bar :focus-visible,
.el-tooltip :focus-visible,
.el-cookie-consent :focus-visible,
.el-back-to-top:focus-visible,
.el-back-to-top :focus-visible,
.el-support-ticket-button:focus-visible,
.el-support-ticket-button :focus-visible,
.el-login-form :focus-visible,
.el-register-form :focus-visible,
.el-social-share :focus-visible,
.el-live-chat-button:focus-visible,
.el-live-chat-button :focus-visible,
.el-sidebar-nav :focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────
   Stage 8C — event-list compound-widget migration.

   Event-list is now a thin shell that delegates to
   `CompoundSectionRenderer` (`layout='grid'`). The event-card children
   still emit the legacy `.el-event-list__event` DOM + namespace, but the
   outer wrapper is now `.el-compound-section` — so the variant-driven
   layout / card-chrome rules previously hung off `.el-event-list--{list,
   cards, timeline}` must be re-anchored via the `--evl-variant`
   attribute-selector idiom (same pattern used by Stage 7A stats / timeline
   / animated-counter).

   Only `cards` variant elevates events as cards; `list` and `timeline` keep
   the inline row layout. Hover chrome (`--event-card-hover-*`) only paints
   visibly on `cards` — list/timeline still cascade the vars but the CSS
   below scopes the `:hover` visual to the cards variant.
   ───────────────────────────────────────────────────────────── */

/* Cards variant — elevated card background + grid. */
.el-compound-section[style*="--evl-variant: cards"] .el-compound-section__cards,
.el-compound-section[style*="--evl-variant:cards"] .el-compound-section__cards {
  display: grid;
  grid-template-columns: repeat(var(--cs-grid-columns, 2), minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.el-compound-section[style*="--evl-variant: cards"] .el-event-list__event,
.el-compound-section[style*="--evl-variant:cards"] .el-event-list__event {
  background: var(--site-bg, transparent);
  border: 1px solid var(--site-border);
  border-radius: var(--event-card-border-radius, 12px);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--site-border);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}
.el-compound-section[style*="--evl-variant: cards"] .el-event-list__event:hover,
.el-compound-section[style*="--evl-variant:cards"] .el-event-list__event:hover {
  background: var(--event-card-hover-bg, var(--site-bg, transparent));
  color: var(--event-card-hover-color, inherit);
  border-color: var(--event-card-hover-border-color, var(--site-border));
  transform: translateY(calc(-1 * var(--event-card-hover-lift, 0px)));
  box-shadow: var(--event-card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* List / timeline variants — inline stacked rows, unchanged legacy look. */
.el-compound-section[style*="--evl-variant: list"] .el-compound-section__cards,
.el-compound-section[style*="--evl-variant:list"] .el-compound-section__cards,
.el-compound-section[style*="--evl-variant: timeline"] .el-compound-section__cards,
.el-compound-section[style*="--evl-variant:timeline"] .el-compound-section__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* CTA slot — reuse the existing inline-link look so migrated buttons still
   render as text CTAs regardless of the button element's default chrome.
   Authors who want an elevated button can override per-event via the
   primary-cta child's inspector (button variant/background/etc.). */
.el-event-list__cta-slot {
  display: block;
  margin-top: 8px;
}
.el-event-list__cta-slot a,
.el-event-list__cta-slot button {
  font-size: 14px;
  font-weight: 600;
  color: var(--evl-cta, var(--site-primary));
}

/* ─────────────────────────────────────────────────────────────
   Stage 8C — progress-bar compound-widget migration.

   Progress-bar thin shell wraps steps in `.el-compound-section__cards`
   (a single-column grid). Each progress-step child emits the legacy
   `.el-progress-bar__item` DOM, so the existing item-level rules in
   er-interactive.css still apply. The shim below restores the small
   vertical gap between steps (previously handled by
   `.el-progress-bar__item { margin-bottom: 1rem; }`) under the new
   compound-section wrapper without touching the legacy rule.
   ───────────────────────────────────────────────────────────── */
.el-compound-section[style*="--progress-bar-variant"] .el-compound-section__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.el-compound-section[style*="--progress-bar-variant"] .el-progress-bar__item {
  /* Gap above supplies spacing; drop the legacy margin-bottom so the final
     item doesn't add a trailing gap. */
  margin-bottom: 0;
}

/* ===========================================================
   Universal widget-heading margin reset (must stay at the END of
   the last-loaded stylesheet — er-misc.css is loaded last, see
   src/lib/elementCssCategories.ts).

   WHY: every widget previously shipped its own heading/subheading/
   eyebrow/title/header/subtitle margin in its own CSS block. Those
   margins live outside the element's bounding box and leak vertical
   space into the hosting widget's rhythm — the same class of bug we
   fixed on `.el-heading` globally. This block zeroes every widget-
   scoped *__heading / *__subheading / *__eyebrow / *__title /
   *__header / *__subtitle margin so every widget starts tight by
   default (matching the global baseline). Individual widgets that
   need specific spacing can re-declare AFTER this block or via the
   design panel's margin/padding controls (inline style — always wins).

   CASCADE CONTRACT: attribute selectors have (0,1,0) specificity —
   the same as a single-class selector. This block wins over every
   widget's in-file single-class rule because it is the LAST one
   declared in the last-loaded stylesheet. Design-panel inline styles
   (`style="margin-bottom: Xpx"`) always beat CSS rules and continue
   to work. To give a specific widget a custom heading rhythm, declare
   its rule AFTER this block, or bump specificity (e.g.
   `.el-<widget> .el-<widget>__heading { margin-bottom: 2rem }`).
   =========================================================== */
[class*="__heading"],
[class*="__subheading"],
[class*="__eyebrow"],
[class*="__title"],
[class*="__header"],
[class*="__subtitle"] {
  margin: 0;
}


/* ── FAQ shell — resting elevation ────────────────────────────
   Subtle one-tier elevation on the accordion shell so the FAQ
   reads as a coherent panel without competing with item-level
   hover affordance on each disclosure item. Routes through
   --site-* tokens for tenant override; defaults to a no-op
   transparent layer when the var is unset. The full FAQ
   structural rules live in er-interactive.css. */
.el-faq {
  box-shadow: var(--faq-frame-shadow, 0 0 transparent);
}

/* ── Featured Reviews — public testimonial wall ──────────────
   Migrated from src/components/marketing/FeaturedReviews.tsx.
   All visual properties drive off --el-fr-* CSS vars set inline by
   FeaturedReviewsRenderer (which resolves theme tokens via
   resolveTokenValue). Defaults below provide a graceful baseline
   when a var is unset (lighter sites get a sane look without
   the renderer needing to set every var). */
.el-featured-reviews {
  --el-padding-default: 5rem 1.5rem;
  color: var(--el-fr-body, var(--site-foreground, inherit));
}
.el-featured-reviews__inner {
  margin: 0 auto;
  max-width: 1200px;
}
.el-featured-reviews__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.el-featured-reviews__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--el-fr-accent, var(--site-accent, currentColor));
  background: color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 18%, transparent);
  padding: 4px 14px;
  border-radius: 999px;
}
.el-featured-reviews__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--el-fr-heading, var(--site-foreground, inherit));
  margin-top: 1.25rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.el-featured-reviews__sub {
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--el-fr-body, var(--site-foreground, currentColor)) 65%, transparent);
  margin-top: 0.75rem;
  overflow-wrap: break-word;
}
.el-featured-reviews__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@container site style(--site-bp: tablet) or style(--site-bp: desktop) {
  .el-featured-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .el-featured-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container site style(--site-bp: desktop) {
  .el-featured-reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .el-featured-reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Shell wrapper: stable grid cell whose hit-box does not move on hover.
   The :hover lift transform is anchored here so the inner card translating
   never causes the cursor to fall off the shell — preventing the
   "hover-lift shake" loop documented in src/lib/elements/cardHoverVars.ts. */
.el-featured-reviews__card-shell {
  display: flex;
}
.el-featured-reviews__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: 20px;
  background: var(--el-fr-card-bg, var(--site-surface, transparent));
  border: 1px solid var(--el-fr-card-border, var(--site-border, transparent));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
[data-card-shell].el-featured-reviews__card-shell:hover .el-featured-reviews__card {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--el-fr-accent, var(--site-accent, currentColor)) 30%, var(--el-fr-card-border, var(--site-border, transparent)));
}
.el-featured-reviews__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--el-fr-accent, var(--site-accent, currentColor));
}
.el-featured-reviews__star {
  width: 16px;
  height: 16px;
}
.el-featured-reviews__quote {
  font-size: 16px;
  line-height: 1.65;
  flex: 1;
  color: var(--el-fr-body, var(--site-foreground, inherit));
  overflow-wrap: break-word;
}
.el-featured-reviews__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--el-fr-card-border, var(--site-border, transparent)) 100%, transparent);
}
.el-featured-reviews__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.el-featured-reviews__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  background: color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 24%, transparent);
  color: var(--el-fr-accent, var(--site-accent, currentColor));
  object-fit: unset;
}
.el-featured-reviews__author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-fr-heading, var(--site-foreground, inherit));
}
.el-featured-reviews__author-title {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--el-fr-body, var(--site-foreground, currentColor)) 55%, transparent);
  margin-top: 2px;
}
.el-featured-reviews__footer {
  text-align: center;
  margin-top: 1.5rem;
}
.el-featured-reviews__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--el-fr-accent, var(--site-accent, currentColor));
  text-decoration: none;
  transition: color 0.2s ease;
}
.el-featured-reviews__share:hover {
  color: var(--el-fr-heading, var(--site-foreground, currentColor));
}

/* Empty-state CTA panel (only shown when emptyHidden=false) */
.el-featured-reviews--empty {
  padding: 2.5rem 1.5rem;
}
.el-featured-reviews__empty {
  margin: 0 auto;
  max-width: 1200px;
  border-radius: 26px;
  border: 1px solid var(--el-fr-card-border, var(--site-border, transparent));
  background: var(--el-fr-card-bg, var(--site-surface, transparent));
  backdrop-filter: blur(26px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 1.5rem;
}
@container site style(--site-bp: tablet) or style(--site-bp: desktop) {
  .el-featured-reviews__empty {
    padding: 1.75rem 2rem;
  }
}
@media (min-width: 768px) {
  .el-featured-reviews__empty {
    padding: 1.75rem 2rem;
  }
}
.el-featured-reviews__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: center;
}
/* was @media(min-width:640px); bucketed to mobile+tablet+desktop (640 < 768; effective no-op gate) */
@container site style(--site-bp: mobile) or style(--site-bp: tablet) or style(--site-bp: desktop) {
  .el-featured-reviews__empty-inner {
    flex-direction: row;
    text-align: left;
  }
}
@media (min-width: 640px) {
  .el-featured-reviews__empty-inner {
    flex-direction: row;
    text-align: left;
  }
}
.el-featured-reviews__empty-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--el-fr-accent, var(--site-accent, currentColor));
}
.el-featured-reviews__empty-text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--el-fr-body, var(--site-foreground, currentColor)) 68%, transparent);
}
.el-featured-reviews__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 28%, transparent);
  background: color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 10%, transparent);
  padding: 0.75rem 1.25rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--el-fr-accent, var(--site-accent, currentColor));
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.el-featured-reviews__empty-cta-shell {
  display: inline-flex;
}
/* Hover lift anchored on the shell wrapper (matches the button's hit-box
   exactly) so the cursor cannot fall off the lifted button — see the
   hover-lift-shake rationale in src/lib/elements/cardHoverVars.ts. */
[data-card-shell].el-featured-reviews__empty-cta-shell:hover .el-featured-reviews__empty-cta {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 45%, transparent);
  background: color-mix(in srgb, var(--el-fr-accent, var(--site-accent, transparent)) 16%, transparent);
}