/* ═══════════════════════════════════════════
   GALLERY PAGE  —  /gallery
   Loads alongside base.css (which has shared .gi styles + lightbox)
═══════════════════════════════════════════ */

/* ─── Override base.css clip-path reveal — photos are the point here ── */
/* JS adds .in immediately, but this ensures no flash even before JS runs */
#gallery-full .gi {
  clip-path: none;
  transition: opacity 0.5s ease;
}
#gallery-full .gi img {
  opacity: 1; /* start visible; base.css opacity:0 is for scroll-reveal pages */
  transition: opacity 0.4s ease, transform .65s cubic-bezier(.23,1,.32,1);
}
/* Shimmer until image loads — replace the opacity approach for gallery */
#gallery-full .gi:not(.img-loaded) img { opacity: 0; }
#gallery-full .gi.img-loaded img       { opacity: 1; }

/* ─── Page header ──────────────────────────── */
#gallery-hero {
  background: var(--dark-0);
  padding: 8rem 5vw 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#gallery-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 80%, rgba(255,87,34,.1) 0%, transparent 70%);
  pointer-events: none;
}
#gallery-hero .eyebrow { margin-bottom: .9rem; display: block; }
#gallery-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--text-light);
  line-height: 1.1;
  margin: 0 0 1.1rem;
}
#gallery-hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--fire) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#gallery-hero p {
  font-size: .95rem;
  color: var(--muted-light);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 2rem;
}
.gallery-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted-light);
  text-decoration: none;
  letter-spacing: .06em;
  transition: color .2s;
  position: relative;
  z-index: 1;
}
.gallery-back:hover { color: var(--text-light); }

/* ─── Full grid section ────────────────────── */
#gallery-full {
  background: var(--dark-1);
  padding-bottom: 5rem;
}

/* ─── Masonry photo grid — images show at natural aspect ratio ── */
.photo-grid {
  columns: 3;
  column-gap: 4px;
  padding: 0 4px;
}
.photo-grid .gi {
  break-inside: avoid;
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
}
.photo-grid .gi img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: unset;
}

/* ─── Count strip ──────────────────────────── */
.gallery-count-bar {
  background: var(--dark-1);
  padding: 2rem 5vw 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
}
.gallery-count-bar span {
  font-size: .78rem;
  color: var(--muted-light);
  letter-spacing: .06em;
}
.gallery-count-bar strong { color: var(--fire); }

/* ─── Responsive ───────────────────────────── */
@media (max-width: 960px) {
  #gallery-hero { padding-top: 7rem; }
  .photo-grid { columns: 2; }
}
@media (max-width: 600px) {
  .photo-grid { columns: 1; column-gap: 0; padding: 0; }
  .gallery-count-bar { flex-direction: column; gap: .5rem; text-align: center; }
}
@media (hover: none) {
  .gi:hover img { transform: none; }
  .gi:hover::after { opacity: 0; }
  .gi:hover .gi-caption { opacity: 0; }
}