/* ============================================================
   Het mozaïek — onze kop uit het hele archief
   ============================================================ */
.moz-body{background:var(--blue-950);overflow:hidden}

.moz-doek{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:grab;background:var(--blue-950);
}
.moz-doek:active{cursor:grabbing}

.moz-vignet{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(3,5,28,.72) 100%);
}

/* het balkje onderin */
.moz-balk{
  position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:4;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  padding:.55rem;border-radius:999px;
  background:rgba(6,10,43,.82);backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(3,5,28,.55),inset 0 0 0 1px rgba(255,255,255,.12);
  max-width:calc(100vw - 1.4rem);
}
.moz-balk .btn{white-space:nowrap}

.moz-zoom{
  position:fixed;right:1rem;bottom:calc(4.6rem + env(safe-area-inset-bottom));z-index:4;
  display:grid;gap:.35rem;
}
.moz-zoom button{
  width:42px;height:42px;border:0;border-radius:12px;cursor:pointer;
  font-size:1.3rem;line-height:1;color:#fff;
  background:rgba(6,10,43,.82);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.moz-zoom button:hover{background:rgba(255,224,27,.2)}

.moz-hulp{
  position:fixed;left:50%;bottom:clamp(5rem,11vh,7rem);transform:translateX(-50%);
  z-index:4;max-width:min(92vw,42rem);text-align:center;
  padding:.7rem 1.1rem;border-radius:16px;
  background:rgba(6,10,43,.8);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.moz-hulp p{margin:0;font-size:.88rem;color:rgba(255,255,255,.82)}
.moz-hulp b{color:var(--yellow)}
.moz-hulp.weg{opacity:0;transform:translate(-50%,12px);pointer-events:none}

/* het fotokaartje */
.moz-kaart{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(3,5,28,.88);backdrop-filter:blur(8px);
}
.moz-kaart[hidden]{display:none}
.moz-kaart figure{margin:0;max-width:min(96vw,1100px);display:grid;gap:.8rem}
.moz-kaart img{
  max-width:100%;max-height:72vh;border-radius:16px;display:block;margin-inline:auto;
  box-shadow:0 30px 80px rgba(3,5,28,.7);
}
.moz-kaart figcaption{display:grid;gap:.3rem;justify-items:center;text-align:center}
.moz-kaart .jaar{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.moz-kaart figcaption b{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1rem,2.6vw,1.5rem)}
.moz-sluit{
  position:absolute;right:1rem;top:1rem;width:44px;height:44px;border:0;border-radius:50%;
  cursor:pointer;font-size:1.1rem;color:#fff;background:rgba(255,255,255,.12);
}
.moz-sluit:hover{background:var(--yellow);color:var(--ink)}

@media (max-width:640px){
  .moz-balk{gap:.35rem;padding:.45rem}
  .moz-balk .btn{font-size:.78rem;padding:.5rem .8rem}
  .moz-hulp p{font-size:.8rem}
}

/* de uitleg staat er voor schermlezers en zoekmachines; in beeld zou hij
   het mozaïek in de weg zitten */
.moz-uitleg{position:fixed;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.moz-uitleg:focus-within{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,36rem);height:auto;z-index:50;
  background:var(--blue-900);padding:1.6rem;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}