/* ============================================================
   LONGDON FOODS — GALLERY PAGE REDESIGN
   Matches: SWB-inspired dark editorial theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Permanent+Marker&display=swap');

@font-face {
  font-family: 'TT Trailers';
  src: url('../TT Trailers Trial Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Base ────────────────────────────────────────────────────── */
.gallery-page {
  background: #101820;
  color: #fff;
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

/* ============================================================
   HERO
   ============================================================ */
.gallery-hero {
  position: relative;
  background: #101820;
  padding: 200px 60px 80px;
  text-align: center;
  overflow: hidden;
}

.gallery-hero__sub {
  font-family: 'Permanent Marker', cursive;
  color: #f7f33a;
  font-size: clamp(26px, 3.5vw, 48px);
  line-height: 1;
  transform: rotate(-6deg);
  display: inline-block;
  margin-bottom: 10px;
}

.gallery-hero__title {
  font-family: 'TT Trailers', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(90px, 16vw, 240px);
  line-height: 0.85;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 24px 0;
}

.gallery-hero__desc {
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .gallery-hero {
    padding: 160px 24px 60px;
  }
}

/* ============================================================
   STATS
   ============================================================ */
.gallery-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 0 24px 60px;
}

.gallery-stat {
  text-align: center;
}

.gallery-stat__number {
  font-family: 'TT Trailers', 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  color: #f7f33a;
  line-height: 1;
  display: block;
}

.gallery-stat__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  margin-top: 8px;
  display: block;
}

@media (max-width: 600px) {
  .gallery-stats {
    gap: 32px;
  }
}

/* ============================================================
   MASONRY WRAPPER (dark theme overrides)
   ============================================================ */
.gallery-masonry-wrap {
  padding: 0 24px 120px;
  max-width: 1500px;
  margin: 0 auto;
}

/* Ensure masonry list background matches dark theme */
.gallery-page .masonry-list {
  background: transparent;
}

/* Darker box shadow for dark backgrounds */
.gallery-page .masonry-item-img {
  box-shadow: 0px 10px 50px -10px rgba(0, 0, 0, 0.5);
}

.gallery-page .masonry-item-wrapper:hover .masonry-item-img {
  box-shadow: 0px 15px 60px -10px rgba(0, 0, 0, 0.7);
}

/* Lightbox overrides for dark theme — match the built-in masonry lightbox */
.gallery-page .lightbox-overlay {
  background: rgba(10, 16, 22, 0.96);
}

.gallery-page .lightbox-close,
.gallery-page .lightbox-prev,
.gallery-page .lightbox-next {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
}

.gallery-page .lightbox-close:hover,
.gallery-page .lightbox-prev:hover,
.gallery-page .lightbox-next:hover {
  background: rgba(247, 243, 58, 0.15);
  border-color: rgba(247, 243, 58, 0.4);
  color: #f7f33a;
}

.gallery-page .lightbox-counter {
  background: rgba(16, 24, 32, 0.8);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.gallery-page .lightbox-image {
  border-radius: 8px;
}

/* ============================================================
   DECORATIVE ICONS
   ============================================================ */
.ab-deco-icon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

.ab-deco-icon--1 { width: 60px; top: 180px; left: 5%; animation-delay: 0s; }
.ab-deco-icon--2 { width: 50px; top: 400px; right: 5%; animation-delay: -2.5s; }
.ab-deco-icon--3 { width: 70px; bottom: 200px; left: 8%; animation-delay: -4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

@media (max-width: 768px) {
  .ab-deco-icon { opacity: 0.3; width: 40px; }
}