/* DOEE — /projecten/ only (REFINE-3 I2). Loaded AFTER site.css, linked ONLY from
   projecten/index.html. Asymmetric glass photo gallery + accessible lightbox.
   Glass recipe matches the site's existing one (see site.css .g-reviews): solid/
   near-solid fallback first, translucent + blur under @supports, dark-on-photo. */

/* ---------- section intro ---------- */
.proj-lead{color:var(--muted);margin-top:-6px}

/* ---------- gallery: asymmetric masonry-ish grid ---------- */
.gallery-grid.proj-masonry{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
  grid-auto-flow:dense;
  gap:14px;
}
.proj-masonry .g-card{
  position:relative;display:block;width:100%;height:100%;margin:0;padding:0;
  border:0;background:var(--black-2);border-radius:var(--r-md);overflow:hidden;
  cursor:pointer;text-align:left;font:inherit;color:inherit;
  grid-column:span 1;grid-row:span 1;
}
.proj-masonry .g-card.g-tall{grid-row:span 2}
.proj-masonry .g-card.g-feature{grid-column:span 2;grid-row:span 2}
.proj-masonry .g-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;display:block}
.proj-masonry .g-card__overlay{
  position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  /* Stops raised from .14/.82: measured against the brightest caption backdrops
     in the real gallery, the old ramp left #fff captions at 3.30-3.67:1. */
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.42) 38%,rgba(11,11,12,.94) 100%);
}
.proj-masonry .g-card__tag{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(11,11,12,.55);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:4px 11px;
}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .proj-masonry .g-card__tag{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
}
.proj-masonry .g-card__cap{
  margin:0;color:#fff;font-size:.82rem;font-weight:600;line-height:1.3;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.proj-masonry .g-card.g-feature .g-card__cap,.proj-masonry .g-card.g-tall .g-card__cap{font-size:.96rem;-webkit-line-clamp:3}
.proj-masonry .g-card__zoom{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(11,11,12,.5);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;color:#fff;
  opacity:0;transform:translateY(-4px);
}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .proj-masonry .g-card__zoom{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.proj-masonry .g-card:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .proj-masonry .g-card img{transition:transform .5s ease}
  .proj-masonry .g-card__zoom{transition:opacity .2s ease,transform .2s ease}
  .proj-masonry .g-card:hover img,.proj-masonry .g-card:focus-visible img{transform:scale(1.06)}
  .proj-masonry .g-card:hover .g-card__zoom,.proj-masonry .g-card:focus-visible .g-card__zoom{opacity:1;transform:none}
}
@media (hover:none){
  .proj-masonry .g-card__zoom{opacity:1;transform:none}
}
@media (max-width:900px){
  .gallery-grid.proj-masonry{grid-template-columns:repeat(3,1fr);grid-auto-rows:128px}
}
@media (max-width:600px){
  .gallery-grid.proj-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:118px;gap:10px}
  .proj-masonry .g-card__overlay{padding:22px 11px 10px}
  .proj-masonry .g-card__cap{font-size:.76rem}
  .proj-masonry .g-card.g-feature .g-card__cap,.proj-masonry .g-card.g-tall .g-card__cap{font-size:.84rem}
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  padding:26px;background:rgba(8,8,9,.92);opacity:0;
}
.lightbox.is-rendered{display:flex}
.lightbox.is-open{opacity:1}
@media (prefers-reduced-motion:no-preference){.lightbox{transition:opacity .25s ease}}
.lightbox__dialog{
  position:relative;width:100%;max-width:1000px;max-height:calc(100svh - 52px);
  display:flex;flex-direction:column;outline:none;transform:scale(.96);
}
.lightbox.is-open .lightbox__dialog{transform:scale(1)}
@media (prefers-reduced-motion:no-preference){.lightbox__dialog{transition:transform .25s ease}}
.lightbox__stage{
  position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;background:var(--black-2);
}
.lightbox__img{max-width:100%;max-height:calc(100svh - 196px);width:auto;height:auto;object-fit:contain;display:block}
.lightbox__close,.lightbox__nav{
  border:1px solid rgba(255,255,255,.28);background:rgba(11,11,12,.55);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .lightbox__close,.lightbox__nav{-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
}
.lightbox__close{position:absolute;top:12px;right:12px;width:40px;height:40px;z-index:3}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;z-index:2}
.lightbox__nav--prev{left:14px}
.lightbox__nav--next{right:14px}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--orange);border-color:var(--orange);color:#0B0B0C}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.lightbox__caption{
  background:rgba(17,17,18,.86);border:1px solid rgba(255,255,255,.12);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);padding:16px 22px 18px;color:#fff;
}
@supports ((-webkit-backdrop-filter:blur(4px)) or (backdrop-filter:blur(4px))){
  .lightbox__caption{background:rgba(17,17,18,.6);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
}
.lightbox__tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.lightbox__caption p{margin:0;font-size:.94rem;color:#EDEDED}
.lightbox__count{display:block;margin-top:8px;font-size:.78rem;color:#9C9C9C}
@media (max-width:600px){
  .lightbox{padding:14px}
  .lightbox__close{top:8px;right:8px;width:36px;height:36px}
  .lightbox__nav{width:40px;height:40px}
  .lightbox__nav--prev{left:6px}
  .lightbox__nav--next{right:6px}
  .lightbox__img{max-height:calc(100svh - 236px)}
  .lightbox__caption{padding:14px 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .lightbox,.lightbox__dialog{transition:none}
}