/* Lightbox (<dialog>, template-parts/components/lightbox.php + gallery.js): foto a tutto schermo su fondo scuro,
   carosello con scroll-snap, frecce ai lati, contatore e Chiudi in alto. */
@layer components {
  .lightbox {
    --lightbox-bg: rgba(20, 17, 45, .94);

    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 16px var(--gutter) 24px;
    border: 0;
    background: var(--lightbox-bg);
    color: var(--text-inverse);

    &[open] { display: flex; flex-direction: column; gap: 16px; }
    &::backdrop { background: var(--lightbox-bg); }
  }

  body.is-dialog-open { overflow: hidden; }

  .lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--fw-semibold);
  }

  .lightbox__close,
  .lightbox__arrow {
    --icon-btn-border: transparent;
  }

  .lightbox__close {
    --icon-btn-bg: rgba(255, 255, 255, .12);
    --icon-btn-hover: rgba(255, 255, 255, .22);
    --icon-btn-fg: var(--text-inverse);
  }

  /* Carosello: overflow-y hidden + padding-bottom 4px (CLAUDE.md §9) */
  .lightbox__track {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .lightbox__slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    scroll-snap-align: center;
  }

  .lightbox__img {
    max-width: min(100%, 1200px);
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: contain;
  }

  .lightbox__arrow {
    --icon-btn-size: 56px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    @media (max-width: 767px) { --icon-btn-size: 48px; top: auto; bottom: 24px; transform: none; }
  }

  .lightbox__arrow--prev { left: var(--gutter); }
  .lightbox__arrow--next { right: var(--gutter); }
}