/*
 * The design system's lightbox (assets/js/vendor/design-system/lightbox) in raiken.io's look, for
 * product images on the plugin pages. Host styling only, through the viewer's public --lightbox-*
 * tokens plus a few host rules where it has no token; the vendored component stays unchanged. Its
 * stylesheet sits in @layer ds.components, so these unlayered rules win without !important.
 * Loaded after assets/css/pages/article-lightbox.css by minimalPluginLightboxAssets().
 *
 * The look: the page's own ground as the scrim, the image in the rounded window frame the shots use
 * on the page, ink controls standing on a hard offset shadow in the product's colour (the site's ink
 * button language), and the pixel face for the counter. --lightbox-brand is the product's catalog
 * colour, set on :root by the same function; without it the accents fall back to ink.
 */
.lightbox-overlay {
  --lightbox-scrim: color-mix(in oklab, var(--color-bg) 94%, transparent);
  --lightbox-surface: var(--color-surface);
  --lightbox-on-surface: var(--color-text-primary);
  --lightbox-muted: var(--color-text-secondary);
  --lightbox-hover: var(--color-surface-alt);
  --lightbox-on-scrim: var(--color-text-primary);
  --lightbox-on-scrim-soft: var(--color-text-secondary);
  --lightbox-on-scrim-faint: color-mix(in oklab, var(--color-text-primary) 35%, transparent);
  --lightbox-tile-bg: var(--color-surface-alt);
  --lightbox-accent: var(--lightbox-brand, var(--color-text-primary));
  --lightbox-on-accent: var(--color-bg);
  --lightbox-ring: var(--lightbox-brand, var(--color-text-primary));
  --lightbox-focus: var(--color-text-primary);
  --lightbox-scrollbar: var(--color-border);
  --lightbox-radius: 14px;
  font-family: var(--font-secondary);
}

/* The image: the same rounded frame and layered shadow as the shots on the page. */
.lightbox-overlay .lightbox-image {
  border-radius: 14px;
  outline: 1px solid color-mix(in oklab, var(--color-text-primary) 8%, transparent);
  outline-offset: -1px;
  filter:
    drop-shadow(0 3px 4px rgba(51 72 103 / 0.10))
    drop-shadow(0 14px 26px rgba(51 72 103 / 0.15))
    drop-shadow(0 34px 60px rgba(51 72 103 / 0.10));
}

/* Caption bar: a light card with a hairline; the counter in the pixel face. */
.lightbox-overlay .lightbox-bar {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(51 72 103 / 0.10);
}
.lightbox-overlay .lightbox-caption { font-weight: 500; }
.lightbox-overlay .lightbox-counter {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Controls: square ink buttons on a hard offset shadow in the product's colour. */
.lightbox-overlay :is(.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-back) {
  border: 0;
  border-radius: 0;
  background: var(--color-text-primary);
  color: var(--color-bg);
  box-shadow: 3px 3px 0 var(--lightbox-brand, var(--color-border-strong));
}
.lightbox-overlay .lightbox-back {
  font: 400 0.75rem/1 var(--font-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lightbox-overlay :is(.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-back):focus-visible {
  outline: 3px solid var(--color-text-primary);
  outline-offset: 3px;
}
.lightbox-overlay .lightbox-thumb { border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox-overlay :is(.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-back) {
    transition: translate 120ms ease-out, box-shadow 120ms ease-out;
  }
  .lightbox-overlay :is(.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-back):hover {
    translate: -1px -1px;
    box-shadow: 4px 4px 0 var(--lightbox-brand, var(--color-border-strong));
  }
}