/* Gallery page (prefix ga-). Dark tiles in the site's navy, hairlines and square corners. Uses only the tokens from styles.css. */

/* team filter */
.ga-filters{display:grid;gap:14px}
@media (min-width:800px){.ga-filters{grid-template-columns:auto 1fr;gap:14px 40px}}
.ga-fg>p{margin-bottom:8px;font:800 .95rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ga-chips{display:flex;flex-wrap:wrap;gap:8px}
.ga-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--edge);border-radius:999px;background:transparent;color:var(--ink);font:700 1rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ga-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-baby)}
.ga-chip:disabled{border-style:dashed;color:var(--muted);cursor:not-allowed}
@media (hover:hover){.ga-chip:not(:disabled):not([aria-pressed="true"]):hover{background:var(--surface-2)}}
.ga-reset{margin-top:14px}

/* a season: its year as a heading, then the click-through, then the collage */
.ga-sec{margin-top:40px}
.ga-sec:first-child{margin-top:30px}

/* featured click-through: full-width slides that snap into place. Swipe, arrows, or the left and right arrow keys. */
.ga-feat{position:relative;margin-top:22px;border:1px solid var(--line);background:var(--surface)}
.ga-feat__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ga-feat__track::-webkit-scrollbar{display:none}
.ga-feat__track:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.ga-feat__s{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.ga-feat__open{display:block;position:relative;width:100%;aspect-ratio:3/2;padding:0;border:0;background:var(--bg);cursor:pointer;overflow:hidden}
@media (min-width:760px){.ga-feat__open{aspect-ratio:16/9}}
.ga-feat__open img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.ga-feat__open img.is-logo{width:120px;height:120px;padding:8px;margin:auto;border-radius:50%;background:var(--baby);object-fit:contain}
.ga-feat__b{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:64px;margin-top:-32px;padding:0;border:1px solid var(--edge);border-radius:0;background:rgba(12,26,54,.78);color:var(--ink);cursor:pointer}
.ga-feat__b--p{left:14px}.ga-feat__b--n{right:14px}
.ga-feat__b svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.ga-feat__b{width:44px;height:56px;margin-top:-28px}.ga-feat__b--p{left:8px}.ga-feat__b--n{right:8px}}
@media (hover:hover){.ga-feat__b:hover{background:var(--surface-2);border-color:var(--ink)}}
.ga-feat__b:active{transform:translateY(1px)}
/* the white bar under the click-through: its length is one slide's share, it slides as you move (transform only) */
.ga-feat__bar{height:4px;background:var(--line)}
.ga-feat__bar b{display:block;height:100%;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1)}

/* collage: rows that fill the width, every photo at its own shape (the row height is --h, a photo's share of the row follows its shape --r) */
.ga-mosaic{--h:230px;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
@media (min-width:1000px){.ga-mosaic{--h:270px;gap:12px}}
@media (max-width:560px){.ga-mosaic{--h:150px;gap:8px}}
.ga-mosaic>li{position:relative;flex-grow:calc(var(--r) * 100);flex-basis:calc(var(--r) * var(--h));min-width:0}
.ga-mosaic>li>i{display:block;padding-bottom:calc(100% / var(--r))}
.ga-mosaic::after{content:"";flex-grow:1e4} /* the last row keeps its natural size instead of stretching */
.ga-tile{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:1px solid var(--line);border-radius:0;background:var(--surface);overflow:hidden;cursor:pointer}
.ga-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ga-tile img.is-logo{width:84px;height:84px;padding:6px;border-radius:50%;background:var(--baby);margin:auto;object-fit:contain}
.ga-tile:active{transform:translateY(1px)}
@media (hover:hover){.ga-tile:hover{border-color:var(--ink)}.ga-tile:hover img:not(.is-logo){transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.ga-tile img,.ga-feat__bar b{transition:none}.ga-tile:hover img{transform:none}}

/* template state */
.ga-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px;margin-top:14px;padding:0;list-style:none}
.ga-slots{margin-top:0;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:640px){.ga-slots{gap:14px}}
.ga-slot{aspect-ratio:4/3;border:1px dashed var(--edge);border-radius:0;background:var(--surface)}

/* lightbox (native dialog, full screen, dark) */
.ga-lb{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--ink)}
.ga-lb[open]{display:grid;grid-template-rows:auto 1fr auto}
.ga-lb::backdrop{background:var(--bg)}
.ga-lock{overflow:hidden}
.ga-lb__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 16px}
.ga-lb__n{font:800 1.1rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ga-lb__x{width:48px;height:48px;border:1.5px solid var(--edge);border-radius:0;background:transparent;color:var(--ink);font:400 2rem/1 var(--body);cursor:pointer}
.ga-lb__stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;min-height:0;padding-inline:6px;touch-action:pan-y}
.ga-lb__stage img{justify-self:center;max-width:100%;max-height:100%;min-height:0;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none}
.ga-lb__stage img.is-logo{width:120px;height:120px;padding:8px;border-radius:50%;background:var(--baby)}
.ga-lb__b{display:grid;place-items:center;width:48px;height:64px;border:1.5px solid var(--edge);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.ga-lb__b svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.ga-lb__b{width:40px}}
@media (hover:hover){.ga-lb__b:hover,.ga-lb__x:hover{background:var(--surface-2);border-color:var(--ink)}}
.ga-lb__cr{padding:12px 16px 16px;text-align:center;color:var(--muted);font-size:.875rem;min-height:1.5em;overflow-wrap:anywhere}

/* photographer credit under the title; the logo keeps its own white circle so the black mark shows on navy */
.ga-credit{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:18px;font-weight:600}
.ga-credit img{flex:none;width:64px;height:64px;border-radius:50%}
.ga-feat__open:focus-visible{outline-offset:-3px} /* inside the photo: the scrolling strip clips anything outside */