.det-gallery{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.det-gallery+p{margin-top:52px}
.det-gallery.single{grid-template-columns:1fr}
.det-gallery--3col{grid-template-columns:repeat(3,1fr)}
.det-gallery figure{aspect-ratio:16/10;overflow:hidden;background:var(--navy-dd)}
.det-gallery figure picture,.det-gallery figure img{width:100%;height:100%;object-fit:cover;display:block}
.det-gallery .ph-fig{display:flex;align-items:center;justify-content:center;background:var(--navy)}
.det-gallery .ph-fig .ph-mark{font-weight:600;font-size:clamp(18px,3vw,30px);letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--accent);opacity:.07;user-select:none}
.det-gallery figure:not(.ph-fig){cursor:zoom-in;position:relative}
.det-gallery figure:not(.ph-fig)::after{content:"";position:absolute;inset:0;background:rgba(4,34,47,0);transition:background .25s}
.det-gallery figure:not(.ph-fig):hover::after,.det-gallery figure:not(.ph-fig):focus-visible::after{background:rgba(4,34,47,.15)}
.det-gallery figure:not(.ph-fig):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(2,26,36,.92);padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(232,244,235,.24);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-close:hover{background:rgba(255,255,255,.16)}
@media(prefers-reduced-motion:reduce){.det-gallery figure:not(.ph-fig)::after{transition:none}}
@media(max-width:600px){.det-gallery{grid-template-columns:1fr}}

/* Center a lone orphan at the end of a row so it doesn't look like a missing photo.
   Scoped to min-width:601px — below that the grid is already 1-column and centering is automatic. */
@media(min-width:601px){
  .det-gallery:not(.det-gallery--3col):not(.single) figure:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 8px);justify-self:center}
  /* 3-col galleries use 6 half-width tracks (each figure spans 2) so an incomplete
     last row of 2 can be centered by shifting it half a track — cell sizes stay identical. */
  .det-gallery--3col{grid-template-columns:repeat(6,1fr)}
  .det-gallery--3col figure{grid-column:span 2}
  .det-gallery--3col figure:last-child:nth-child(3n+1){grid-column:1/-1;width:calc(33.333% - 11px);justify-self:center}
  .det-gallery--3col figure:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}

/* Blur-up lazy-load placeholders */
.det-gallery figure.blur-up{background-position:center;background-size:cover}
.det-gallery figure.blur-up::before{content:'';position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:center;filter:blur(8px);transform:scale(1.15);z-index:0;transition:opacity .5s ease}
.det-gallery figure.blur-up picture{position:relative;z-index:1}
.det-gallery figure.blur-up img{opacity:0;transition:opacity .5s ease}
.det-gallery figure.blur-up::after{z-index:2}
.det-gallery figure.blur-up.loaded::before{opacity:0;pointer-events:none}
.det-gallery figure.blur-up.loaded img{opacity:1}
@media(prefers-reduced-motion:reduce){.det-gallery figure.blur-up::before,.det-gallery figure.blur-up img{transition:none}}