/* ==========================================================================
   Lightbox — triggers (gallery links) + the <dialog> built by lightbox.js.
   Used on /referenz/{slug} (masonry), home + Büro (gallery strip).
   ========================================================================== */

@layer components {
  /* ----- Trigger: image link, dark veil on hover (as on live) ----------- */

  .lightbox-trigger {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
  }

  .lightbox-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-standard);
    pointer-events: none;
  }

  .lightbox-trigger:hover::after {
    opacity: 1;
  }

  .lightbox-trigger:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
  }

  /* ----- Dialog --------------------------------------------------------- */

  .lightbox {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    max-block-size: none;
    padding: var(--space-8) var(--space-9) var(--space-6);
    margin: 0;
    color: var(--white);
    background: transparent;
    border: 0;
    overscroll-behavior: contain;
  }

  .lightbox[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
  }

  .lightbox::backdrop {
    background-color: rgb(0 0 0 / 0.9);
  }

  .lightbox__figure {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    inline-size: 100%;
    margin: 0;
  }

  .lightbox__image {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    touch-action: pan-y;
    user-select: none;
  }

  .lightbox__counter {
    padding: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-sm);
    background-color: rgb(0 0 0 / 0.5);
    border-radius: var(--radius-full);
  }

  .lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 3.125rem;
    block-size: 3.125rem;
    padding: 0;
    color: var(--white);
    background-color: rgb(255 255 255 / 0.1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-standard);
  }

  .lightbox__btn:hover {
    background-color: rgb(255 255 255 / 0.2);
  }

  .lightbox__btn:focus-visible {
    outline: 2px solid var(--color-focus-ring-on-dark);
    outline-offset: 2px;
  }

  .lightbox__btn .icon {
    --icon-size: 1.5rem;
  }

  .lightbox__btn--close { inset-block-start: var(--space-4); inset-inline-end: var(--space-4); }
  .lightbox__btn--prev  { inset-inline-start: var(--space-4); inset-block-start: 50%; translate: 0 -50%; }
  .lightbox__btn--next  { inset-inline-end: var(--space-4); inset-block-start: 50%; translate: 0 -50%; }

  .lightbox__btn[hidden] {
    display: none;
  }

  @media (max-width: 47.99rem) {
    .lightbox {
      padding-inline: var(--space-2);
    }

    /* Arrows move to the bottom, beside the counter, so they never cover the image. */
    .lightbox__btn--prev,
    .lightbox__btn--next {
      inset-block: auto var(--space-4);
      translate: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .lightbox[open] .lightbox__image {
      animation: lightbox-in var(--duration-normal) var(--ease-standard);
    }
  }

  @keyframes lightbox-in {
    from { opacity: 0; }
  }
}

/* Page behind the open lightbox doesn't scroll. */
html:has(.lightbox[open]) {
  overflow: hidden;
}