/* ==========================================================================
   Project photo gallery (used on Home and Our Projects)
   - Each project is one <figure class="project"> block. Copy, paste, delete freely.
   - A block whose photo is missing automatically shows a neat placeholder.
   - To hide every empty placeholder on the live site, uncomment the next line:
   ========================================================================== */
/* .gallery .project.is-empty{display:none} */

.gallery{--cols:3;--gap:28px;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap)}
.gallery.cols-2{--cols:2}.gallery.cols-4{--cols:4}
.project{margin:0;position:relative}
.project.is-wide{grid-column:span 2}
.project.is-hidden{display:none}

.photo-slot{display:block;width:100%;padding:0;border:0;background:var(--tint-2);position:relative;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in}
.project.is-wide .photo-slot{aspect-ratio:8/3.2}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.photo-slot:hover img{transform:scale(1.045)}
/* orange corner cut, like the logo's slash */
.photo-slot::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:8px;background:var(--grad);transform-origin:left;transition:width .4s}
.photo-slot:hover::after{width:100%}

/* placeholder shown when no photo is present */
.project.is-empty .photo-slot{cursor:default;background-color:#fff;background-image:linear-gradient(rgba(138,110,75,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(138,110,75,.16) 1px,transparent 1px);background-size:32px 32px;border:1.5px dashed var(--bronze)}
.photo-empty{display:none;position:absolute;inset:0;place-content:center;justify-items:center;gap:8px;text-align:center;color:var(--bronze-deep);font-weight:700;font-size:.95rem}
.project.is-empty .photo-empty{display:grid}
.photo-empty svg{width:40px;height:40px}
.project.is-empty .photo-slot::after{display:none}

.project figcaption{padding-top:16px;display:grid;gap:2px}
.project figcaption strong{font-family:var(--font-display);font-stretch:108%;font-weight:720;font-size:1.15rem;color:var(--ink);line-height:1.2}
.project figcaption span{color:var(--ink-soft);font-size:.95rem}
.project .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{display:inline-block;background:var(--tint-2);color:var(--bronze-deep);font-weight:700;font-size:.8rem;padding:3px 10px;transform:skewX(-12deg)}
.tag>*{display:inline-block;transform:skewX(12deg)}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(20,18,17,.82)}
.lightbox img{max-height:80vh;width:auto;max-width:100%;margin:auto;border:6px solid #fff}
.lightbox p{color:#fff;text-align:center;margin:12px auto 0;font-weight:600}
.lightbox button{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--grad);color:var(--dark);font-size:1.4rem;font-weight:800;cursor:pointer}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.filters button{background:#fff;border:1.5px solid var(--line);color:var(--bronze-deep);font-weight:700;padding:10px 20px;cursor:pointer;transition:.2s;border-radius:var(--radius)}
.filters button:hover{border-color:var(--bronze)}
.filters button[aria-pressed=true]{background:var(--grad);border-color:transparent;color:var(--dark)}

@media(max-width:960px){.gallery,.gallery.cols-4{--cols:2}.project.is-wide{grid-column:span 2}}
@media(max-width:600px){.gallery,.gallery.cols-2,.gallery.cols-4{--cols:1}.project.is-wide{grid-column:auto}.project.is-wide .photo-slot{aspect-ratio:4/3}}

/* ---- advanced polish ---- */
.photo-slot::after{height:6px}
.project{transition:transform .4s var(--ease)}.project:hover{transform:translateY(-6px)}
.photo-slot{box-shadow:0 18px 40px rgba(20,18,17,.12)}
.project figcaption strong{color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--dark);color:#fff}
.lightbox::backdrop{background:rgba(20,18,17,.9);backdrop-filter:blur(6px)}