/* ══════════════════════════════════════════════
   GALLERY PAGE — BOLD RICH STYLES
══════════════════════════════════════════════ */

/* ── HERO ── */
.gallery-hero {
  position: relative; height: 65svh; min-height: 440px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center; background: var(--bg);
}
.gallery-hero-frame {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; max-width: 480px; height: 45vh;
  padding: 8px; border: 1px solid rgba(30,21,16,.15);
  background: var(--bg); z-index: 1;
}
.gallery-hero-img-wrap { width: 100%; height: 100%; position: relative; overflow: hidden; }
.gallery-hero-img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: var(--bg); opacity: 0.35;
  pointer-events: none; mix-blend-mode: lighten;
}
.gallery-hero-bg {
  position: absolute; inset: 0;
  background-image: url('../img/intimate.jpg');
  background-size: cover; background-position: center 30%;
  transform: scale(1.06); filter: sepia(0.05);
  animation: slowZoom 12s ease forwards;
}
@keyframes slowZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.gallery-hero-content { position: relative; z-index: 2; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gallery-hero-title {
  font-family: var(--f-head);
  font-size: clamp(3rem,10vw,6rem); text-transform: uppercase;
  font-weight: 400; color: var(--charcoal);
  line-height: 1.1; margin: 0.5rem 0;
  opacity: 0; animation: fadeUp .9s var(--ease) .3s forwards;
  text-shadow: 0 0 30px rgba(250, 245, 239, 0.9), 0 0 60px rgba(250, 245, 239, 0.9);
}
.gallery-hero-sub {
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  opacity: 0; animation: fadeUp .9s var(--ease) .6s forwards;
}

/* ── QR SECTION ── */
.qr-section {
  background: var(--champagne);
  padding: clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem);
  text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid rgba(30,21,16,.08); border-bottom: 1px solid rgba(30,21,16,.08);
}
.qr-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.qr-heading {
  font-family: var(--f-head);
  font-size: clamp(2.2rem,6vw,4rem);
  font-weight: 400; color: var(--charcoal); line-height: 1.15;
  margin: 1rem 0 1rem; text-transform: uppercase;
}
.qr-sub { font-size: .88rem; color: var(--muted); line-height: 1.8; margin-bottom: 2.5rem; }
.qr-box-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 3rem; flex-wrap: wrap;
}
.qr-code-frame {
  background: var(--cream);
  padding: 1.2rem; border-radius: 0;
  border: 1px solid rgba(30,21,16,.15);
  position: relative;
  transition: transform .4s var(--ease);
}
.qr-code-frame:hover { transform: scale(1.02); }
.qr-code-frame img { width: 180px; height: 180px; display: block; image-rendering: pixelated; }
.qr-code-label {
  position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%);
  font-size: .65rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.qr-steps { text-align: left; }
.qr-step { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.qr-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(30,21,16,.05); color: var(--charcoal);
  font-family: var(--f-head); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 1px solid rgba(30,21,16,.15);
}
.qr-step-text { font-size: .85rem; color: var(--muted); line-height: 1.6; padding-top: .3rem; }
.qr-step-text strong { color: var(--charcoal); font-weight: 600; }

/* ── OUR GALLERY GRID ── */
.our-gallery-section {
  background: var(--bg);
  padding: clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,3rem);
}
.our-gallery-header { text-align: center; margin-bottom: 3rem; }

/* Bento-style grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 12px;
  max-width: 1200px; margin: 0 auto;
}
.bento-item {
  border-radius: 0; overflow: hidden;
  position: relative; cursor: zoom-in;
  border: 1px solid rgba(30,21,16,.1);
  background: var(--cream); padding: 4px;
  transition: transform .4s var(--ease), filter .4s;
}
.bento-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); filter: sepia(0.05); }
.bento-item:hover { transform: scale(1.02); filter: brightness(0.95); }
.bento-item:hover img { transform: scale(1.04); }

/* Bento layout */
.bento-1 { grid-column: span 8; grid-row: span 2; min-height: 420px; }
.bento-2 { grid-column: span 4; min-height: 200px; }
.bento-3 { grid-column: span 4; min-height: 200px; }
.bento-4 { grid-column: span 5; min-height: 260px; }
.bento-5 { grid-column: span 4; min-height: 260px; }
.bento-6 { grid-column: span 3; min-height: 260px; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-1, .bento-2, .bento-3, .bento-4, .bento-5, .bento-6 {
    grid-column: span 1; min-height: 220px;
  }
  .bento-1 { grid-column: span 2; min-height: 320px; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-1, .bento-2 { grid-column: span 1; }
}

/* Overlay caption */
.bento-item::after {
  content: attr(data-caption);
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  padding: 2rem 1.2rem .8rem;
  background: linear-gradient(to top, rgba(250,245,239,.95) 0%, transparent 100%);
  color: var(--charcoal);
  font-family: var(--f-body); font-weight: 400;
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .65rem; text-align: center;
  transform: translateY(8px); opacity: 0;
  transition: opacity .3s, transform .3s;
}
.bento-item:hover::after { opacity: 1; transform: translateY(0); }

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-bg {
  position: absolute; inset: 0;
  background: rgba(250,245,239,.95); cursor: pointer;
  backdrop-filter: blur(12px);
}
.lb-content {
  position: relative; z-index: 1;
  max-width: min(92vw,900px); max-height: 90svh;
  border-radius: 0; overflow: hidden;
  box-shadow: 0 30px 100px rgba(30,21,16,.1);
  transform: scale(.88); transition: transform .5s var(--ease);
  background: var(--cream); padding: 8px; border: 1px solid rgba(30,21,16,.15);
}
.lightbox.open .lb-content { transform: scale(1); }
.lb-content img { max-width: 100%; max-height: 90svh; object-fit: contain; display: block; filter: sepia(0.05); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: transparent;
  border: 1px solid rgba(30,21,16,.2); color: var(--charcoal); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .2s;
  z-index: 2;
}
.lb-close { top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; border-radius: 50%; }
.lb-close:hover { background: var(--charcoal); color: var(--cream); transform: rotate(90deg); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; }
.lb-prev { left: 1.2rem; }
.lb-next { right: 1.2rem; }
.lb-prev:hover { background: var(--charcoal); color: var(--cream); transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { background: var(--charcoal); color: var(--cream); transform: translateY(-50%) translateX(3px); }