:root{
  --gap: 12px;
  --pager-button-padding: 10px 14px;
  --pager-button-min-width: 48px;
}
body.gallery-page {
  background: #a21c20 url('/images/gallery_back_ground.jpg') center / contain fixed no-repeat;
}
/* This frame matches the contained 2:1 background, including in an iframe. */
.gallery-frame {
  position: fixed;
  width: min(100vw, 200vh);
  height: min(50vw, 100vh);
  width: min(100vw, 200dvh);
  height: min(50vw, 100dvh);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  z-index: 1;
}
.gallery-root {
  position: absolute;
  inset: 25% 4% 2.5%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1cqw;
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  background: rgba(0,0,0,0.12);
  border-radius: 0.6cqw;
  box-shadow: 0 0.75cqw 1.8cqw rgba(0,0,0,0.25);
}
.gallery-title{
  text-align: center;
  margin-bottom: 18px;
  font-weight: 700;
  color: var(--primary-gold);
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.75cqw;
  flex: 1;
  min-height: 0;
  padding: 0.375cqw;
  overflow: auto;
  transition: opacity 300ms ease;
}
.image-card{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-card .img-wrap{
  width: 100%;
  /* 16:9 containers so full 16:9 images display without cropping */
  aspect-ratio: 16/9;
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.image-card img{
  width: 100%;
  height: 100%;
  /* show the full image inside the square card without cropping */
  object-fit: contain;
  display: block;
  background: rgba(0,0,0,0.04);
  transform-origin: center;
  transition: transform 320ms ease;
}
.image-card img.loading{
  filter: blur(6px) brightness(.95);
}
.image-card:hover img{
  transform: scale(1.03);
}
.pager{
  margin-top: 18px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.page-info{
  min-width: 140px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: 0 8px;
}
.pager .btn{
  /* Match guest primary button gradient and color */
  background: linear-gradient(135deg, #ffa239, #ffe08f);
  color: #060771;
  border: none;
  font-weight: 700;
  padding: var(--pager-button-padding);
  min-width: var(--pager-button-min-width);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: transform 160ms ease, opacity 160ms ease;
  font-size: 0.95rem;
  white-space: nowrap;
}
.pager .btn:hover:enabled{ transform: translateY(-2px); }
.pager .btn:disabled{ opacity: 0.45; cursor: default; transform: none; }
/* Make icons inside buttons inherit sizing and be centered */
.pager .btn svg{ display: inline-block; vertical-align: middle; width: 20px; height: 20px; }
.spinner-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  color: #fff;
}
.spinner{
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,0.12);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Lightbox styles */
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000}
.lightbox.hidden{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.75)}
.lb-shell{position:relative;z-index:2;display:flex;align-items:center;gap:18px;max-width:92vw;max-height:86vh}
.lb-stage{display:flex;align-items:center;justify-content:center;background:transparent;max-width:84vw;max-height:84vh}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.lb-close{position:absolute;top:10px;right:10px;z-index:3;background:transparent;border:none;color:#fff;font-size:22px;padding:8px;cursor:pointer}
.lb-nav{background:rgba(255,255,255,0.06);border:none;color:#fff;padding:10px 12px;border-radius:8px;cursor:pointer}
.lb-prev{margin-left:-8px}
.lb-next{margin-right:-8px}

@media (max-width:640px){
  .lb-nav{padding:8px 10px}
  .lb-close{font-size:18px}
  .lb-shell{gap:8px}
  /* ADDED: Override width: 100% from global.css to keep min-width: 48px */
  .pager .btn{
    width: auto;
  }
}


/* Size the thumbnails and navigation against the background, not the viewport. */
.gallery-root .image-card { min-width: 0; border-radius: 0.375cqw; }
.gallery-root .img-wrap { height: 100%; aspect-ratio: auto; }
.gallery-root .pager { flex: 0 0 auto; flex-wrap: nowrap; gap: 0.5cqw; margin-top: 0.75cqw; }
.gallery-root .pager .btn {
  width: auto;
  min-width: 3cqw;
  padding: 0.625cqw 0.875cqw;
  border-radius: 0.625cqw;
  font-size: 1cqw;
  line-height: 1;
}
.gallery-root .pager .btn svg { width: 1.25cqw; height: 1.25cqw; }
.gallery-root .page-info { min-width: 8.75cqw; padding: 0 0.5cqw; font-size: 1cqw; }
.gallery-root .spinner { width: 2.75cqw; height: 2.75cqw; border-width: 0.25cqw; }
.gallery-root .spinner-overlay, .gallery-root .image-grid > p { font-size: 1cqw; }
/* The lightbox is outside the scaled frame and stays readable on phones. */
.lb-shell { width: 92vw; }
.lb-stage { flex: 1; min-width: 0; }
.lb-stage img { max-height: 84vh; }
/* Small screens: three natural-height previews per row; scroll for more. */
@media (width < 640px) {
  .image-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: max-content;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .gallery-root .img-wrap {
    height: auto;
  }
  .gallery-root .image-card img {
    height: auto;
  }
}
@media (hover: none) and (pointer: coarse) {
  .image-card:hover img { transform: none; }
}