/* /gallery.html */
.gl-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.gl-job { margin: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.gl-job figcaption { padding: var(--space-3) var(--space-4); font: 500 14px/20px var(--font-mono); color: var(--ink-muted); }
.gl-job figcaption b { color: var(--ink); font-weight: 600; }
.gl-view { position: fixed; inset: 0; z-index: 100; background: rgba(12, 9, 10, .96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4); }
.gl-view[hidden] { display: none !important; }


.gl-filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.gl-filters[hidden] { display: none !important; }
.gl-field { display: grid; gap: 6px; min-width: 0; }
.gl-field input, .gl-field select { width: 100%; min-height: 48px; padding: 0 12px; background: var(--surface-raised); color: var(--ink); border: 0; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--line-strong); font: 16px/22px var(--font-sans); color-scheme: dark; box-sizing: border-box; }
.gl-field input:focus, .gl-field select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.gl-count { margin: 0 0 var(--space-5); }
.gl-count button { background: none; border: 0; padding: 0; color: var(--redline-text); font: inherit; text-decoration: underline; cursor: pointer; }
.gl-job figcaption small { display: block; color: var(--ink-muted); }
@media (max-width: 720px) { .gl-filters { grid-template-columns: 1fr 1fr; } .gl-field--q { grid-column: 1 / -1; } }

/* one photo per card; with a before photo: after first, a Before / After switch, and a divider */
.gl-photo { --split: 0%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-raised); cursor: zoom-in; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.gl-ba__before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.gl-ba.is-anim .gl-ba__before { transition: clip-path .35s ease; }
.gl-ba__line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--redline); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; }
.gl-ba.is-moving .gl-ba__line { opacity: 1; }
.gl-ba.is-anim .gl-ba__line { transition: left .35s ease, opacity .35s; }
.gl-ba__badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; font: 600 11px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; background: rgba(12, 9, 10, .8); color: var(--ink); pointer-events: none; }
.gl-ba__switch { position: absolute; right: 8px; bottom: 8px; display: flex; background: rgba(12, 9, 10, .85); box-shadow: inset 0 0 0 1px var(--line-strong); }
.gl-ba__switch button { min-width: 72px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gl-ba__switch button[aria-pressed="true"] { background: var(--redline); color: var(--on-redline); }
.gl-ba__switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.gl-stage { width: min(100%, calc((100vh - 140px) * 4 / 3)); }
.gl-stage .gl-photo { cursor: default; }
.gl-stage__cap { margin: var(--space-2) 0 0; font: 500 14px/20px var(--font-mono); color: var(--ink-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gl-ba.is-anim .gl-ba__before, .gl-ba.is-anim .gl-ba__line { transition: none; } }
/* one card per job: a small carousel when the job has several photos */
.gl-car { position: relative; }
.gl-car:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-slide[hidden] { display: none !important; }
.gl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 56px; border: 0; padding: 0; background: rgba(12, 9, 10, .72);
  color: var(--ink); font: 400 34px/1 var(--font-sans); cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.gl-nav:hover { background: var(--redline); color: var(--on-redline); }
.gl-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.gl-nav--prev { left: 0; }
.gl-nav--next { right: 0; }
.gl-count-badge { position: absolute; right: 8px; top: 8px; padding: 2px 8px; z-index: 2; background: rgba(12, 9, 10, .8); color: var(--ink); font: 600 12px/18px var(--font-mono); pointer-events: none; }
.gl-stage .gl-nav { width: 52px; height: 72px; }