/* Gallery filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:0 56px;width:100%;max-width:1600px;margin:0 auto 40px}
.filter{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--line);border-radius:999px;
  color:var(--steel);transition:all .3s ease;
}
.filter:hover{border-color:var(--navy);color:var(--navy)}
.filter:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.filter.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.filter .count{opacity:.5;margin-left:8px}

/* Grid */
.gallery-grid{
  width:100%;max-width:1600px;margin:0 auto;
  padding:0 56px 120px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
  grid-auto-rows:120px;
}
.tile{
  position:relative;overflow:hidden;border-radius:2px;
  background:var(--navy);cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  will-change:transform;
}
.tile.hidden{display:none}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(8,15,28,.85));
  opacity:.8;transition:opacity .5s ease;z-index:2;
}
.tile:hover::after{opacity:1}
.tile:hover{transform:translateY(-4px)}
.tile:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tile .art{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.tile .meta{position:absolute;left:22px;right:22px;bottom:20px;z-index:3;color:#fff}
.tile .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:8px}
.tile .title{font-size:20px;font-weight:500;line-height:1.15;letter-spacing:-.015em;max-width:20ch}
.tile .loc{margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.tile .badge{
  position:absolute;top:18px;left:18px;z-index:3;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 10px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);border-radius:2px;color:#fff;
}
.tile .num{
  position:absolute;top:18px;right:18px;z-index:3;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.55);
}

/* tile sizes */
.tile.t-lg{grid-column:span 6;grid-row:span 4}
.tile.t-md{grid-column:span 4;grid-row:span 3}
.tile.t-sm{grid-column:span 3;grid-row:span 2}
.tile.t-wide{grid-column:span 8;grid-row:span 2}
.tile.t-tall{grid-column:span 3;grid-row:span 4}

/* Art backgrounds: stylized placeholders for different project types */
.art-panel{background:
  linear-gradient(145deg, rgba(14,34,64,.85), rgba(14,34,64,.4) 50%, rgba(107,117,131,.3)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
  #0e2240}
.art-ev{background:
  radial-gradient(circle at 35% 40%, rgba(199,161,74,.2), transparent 50%),
  linear-gradient(155deg, #142a4d, #0b1220),
  #0e2240}
.art-lighting{background:
  radial-gradient(circle at 25% 30%, rgba(255,255,255,.2), transparent 35%),
  radial-gradient(circle at 75% 40%, rgba(255,255,255,.15), transparent 35%),
  radial-gradient(circle at 50% 80%, rgba(255,255,255,.1), transparent 40%),
  linear-gradient(180deg, #0b1220, #0e2240)}
.art-commercial{background:
  linear-gradient(180deg, rgba(14,34,64,.4), rgba(14,34,64,.9)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 40px, transparent 40px 42px),
  #142a4d}
.art-reno{background:
  linear-gradient(135deg, rgba(107,117,131,.4), rgba(14,34,64,.7)),
  repeating-linear-gradient(30deg, rgba(255,255,255,.04) 0 1px, transparent 1px 20px)}
.art-exterior{background:
  linear-gradient(180deg, rgba(14,34,64,.2) 0%, rgba(14,34,64,.9) 100%),
  radial-gradient(ellipse at 50% 100%, rgba(199,161,74,.25), transparent 60%),
  #0b1220}
.art-emergency{background:
  linear-gradient(135deg, #0e2240, #1a0e0e),
  radial-gradient(ellipse at 80% 20%, rgba(255,80,80,.2), transparent 40%)}

/* Decorative SVG overlays inside tiles */
.tile .deco{position:absolute;inset:0;z-index:1;opacity:.35;pointer-events:none}

@media (max-width:960px){
  .filters{padding:0 24px}
  .gallery-grid{padding:0 24px 80px;grid-auto-rows:100px}
  .tile.t-lg, .tile.t-md, .tile.t-wide{grid-column:span 12}
  .tile.t-sm, .tile.t-tall{grid-column:span 6}
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,15,28,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;transition:opacity .25s ease;
  padding:60px;
}
.lightbox.open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox-img{
  max-width:92vw;max-height:78vh;
  object-fit:contain;
  display:block;
  transition:opacity .18s ease;
}
.lightbox-caption{
  position:absolute;bottom:32px;left:0;right:0;
  text-align:center;color:#fff;
  padding:0 60px;
}
.lightbox-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:8px;
}
.lightbox-heading{
  font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.015em;
  max-width:60ch;margin:0 auto;
}
.lightbox-loc{
  margin-top:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.lightbox-counter{
  position:absolute;top:24px;right:32px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.55);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;
  border-radius:2px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.35);
}
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}
.lightbox-close{top:24px;left:32px;font-size:28px}
.lightbox-prev{left:32px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:32px;top:50%;transform:translateY(-50%)}
.lightbox-prev:hover{transform:translateY(-50%) translateX(-2px)}
.lightbox-next:hover{transform:translateY(-50%) translateX(2px)}

@media (max-width: 760px){
  .lightbox{padding:24px}
  .lightbox-img{max-height:62vh}
  .lightbox-caption{padding:0 24px;bottom:20px}
  .lightbox-heading{font-size:18px}
  .lightbox-close, .lightbox-prev, .lightbox-next{width:56px;height:56px;font-size:28px}
  .lightbox-close{top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));font-size:32px}
  .lightbox-prev{left:max(12px, env(safe-area-inset-left))}
  .lightbox-next{right:max(12px, env(safe-area-inset-right))}
  .lightbox-counter{top:max(20px, calc(env(safe-area-inset-top) + 8px));right:max(20px, calc(env(safe-area-inset-right) + 8px))}
}

@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox-img,
  .lightbox-close, .lightbox-prev, .lightbox-next{
    transition:none !important;
  }
  .lightbox-prev:hover, .lightbox-next:hover{transform:translateY(-50%)}
}