/* Cordel D' Prata · v2 — galeria de ilustrações
   Quem chega aqui veio pelo QR code do livro, quase sempre no telemóvel e
   com o livro na mão. Por isso: as imagens primeiro, grandes, e um visor
   que as põe a ocupar o ecrã todo. */

  .gal-topo{
    padding-top:calc(var(--header-h,130px) + clamp(24px,3.5vw,44px));
    padding-bottom:clamp(24px,3vw,38px);
    background:var(--paper-2);
  }
  .gal-topo h1{margin-top:12px;max-width:20ch;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.06;text-wrap:balance}
  .gal-topo .lead{max-width:56ch;margin-top:14px}

  .gal-lista{padding-top:clamp(28px,3.5vw,48px)}

  /* Alturas livres: uma ilustração vertical não tem de ficar do tamanho de
     uma horizontal, e cortá-las para as igualar seria estragá-las. */
  .gal-grelha{columns:3 300px;column-gap:clamp(12px,1.8vw,22px)}

  .gal-item{
    display:block;width:100%;break-inside:avoid;margin:0 0 clamp(12px,1.8vw,22px);
    padding:0;border:0;background:none;cursor:zoom-in;
    border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .gal-item img{display:block;width:100%;height:auto;background:var(--paper-2)}
  .gal-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .gal-legenda{
    display:block;padding:10px 14px 12px;text-align:left;
    font-size:.88rem;color:var(--ink-soft);background:var(--card);
  }
  .gal-vazia{columns:1;color:var(--muted);max-width:52ch}

  /* ── o livro, no fim ── */
  .gal-livro-inner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,44px)}
  .gal-livro-capa{flex:0 0 auto;width:clamp(120px,15vw,180px);transform:rotate(-2deg);transition:transform .5s var(--ease)}
  .gal-livro-capa img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:var(--shadow-book)}
  .gal-livro-capa:hover{transform:rotate(0) translateY(-4px)}
  .gal-livro-texto h2{margin:8px 0 0;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1}
  .gal-livro-texto .lead{margin-top:8px}
  .gal-livro-texto .btn{margin-top:20px}

  /* ── o visor ── */
  .gal-visor{
    position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
    background:rgba(11,9,7,.94);padding:clamp(12px,3vw,40px);
    cursor:zoom-out;
  }
  .gal-visor[hidden]{display:none}
  .gal-visor img{
    max-width:100%;max-height:calc(100vh - clamp(80px,12vw,140px));
    width:auto;height:auto;border-radius:4px;cursor:default;
    box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  }
  .gal-visor-fechar,.gal-visor-passo{
    position:absolute;z-index:1;border:0;cursor:pointer;
    background:rgba(255,255,255,.1);color:#fff;
    display:grid;place-items:center;border-radius:50%;
    transition:background .2s;
  }
  .gal-visor-fechar:hover,.gal-visor-passo:hover{background:rgba(255,255,255,.22)}
  .gal-visor-fechar{top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);width:44px;height:44px;font-size:1.8rem;line-height:1}
  .gal-visor-passo{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem;line-height:1}
  .gal-visor-passo--tras{left:clamp(8px,1.6vw,20px)}
  .gal-visor-passo--frente{right:clamp(8px,1.6vw,20px)}
  .gal-visor-conta{
    position:absolute;bottom:clamp(12px,2.4vw,28px);left:50%;transform:translateX(-50%);
    margin:0;color:rgba(255,255,255,.75);font-size:.88rem;font-variant-numeric:tabular-nums;
  }

  @media (max-width:640px){
    .gal-grelha{columns:1}
    /* no telemóvel anda-se com o dedo; as setas só estorvam */
    .gal-visor-passo{display:none}
  }