/* =============================
   FILE: /assets/gallery.css
   - Polaroid (no rounded corners), bigger caption area
   - Heart/like INSIDE image (lower-left)
   - Guest POV + Featured share the same responsive grid
   - Hide like COUNTS on gallery page (show hearts only)
   - Top Liked carousel: centered Show More
   ============================= */

html,body{overflow-x:hidden}
.container,.container-fluid{max-width:100vw}

/* === Grid layout (Guest POV, Featured, Top) === */
.photo-grid{
  display:grid;
  gap:.8rem;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media(min-width:360px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:545px){.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:730px){.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:965px){.photo-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}

/* keep feat + pov using same breakpoints */
#featGrid.photo-grid,
#povGrid.photo-grid{
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media(min-width:360px){#featGrid.photo-grid,#povGrid.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:545px){#featGrid.photo-grid,#povGrid.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:730px){#featGrid.photo-grid,#povGrid.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:965px){#featGrid.photo-grid,#povGrid.photo-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}

/* === Polaroid card (square edges; compact) === */
.pol{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:8px 8px 54px;
  width:100%;
  max-width:none;
  margin:0;
}

/* Base polaroid frame: fixed portrait box */
.pol-p{
  position:relative;
  overflow:hidden;
  background:#f3f4f6;
  aspect-ratio:2/3; /* portrait polaroid */
}


/* Make the link fill the frame */
.pol-p > a{
  display:block;
  width:100%;
  height:100%;
}

/* PREVIEW IMAGE:
   - fill the polaroid
   - center-crop as needed
   - works for landscape + portrait */
.pol-p img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Caption strip under image */
.pol-cap{
  margin-top:12px;
  font-size:13px;
  line-height:1.5;
  color:#111;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.pol-by{
  font-weight:500;
  opacity:.85;
}


/* Optional label box (currently unused) */
.pol-b{
  position:absolute;
  top:6px;
  left:6px;
  font-size:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  padding:2px 6px;
}
.pol-t{display:none!important}

/* Heart inside image (lower-left) */
.btn-like-ov{
  position:absolute;
  left:8px;
  bottom:8px;
  backdrop-filter:saturate(180%) blur(6px);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.1);
  padding:.2rem .55rem;
}
.btn-like{
  --bs-btn-padding-y:.15rem;
  --bs-btn-padding-x:.45rem;
}
.btn-info-open{display:none!important}

/* Hide like COUNT on Gallery page (keep the heart) */
body[data-page="gallery"] .btn-like [data-c]{display:none}

/* === Top-Liked carousel (if used horizontally) === */
.top-carousel{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.top-carousel::-webkit-scrollbar{display:none}
.top-track{
  display:flex;
  gap:.8rem;
  align-items:stretch;
}
.top-item{
  flex:0 0 auto;
  width:clamp(180px,22vw,320px);
}
.top-carousel.is-paused .top-track{will-change:auto}
#topMore{
  position:static!important;
  transform:none!important;
  right:auto!important;
  top:auto!important;
}

/* Modal: caption full wrap */
#modalCaption{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  line-height:1.45;
}

/* Small screens safety */
@media(max-width:380px){
  .photo-grid{grid-template-columns:repeat(1,minmax(0,1fr));}
  .pol{padding-bottom:60px;}
}

/* === Modal: fullscreen-style, auto-fit for both landscape & portrait === */
#imgModal .modal-dialog,
#photoModal .modal-dialog{
  max-width:100vw;
  margin:0;
}
#imgModal .modal-content,
#photoModal .modal-content{
  display:flex;
  flex-direction:column;
  max-height:100vh;
  border-radius:0;
  background:#000;
}
#imgModal .modal-body,
#photoModal .modal-body{
  flex:1 1 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}
#modalImg{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

/* === Featured (Couple): BEST-FIT inside same polaroid ===
   - Same portrait box (2/3)
   - Use contain so whole couple shows
   - Centered; no extreme face crops
*/
#featGrid .pol-p{
  aspect-ratio:2/3;
}
#featGrid .pol-p>img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;      /* show whole photo, scaled down */
  object-position:center;
  display:block;
}