/* Collection page — the grid and the lightbox only.
   Header, nav, footer and the page shell live in site.css. Load that first.
   Derived from the Favorites build (Claude Design, 2026-08-30) with the
   last-row centring fixed so any image count works, not just 3n+1. */

/* Grid --------------------------------------------------------------------
   Wrapping flex row, not a fixed grid. Every row centres — including a last
   row holding one or two images. The old CSS grid needed an nth-child rule
   per remainder and only ever handled the 3n+1 case, which silently broke
   Lush (29) and Rugged (38).                                               */
.grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
      max-width:var(--grid-w);margin:0 auto;
      column-gap:var(--grid-gutter);row-gap:var(--grid-row-gap)}
.grid figure{width:var(--cell);margin:0;display:flex;flex-direction:column;
             align-items:center;justify-content:flex-end}
.shot{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
.shot a{display:block;line-height:0;transition:var(--transition-opacity)}
.grid figcaption{font:var(--type-caption-title);color:var(--text-title);text-align:center;padding-top:var(--s-3)}
.plate img{max-width:var(--cell);max-height:var(--cell);width:auto;height:auto}

/* Lightbox ---------------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:100;background:var(--surface-lightbox);
    display:flex;align-items:center;justify-content:center;
    animation:lb-in var(--dur) var(--ease) both}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-figure{position:relative;display:inline-block;line-height:0;margin:0;
           animation:lb-in var(--dur-slow) var(--ease) both}
.lb-figure img{width:auto;height:auto}
.lb-cap{position:absolute;left:0;right:0;bottom:0;background:var(--surface-scrim);
        padding:var(--s-2) var(--s-3);text-align:left}
.lb-cap .t{font:var(--type-caption-title);color:var(--fg);display:block}
.lb-cap .m{font:var(--type-caption-location);color:var(--fg-dim);display:block;
           font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;padding:var(--s-2);transition:var(--transition-opacity)}
.lb-btn:hover{opacity:var(--hover-opacity)}
.lb-btn:active{opacity:var(--press-opacity)}
.lb-prev{left:var(--s-4);top:50%;transform:translateY(-50%)}
.lb-next{right:var(--s-4);top:50%;transform:translateY(-50%)}
.lb-close{right:var(--s-4);top:var(--s-4)}
.chev{display:block;width:20px;height:20px;border-top:1px solid var(--fg);border-right:1px solid var(--fg)}
.lb-next .chev{transform:rotate(45deg)}
.lb-prev .chev{transform:rotate(-135deg)}
.ex{display:block;width:20px;height:20px;position:relative}
.ex::before,.ex::after{content:"";position:absolute;left:0;top:9px;width:20px;height:1px;background:var(--fg)}
.ex::before{transform:rotate(45deg)}
.ex::after{transform:rotate(-45deg)}

/* Breakpoints --------------------------------------------------------------
   The Design comp was desktop-only at a fixed 1680px, and its CSS grid
   overflowed the page padding rather than wrapping — 3x500 + 2x64 is 1628px,
   which does not fit inside a padded 1680px page. A wrapping flex row cannot
   overflow, so each tier below is sized to actually fit, and the breakpoints
   are the exact widths at which the next tier stops fitting.

     tier      cell  gutter   grid    min viewport
     3-up      500     64    1628px      1676
     3-up      400     48    1296px      1344
     3-up      340     32    1084px      1132
     2-up      320     32     672px       720
     1-up      fluid    -     100%          -                                */
@media (max-width:1675px){
  :root{--cell:400px;--grid-gutter:48px;--grid-w:1296px;--grid-row-gap:var(--s-7)}
}
@media (max-width:1343px){
  :root{--cell:340px;--grid-gutter:32px;--grid-w:1084px}
}
@media (max-width:1131px){
  :root{--cell:320px;--grid-w:672px}
}
@media (max-width:719px){
  :root{--cell:min(100%,480px);--grid-w:100%;--grid-row-gap:var(--s-6)}
  .plate img{max-height:80vh}
  .lb-prev{left:var(--s-1)}
  .lb-next{right:var(--s-1)}
  .lb-close{right:var(--s-1);top:var(--s-1)}
}

/* Build additions, 2026-09-01 ----------------------------------------------
   The grid starts 96px under the header on every collection comp (Tidal, Lush
   and Rugged all carry padding:96px 0 on main). The 128px below the last row
   is --foot-gap in site.css.                                                 */
.gallery{padding-top:var(--s-7)}
/* The comp set the lightbox fit inline: the image fits ~88vw by ~86vh, no mat. */
.lb-figure img{max-width:88vw;max-height:86vh}
@media (prefers-reduced-motion:reduce){
  .lb,.lb-figure{animation:none}
}