/* ============================================================
   Fotoalbum De Kwelpiepers — aanvulling op de huisstijl
   ============================================================ */

.album-body{background:var(--blue-950)}
.album-body .nav{position:fixed}

/* ---------- Kop ---------- */
.album-kop{position:relative;padding:clamp(6rem,11vw,8rem) 0 clamp(1.4rem,3vw,2.2rem);overflow:hidden}
.album-kop h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,5.6rem);line-height:1.02;margin:.9rem 0 1.2rem;
  color:#fff;
}
.album-kop .lead{max-width:60ch}
.album-stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);margin-top:1.2rem}
.album-stats div b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.6vw,2.8rem);color:var(--yellow);line-height:1.05}
.album-stats div span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute-dark)}

/* ---------- Filterbalk ---------- */
.filterbalk{
  position:sticky;top:64px;z-index:800;
  padding:.9rem 0;
  background:rgba(6,10,43,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 30px rgba(3,5,28,.4);
}
.filter-in{display:grid;gap:.8rem}
/* ---------- Tijdlijn met jaren ---------- */
.jaren{display:grid;gap:.7rem}
.dozen{display:flex;flex-wrap:wrap;gap:.35rem}
.tijdlijn{position:relative;display:flex;flex-wrap:wrap;gap:.35rem}
.jaarknop{
  flex:0 0 auto;padding:.38rem .78rem;border-radius:999px;font-size:.82rem;font-weight:700;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .3s,color .3s,transform .3s var(--ease);
}
.jaarknop i,.jaarknop .kort{display:none}
.jaarknop:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px)}
.jaarknop.actief{background:var(--yellow);color:var(--ink);box-shadow:none}

/* op ruimere schermen wordt het een echte tijdlijn */
@media (min-width:1000px){
  .tijdlijn{flex-wrap:nowrap;align-items:end;gap:0;padding:.7rem 0 .2rem}
  .tijdlijn::before{
    content:"";position:absolute;left:0;right:0;bottom:1.35rem;height:2px;
    background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.28),rgba(255,255,255,.08));
  }
  .tijdlijn .jaarknop{
    flex:1 1 0;display:grid;grid-template-rows:auto auto;align-items:end;justify-items:center;gap:.35rem;
    background:none;box-shadow:none;padding:0 0 .1rem;border-radius:10px;
    color:rgba(255,255,255,.55);font-size:.66rem;letter-spacing:.02em;
  }
  .tijdlijn .jaarknop i{
    display:block;
    width:calc(7px + var(--vol,0) * 15px);
    height:calc(7px + var(--vol,0) * 15px);
    border-radius:50%;
    background:rgba(255,255,255,.32);
    box-shadow:0 0 0 3px rgba(6,10,43,.9);
    transition:background .3s,transform .3s var(--ease);
  }
  .tijdlijn .jaarknop .kort{display:block;white-space:nowrap}
  .tijdlijn .jaarknop .lang{display:none}
  .tijdlijn .jaarknop:hover{transform:none;color:#fff;background:none}
  .tijdlijn .jaarknop:hover i{background:#fff;transform:scale(1.15)}
  .tijdlijn .jaarknop.actief{background:none;color:var(--yellow);font-weight:800}
  .tijdlijn .jaarknop.actief i{background:var(--yellow);box-shadow:0 0 0 3px rgba(6,10,43,.9),0 0 16px rgba(255,224,27,.65)}
}

/* ---------- Overzicht ---------- */
.overzicht{padding:clamp(2rem,5vw,3.5rem) 0 6rem}
.jaarblok{margin-bottom:clamp(2.5rem,5vw,4rem)}
.jaarkop{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 1.4rem;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.1;color:#fff;
}
.jaarkop small{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--txt-mute-dark)}
.jaarkop::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,224,27,.5),transparent)}

.kaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem}
.kaart{
  position:relative;display:block;text-align:left;width:100%;
  border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  cursor:pointer;
}
.kaart:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--yellow),var(--shadow-2)}
.kaart .beeld{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-850)}
.kaart .beeld img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ease),transform 1s var(--ease);
}
.kaart .beeld img.aan{opacity:1}
.kaart:hover .beeld img.aan{transform:scale(1.05)}
.kaart .telling{
  position:absolute;right:.7rem;bottom:.7rem;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .65rem;border-radius:999px;
  background:rgba(3,5,28,.72);backdrop-filter:blur(6px);
  font-size:.74rem;font-weight:800;color:#fff;
}
.kaart .telling .ic{width:14px;height:14px;color:var(--yellow)}
.kaart .tekst{display:block;padding:.9rem 1rem 1.1rem}
.kaart .naam{display:block;font-weight:800;font-size:1.02rem;line-height:1.35;color:#fff;margin-bottom:.3rem}
.kaart .datum{display:block;margin-bottom:.25rem;font-size:.78rem;color:var(--yellow);font-weight:700}
.kaart .plaats{font-size:.82rem;color:var(--txt-mute-dark);display:flex;gap:.35rem;align-items:center}
.kaart .plaats .ic{width:14px;height:14px;color:var(--yellow);flex:0 0 auto}
.geen-resultaat{padding:3rem 0;color:var(--txt-mute-dark);text-align:center}

/* ---------- Detail van één optreden ---------- */
.detail{padding:clamp(1.5rem,4vw,2.5rem) 0 6rem}
.terugknop{
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.6rem;
  padding:.6rem 1.1rem;border-radius:999px;font-weight:800;font-size:.88rem;
  background:rgba(255,255,255,.08);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background .3s,transform .35s var(--ease);
}
.terugknop:hover{background:rgba(255,255,255,.16);transform:translateX(-3px)}
.terugknop .ic{width:16px;height:16px}
.detail-kop{margin-bottom:2rem}
.detail-kop .jaarbadge{
  display:inline-block;padding:.35rem .8rem;border-radius:999px;
  background:var(--yellow);color:var(--ink);font-weight:900;font-size:.76rem;letter-spacing:.12em;
}
.detail-kop h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.03;margin:.9rem 0 .6rem;color:#fff;
}
.detail-kop .plaats{display:flex;align-items:center;gap:.4rem;color:var(--yellow);font-size:.9rem;font-weight:700}
.detail-kop .plaats .ic{width:16px;height:16px}
.verslag{
  margin-top:1.4rem;padding:1.3rem 1.6rem;border-left:4px solid var(--yellow);
  background:linear-gradient(90deg,rgba(255,224,27,.1),transparent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--txt-mute-dark);font-size:1.02rem;line-height:1.8;
}
.deel{margin-top:clamp(2rem,4vw,3rem)}
.deel h3{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.15;color:#fff;margin-bottom:.5rem;
}
.deel .verslag{margin-top:.8rem;border-left-color:rgba(255,224,27,.55)}

/* metselwerk-galerij */
.galerij{columns:4 240px;column-gap:.9rem;margin-top:1.2rem}
.galerij figure{
  break-inside:avoid;margin-bottom:.9rem;border-radius:var(--r-sm);overflow:hidden;
  background:var(--blue-850);box-shadow:0 10px 26px rgba(3,5,28,.4);
  cursor:zoom-in;transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.galerij figure:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 40px rgba(3,5,28,.55)}
.galerij img{width:100%;display:block}

/* ---------- Lightbox met bijschrift ---------- */
.album-body .lightbox .lb-fig{display:grid;justify-items:center;gap:.9rem;max-width:min(94vw,1200px)}
.album-body .lightbox img{max-height:78vh;border-radius:var(--r-sm)}
.album-body .lightbox figcaption{
  max-width:70ch;text-align:center;color:var(--txt-mute-dark);font-size:.92rem;line-height:1.6;
}
.album-laden{padding:4rem 0;text-align:center;color:var(--txt-mute-dark)}

@media (max-width:820px){
  .filterbalk{top:56px}
  .album-body .nav-links{display:none}
  .galerij{columns:2 150px}
}


/* ---------- Verras me ---------- */
.verrasknop{
  justify-self:start;
  padding:.5rem 1.1rem;border-radius:999px;
  font-size:.85rem;font-weight:800;
  background:linear-gradient(120deg,var(--yellow),var(--yellow-deep));color:var(--ink);
  box-shadow:0 8px 22px rgba(255,196,0,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.verrasknop:hover{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 12px 30px rgba(255,196,0,.42)}
.verrasknop:active{transform:scale(.96)}

/* waar komt deze foto vandaan? */
.lb-bron{
  margin:.35rem 0 0;text-align:center;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.lb-bron b{color:var(--yellow);font-weight:800;margin-right:.35rem}

/* andere manieren om door het archief te kijken */
.album-ontdek{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}

/* de titel van het album */
.album-titel{
  margin:.6rem 0 0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1;
}

/* ---------- deelknop in de lightbox ---------- */
.lb-deel{
  position:absolute;left:clamp(.8rem,3vw,1.6rem);top:clamp(.8rem,3vw,1.4rem);z-index:5;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:.8rem;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.lb-deel svg{width:16px;height:16px;fill:currentColor}
.lb-deel:hover{background:var(--yellow);color:var(--ink);transform:translateY(-1px)}
.lb-deel:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (max-width:560px){
  .lb-deel span{display:none}
  .lb-deel{padding:.55rem;border-radius:50%}
}

/* ---------- vorige/volgende optreden ---------- */
.ab-stappen{
  display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;align-items:center;
  margin:2.4rem 0 0;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);
}
.ab-stap{
  display:grid;gap:.1rem;padding:.7rem 1rem;border-radius:14px;color:#fff;min-width:0;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.ab-stap:hover{background:rgba(255,224,27,.16);transform:translateY(-2px)}
.ab-stap span{color:var(--yellow);font-weight:700;font-size:.8rem}
.ab-stap b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-stap em{font-style:normal;font-size:.76rem;color:rgba(255,255,255,.5)}
.ab-stap.rechts{text-align:right}
.ab-deel{
  padding:.6rem 1rem;border-radius:999px;white-space:nowrap;
  background:rgba(255,224,27,.14);color:var(--yellow);font-weight:700;font-size:.84rem;
}
.ab-deel:hover{background:var(--yellow);color:var(--ink)}
@media (max-width:700px){
  .ab-stappen{grid-template-columns:1fr 1fr;gap:.5rem}
  .ab-deel{grid-column:1 / -1;text-align:center}
}

/* link naar de jaarpagina in de albumkop */
.jaarkop .jaarlink{
  margin-left:auto;font-family:var(--font-body);font-size:.8rem;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--yellow);white-space:nowrap;
}
.jaarkop .jaarlink:hover{text-decoration:underline}
@media (max-width:560px){ .jaarkop .jaarlink{margin-left:0;flex-basis:100%} }

/* de foto in de lightbox valt op tafel (animatie staat in style.css) */
#lbImg.valt{animation:kpValt .46s cubic-bezier(.22,.9,.3,1.1) both}