@charset "utf-8";
/* =========================================================
   GALLERY SYSTEM — FINAL (SCROLL ONLY, CSS ONLY)
   ========================================================= */

/* ---------- BASE ---------- */
.gallery {
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
}

.gallery figure {
  margin: 0;
  background: #f4f4f4;
  border-radius: 6px;
  overflow: hidden;
  scroll-snap-align: center;
}

.gallery img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.gallery figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- SCROLL / SWIPE (CRITICAL) ---------- */
.gallery--scroll {
  grid-auto-flow: column;
  grid-auto-columns: minmax(80%, 1fr);
  grid-auto-rows: 1fr;      /* prevent vertical stacking */
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .gallery--scroll {
    grid-auto-columns: minmax(40%, 1fr);
  }
}

/* ---------- OVERLAY CAPTION ---------- */
.gallery--overlay figcaption {
  background: rgba(0,0,0,0.6);
  color: #fff;
}

/* ---------- SHELL ---------- */
.gallery-shell {
  position: relative;
}

/* ---------- AUTO-HIDE FULLSCREEN UI ---------- */
.gallery-fs-open,
.gallery-fs-close {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.gallery-shell:hover .gallery-fs-open,
.gallery-shell:focus-within .gallery-fs-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- FULLSCREEN MODE ---------- */
.gallery:target {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999;

  display: flex;
  align-items: center;
  padding: 3.5rem 1rem 4rem;
}

/* reduce image height in fullscreen */
.gallery:target figure {
  max-height: calc(100vh - 8rem);
  display: flex;
  flex-direction: column;
}

.gallery:target img {
  max-height: 100%;
  object-fit: contain;
}

/* ---------- FULLSCREEN TOGGLE ---------- */
.gallery-fs-open,
.gallery-fs-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  z-index: 10;
}

.gallery-fs-close {
  display: none;
}

.gallery:target ~ .gallery-fs-close {
  display: block;
}

.gallery:target ~ .gallery-fs-open {
  display: none;
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
  .gallery,
  .gallery * {
    transition: none !important;
  }
}
/* ===== HEIGHT-CLAMPED IMAGE MODE (MOBILE-FIRST, SAFE) ===== */

.gallery--height-clamp figure {
  display: flex;
  flex-direction: column;        /* image above, caption below */
  align-items: center;
  padding: 1.75rem 0.75rem 1rem;
  box-sizing: border-box;
}

/* Mobile-first: width fluid, height auto */
.gallery--height-clamp img {
  width: 100%;
  height: auto;
  max-width: 100%;

  /* soft vertical safety clamp */
  max-height: clamp(300px, 70vh, 600px);

  object-fit: contain;
  display: block;
}

/* Caption always below image */
.gallery--height-clamp figcaption {
  margin-top: 0.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .gallery--height-clamp img {
    max-height: clamp(300px, 65vh, 600px);
  }
}
/* desktop control *******************************************************************************/
@media (min-width: 1024px) {
    
    .gallery--height-clamp img {
    max-height: clamp(300px, 50vh, 600px);
  }

    
}