/* =======================================================================
   BuzzBij.nl — Galerij (LICHT + header 10px + glascontainer)
   - Header + spiegeling + backdrop/dimmer identiek aan producten.css
   - Hoofd glascontainer: dekt 3 varianten → main.bb-bijen | main.bb-galerij | .bb-galerij__wrap
   - LIGHTBOX/POPUP = 1-op-1 uit galerij_Backup.css
   ======================================================================= */

/* ---------- Variabelen ---------- */
:root{
  --bb-safe-top-header: 64px;   /* vaste header-hoogte */
  --bb-header-offset: 10px;     /* 10px omlaag (zoals op Voedselbos/Producten) */
}

/* ---------- Skelet + sticky footer ---------- */
body.bb-public{ min-height:100svh; display:flex; flex-direction:column; }
#bb-site-footer,#site-footer,footer#bb-site-footer{ margin-top:auto; }

/* ---------- Backdrop + dimlaag (LICHT) ---------- */
body.bb-public:not(.bb-front-lock) .bb-bos-honing-backdrop{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 360px at 50% 0%, rgb(0 0 0 / .16), transparent 70%),
    linear-gradient(to bottom,#dce9e2 0%,#cfe3d6 28%,#f3ede3 68%,#edd5a3 100%);
  background-repeat: no-repeat; background-size: cover; background-position: center top;
}
body.bb-public:not(.bb-front-lock) .bb-bijen-dimmer{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .14) 0%,
    rgb(0 0 0 / .10) 40%,
    rgb(0 0 0 / .06) 100%);
}

/* ---------- Header fixed + spiegelstrook (met 10px offset) ---------- */
body.bb-public .site-header,
body.bb-public .bb-site-header,
body.bb-public [data-bb="site-header"],
body.bb-front-lock .site-header,
body.bb-front-lock .bb-site-header,
body.bb-front-lock [data-bb="site-header"]{
  position: fixed; left: 0; right: 0; z-index: 1000;
  top: var(--bb-header-offset, 0px);
}
/* spiegelstroken starten op top:0 en hebben hoogte = offset + headerhoogte */
body.bb-public:not(.bb-front-lock)::before{
  content:""; position: fixed; top:0; left:0; right:0;
  height: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px));
  z-index: 900; pointer-events:none;
  background:
    radial-gradient(1100px 360px at 50% 0%, rgb(0 0 0 / .16), transparent 70%),
    linear-gradient(to bottom,#dce9e2 0%,#cfe3d6 28%,#f3ede3 68%,#edd5a3 100%);
  background-repeat:no-repeat; background-size:100% 100vh; background-position:center top;
}
body.bb-public:not(.bb-front-lock)::after{
  content:""; position: fixed; top:0; left:0; right:0;
  height: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px));
  z-index: 901; pointer-events:none;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / .14) 0%,
    rgb(0 0 0 / .10) 40%,
    rgb(0 0 0 / .06) 100%);
  background-repeat:no-repeat; background-size:100% 100vh; background-position:center top;
}
body.bb-front-lock::before, body.bb-front-lock::after{ content:none !important; }
.bb-header-veil, .bb-header-spacer{ display:none !important; }

/* ---------- Lichte GLAS-container voor de pagina ---------- */
/* Dek álle varianten af die in je DOM kunnen staan */
main.bb-bijen,
main.bb-galerij,
.bb-galerij__wrap{
  position:relative; z-index:2;
  width:1120px; max-width:calc(100% - 2 * clamp(16px,4vw,24px));
  margin: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px)) auto 56px;
  padding:0 clamp(16px,4vw,24px) 120px;
  box-sizing:border-box;
  color:#1a1a1a;
  border-radius:22px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.14) 0%, rgba(255,255,255,.10) 55%, rgba(247,246,243,.78) 100%);
  -webkit-backdrop-filter: blur(8px) saturate(1.02);
  backdrop-filter: blur(8px) saturate(1.02);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.06);
  background-clip: padding-box;
}
main.bb-bijen::before,
main.bb-galerij::before,
.bb-galerij__wrap::before{
  content:""; position:absolute; left:10px; right:10px; top:8px; height:1px; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
main.bb-bijen h1,
main.bb-galerij h1,
.bb-galerij__wrap h1{ margin:0 0 10px; font-size:clamp(26px,3vw,44px); font-weight:800; color:#1a1a1a; }
/* anchors landen netjes net onder de 10px + header */
body.bb-public main.bb-bijen :where(h1,h2,h3,h4,h5,h6),
body.bb-public main.bb-galerij :where(h1,h2,h3,h4,h5,h6),
body.bb-public .bb-galerij__wrap :where(h1,h2,h3,h4,h5,h6){
  scroll-margin-top: calc(var(--bb-header-offset,0px) + var(--bb-safe-top-header, 64px));
}

/* =======================================================================
   GALERIJ — grid + chips (zoals backup)
   ======================================================================= */

/* ---------------- Filterchips (unified met productknoppen) ---------------- */
.bb-galerij .bb-gal-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px;
}

/* Basischip */
.bb-galerij .bb-chip{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  color:inherit; text-decoration:none;
  font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,.12) inset, 0 4px 12px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease, background-color .12s ease;
  position:relative; /* nodig voor underline-balkje */
}
.bb-galerij .bb-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(183,131,13,.5);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

/* Actieve chip (ring + gloed) */
.bb-galerij .bb-chip.is-active{
  border-color: rgba(183,131,13,.55);
  box-shadow:
    0 0 0 2px rgba(183,131,13,.20),
    0 8px 18px rgba(0,0,0,.14) inset,
    0 6px 16px rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.46));
}

/* Actieve underline — exact als backup */
.bb-galerij .bb-chip.is-active::after{
  content:"";
  position:absolute;
  left:11px !important;     /* 2px extra links  */
  right:11px !important;    /* 2px extra rechts */
  bottom:2px !important;    /* 1px lager        */
  height:2px !important;    /* 2px underline    */
  background: currentColor !important;
  border-radius:1px;
  pointer-events:none;
  z-index: 1;
}

/* ---------------- Rechthoekig grid voor thumbs ---------------- */
.bb-galerij .bb-honey{
  --card-min: 180px;
  --gap: 14px;
  list-style:none; margin:16px auto 22px; padding:0;
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  justify-content:stretch; align-items:stretch;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.06));
}
.bb-galerij .bb-hex{
  margin:0; position:relative;
  content-visibility:auto; contain-intrinsic-size:220px 170px;
}
.bb-galerij .bb-gal-link{
  display:block; position:relative;
  border-radius:14px; overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
  will-change: transform;
}
.bb-galerij .bb-gal-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.bb-galerij .bb-gal-link img{
  display:block; width:100%; height:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Titel-overlay NIET tonen op hover; alleen bij keyboard-focus (a11y) */
.bb-galerij .bb-gal-title{
  position:absolute; inset:auto 0 0 0;
  padding:6px 10px;
  font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial; color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.88));
  border-top:1px solid rgba(0,0,0,.10);
  opacity:0; transition:opacity .16s ease;
}
.bb-galerij .bb-gal-link:focus-visible .bb-gal-title{ opacity:.98; }

/* Focusring voor tegels */
.bb-galerij .bb-gal-link:focus-visible{
  outline: 3px solid rgba(183,131,13,.85);
  outline-offset: 3px;
}

/* =======================================================================
   LIGHTBOX / OVERLAY (glaslook) — 1:1 UIT BACKUP
   ======================================================================= */
body.bb-modal-open{ overflow:hidden; }

/* Donkere glas-sluier */
:root .bb-gal-overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,2vw,20px);
  background: rgba(8,10,12,.45);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  z-index:4000; opacity:1; transition:opacity .18s ease;
}
.bb-gal-overlay[hidden]{ display:none !important; }

/* Stage/figuur */
.bb-gal-stage, .bb-gal-figure{
  position:relative; margin:0;
  max-width:min(92vw,1400px); max-height:min(80dvh,86vh);
  border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background: rgba(20,24,28,.35);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

/* Afbeelding */
.bb-gal-full{
  display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
}

/* Infobalk (teller + caption) */
.bb-gal-bar{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45);
  color:#111;
}
.bb-gal-count{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:28px; padding:0 10px; border-radius:999px;
  font:800 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background: rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.18);
}
.bb-gal-index,.bb-gal-total{ display:inline-block; }
.bb-gal-caption{
  flex:1 1 auto; min-width:0;
  font:700 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Pijlen — slank, glas */
.bb-gal-prev, .bb-gal-next{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  color:#111; font:900 22px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease, color .12s ease;
}
.bb-gal-prev{ left:12px; }
.bb-gal-next{ right:12px; }
.bb-gal-prev:hover, .bb-gal-next:hover{
  transform:translateY(calc(-50% - 1px));
  border-color: rgba(183,131,13,.55); color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}

/* Sluitknop — glas */
.bb-gal-close{
  position:absolute; right:12px; top:12px; z-index:5;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  color:#111; font:900 20px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease, color .12s ease;
}
.bb-gal-close:hover{
  transform: translateY(-1px);
  border-color: rgba(183,131,13,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.34);
}

/* Minder beweging bij reduce motion */
@media (prefers-reduced-motion: reduce){
  .bb-galerij .bb-gal-link, .bb-galerij .bb-chip,
  .bb-gal-prev, .bb-gal-next, .bb-gal-close{ transition:none !important; }
  .bb-galerij .bb-gal-link:hover{ transform:none !important; }
}