/* ===================================================
   style.css — Shared styles
   The Vault Bar & Grill
   =================================================== */

/* ===== FILTER BAR ===== */
.filter-bar {
  background: rgba(17,17,17,0.97);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  padding: 16px 1.5rem;
  position: sticky;
  top: 68px;
  z-index: 500;
}
.filter-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 50px;
  color: #aaa;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.filter-btn:hover { border-color: #D4AF37; color: #D4AF37; }
.filter-btn.active { background: #D4AF37; border-color: #D4AF37; color: #111; }

@media (max-width: 600px) {

  /* ── Menu photo sections ── */
  .menu-photo-pair {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .menu-photo-pair img {
    height: 130px;
  }
  .menu-photo-band {
    height: 150px;
  }
  .menu-photo-single img {
    max-height: 200px;
  }

  /* ── Drinks photo sections ── */
  .drinks-photo-pair {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .drinks-photo-pair img {
    height: 130px;
  }
  .drinks-photo-single img {
    max-height: 200px;
  }

  /* ── Gallery masonry: keep 2 cols, cap portrait heights ── */
  .gallery-grid-masonry {
    columns: 2;
  }
  .gallery-slot.natural img {
    max-height: 260px;
    object-fit: cover;
  }

}