@layer components {
  .lightbox {
    --dialog-duration: 350ms;
    --lightbox-padding: 3vmin;

    background-color: transparent;
    block-size: 100dvh;
    border: 0;
    inline-size: 100dvw;
    inset: 0;
    margin: auto;
    max-height: unset;
    max-width: unset;
    overflow: hidden;
    padding:
      calc(var(--lightbox-padding) + var(--custom-safe-inset-top))
      calc(var(--lightbox-padding) + var(--custom-safe-inset-right))
      calc(var(--lightbox-padding) + var(--custom-safe-inset-bottom))
      calc(var(--lightbox-padding) + var(--custom-safe-inset-left));
    text-align: center;

    &::backdrop {
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      background-color: oklch(var(--lch-black) / 50%);
    }

    /* Closed state */
    &,
    &::backdrop {
      opacity: 0;
      transition: var(--dialog-duration) allow-discrete;
      transition-property: display, opacity, overlay;
    }

    /* Open state */
    &[open],
    &[open]::backdrop {
      align-items: center;
      display: flex;
      justify-content: center;
      opacity: 1;

      @starting-style {
        opacity: 0;
      }

      .lightbox__figure {
        animation: slide-up var(--dialog-duration);
      }
    }
  }

  .lightbox__actions {
    display: flex;
    gap: 1ch;
    position: absolute;
    inset-block-start: calc(var(--lightbox-padding) + var(--custom-safe-inset-top));
  }

  .lightbox__actions--left {
    inset-inline-start: calc(var(--lightbox-padding) + var(--custom-safe-inset-left));
  }

  .lightbox__actions--right {
    inset-inline-end: calc(var(--lightbox-padding) + var(--custom-safe-inset-right));
  }

  .lightbox__figure {
    animation-fill-mode: forwards;
    animation: slide-down var(--dialog-duration);
    display: flex;
    flex-direction: column;
    gap: var(--lightbox-padding);
    margin: 0 auto;
    max-block-size: 100%;

    img {
      object-fit: contain;
    }
  }

  .lightbox__caption {
    color: var(--color-white);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25ch 1ch;
    justify-content: center;
    align-items: baseline;

    &:empty {
      display: none;
    }

    &[tabindex="-1"]:focus-visible {
      outline: unset;
    }
  }

  .lightbox__download-link {
    color: oklch(var(--lch-white) / 80%);
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &[hidden] {
      display: none;
    }

    &:hover,
    &:focus-visible {
      color: var(--color-white);
    }
  }

  .lightbox__counter {
    color: oklch(var(--lch-white) / 60%);
    font-size: var(--text-small, 0.85em);
    font-variant-numeric: tabular-nums;

    &:empty {
      display: none;
    }
  }

  /* .lightbox__stage is the flex child of .lightbox__figure that fills
     the available vertical space. It centers the image and hosts the
     absolutely-positioned hotspot overlay. */
  .lightbox__stage {
    flex: 1;
    min-block-size: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lightbox__image {
    /* Fill the stage so the image uses the available space regardless
       of its natural dimensions. object-fit: contain (inherited from
       .lightbox__figure img) keeps the aspect ratio and letterboxes
       any leftover space — the hotspot overlay measures that rendered
       rect before positioning dots. */
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 80vh;
    min-block-size: 0;
  }

  /* Hotspot overlay — sized by JS to match the image's rendered rect
     (since the image uses object-fit: contain, the rect is smaller than
     the <img> element's bounding box). Dots inside use the standard
     .thermography-hotspot markup positioned by top/left percentages. */
  .lightbox__overlay {
    position: absolute;
    pointer-events: none;

    &[hidden] {
      display: none;
    }

    & .thermography-hotspot {
      block-size: 1em;
      border-width: 2px;
      inline-size: 1em;
      margin: -0.5em 0 0 -0.5em;
      pointer-events: auto;
    }
  }

  .lightbox__nav {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 1;

    &[hidden] {
      display: none;
    }
  }

  .lightbox__nav--prev {
    inset-inline-start: calc(var(--lightbox-padding) + var(--custom-safe-inset-left));
  }

  .lightbox__nav--next {
    inset-inline-end: calc(var(--lightbox-padding) + var(--custom-safe-inset-right));
  }

  /* Prevent body from scrolling when lightbox is open */
  html:has(.lightbox[open]) {
    overflow: clip;
  }
}