/* Dedicated gallery + lightbox styles for detail.php
   - Responsive alternating full + half rows
   - Prevents gaps by using grid/flex per row and consistent aspect ratios
   - Simple, modern visual styling
*/

/* Page background for the detail page */
body {
  background-color: #f6efe8;
}

/* Lightbox overlay */
.cm-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(3px);
}

.cm-lightbox-content {
  position: relative;
  max-width: 1000px;
  width: 94%;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  box-sizing: border-box;
}

.cm-lightbox-figure { position: relative; display: inline-block; }
.cm-lightbox-content img { max-width: 100%; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); background:#fff; }

.cm-lightbox-close { position: absolute; top: 10px; right: 10px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; border:0; z-index:2030; }
.cm-lightbox-close:hover{ transform:scale(1.05); }

.cm-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; z-index:2020; cursor:pointer; }
.cm-lightbox-prev{ left:18px; }
.cm-lightbox-next{ right:18px; }

/* Thumbnails */
.gallery-thumb { display:block; width:100%; height:auto; border-radius:8px; box-shadow: 0 12px 36px rgba(0,0,0,0.12); transition: transform .18s ease, box-shadow .18s ease; cursor:pointer; }
.gallery-thumb:hover{ transform:translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,0.18); }

/* Gallery container: constrain width and center content */
.gallery-masonry { max-width: 1100px; margin: 0 auto; padding: 20px 8px; }
.gallery-item { overflow:hidden; box-sizing:border-box; }

/* Full row: one image that spans the whole width */
.gallery-row.full { display:block; width:100%; margin-bottom:20px; }
.gallery-row.full .gallery-item img { width:100%; height:auto; aspect-ratio: 16/9; object-fit:cover; border-radius:10px; }

/* Half row: two images side-by-side with equal height */
.gallery-row.half { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; align-items:stretch; margin-bottom:20px; }
.gallery-row.half .gallery-item img { width:100%; height:100%; aspect-ratio: 4/3; object-fit:cover; border-radius:10px; }

/* Small screens: stack half-row images vertically */
@media (max-width: 767.98px) {
  .gallery-row.half { grid-template-columns: 1fr; }
  .gallery-row.full .gallery-item img { aspect-ratio: 4/3; }
}

/* subtle hover lift */
.gallery-item img:hover { transform: translateY(-4px) scale(1.01); }

/* Accessibility: make focus visible for interactive thumbnails */
.gallery-thumb:focus { outline: 3px solid rgba(255,186,90,0.35); outline-offset:4px; }

/* Utility to avoid unexpected column breaks elsewhere */
.gallery-masonry, .gallery-item { -webkit-print-color-adjust: exact; }

/* End of gallery CSS */