/* (C, Peter 8:45 + 9:16/9:17) Fine-art gallery grid for peterwochniak.com (preview): every grid cell is outlined by the SAME hairline as
   the line under the top category menu (.site-header border-bottom: 1px solid var(--border-subtle) = #2d2d32). Cells are open "wall"
   (no card fill); each print hangs centred in its cell with air around it; caption sits under the print, inside the cell.
   NO CROP: the photo box is a fixed 4:3 frame, the <picture> fills it and the image is CONTAINED (letterboxed) - verticals and
   panoramas are shown whole. (Without the absolutely positioned <picture>, a tall photo grows past the 4:3 frame and the frame's
   overflow:hidden cut it - that was the Yellowstone crop.) Selectors carry .masonry-grid so they win over the site's grid rules. */
.masonry-grid { gap: 28px; align-items: start; }
.masonry-grid .artwork-card { min-width: 0; background: transparent; border: 1px solid var(--border-subtle); border-radius: 0; box-shadow: none; padding: 28px 28px 0; overflow: visible; }
.masonry-grid .artwork-card:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); }
.masonry-grid .artwork-media { position: relative; display: block; aspect-ratio: 4 / 3; background: transparent; overflow: hidden; }
.masonry-grid .artwork-media picture { position: absolute; inset: 0; display: block; }
.masonry-grid .artwork-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.masonry-grid .artwork-card:hover .artwork-img { transform: none; }
.masonry-grid .artwork-caption { background: transparent; border-top: 0; padding: 14px 0 18px; justify-content: center; align-items: center; flex-direction: column; flex-wrap: nowrap; gap: 4px; text-align: center; }
.masonry-grid .caption-title { max-width: 100%; color: var(--text-secondary, #94a3b8); }
.masonry-grid .artwork-card:hover .caption-title { color: var(--text-primary); }
@media (max-width: 768px) {
  .masonry-grid { gap: 20px; }
  .masonry-grid .artwork-card { padding: 18px 18px 0; }
  .masonry-grid .artwork-caption { padding: 12px 0 14px; align-items: center; }
}
/* Peter 11:38: EXACTLY the prophotostl category grid (site-v1 src/site.css "category grid" block), measured side by side:
   caption title = prophotostl --text2 #cbd5e1 (was --text-secondary #94a3b8); gaps like prophotostl: 28px desktop, 20px at 600-1024px, 28px on phones (<=599px);
   the same reserved scrollbar gutter as prophotostl (html scrollbar-gutter:stable) so cells get the same width. */
.masonry-grid .caption-title { color: #cbd5e1; }
.masonry-grid .artwork-card:hover .caption-title { color: #f1f5f9; }
@media (min-width: 600px) and (max-width: 1024px) { .masonry-grid { gap: 20px; } }   /* tablet: prophotostl 20px */
@media (max-width: 599px) { .masonry-grid { gap: 28px; } }
html.pw-cat { scrollbar-gutter: stable; }

/* Peter 11:45 AM (Oct 1): FIXED photo area in the photo popup. Before, the area took the photo's own height (max 70vh), so a vertical
   (e.g. Havana, Cuba reached with the arrows) filled the popup and the popup grew/shrank on every step. Now the area has one size,
   derived only from the viewport (desktop: the 3fr column's width, square, capped at 62vh but never under 600px so the text column fits; tablet: 4:3 of the width, capped at 55vh;
   phone: 50vh), and every photo is CONTAINED in it (object-fit: contain): same size opened directly or via the arrows, popup never resizes. */
#lightbox-modal .modal-body{--lb-area:max(min(calc((min(1040px, 100vw - 48px) - 98px) * .6), 62vh), 600px);grid-template-rows:var(--lb-area)}
#lightbox-modal .modal-image-wrap{height:var(--lb-area);min-height:0;overflow:hidden}
#lightbox-modal .modal-image-wrap picture{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
#lightbox-modal .modal-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:contain;object-position:center}
#lightbox-modal .modal-details{min-height:0;overflow-y:auto}
@media (min-width:1025px){#lightbox-modal .modal-cta-wrap{position:sticky;bottom:0;z-index:2;background:var(--bg-secondary);padding-top:12px}}   /* a rare long caption scrolls inside the text column; the buy buttons stay visible */
@media (max-width:1024px){
  #lightbox-modal .modal-body{--lb-area:min(calc((min(1040px, 100vw - 48px) - 66px) * .75), 55vh);grid-template-rows:none}
  #lightbox-modal .modal-details{overflow:visible}
}
@media (min-width:769px) and (max-width:1024px){#lightbox-modal .modal-content{height:90vh}}
@media (max-width:768px){#lightbox-modal .modal-body{--lb-area:min(50vh, 120vw)}#lightbox-modal .modal-image-wrap{min-height:0}}

/* Oct 6 2026 scroll fix: no scroll anchoring / smooth scrolling on the category grid, so switching category always lands at the very top on phones
   (Chromium-based Opera / Samsung Internet anchored the page to a card while the grid was emptied and re-filled). */
html.pw-cat, html.pw-cat body, .gallery-container, #masonry-grid { overflow-anchor: none; }
html.pw-cat, html.pw-cat body { scroll-behavior: auto; }