/* Gallery page + "Our work" photo strips (home, projects, application pages). No external deps. */
.gal-section{ padding:40px 0 80px; }
.gal-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.gal-tab{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  padding:10px 14px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  cursor:pointer; border-radius:var(--radius-sm); min-height:42px; display:inline-flex; align-items:center; gap:8px;
}
[dir="rtl"] .gal-tab{ font-family:var(--font-body); letter-spacing:0; font-size:14px; }
.gal-tab:hover{ border-color:var(--oxide); }
.gal-tab.is-active{ background:var(--oxide); border-color:var(--oxide); color:#fff; }
.gal-tab-n{ font-size:11px; opacity:.75; }
.gal-tab:focus-visible, .gal-link:focus-visible, .work-item:focus-visible{ outline:2px solid var(--oxide); outline-offset:3px; }
.gal-count{ font-size:13px; color:var(--ink-muted); margin:6px 0 18px; }
.gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gal-item{ display:flex; flex-direction:column; margin:0; background:var(--surface); border:1px solid var(--line); }
.gal-item[hidden]{ display:none; }
.gal-link{ display:block; position:relative; overflow:hidden; aspect-ratio:4/5; background:#E4E3DE; cursor:zoom-in; }
.gal-link picture{ position:absolute; inset:0; display:block; }
.gal-link img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; transition:opacity .2s; }
.gal-link:hover img{ opacity:.92; }
.gal-item figcaption{ font-size:12.5px; color:var(--ink-muted); padding:8px 10px 10px; line-height:1.4; }
@media (max-width:960px){ .gal-grid{ grid-template-columns:repeat(3,1fr); } }
.gal-cta{ margin-top:36px; background:var(--steel-dark); color:var(--on-dark); padding:28px 30px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.gal-cta h2{ color:var(--on-dark); font-size:24px; text-transform:none; letter-spacing:0; margin-bottom:6px; }
.gal-cta p{ color:var(--on-dark-muted); max-width:56ch; font-size:14.5px; }
.gal-cta-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.gal-cta .btn-ghost{ color:var(--on-dark); border-color:rgba(255,255,255,.35); }
@media (max-width:560px){ .gal-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .gal-item figcaption{ font-size:11.5px; } }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:1000; background:rgba(12,13,15,.94); display:none; align-items:center; justify-content:center; touch-action:pan-y; }
.lb.is-open{ display:flex; }
.lb-figure{ margin:0; max-width:min(92vw,1400px); max-height:88vh; display:flex; flex-direction:column; align-items:center; }
.lb-figure img{ max-width:100%; max-height:calc(88vh - 48px); width:auto; height:auto; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
.lb-cap{ color:#E9E7E2; font-size:14px; margin-top:12px; text-align:center; padding:0 60px; }
.lb-cap small{ color:#9CA0A6; margin-inline-start:10px; font-family:var(--font-mono); }
.lb-btn{ position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; }
.lb-btn:hover, .lb-btn:focus-visible{ background:var(--oxide); border-color:var(--oxide); outline:none; }
.lb-close{ top:16px; inset-inline-end:16px; }
.lb-prev{ inset-inline-start:16px; top:50%; transform:translateY(-50%); }
.lb-next{ inset-inline-end:16px; top:50%; transform:translateY(-50%); }
[dir="rtl"] .lb-prev span, [dir="rtl"] .lb-next span{ display:inline-block; transform:scaleX(-1); }
@media (max-width:640px){ .lb-prev, .lb-next{ top:auto; bottom:16px; transform:none; } .lb-cap{ padding:0 12px 70px; font-size:13px; } }
body.lb-lock{ overflow:hidden; }

/* photo strips */
.work-strip{ padding:64px 0; }
.work-head{ align-items:flex-end; }
.work-head p{ color:var(--ink-muted); max-width:60ch; margin-top:8px; }
.work-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.work-strip--projects .work-grid, .work-strip--app .work-grid{ grid-template-columns:repeat(4,1fr); }
.work-strip--projects .work-grid{ grid-template-columns:repeat(6,1fr); }
.work-item{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); color:var(--ink); transition:border-color .15s; }
.work-item:hover{ border-color:var(--oxide); }
.work-item picture{ display:block; position:relative; overflow:hidden; aspect-ratio:3/4; background:#E4E3DE; }
.work-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.work-item span{ font-size:12px; color:var(--ink-muted); padding:8px 10px; line-height:1.35; }
@media (max-width:960px){ .work-grid, .work-strip--projects .work-grid{ grid-template-columns:repeat(3,1fr); } .work-strip--app .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .work-grid, .work-strip--projects .work-grid, .work-strip--app .work-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } .work-strip{ padding:44px 0; } }
@media (max-width:520px){ body[data-page="gallery"] .page-header h1{ overflow-wrap:anywhere; } }