/* Galleria e mood board IMLPS, condivisi da landing e archivio */
:root{ --ease: cubic-bezier(.22,1,.36,1); }
  /* Galleria */
  .gal{
    position:fixed;inset:0;z-index:50;
    background:#ffffff;color:var(--ink);
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;
    opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease), visibility 0s linear .45s;
  }
  .gal.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease), visibility 0s}
  .gal-top,.gal-bot{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:16px 24px;
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;
  }
  .gal-top{justify-content:flex-end;gap:8px}

  /* Mood board: foto libere nello schermo */
  .mb{
    position:fixed;inset:0;z-index:70;
    background:#ffffff;color:var(--ink);
    display:grid;grid-template-rows:auto minmax(0,1fr);
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease), visibility 0s linear .4s;
  }
  .mb.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease), visibility 0s}
  .mb-top{
    display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
    padding:16px 24px;
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;
  }
  .mb-title{margin:0 auto 0 6px;font:inherit;font-size:14px}
  .mb-title small{font-size:12px;opacity:.6;margin-left:8px}
  .mb-board{position:relative;overflow:hidden;background:#ffffff;touch-action:none;isolation:isolate;contain:paint}
  .mb-item{
    position:absolute;left:0;top:0;
    cursor:grab;user-select:none;touch-action:none;outline:none;
    will-change:transform;   /* niente scie durante il trascinamento */
  }
  .mb-item img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
  .mb-item.dragging{cursor:grabbing}
  /* contorno solo se usi la tastiera, mai quando trascini col mouse */
  .mb-item:focus,.mb-item:focus-visible{outline:none}
  /* nessun contorno (lasciava scie verticali in Safari); con la tastiera la foto selezionata è appena più chiara */
  .mb-board.kbd .mb-item:focus{opacity:.82}
  /* maniglia per ridimensionare (angolo in basso a destra) */
  .mb-item .mb-rs{
    position:absolute;right:0;bottom:0;width:28px;height:28px;
    cursor:nwse-resize;touch-action:none;
    opacity:0;transition:opacity .2s ease;
  }
  .mb-item .mb-rs::before{
    content:"";position:absolute;right:6px;bottom:6px;width:12px;height:12px;
    border-right:1px solid #fff;border-bottom:1px solid #fff;box-shadow:1px 1px 0 rgba(0,0,0,.45);
  }
  .mb-item:hover .mb-rs,.mb-item:focus-visible .mb-rs,.mb-item.resizing .mb-rs{opacity:1}
  @media (hover:none){ .mb-item .mb-rs{opacity:1;width:36px;height:36px} }
  .mb-hint{
    position:absolute;left:24px;bottom:16px;margin:0;pointer-events:none;
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13px;opacity:.55;
  }
  @media (max-width:820px){
    .mb-top{padding:12px 16px}
    .mb-hint{left:16px;bottom:10px;font-size:14px}
  }
  .gal-info{
    position:absolute;right:24px;top:50%;z-index:3;max-width:min(320px,30vw);text-align:right;justify-content:flex-end;white-space:normal !important;
    transform:translateY(-50%);
    display:flex;flex-direction:row;column-gap:10px;white-space:nowrap;
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14.4px;line-height:1.25;
    pointer-events:none;
  }
  .gal:focus,.mb:focus{outline:none}
  /* comandi (Close, Mood board, Reset, Download JPG…): mai un riquadro; con la tastiera solo sottolineati */
  .gal-btn:focus,.gal-btn:focus-visible,.gal-nav:focus,.gal-nav:focus-visible,.vctl button:focus,.vctl button:focus-visible,.vbar:focus,.vbar:focus-visible{outline:none}
  .gal-btn:focus-visible,.vctl button:focus-visible{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .gal-close{
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14px;
    padding:0 6px;
  }
  /* cursore: freccia sottile che ruota a destra/sinistra */
  .gal-stage,.gal-nav{cursor:none}
  .gal-cursor{
    position:fixed;left:0;top:0;z-index:60;
    width:22px;height:8px;margin:-4px 0 0 -11px;
    color:#ffffff;mix-blend-mode:difference;
    pointer-events:none;
    opacity:0;transition:opacity .2s ease;
  }
  .gal-cursor.on{opacity:1}
  .gal-cursor svg{display:block;transition:transform .35s var(--ease)}
  .gal-cursor.left svg{transform:rotate(180deg)}
  .gal-count{
    position:absolute;left:24px;top:50%;z-index:3;
    transform:translateY(-50%);
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:14.4px;line-height:1.25;
    font-variant-numeric:tabular-nums;white-space:nowrap;
    pointer-events:none;
  }
  .gal-stage{position:relative;min-height:0;overflow:hidden}
  .gal-stage img,.gal-stage video{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;
    /* slide da destra verso sinistra: parte piano, accelera, rallenta (ease-in-out) */
    transform:translateX(100vw);
    transition:transform 1.1s cubic-bezier(.76,0,.24,1);
    will-change:transform;
  }
  /* "2 foto alla volta": due foto affiancate che scorrono insieme */
  .gal-stage .pair{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2vw;
    padding:0 clamp(80px,14vw,260px);       /* ai lati resta lo spazio per contatore e descrizione */
    transform:translateX(100vw);transition:transform 1.1s cubic-bezier(.76,0,.24,1);will-change:transform;
  }
  .gal-stage .pair img{
    position:static;inset:auto;width:auto;height:auto;max-width:calc(50% - 1vw);max-height:100%;
    object-fit:contain;transform:none !important;transition:none;
  }
  .gal.is-pair .gal-info{max-width:calc(clamp(80px,14vw,260px) - 44px)}
  .gal-stage .on{transform:none}
  .gal-stage video{background:transparent;inset:15%;width:70%;height:70%} /* video 30% più piccolo */
  /* sui video le zone di navigazione si stringono ai lati, così i controlli restano cliccabili */
  .gal-stage.is-video .gal-nav{width:15%}
  .gal-stage video{z-index:2;cursor:pointer}

  /* comandi video minimal */
  .vctl{
    position:absolute;left:15%;right:15%;top:calc(85% + 14px);z-index:3;
    display:none;align-items:center;gap:20px;
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;line-height:1;
    color:var(--ink);cursor:auto;
  }
  .gal-stage.is-video .vctl{display:flex}
  .vctl button{
    background:none;border:0;padding:0;margin:0;min-height:44px;
    font:inherit;color:inherit;cursor:pointer;white-space:nowrap;
  }
  .vctl button:hover{opacity:.55}
  .vbar{
    flex:1;position:relative;height:44px;cursor:pointer;
  }
  .vbar::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(17,17,17,.2)}
  .vfill{position:absolute;left:0;top:50%;height:1px;width:0;background:var(--ink)}
  .vtime{font-variant-numeric:tabular-nums;white-space:nowrap}
  @media (max-width:820px){
    .gal-stage video{inset:10% 0 20%;width:100%;height:70%}
    .vctl{left:16px;right:16px;top:auto;bottom:4%;gap:14px;font-size:14px}
  }
  .gal-nav{
    position:absolute;top:0;bottom:0;width:50%;z-index:2;
    background:none;border:0;padding:0;margin:0;
  }
  .gal-prev{left:0}
  .gal-next{right:0}
  .gal-btn{
    min-width:44px;min-height:44px;padding:0 4px;
    background:none;border:0;color:var(--ink);cursor:pointer;
    font:inherit;
  }
  .gal-btn:hover{opacity:.55}
  @media (max-width:820px){
    .gal-top,.gal-bot{padding:12px 16px;font-size:15px}
    .gal{grid-template-rows:auto auto minmax(0,1fr) auto}
    .gal-info{position:static;transform:none;max-width:none;flex-direction:row;column-gap:10px;padding:0 16px 8px;font-size:13.5px;text-align:left;justify-content:flex-start}
    .gal-count{position:static;transform:none;font-size:13.5px}
    .gal-bot{justify-content:flex-start}
  }
  @media (hover:none){
    .gal-stage,.gal-nav{cursor:auto}
    .gal-cursor{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .gal,.gal-stage img,.gal-stage video,.gal-stage .pair,.gal-cursor svg{transition:none}
  }
  /* nella galleria e nel mood board non valgono le frecce su/giù della landing */
  body.cur-down .gal, body.cur-up .gal, body.cur-down .mb, body.cur-up .mb { cursor: default; }

/* Safari: con il mood board aperto spariscono tutti gli altri livelli con fusione dei colori
   (menu, frecce, "View", galleria sotto), che causavano le scie verticali durante il trascinamento */
html.mb-open header, html.mb-open #arrow, html.mb-open #view, html.mb-open .gal-cursor { display: none !important; }
html.mb-open .gal { visibility: hidden !important; }
html.mb-open #pages, html.mb-open main { visibility: hidden !important; }
html.mb-open .mb { visibility: visible !important; }

/* il comando 1 / 2 foto serve solo dove le foto possono stare affiancate */
@media (max-width: 820px){ .gal-two{ display:none; } }