/* Planimetrie, zoom: finestra a tutto schermo sopra la galleria (dialog dentro il dialog: Esc chiude solo questa).
   L'immagine e' larga al massimo 1920px e al massimo il doppio dell'originale (js/detail.js); quello che non entra si raggiunge muovendo il mouse. */
@layer components {
  /* Ingrandisci sta nell'angolo in alto a destra della planimetria: detail.js calcola dove cade (--zoom-top, --zoom-right) */
  .plan-zoom-open { position: absolute; top: var(--zoom-top, 12px); right: var(--zoom-right, 12px); z-index: 2; box-shadow: 0 8px 24px rgb(16 41 31 / .28); }
  @media (prefers-reduced-motion: no-preference) {
    .plan-zoom-open.is-placed { transition: top var(--dur) var(--ease), right var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); }
  }

  dialog.plan-zoom {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--ground);
    color: var(--ink);

    &::backdrop { background: var(--ground); }
  }
  .plan-zoom-box {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    outline: none;

    &::-webkit-scrollbar { display: none; }
    /* margin auto: centrata quando e' piu' piccola dello schermo, senza tagliare i bordi quando e' piu' grande */
    & img { display: block; flex: none; max-width: none; height: auto; margin: auto; user-select: none; -webkit-user-drag: none; }
  }
  .plan-zoom-close { position: absolute; left: 50%; bottom: 24px; z-index: 2; box-shadow: 0 8px 24px rgb(16 41 31 / .28); translate: -50% 0; }
  .plan-zoom-hint { position: absolute; left: 50%; top: 16px; z-index: 2; translate: -50% 0; pointer-events: none; box-shadow: var(--shadow-pin); }
  @media (hover: hover) and (pointer: fine) {
    .plan-zoom-box { cursor: move; }
  }
  @media (hover: none) {
    .plan-zoom-hint { display: none; }
  }
  @media (prefers-reduced-motion: no-preference) {
    dialog.plan-zoom[open] { animation: plan-zoom-in var(--dur) var(--ease) both; }
  }
}
@keyframes plan-zoom-in {
  from { opacity: 0; }
}