/* ===== shared/gallery.css (with caption wrapper) ===== */

/* Center the whole gallery block under the top nav */
.gallery-center {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  width: 100%;
}

/* NEW: wrapper that groups image + caption together */
.swiper-main-box {
  width: 394px;
  height: 505px;                 /* overall portrait box */
  background: #887F6E;           /* match page background */
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;        /* image above, caption below */
  align-items: center;
  justify-content: center;       /* center them as a group */
}

/* Main image slider fits inside, leaving a bit of room for caption */
.swiper-main {
  width: 100%;
  height: auto;
  max-height: calc(505px - 36px); /* reserve ~36px for caption lines */
  touch-action: none;
}
.swiper-main .swiper-wrapper,
.swiper-main .swiper-slide { height: auto; }

/* Center images consistently inside each slide */
.swiper-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Main image sizing */
.swiper-main .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;    /* fit within box */
  display: block;
  margin: 0;
}

/* Thumbnails rail with overlay arrows */
.thumbs-stack { position: relative; width: 100px; height: 505px; }
.thumbs-stack .swiper-thumbs { width: 100%; height: 100%; }

/* Little circular arrow buttons over the rail */
.thumbs-overlay-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;     /* comfortable tap size */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.55);
  cursor: pointer; user-select: none;
  transition: background .2s ease, transform .1s ease;
  z-index: 20;
}
.thumbs-overlay-btn:hover  { background: rgba(0,0,0,0.45); }
.thumbs-overlay-btn:active { transform: translateX(-50%) translateY(1px); }
.thumbs-overlay-btn svg    { width: 20px; height: 20px; display: block; }

.thumbs-overlay-prev { top: 6px; }
.thumbs-overlay-next { bottom: 6px; }

/* Dim when Swiper disables a nav button */
.thumbs-overlay-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }

/* Thumbnails look */
.swiper-thumbs .swiper-slide {
  opacity: .6;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity .2s;
  background: transparent;
}
/* Uniform thumbnail images */
.swiper-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}
.swiper-thumbs .swiper-slide-thumb-active { opacity: 1; }

/* Caption styling — black bold title and tighter spacing */
.note {
  color: #000;
  font-weight: normal;
  font-size: 0.95em;
  line-height: 1.2;
  text-align: center;
  margin-top: 6px;               /* snug to image */
  opacity: 0.95;
  /* Optional adaptive contrast:
     mix-blend-mode: difference;  */
}
.note strong {
  display: block;
  font-weight: normal;
  color: #000;
  margin-bottom: 2px;
}

.note span {
  display: block;
  font-size: 0.85em;   /* smaller font for details */
  font-weight: normal;
  opacity: 0.9;        /* optional subtle contrast */
  margin-top: 2px;
}

/* iPhone/iPad niceties */
html { -webkit-text-size-adjust: 100%; }
.swiper, .swiper-wrapper, .swiper-slide { touch-action: pan-y; }
.swiper-main img, .swiper-thumbs img {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Reduce accidental taps on first/last thumb edges */
.thumbs-stack { padding-top: 2px; padding-bottom: 2px; }

/* Let the main slider size to the image; we will control height in JS */
.swiper-main-box .swiper-main { height: auto !important; max-height: none !important; }

/* Keep image flexible; JS sets a max-height so caption always fits */
.swiper-main .swiper-slide img { max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* Smart footer placement */
#end {
  position: absolute;         /* anchors it inside the page */
  bottom: 20px;               /* lifts it slightly above the edge */
  left: 0;
  width: 100%;
  text-align: center;
}