/* Shared photo carousel + fullscreen lightbox. Used by project and research-site pages. Carousel lives inside #projectPage or #baarnSite (CSS vars inherit); the lightbox is appended to . */ /* ---- Carousel ---- */ .pj-carousel{position:relative;margin:6px 0 0} .pj-carousel .pj-viewport{overflow:hidden;border-radius:8px} .pj-carousel .pj-track{display:flex;gap:0;transition:transform .4s cubic-bezier(.22,.61,.36,1);will-change:transform} .pj-carousel .pj-slide{flex:0 0 100%;min-width:100%;margin:0} .pj-carousel .pj-shot{display:block;width:100%;padding:0;border:0;background:#eef1ed;cursor:zoom-in;border-radius:8px;overflow:hidden} .pj-carousel .pj-shot img{width:100%;height:clamp(260px,46vw,520px);object-fit:cover;display:block} .pj-carousel .pj-slide figcaption{font-size:13.5px;line-height:1.5;color:#5b656e;margin:10px 2px 0} .pj-carousel .pj-nav{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#1d3a26;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(34,40,49,.18);display:flex;align-items:center;justify-content:center} .pj-carousel .pj-nav:hover{background:#fff} .pj-carousel .pj-prev{left:12px} .pj-carousel .pj-next{right:12px} .pj-carousel .pj-dots{display:flex;justify-content:center;gap:8px;margin:14px 0 0} .pj-carousel .pj-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#dfe3e6;cursor:pointer} .pj-carousel .pj-dot[aria-current="true"]{background:#2A5235} .pj-act-note{font-size:16px;line-height:1.7;color:#33372f;margin:16px 0 0} /* ---- Lightbox ---- */ .pj-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center} .pj-lb.is-open{display:flex} .pj-lb-backdrop{position:absolute;inset:0;background:rgba(15,20,17,.92)} .pj-lb-fig{position:relative;margin:0;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:12px} .pj-lb-fig img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:6px;background:#111} .pj-lb-fig figcaption{color:#eef1ed;font:400 14.5px/1.5 "Figtree",system-ui,sans-serif;text-align:center;max-width:70ch} .pj-lb-close,.pj-lb-full{position:absolute;top:18px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center} .pj-lb-close{right:18px;font-size:26px;line-height:1} .pj-lb-close:hover,.pj-lb-full:hover{background:rgba(255,255,255,.28)} .pj-lb-full{right:70px} .pj-lb-full:before{content:"";width:16px;height:16px;border:2px solid #fff;border-radius:2px} .pj-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:50px;height:50px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer} .pj-lb-nav:hover{background:rgba(255,255,255,.28)} .pj-lb-prev{left:2vw} .pj-lb-next{right:2vw} .pj-lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#cfd6cf;font:600 13px/1 "Figtree",system-ui,sans-serif;letter-spacing:.04em} .pj-lb:fullscreen{background:#0f1411} @media(max-width:620px){ .pj-lb-nav{width:40px;height:40px;font-size:24px} .pj-lb-full{display:none} }