/*
  gallery.css — Public gallery page.
  Matches the Tropical Garden theme from projects.css.
*/

/* ── Tokens (mirrors projects.css) ─────────────────────────── */
:root {
  --gl-bg:      #F7FDF9;
  --gl-surface: #EBF8EF;
  --gl-border:  rgba(0,0,0,.09);
  --gl-text:    #1B3A2D;
  --gl-muted:   #5D8A78;
  --gl-teal:    #4DB6AC;
  --gl-radius:  10px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.gallery-page { background: var(--gl-bg); }

.gl-wrap {
  position: relative;
  min-height: 60vh;
  padding: 0 0 5rem;
  overflow: hidden;
}

.gl-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.gl-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.gl-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.gl-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--gl-text);
  letter-spacing: -.02em;
  margin: 0;
}

/* ── Masonry grid (CSS columns) ─────────────────────────────── */
.gl-grid {
  columns: 3;
  column-gap: 8px;
  padding: 0 1.5rem;
}

/* 2 columns on tablet */
@media (max-width: 768px) {
  .gl-grid { columns: 2; }
}

/* 1 column on mobile */
@media (max-width: 480px) {
  .gl-grid { columns: 1; }
}

/* ── Cell ───────────────────────────────────────────────────── */
.gl-cell {
  break-inside: avoid;          /* never split a card across columns */
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--gl-surface);
  cursor: pointer;
  display: block;
}

.gl-img {
  width: 100%;
  height: auto;                 /* natural height — preserves portrait/landscape */
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

.gl-cell:hover .gl-img {
  transform: scale(1.03);
  filter: brightness(1.06);
}

/* ── Empty state ────────────────────────────────────────────── */
.gl-empty {
  text-align: center;
  color: var(--gl-muted);
  font-size: 1.1rem;
  padding: 4rem 0;
}