/* ==========================================================================
   KARTIK CATERERS — Gallery Page: "Wedding Pandaal" Theme
   Scoped entirely under body.gallery-page — affects no other page.
   Pure CSS / inline-SVG decoration: no extra image requests, no layout risk.
   ========================================================================== */

.gallery-page {
  --marigold: #E29A3C;
  --marigold-deep: #C97A1F;
  --thread-gold: #C9A227;
}

/* -------------------- Bunting strip (below header) -------------------- */
.pandal-bunting {
  height: 34px;
  background-color: var(--color-ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='36'%3E%3Cline x1='0' y1='4' x2='80' y2='4' stroke='%23C9A227' stroke-width='2'/%3E%3Cpolygon points='6,4 26,4 16,30' fill='%238B1E23'/%3E%3Cpolygon points='46,4 66,4 56,30' fill='%23E29A3C'/%3E%3Ccircle cx='16' cy='30' r='2' fill='%23FBF5F0'/%3E%3Ccircle cx='56' cy='30' r='2' fill='%23FBF5F0'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 80px 36px;
  box-shadow: 0 2px 10px rgba(23,23,23,0.08);
}
@media (prefers-reduced-motion: no-preference) {
  .pandal-bunting { animation: buntingSway 6s ease-in-out infinite; }
}
@keyframes buntingSway {
  0%, 100% { background-position: top center; }
  50% { background-position: top 3px center; }
}

/* -------------------- Garland divider (marigold strand) -------------------- */
.pandal-divider {
  height: 26px;
  margin-block: var(--space-lg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24'%3E%3Cline x1='0' y1='3' x2='30' y2='3' stroke='%23C9A227' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='14' r='6' fill='%23E29A3C'/%3E%3Ccircle cx='15' cy='14' r='2.4' fill='%238B1E23'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 30px 24px;
  opacity: 0.9;
}

/* -------------------- Page header: scalloped mandap valance -------------------- */
.gallery-page .page-header { position: relative; }
.gallery-page .page-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 18px;
  background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--color-white) 9.5px);
  background-size: 20px 18px;
  background-repeat: repeat-x;
  z-index: 3;
}
.gallery-page .page-header .eyebrow {
  position: relative;
  display: inline-flex;
}
.gallery-page .page-header .eyebrow::after {
  content: "";
  width: 22px; height: 22px;
  margin-left: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-3 3-3 6-1 8-4 0-7 2-7 6 0 2 2 4 4 4 0-2 2-3 4-3s4 1 4 3c2 0 4-2 4-4 0-4-3-6-7-6 2-2 2-5-1-8z' fill='%23E29A3C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

/* -------------------- Section intro corner flourishes -------------------- */
.gallery-page .section-intro { position: relative; }

/* -------------------- Filter tabs styled as hanging nameplates -------------------- */
.gallery-page .gallery-filters {
  position: relative;
  padding-top: 1.1rem;
  margin-bottom: var(--space-xl);
}
.gallery-page .gallery-filters::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--thread-gold) 8%, var(--thread-gold) 92%, transparent);
}
.gallery-page .filter-btn {
  position: relative;
  border-width: 1.5px;
  border-color: var(--color-border-gold);
  background: var(--color-white);
}
.gallery-page .filter-btn::before {
  content: "";
  position: absolute;
  top: -1.1rem; left: 50%;
  transform: translateX(-50%);
  width: 1.5px; height: 1.1rem;
  background: var(--thread-gold);
  opacity: 0.7;
}
.gallery-page .filter-btn.is-active,
.gallery-page .filter-btn:hover,
.gallery-page .filter-btn:focus-visible {
  background: linear-gradient(135deg, var(--color-gold), var(--marigold-deep));
  border-color: var(--marigold);
  box-shadow: 0 6px 18px rgba(226,154,60,0.35);
}
.gallery-page .filter-btn.is-active::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 8px 2px rgba(226,154,60,0.8);
  vertical-align: middle;
}

/* -------------------- "Inside the pandaal" uploaded gallery panel -------------------- */
.gallery-page .gallery-uploaded {
  position: relative;
  border-image: none;
  border: 1px solid rgba(198,166,97,0.4);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='%23C9A227' stroke-opacity='0.28' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #241a16, #130f0d);
  background-repeat: repeat, no-repeat;
}
.gallery-page .gallery-uploaded::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(226,154,60,0.3);
  pointer-events: none;
}
.gallery-page .gallery-uploaded-heading h2::before {
  content: "";
  display: block;
  width: 44px; height: 2px;
  margin-bottom: 0.6rem;
  background: linear-gradient(90deg, var(--marigold), transparent);
}

/* -------------------- Masonry photo frames: ornate corners + drape edge -------------------- */
.gallery-page .masonry-item {
  border: 1px solid rgba(198,166,97,0.5);
  position: relative;
}
.gallery-page .masonry-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0 0 Q12 12 24 0' fill='none' stroke='%23E29A3C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 10px;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}
.gallery-page .masonry-item::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,0);
  outline: 1px solid rgba(226,154,60,0);
  transition: outline-color var(--transition-base);
  pointer-events: none;
  z-index: 2;
}
.gallery-page .masonry-item:hover::after {
  outline: 1px solid rgba(226,154,60,0.65);
}
.gallery-page .masonry-item:hover {
  box-shadow: 0 16px 40px rgba(139,30,35,0.22);
}

/* -------------------- Recent-upload cards: jharokha corner brackets -------------------- */
.gallery-page .gallery-upload-card,
.gallery-page .gallery-video-card {
  position: relative;
}
.gallery-page .gallery-upload-card::before,
.gallery-page .gallery-upload-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-top: 2px solid var(--marigold);
  border-left: 2px solid var(--marigold);
  top: 6px; left: 6px;
  z-index: 2;
  opacity: 0.9;
  pointer-events: none;
}
.gallery-page .gallery-upload-card::after {
  top: auto; left: auto;
  bottom: 6px; right: 6px;
  border-top: none; border-left: none;
  border-bottom: 2px solid var(--marigold);
  border-right: 2px solid var(--marigold);
}

/* -------------------- Lightbox: pandaal-pillar controls -------------------- */
.gallery-page .lightbox { background: rgba(19,13,10,0.96); }
.gallery-page .lightbox figure {
  position: relative;
  border: 1px solid rgba(226,154,60,0.35);
  padding: 0.5rem;
  background: rgba(36,26,22,0.4);
}
.gallery-page .lightbox-close,
.gallery-page .lightbox-prev,
.gallery-page .lightbox-next {
  border-color: rgba(226,154,60,0.55);
  background: rgba(36,26,22,0.55);
}
.gallery-page .lightbox-close:hover,
.gallery-page .lightbox-prev:hover,
.gallery-page .lightbox-next:hover {
  background: linear-gradient(135deg, var(--color-gold), var(--marigold-deep));
  border-color: var(--marigold);
}

/* -------------------- Responsive scale-down -------------------- */
@media (max-width: 767px) {
  .pandal-bunting { height: 24px; background-size: 56px 24px; }
  .pandal-divider { height: 20px; margin-block: var(--space-md); background-size: 24px 20px; }
  .gallery-page .page-header .eyebrow::after { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pandal-bunting { animation: none; }
}