/* gallery.css | jasonguffy.com
   Shared gallery layer: lightbox (js/lightbox.js), filter chips, and cross-document
   view transitions. Loaded only on gallery pages (those with .portfolio-item / #filters),
   alongside js/lightbox.js. Consolidated out of 8 duplicated per-page inline <style> blocks
   on 2026-06-16; behavior is identical to those blocks. Loads after style.css so the
   header z-index here (40) intentionally overrides style.css on gallery pages only. */

@view-transition { navigation: auto; }                                   /* #1 page transitions */
::view-transition-old(root),::view-transition-new(root){ animation-duration:.4s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
.navbar{ view-transition-name: site-header; }                            /* header stays put while the page cross-fades */

header{ position:sticky; top:0; z-index:40; background:#fff; }           /* sticky nav; the filter row below scrolls away */

/* #4 filter chips: quiet uppercase text, active gets a hairline underline */
.filters{ display:flex; gap:22px; padding:6px 50px 2px; flex-wrap:wrap; }
.filters button{ font:500 11.5px/1 'Sohne Kraftig','Helvetica Neue',Arial,sans-serif; letter-spacing:.9px; text-transform:uppercase; background:none; border:0; color:#b1aaa3; cursor:pointer; padding:2px 0; position:relative; }
.filters button:hover{ color:#000; }
.filters button.on{ color:#000; }
.filters button.on::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:#000; }
.portfolio-item.is-hidden{ display:none; }

/* clickable + keyboard; #6 focus is a hairline, never the browser blue */
.portfolio-item{ cursor:zoom-in; }
.portfolio-item:focus-visible{ outline:1px solid #000; outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

/* #3 lightbox: native <dialog> + scroll-snap carousel + morph + filmstrip (js/lightbox.js) */
html.lb-open{ overflow:hidden; }
dialog.lb{ width:100vw; height:100vh; height:100dvh; max-width:100vw; max-height:100dvh; margin:0; padding:0; border:0; overflow:hidden; background:rgba(252,251,249,.985); }
dialog.lb[open]{ display:flex; flex-direction:column; }
dialog.lb::backdrop{ background:rgba(252,251,249,.985); }
.lb-track{ flex:1 1 auto; min-height:0; display:flex; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior:contain; touch-action:pan-x; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.lb-track::-webkit-scrollbar{ display:none; }
.lb-track:focus{ outline:none; }
.lb-slide{ flex:0 0 100%; width:100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; align-items:center; justify-content:center; }
.lb-slide img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; transform-origin:center center; transition:transform .2s ease; }
.lb-slide.zoomed img{ transition:none; cursor:grab; }
@media (hover:hover) and (pointer:fine){ .lb-slide img{ cursor:pointer; } }
.lb-close{ position:fixed; z-index:3; top:12px; right:16px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:30px; background:none; border:0; color:#1b1b1b; cursor:pointer; line-height:1; transition:opacity .35s ease; }
@media (hover:hover){ .lb-close:hover{ color:#8a8a8a; } }
.lb-counter{ position:fixed; z-index:3; top:16px; left:0; right:0; text-align:center; font:500 12px/1 'Sohne Kraftig','Helvetica Neue',Arial,sans-serif; letter-spacing:1px; color:#1b1b1b; transition:opacity .35s ease; pointer-events:none; }
.lb-strip{ flex:0 0 auto; display:none; overflow-x:auto; gap:6px; padding:14px 16px 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-top:1px solid rgba(0,0,0,.06); transition:opacity .35s ease; }
.lb-strip::-webkit-scrollbar{ display:none; }
.lb-strip-inner{ display:flex; gap:6px; margin:0 auto; }
.lb-thumb{ flex:0 0 auto; height:56px; width:auto; display:block; opacity:.4; cursor:pointer; transition:opacity .2s ease; }
.lb-thumb:hover{ opacity:.75; }
.lb-thumb.on{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .lb-strip{ display:flex; } }
.lb.lb-idle .lb-close,.lb.lb-idle .lb-counter{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .lb-slide img{ transition:none; } }

@media (prefers-reduced-motion: reduce){ ::view-transition-group(*){ animation:none!important; } }