/* ===================================================================
   MFAZA — PROJECT GALLERY layouts (project-details variants). After style.css.
   All dark. bento · filmstrip · lightbox grid · carousel · stacked
   =================================================================== */

/* ---------- A) BENTO ---------- */
.gal-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.gal-bento .gb{position:relative;overflow:hidden;background:var(--bg-2)}
.gal-bento .gb img{width:100%;height:100%;object-fit:cover;filter:grayscale(12%);transition:transform 1.2s var(--ease),filter .6s}
.gal-bento .gb:hover img{transform:scale(1.05);filter:none}
.gal-bento .gb.w2{grid-column:span 2}
.gal-bento .gb.h2{grid-row:span 2}
@media(max-width:980px){.gal-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.gal-bento .gb.w2{grid-column:span 2}}
@media(max-width:560px){.gal-bento{grid-template-columns:1fr;grid-auto-rows:230px}.gal-bento .gb.w2{grid-column:span 1}.gal-bento .gb.h2{grid-row:span 1}}

/* ---------- B) FILMSTRIP (horizontal scroll-snap) ---------- */
.gal-strip-wrap{position:relative}
.gal-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin}
.gal-strip::-webkit-scrollbar{height:6px}
.gal-strip::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.gal-strip .gs{flex:0 0 min(76vw,820px);scroll-snap-align:center;position:relative;margin:0;overflow:hidden;background:var(--bg-2);aspect-ratio:16/10}
.gal-strip .gs img{width:100%;height:100%;object-fit:cover;filter:grayscale(10%)}
.gal-strip .gs figcaption{position:absolute;left:18px;bottom:16px;font-family:var(--display);font-size:12px;letter-spacing:.18em;color:var(--text);background:rgba(17,17,17,.66);padding:7px 13px}
.gal-strip__hint{margin-top:14px;font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------- C) LIGHTBOX GRID ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-grid .gg{position:relative;overflow:hidden;background:var(--bg-2);border:none;padding:0;cursor:pointer;aspect-ratio:4/3}
.gal-grid .gg img{width:100%;height:100%;object-fit:cover;filter:grayscale(14%);transition:transform 1.1s var(--ease),filter .5s}
.gal-grid .gg::after{content:"+";position:absolute;top:12px;right:14px;color:#fff;font-family:var(--display);font-weight:300;font-size:22px;opacity:0;transition:opacity .4s}
.gal-grid .gg:hover img{transform:scale(1.05);filter:none}
.gal-grid .gg:hover::after{opacity:.9}
@media(max-width:880px){.gal-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gal-grid{grid-template-columns:1fr}}
/* lightbox overlay */
.gal-lb{position:fixed;inset:0;z-index:1000;background:rgba(8,8,8,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.gal-lb.open{opacity:1;visibility:visible}
.gal-lb img{max-width:90vw;max-height:82vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gal-lb__close{position:absolute;top:22px;right:26px;background:none;border:none;color:#fff;font-size:30px;cursor:pointer;font-family:var(--display);font-weight:200;line-height:1}
.gal-lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:54px;height:54px;border-radius:50%;cursor:pointer;font-size:20px;transition:.35s}
.gal-lb__nav:hover{background:var(--accent);border-color:var(--accent);color:#111}
.gal-lb__nav.prev{left:24px}.gal-lb__nav.next{right:24px}
.gal-lb__count{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-family:var(--display);font-size:12px;letter-spacing:.2em}
@media(max-width:560px){.gal-lb__nav{width:44px;height:44px}}

/* ---------- D) CAROUSEL ---------- */
.gal-car__stage{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:16/9}
.gal-car__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform 7s var(--ease);transform:scale(1.05)}
.gal-car__img.show{opacity:1;transform:scale(1)}
.gal-car__nav{position:absolute;right:18px;top:18px;z-index:2;display:flex;gap:10px}
.gal-car__count{position:absolute;left:20px;bottom:18px;z-index:2;color:#fff;font-family:var(--display);font-size:12px;letter-spacing:.2em;background:rgba(17,17,17,.6);padding:7px 13px}
.gal-car__thumbs{display:flex;gap:10px;overflow-x:auto;margin-top:14px;padding-bottom:8px}
.gal-car__thumbs button{flex:0 0 auto;width:104px;height:68px;padding:0;border:1px solid var(--line);background:none;cursor:pointer;overflow:hidden;opacity:.5;transition:.4s}
.gal-car__thumbs button img{width:100%;height:100%;object-fit:cover}
.gal-car__thumbs button.active{opacity:1;border-color:var(--accent)}

/* ---------- E) STACKED (alternating full rows) ---------- */
.gal-stack{display:flex;flex-direction:column;gap:clamp(36px,5vw,80px)}
.gal-stack .gst{position:relative;margin:0;display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(20px,3vw,44px);align-items:end}
.gal-stack .gst.rev{grid-template-columns:.9fr 1.6fr}
.gal-stack .gst.rev .gimg{order:2}
.gal-stack .gimg{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:16/10}
.gal-stack .gimg img{width:100%;height:100%;object-fit:cover;filter:grayscale(10%);transition:transform 1.3s var(--ease)}
.gal-stack .gst:hover .gimg img{transform:scale(1.04)}
.gal-stack figcaption{font-family:var(--display);font-weight:200;text-transform:uppercase;letter-spacing:.04em;padding-bottom:8px}
.gal-stack figcaption .n{display:block;font-family:var(--serif);font-size:clamp(34px,4vw,64px);color:transparent;-webkit-text-stroke:1px var(--accent);line-height:.9;margin-bottom:10px}
.gal-stack figcaption .t{font-size:clamp(15px,1.3vw,19px)}
.gal-stack figcaption small{display:block;text-transform:none;letter-spacing:0;font-family:var(--body);color:var(--muted);font-size:13px;margin-top:8px}
@media(max-width:760px){.gal-stack .gst,.gal-stack .gst.rev{grid-template-columns:1fr;gap:14px}.gal-stack .gst.rev .gimg{order:0}}