/* ═══════════════════════════════════════════════════════════════════
   GALLERY PAGE — gallery.css
   Page-specific styles for /gallery.html
   Required: main.css (loaded first)

   Sections:
     1. Intro strip (walnut quote bar)
     2. Sticky category filter (icon tabs with count badges)
     3. Gallery grid (auto-fill 4:3 figures with hover overlay)
     4. Placeholder cards (categories awaiting photography)
     5. Empty state
     6. CTA (espresso → walnut gradient with pill buttons)
     7. Responsive
═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. INTRO STRIP ═══ */
.sec-intro {
  background: var(--m-surface-alt);
  padding: 38px 60px;
  text-align: center;
}
.intro-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 300; font-style: italic;
  color: var(--m-gold-ink);
  line-height: 1.6;
  max-width: 780px; margin: 0 auto;
}


/* ═══ 2. CATEGORY FILTER ═══ */
.gal-filter {
  background: var(--m-surface);
  padding: 0 20px;
  position: sticky; top: var(--header-h); z-index: 50;
  box-shadow: 0 4px 20px rgba(44,26,14,.12);
}
.gal-filter-inner {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  max-width: 1280px; margin: 0 auto;
}

.gal-tab {
  padding: 16px 14px 12px;
  background: none; border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--m-on-body);
  cursor: pointer; white-space: nowrap;
  position: relative;
  transition: color .25s, border-color .25s, background .25s;
}
.gal-tab i {
  display: block;
  font-size: 18px; margin-bottom: 6px;
  color: var(--m-bronze);
  transition: color .25s;
}
.gal-tab:hover {
  color: var(--m-on-strong);
  background: rgba(255,255,255,.04);
}
.gal-tab:hover i { color: var(--m-honey); }
.gal-tab.active {
  color: var(--m-on-strong);
  border-bottom-color: var(--m-gold-ink);
  background: linear-gradient(180deg, rgba(201,150,74,.12) 0%, rgba(201,150,74,.04) 100%);
}
.gal-tab.active i { color: var(--m-honey); }

.gal-count {
  display: inline-block;
  font-size: 8px;
  background: rgba(221,185,106,.15);
  color: var(--m-gold-ink);
  padding: 2px 7px; margin-left: 6px;
  border-radius: 10px; letter-spacing: .5px;
}
.gal-tab.active .gal-count { background: rgba(221,185,106,.3); }


/* ═══ 3. GALLERY GRID ═══ */
.sec-gallery {
  padding: 64px 48px 88px;
  background: var(--m-parchment);
}
.gallery-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.gal-item {
  position: relative; overflow: hidden;
  background: var(--m-linen);
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 20px rgba(44,26,14,.08);
  transition: box-shadow .3s, transform .3s;
}
.gal-item.hidden { display: none; }
.gal-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(44,26,14,.18);
}
.gal-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s ease, filter .4s ease;
}
.gal-item:hover img { transform: scale(1.06); filter: brightness(.92); }

.gal-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,15,8,.85) 0%, rgba(26,15,8,.15) 45%, transparent 70%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.gal-item:hover .gal-item-overlay { opacity: 1; }
.gal-item-cat {
  font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--m-honey);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.gal-item-cat::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--m-honey);
}
.gal-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400;
  color: #fff; line-height: 1.2;
}


/* ═══ 4. PLACEHOLDER CARDS ═══ */
.gal-placeholder {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--m-linen) 0%, var(--m-parchment) 100%);
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(123,74,30,.3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  transition: border-color .3s, background .3s;
}
.gal-placeholder.hidden { display: none; }
.gal-placeholder:hover {
  border-color: rgba(123,74,30,.55);
  background: linear-gradient(135deg, var(--m-parchment) 0%, #fff 100%);
}
.gal-ph-icon {
  width: 56px; height: 56px;
  border: 1px solid rgba(123,74,30,.3);
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.gal-ph-icon i { font-size: 22px; color: var(--m-walnut); }
.gal-ph-cat {
  font-size: 8.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--m-bronze);
  margin-bottom: 8px;
}
.gal-ph-msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-style: italic;
  color: var(--m-stone);
  line-height: 1.4; margin-bottom: 6px;
}
.gal-ph-sub {
  font-size: 10px; letter-spacing: .5px;
  color: var(--m-stone); opacity: .7;
}


/* ═══ 5. EMPTY STATE ═══ */
.gallery-empty {
  display: none;
  text-align: center; padding: 60px 24px;
  color: var(--m-stone);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-style: italic;
}
.gallery-grid.is-empty + .gallery-empty { display: block; }


/* ═══ 6. CTA ═══ */
.sec-cta {
  background: linear-gradient(135deg, var(--m-espresso) 0%, var(--m-walnut) 100%);
  padding: 64px 60px;
  text-align: center;
}
.cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 46px); font-weight: 300;
  color: #fff; line-height: 1.1; margin-bottom: 10px;
}
.cta-title em { font-style: italic; color: var(--m-honey); }
.cta-sub {
  font-size: 12px;
  color: rgba(237,228,213,.6);
  margin-bottom: 32px;
}
.cta-actions {
  display: flex; gap: 14px;
  justify-content: center; flex-wrap: wrap;
}
.btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px;
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  text-decoration: none;
  transition: all .25s;
}
.btn-cta-gold {
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  color: #fff;
}
.btn-cta-gold:hover { opacity: .88; transform: translateY(-2px); color: #fff; }

.btn-cta-outline {
  border: 1px solid rgba(221,185,106,.4);
  color: var(--m-honey);
}
.btn-cta-outline:hover {
  background: rgba(221,185,106,.1);
  border-color: var(--m-honey);
}


/* ═══ 7. RESPONSIVE ═══ */
@media (max-width: 900px) {
  .sec-intro, .sec-cta { padding-left: 24px; padding-right: 24px; }
  .sec-gallery         { padding: 48px 24px 64px; }
  .gallery-grid        { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .gal-filter-inner    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .gallery-grid     { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gal-item-overlay { padding: 14px 16px; }
  .gal-item-name    { font-size: 16px; }
  .gal-filter-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gal-tab          { padding: 14px 8px 10px; font-size: 8px; letter-spacing: 0.5px; }
  .gal-tab i        { font-size: 15px; margin-bottom: 4px; }
  .gal-ph-icon      { width: 44px; height: 44px; }
  .gal-ph-icon i    { font-size: 18px; }
  .gal-ph-msg       { font-size: 14px; }
  .cta-actions      { flex-direction: column; align-items: center; }
}