/* ═══════════════════════════════════════════════════════════════
   GALLERY — PAGE-SPECIFIC STYLES
   Reuses every color, font, spacing unit, radius and shadow already
   defined in style.css. Section padding intentionally matches the
   homepage's own Gallery section (60px top/bottom, var(--gutter)
   left/right) so this page reads as a direct continuation of it.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   GALLERY HERO
   Same treatment as the homepage hero / contact hero:
   full-bleed image, dark overlay, slow zoom, fade-up title.
═══════════════════════════════════════ */
.gl-hero {
  position: relative;
  min-height: clamp(340px, 46vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gl-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gl-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: en-hero-zoom 14s ease-out both;
}

.gl-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,20,0.42) 0%, rgba(10,12,20,0.62) 100%);
}

.gl-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(120px, 18vh, 160px) var(--gutter) 60px;
  text-align: center;
}

.gl-hero-title {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 60px);
  color: var(--white);
  line-height: 1.1;
}

/* ═══════════════════════════════════════
   CURATED COLLECTION SECTION
   Padding matches the homepage's Gallery section exactly:
   60px top/bottom, var(--gutter) left/right.
═══════════════════════════════════════ */
.gl-section {
  background: var(--cream-2);
  padding: 60px 0 60px;
}

.gl-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.gl-heading {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 42px;
  color: var(--charcoal);
  margin-top: 10px;
}

/* ── Filter pills ── */
.gl-filters {
  max-width: 1400px;
  margin: 32px auto 40px;
  padding: 0 var(--gutter) 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.gl-filter-pill {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.gl-filter-pill:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  transform: translateY(-1px);
}

.gl-filter-pill.is-active {
  background: #C99A2E;
  border-color: #C99A2E;
  color: var(--white);
}

.gl-filter-pill.is-active:hover {
  color: var(--white);
}

/* ── Gallery masonry grid ──
   The gallery page intentionally does NOT use the shared homepage
   fixed .en-gallery-grid. Each uploaded image keeps its natural
   aspect ratio and gallery.js calculates the appropriate card span
   from the image dimensions after load. */
.gl-grid-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.gl-grid-wrap#glGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: 10px;
  align-items: stretch;
}

.gl-masonry-item {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0,0,0,0.04);
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1), box-shadow 0.45s ease;
}

.gl-masonry-item:hover {
  transform: scale(1.018);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

.gl-grid-wrap.reveal-stagger {
  min-height: 20px;
}

@media (max-width: 992px) {
  .gl-grid-wrap#glGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }

  .gl-masonry-item {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background: transparent;
  }
}

@media (max-width: 600px) {
  .gl-grid-wrap#glGrid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .gl-masonry-item {
    grid-column: span 1 !important;
    grid-row: auto !important;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
  }
}

/* ── View All button ──
   Sits below the grid; only rendered by PHP when there are more tiles
   than the initial 12-tile cap, and hidden by gallery.js once expanded
   or while a specific category filter is active. */
.gl-viewall-wrap {
  display: flex;
  justify-content: center;
  max-width: 1400px;
  margin: 44px auto 0;
  padding: 0 var(--gutter);
}

.gl-viewall-wrap.is-hidden {
  display: none;
}

.gl-viewall-wrap .en-btn-gold-pill {
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════
   RESPONSIVE — GALLERY PAGE
   Same breakpoint scale as the homepage.
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .gl-heading { font-size: 36px; }
}

@media (max-width: 768px) {
  .gl-hero-inner { padding-top: 120px; }
  .gl-heading { font-size: 32px; }
  .gl-filters { gap: 10px; margin: 26px auto 30px; }
  .gl-filter-pill { padding: 8px 16px; font-size: 11px; }
}

@media (max-width: 430px) {
  .gl-hero-title { font-size: clamp(32px, 10vw, 44px); }
}