/* ─────────────────────────────────────────────────────────────────────────
 * yet-another-react-lightbox — Evara theme bridge
 *
 * yarl ships its own self-contained styles under the `.yarl__*` namespace.
 * This file overrides only the visual surfaces that should pick up the host
 * site's token system so a lightbox opened on a tenant's site reads as part
 * of that brand instead of the library default.
 *
 * Loaded once, globally — the lightbox modal is a portal so a single sheet
 * covers every page.
 *
 * Var-fallback contract (per memory: renderer_css_hardcoded_white_audit_2026_
 * 04_20): NEVER use `var(--site-X, <literal-color>)` — hardcoded fallbacks
 * blow out on dark/custom themes. Instead, provide a single defaults block
 * at the top so undefined vars resolve to the platform default; theme sets
 * the var and wins via the cascade.
 *
 * NEVER add backticks to any CSS comment in this file (project-wide rule).
 * See `inlineCssBacktickGuard` test.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Lightbox token defaults — a tenant theme can override any of these via
 *    its --site-* token block. Without this, vars would resolve to `unset`. */
:root {
  --site-lightbox-backdrop: rgba(0, 0, 0, 0.92);
  --site-lightbox-blur: 8px;
  --site-lightbox-text: rgba(255, 255, 255, 1);
  --site-lightbox-icon: rgba(255, 255, 255, 1);
  --site-lightbox-caption: rgba(255, 255, 255, 0.78);
  --site-lightbox-thumbs-bg: rgba(0, 0, 0, 0.4);
  --site-lightbox-thumbs-border: rgba(255, 255, 255, 0.08);
  --site-lightbox-nav-bg: rgba(0, 0, 0, 0.32);
}

.yarl__container {
  background: var(--site-lightbox-backdrop);
  backdrop-filter: blur(var(--site-lightbox-blur));
  -webkit-backdrop-filter: blur(var(--site-lightbox-blur));
  font-family: var(--site-font-body);
  color: var(--site-lightbox-text);
}

.yarl__icon {
  color: var(--site-lightbox-icon);
}

.yarl__button:focus-visible,
.yarl__navigation_prev:focus-visible,
.yarl__navigation_next:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 3px;
}

.yarl__button:hover {
  color: var(--site-accent);
}

.yarl__counter {
  color: var(--site-lightbox-text);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.yarl__slide_title {
  font-family: var(--site-font-heading, var(--site-font-body));
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: -0.005em;
  color: var(--site-lightbox-text);
}

.yarl__slide_description {
  font-family: var(--site-font-body);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.5;
  color: var(--site-lightbox-caption);
}

.yarl__thumbnails_container {
  background: var(--site-lightbox-thumbs-bg);
  border-top: 1px solid var(--site-lightbox-thumbs-border);
}

.yarl__thumbnails_thumbnail {
  border-radius: var(--site-radius-sm);
  border-color: transparent;
  opacity: 0.55;
  transition: opacity 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.yarl__thumbnails_thumbnail_active,
.yarl__thumbnails_thumbnail:hover {
  border-color: var(--site-accent);
  opacity: 1;
}

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

.yarl__navigation_prev,
.yarl__navigation_next {
  background: var(--site-lightbox-nav-bg);
  border-radius: var(--site-radius-md);
  width: 48px;
  height: 48px;
  transition: background 0.16s ease, transform 0.16s ease;
}

.yarl__navigation_prev:hover,
.yarl__navigation_next:hover {
  background: var(--site-accent);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .yarl__container,
  .yarl__navigation_prev,
  .yarl__navigation_next,
  .yarl__thumbnails_thumbnail {
    transition: none !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * react-photo-album — Evara theme bridge
 * ───────────────────────────────────────────────────────────────────────── */

.evara-rpa {
  width: 100%;
}

.evara-rpa__tile {
  cursor: zoom-in;
  border-radius: var(--site-radius-md);
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  box-shadow: var(--cs-media-shadow);
  background: var(--cs-media-bg);
}

.evara-rpa__tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--cs-media-shadow-hover);
}

.evara-rpa__tile:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .evara-rpa__tile {
    transition: none !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * medium-zoom — Evara theme bridge
 * ───────────────────────────────────────────────────────────────────────── */

.medium-zoom-overlay {
  background: var(--site-lightbox-backdrop) !important;
}

.medium-zoom-image {
  cursor: zoom-in;
}

.medium-zoom-image--opened {
  cursor: zoom-out;
}