/* ============ Baimin Granitos — Gallery page (from Gallery.dc.html design) ============ */
/* Shares header, footer, buttons, kicker, .wrap, .reveal from style.css */

body.gallery-page { background: #DDD9CE; color: #201F1A; }

.gk { color: #5D9B5D; display: flex; align-items: center; gap: 10px; }
.gk .rule { width: 22px; height: 1px; background: #5D9B5D; display: inline-block; flex-shrink: 0; }

@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbZoom { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============ HERO ============ */
.gal-hero { position: relative; background: #0F0F0A; color: #F3F2EC; overflow: hidden; }
.gal-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.22,1,.36,1);
}
.gal-hero.is-visible .gal-hero-bg { opacity: 1; transform: scale(1); }
.gal-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,6,0.94) 0%, rgba(10,10,6,0.82) 34%, rgba(10,10,6,0.4) 68%, rgba(10,10,6,0.15) 100%);
}
.gal-hero-inner { position: relative; z-index: 3; }
.gal-hero-body { padding: 70px 40px 96px; }
.gal-hero-box { max-width: 560px; }
.gal-hero-kicker { margin-bottom: 24px; }
.gal-hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 62px; line-height: 1.02; letter-spacing: 1px;
  margin: 0 0 22px; color: #fff;
}
.gal-hero-bar { width: 120px; height: 2px; background: #5D9B5D; margin-bottom: 26px; }
.gal-hero-p {
  font-size: 15px; line-height: 1.9; font-weight: 300; letter-spacing: 1px;
  color: rgba(243,242,236,0.85); margin: 0; max-width: 440px;
}
.gal-hero-p strong { font-weight: 600; color: #fff; }
/* stagger the hero reveal children */
.gal-hero .reveal.d0 { transition-delay: .15s; }
.gal-hero .reveal.d1 { transition-delay: .28s; }
.gal-hero .reveal.d2 { transition-delay: .4s; }
.gal-hero .reveal.d3 { transition-delay: .5s; }
.gal-hero.is-visible .reveal { opacity: 1; transform: translateY(0); }

/* ============ GALLERY GRID ============ */
.gallery { background: #DDD9CE; padding: 74px 0 40px; }
.gallery-stack { display: flex; flex-direction: column; gap: 22px; }
.g-row1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; height: 300px; }
.g-row2 { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 22px; height: 280px; }
.g-row3 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: center; margin-top: 8px; }
.g-row3 .gtile { height: 300px; }
.g-row4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; height: 250px; margin-top: 8px; margin-bottom: 34px; }

.gtile { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; }
.gtile.reveal { transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1); transform: translateY(26px); }
.gallery.is-visible .gtile.reveal { opacity: 1; transform: translateY(0); }
.gtile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.gtile::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(15,15,10,0); transition: background .5s ease; pointer-events: none;
}
.gtile:hover img { transform: scale(1.08); }
.gtile:hover::after { background: rgba(15,15,10,0.12); }

/* staggered reveal delays (0.06 + i*0.09) */
.gallery.is-visible .gd0 { transition-delay: .06s; }
.gallery.is-visible .gd1 { transition-delay: .15s; }
.gallery.is-visible .gd2 { transition-delay: .24s; }
.gallery.is-visible .gd3 { transition-delay: .33s; }
.gallery.is-visible .gd4 { transition-delay: .42s; }
.gallery.is-visible .gd5 { transition-delay: .51s; }
.gallery.is-visible .gd6 { transition-delay: .60s; }
.gallery.is-visible .gd7 { transition-delay: .69s; }
.gallery.is-visible .gd8 { transition-delay: .78s; }

/* From Quarry to Project text block */
.g-fromquarry.reveal { transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1); transition-delay: .2s; transform: translateY(26px); }
.gallery.is-visible .g-fromquarry.reveal { opacity: 1; transform: translateY(0); }
.g-fq-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 34px; line-height: 1.08; letter-spacing: 1px; margin: 0 0 20px;
}
.g-fq-h2 .fq-1 { color: #201F1A; letter-spacing: 3px; }
.g-fq-h2 .fq-2 { color: #5D9B5D; letter-spacing: 3px; }
.g-fq-bar { width: 60px; height: 2px; background: #5D9B5D; margin-bottom: 22px; }
.g-fq-p {
  font-size: 14px; line-height: 1.9; font-weight: 300;
  color: rgba(32,31,26,0.72); margin: 0; max-width: 390px;
}
.g-fq-p strong { font-weight: 600; color: #201F1A; }

/* ============ CTA ============ */
.gal-cta {
  position: relative; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
}
.gal-cta-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.gal-cta:hover .gal-cta-img { transform: scale(1.07); }
.gal-cta-shade { position: absolute; inset: 0; background: rgba(8,8,5,0.6); pointer-events: none; }
.gal-cta-inner { position: relative; text-align: center; padding: 64px 40px; }
.gal-cta-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 44px; line-height: 1.05; color: #F3F2EC; margin: 0 0 28px;
}
.gal-cta-inner .reveal.d1 { transition-delay: .2s; }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,8,5,0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 48px; cursor: zoom-out; animation: lbFade .3s ease;
}
.lightbox[hidden] { display: none; }
.lb-img {
  width: 100%; height: 100%;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  animation: lbZoom .35s cubic-bezier(.22,1,.36,1);
  cursor: zoom-in; transform: scale(1); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.lb-img.zoomed { cursor: zoom-out; transform: scale(2.2); }
.lb-close {
  position: absolute; top: 26px; right: 34px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(15,15,10,0.5);
  color: #F3F2EC; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.lb-close:hover { background: #5D9B5D; transform: scale(1.08); }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .gal-hero-body { padding: 48px 40px 72px; }
  .gal-hero-h1 { font-size: 48px; }
  .g-row1, .g-row4 { grid-template-columns: 1fr 1fr; height: auto; }
  .g-row1 .gtile, .g-row4 .gtile { height: 240px; }
  .g-row2 { grid-template-columns: 1fr; height: auto; }
  .g-row2 .gtile { height: 240px; }
  .g-row3 { grid-template-columns: 1fr; gap: 24px; }
  .g-row3 .gtile { height: 260px; }
  .g-fromquarry { order: -1; }
}
@media (max-width: 600px) {
  .gallery { padding: 48px 0 30px; }
  .gal-hero-body { padding: 40px 22px 56px; }
  .gal-hero-h1 { font-size: 38px; }
  .g-row1, .g-row4 { grid-template-columns: 1fr; height: auto; }
  .g-row1 .gtile, .g-row4 .gtile, .g-row2 .gtile { height: 220px; }
  .g-fq-h2 { font-size: 28px; }
  .gal-cta-inner { padding: 56px 22px; }
  .gal-cta-h2 { font-size: 30px; }
}