/*
 * Galleria a finestra (<dialog>): foto grande, frecce, contatore. JS: components/gallery.js.
 * Si apre da un [data-gallery-open]; le foto sono i <template data-gallery-item> nel dialog.
 */
@layer components {
  .gallery-dialog {
    width: min(1200px, 100vw - 32px); max-width: none; height: min(900px, 100dvh - 32px); max-height: none;
    padding: 0; border: 0; border-radius: var(--radius-xl); background: #0d0d0d; color: #fff;
    &::backdrop { background: rgb(0 0 0 / 0.8); }
    &[open] { display: grid; grid-template-rows: auto 1fr auto; }
  }
  .gallery-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 12px 12px 24px; font-weight: 600; }
  .gallery-dialog__stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
  .gallery-dialog__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-m); }
  .gallery-dialog__foot { display: flex; justify-content: center; gap: 8px; padding: 16px; }
  .gallery-dialog .icon-button { background: rgb(255 255 255 / 0.12); color: #fff; box-shadow: none; }
  .gallery-dialog .icon-button:hover { background: var(--color-accent); color: var(--color-on-accent); }
}