/* Fancybox 6 uses the f-* primitives below. Keep the lightbox on the same
   design tokens as the rest of the site instead of falling back to its
   default dark theme. */
.fancybox__container {
  --fancybox-backdrop-bg: var(--card-bg-transparent);
  --fancybox-backdrop-filter: blur(18px) saturate(1.1);
  --fancybox-color: var(--deep-text);
  --f-toolbar-bg: var(--card-bg-transparent);
  --f-toolbar-color: var(--deep-text);
  --f-toolbar-padding: 0.5rem;
  --f-toolbar-gap: 0.35rem;
  --f-toolbar-shadow: var(--shadow-lg, 0 0.75rem 2rem rgba(0, 0, 0, 0.16));
  --f-toolbar-backdrop-filter: blur(12px) saturate(1.1);
  --f-counter-bg: transparent;
  --f-counter-color: var(--deep-text);
  --f-button-width: 2.75rem;
  --f-button-height: 2.75rem;
  --f-button-color: var(--btn-content);
  --f-button-bg: var(--btn-regular-bg);
  --f-button-hover-color: var(--btn-content);
  --f-button-hover-bg: var(--btn-regular-bg-hover);
  --f-button-active-bg: var(--btn-regular-bg-active);
  --f-button-border: 1px solid var(--line-divider);
  --f-button-border-radius: 999px;
  --f-button-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  --f-button-svg-filter: none;
  --f-arrow-bg: var(--btn-regular-bg);
  --f-arrow-hover-bg: var(--btn-regular-bg-hover);
  --f-arrow-active-bg: var(--btn-regular-bg-active);
  --f-arrow-color: var(--btn-content);
  --f-arrow-hover-color: var(--btn-content);
  --f-arrow-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  --f-thumbs-bg: var(--card-bg-transparent);
  --f-thumbs-padding-x: 0.75rem;
  --f-thumbs-padding-y: 0.75rem;
  --f-thumbs-gap: 0.5rem;
  --f-thumb-width: 4rem;
  --f-thumb-height: 4rem;
  --f-thumb-border-radius: 0.5rem;
  --f-thumb-bg: var(--btn-regular-bg);
  --f-thumb-hover-transform: scale(1.04);
  --f-thumb-hover-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 55%, transparent);
  --f-thumb-selected-shadow: 0 0 0 2px var(--primary);
  font-family: inherit;
}

.fancybox__backdrop {
  background: var(--fancybox-backdrop-bg);
  backdrop-filter: var(--fancybox-backdrop-filter);
}

.f-carousel__toolbar {
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  border: 1px solid var(--line-divider);
  border-radius: var(--radius-large, 1rem);
}

.f-carousel__toolbar__column {
  align-items: center;
}

.f-counter {
  color: var(--f-counter-color, var(--deep-text));
  font-weight: 600;
}

.f-button {
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.f-button:hover:not([aria-disabled]) {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--primary);
}

.f-button:active:not([aria-disabled]) {
  transform: scale(0.96);
}

.f-button.is-arrow {
  border: 1px solid var(--line-divider);
}

.fancybox__thumbs {
  border-top: 1px solid var(--line-divider);
  backdrop-filter: blur(12px) saturate(1.1);
}

.f-thumbs__slide button {
  overflow: hidden;
}

.f-thumbs__slide button:after {
  border-radius: inherit;
}

.f-caption,
.fancybox__caption {
  color: var(--fancybox-color);
  background: var(--card-bg-transparent);
  border: 1px solid var(--line-divider);
  border-radius: var(--radius-large, 1rem);
  margin: 0 1rem 1rem;
  padding: 0.75rem 1rem;
  backdrop-filter: blur(12px) saturate(1.1);
}

.fancybox__slide .f-panzoom__viewport {
  border-radius: var(--radius-large, 1rem);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

@media (max-width: 768px) {
  .fancybox__container {
    --f-button-width: 2.25rem;
    --f-button-height: 2.25rem;
    --f-thumb-width: 3rem;
    --f-thumb-height: 3rem;
  }

  .f-carousel__toolbar {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.35rem;
  }

  .f-caption,
  .fancybox__caption {
    margin: 0 0.5rem 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .fancybox__container {
    --f-button-width: 2rem;
    --f-button-height: 2rem;
    --f-thumb-width: 2.5rem;
    --f-thumb-height: 2.5rem;
  }

  .f-carousel__toolbar {
    gap: 0.15rem;
  }
}

/* Fancybox defaults to a dark toolbar. Explicitly keep text and controls
   legible when the site is in dark mode while still using the site tokens. */
:root.dark .fancybox__container {
  --fancybox-color: rgba(255, 255, 255, 0.9);
  --f-toolbar-color: rgba(255, 255, 255, 0.9);
  --f-button-color: rgba(255, 255, 255, 0.88);
  --f-button-hover-color: #fff;
  --f-arrow-color: rgba(255, 255, 255, 0.88);
  --f-arrow-hover-color: #fff;
}