/* ═══════════════════════════════════════════════
       GALLERY — Pure uniform grid
       Every tile: identical 1:1 square, 4 columns.
       No wide, no tall, no exceptions.
    ═══════════════════════════════════════════════ */

    .gallery-page-section {
      background: var(--white);
      padding: 6rem 0 8rem;
    }

    .gallery-page-header {
      text-align: center;
      padding: 0 2.5rem;
      margin-bottom: 4.5rem;
    }

    /* ── Filter tabs ── */
    .gallery-filters {
      display: inline-flex;
      border: 1px solid rgba(201,168,76,0.35);
      margin-top: 2.5rem;
      overflow: hidden;
    }

    .gf-btn {
      padding: 0.8rem 1.8rem;
      font-family: var(--font-body);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      border: none;
      border-right: 1px solid rgba(201,168,76,0.35);
      background: transparent;
      color: var(--text-light);
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
      white-space: nowrap;
    }

    .gf-btn:last-child { border-right: none; }

    .gf-btn.active,
    .gf-btn:hover {
      background: var(--forest-deep);
      color: var(--gold-light);
    }

    /* ── Uniform grid ──
       aspect-ratio on the tile itself enforces identical
       squares regardless of content or viewport.
       No grid-auto-rows needed — tiles self-size. */
    .lux-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }

    .lux-tile {
      position: relative;
      aspect-ratio: 1 / 1;   /* ← THE key rule: every tile is a perfect square */
      overflow: hidden;
      background: var(--forest-deep);
      cursor: zoom-in;
    }

    /* Image fills the square exactly */
    .lux-tile img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      display: block;
    }

    .lux-tile:hover img { transform: scale(1.07); }

    /* Hover overlay with category + title */
    .lux-tile-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(10,24,16,0.88) 0%,
        rgba(10,24,16,0.18) 50%,
        transparent 100%
      );
      opacity: 0;
      transition: opacity 0.35s ease;
      display: flex;
      align-items: flex-end;
      padding: 1.25rem 1.25rem;
    }

    .lux-tile:hover .lux-tile-overlay { opacity: 1; }

    .lux-tile-copy {
      transform: translateY(5px);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .lux-tile:hover .lux-tile-copy { transform: translateY(0); }

    .lux-tile-copy span {
      display: block;
      font-family: var(--font-body);
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 0.2rem;
    }

    .lux-tile-copy p {
      font-family: var(--font-display);
      font-size: 0.9rem;
      color: rgba(255,255,255,0.92);
      font-style: italic;
      font-weight: 300;
      line-height: 1.2;
    }

    /* Gold corner-bracket accent on hover */
    .lux-tile::before,
    .lux-tile::after {
      content: '';
      position: absolute;
      z-index: 3;
      pointer-events: none;
      width: 0; height: 0;
      transition: width 0.3s ease, height 0.3s ease;
    }

    .lux-tile::before {
      top: 0; left: 0;
      border-top: 2px solid var(--gold);
      border-left: 2px solid var(--gold);
    }

    .lux-tile::after {
      bottom: 0; right: 0;
      border-bottom: 2px solid var(--gold);
      border-right: 2px solid var(--gold);
    }

    .lux-tile:hover::before,
    .lux-tile:hover::after { width: 22px; height: 22px; }

    /* Filter hide */
    .lux-tile.is-hidden { display: none; }

    /* ── Lightbox ── */
    .lb-wrap {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(8,20,13,0.97);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }

    .lb-wrap.open { display: flex; }

    .lb-frame {
      position: relative;
      max-width: 88vw;
      max-height: 88vh;
    }

    .lb-frame::before {
      content: '';
      position: absolute;
      inset: -5px;
      border: 1px solid rgba(201,168,76,0.22);
      pointer-events: none;
      z-index: 1;
    }

    .lb-img {
      display: block;
      max-width: 88vw;
      max-height: 84vh;
      object-fit: contain;
      box-shadow: 0 32px 100px rgba(0,0,0,0.6);
      animation: lbFadeIn 0.3s cubic-bezier(0.16,1,0.3,1);
    }

    @keyframes lbFadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to   { opacity: 1; transform: scale(1); }
    }

    .lb-close {
      position: fixed;
      top: 1.5rem; right: 1.5rem;
      width: 46px; height: 46px;
      background: rgba(14,35,24,0.75);
      border: 1px solid rgba(201,168,76,0.3);
      color: var(--white);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      z-index: 10000;
      transition: background 0.3s, border-color 0.3s;
      backdrop-filter: blur(6px);
    }

    .lb-prev, .lb-next {
      position: fixed;
      top: 50%; transform: translateY(-50%);
      width: 52px; height: 52px;
      background: rgba(14,35,24,0.65);
      border: 1px solid rgba(201,168,76,0.25);
      color: var(--white);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1.4rem;
      z-index: 10000;
      transition: background 0.3s, border-color 0.3s;
      backdrop-filter: blur(6px);
    }

    .lb-close:hover, .lb-prev:hover, .lb-next:hover {
      background: rgba(201,168,76,0.2);
      border-color: var(--gold);
    }

    .lb-prev { left: 1.5rem; }
    .lb-next { right: 1.5rem; }

    .lb-counter {
      position: fixed;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-body);
      font-size: 0.58rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      z-index: 10000;
      pointer-events: none;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .lux-grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 768px) {
      .gallery-page-section { padding: 3rem 0 5rem; }
      .gallery-page-header { margin-bottom: 2.5rem; padding: 0 1.25rem; }

      /* Filter bar: scrollable single row — no wrapping, no stacking */
      .gallery-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;         /* Firefox */
        width: calc(100% - 2.5rem);
        max-width: none;
        border-radius: 0;
      }
      .gallery-filters::-webkit-scrollbar { display: none; } /* Chrome/Safari */

      .gf-btn {
        flex: 0 0 auto;                /* don't shrink — stay full label width */
        border-right: 1px solid rgba(201,168,76,0.35);
        border-bottom: none;
        padding: 0.85rem 1.4rem;
      }
      .gf-btn:last-child { border-right: none; }

      /* 2-column grid with consistent gap and side padding */
      .lux-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
      }

      .lb-prev { left: 0.5rem; }
      .lb-next { right: 0.5rem; }
    }

    @media (max-width: 480px) {
      .gallery-page-section { padding: 2.5rem 0 4rem; }
      .gallery-page-header { padding: 0 1rem; }
      .lux-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
      }
      /* Slightly taller tiles on small phones for visual impact */
      .lux-tile { aspect-ratio: 0.9 / 1; }
    }


    /* Mobile polish patch — cleaner gallery controls and spacing */
    @media (max-width: 768px) {
      .gallery-page-section {
        padding: 3rem 0 4.5rem !important;
      }

      .gallery-page-header {
        margin-bottom: 2rem !important;
      }

      .gallery-page-header p {
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
      }

      .gallery-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        width: min(100%, 420px);
        margin: 1.75rem auto 0 !important;
        padding: 0 0.25rem 0.15rem;
        border: none !important;
        overflow: visible !important;
      }

      .gf-btn {
        border: 1px solid rgba(201,168,76,0.45) !important;
        background: rgba(255,255,255,0.9);
        color: var(--forest-deep);
        padding: 0.85rem 0.8rem !important;
        text-align: center;
        letter-spacing: 0.16em;
        box-shadow: 0 8px 24px rgba(14,35,24,0.06);
      }

      .gf-btn.active,
      .gf-btn:hover {
        background: var(--forest-deep);
        color: var(--gold-light);
        border-color: var(--forest-deep) !important;
      }

      .lux-grid {
        padding: 0 0.85rem;
        gap: 0.55rem !important;
      }

      .lux-tile {
        border: 1px solid rgba(201,168,76,0.12);
      }

      .lux-tile-overlay {
        opacity: 1;
        padding: 0.85rem;
      }

      .lux-tile-copy p {
        font-size: 0.78rem;
      }
    }

    @media (max-width: 420px) {
      .gallery-filters {
        grid-template-columns: 1fr;
        width: min(100%, 330px);
      }

      .lux-grid {
        grid-template-columns: 1fr !important;
        padding: 0 1rem;
        gap: 0.85rem !important;
      }

      .lux-tile {
        aspect-ratio: 4 / 3 !important;
      }
    }


    /* Surgical mobile patch — luxury gallery mobile refinement */
    @media (max-width: 768px) {
      .gallery-page-section {
        padding: 3.25rem 0 4.75rem !important;
        background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%) !important;
      }
      .gallery-page-header {
        padding: 0 1.15rem !important;
        margin-bottom: 1.85rem !important;
      }
      .gallery-page-header h1,
      .gallery-page-header h2 {
        line-height: 1.05 !important;
      }
      .gallery-page-header p {
        font-size: 0.95rem !important;
        line-height: 1.75 !important;
        max-width: 32rem !important;
      }
      .gallery-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
        width: min(100%, 390px) !important;
        margin: 1.65rem auto 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
      }
      .gf-btn {
        width: 100% !important;
        border: 1px solid rgba(201,168,76,0.48) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,0.92) !important;
        color: var(--forest-deep) !important;
        padding: 0.9rem 0.65rem !important;
        font-size: 0.57rem !important;
        letter-spacing: 0.16em !important;
        text-align: center !important;
        box-shadow: 0 12px 30px rgba(14,35,24,0.08) !important;
      }
      .gf-btn.active,
      .gf-btn:hover {
        background: var(--forest-deep) !important;
        color: var(--gold-light) !important;
        border-color: var(--gold) !important;
      }
      .lux-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
        padding: 0 1rem !important;
      }
      .lux-tile {
        aspect-ratio: 1 / 1.08 !important;
        border-radius: 18px !important;
        border: 1px solid rgba(201,168,76,0.22) !important;
        box-shadow: 0 18px 45px rgba(14,35,24,0.13) !important;
        background: var(--forest-deep) !important;
      }
      .lux-tile img { border-radius: 18px !important; }
      .lux-tile-overlay {
        opacity: 1 !important;
        padding: 0.9rem !important;
        border-radius: 18px !important;
        background: linear-gradient(to top, rgba(10,24,16,0.82) 0%, rgba(10,24,16,0.2) 58%, transparent 100%) !important;
      }
      .lux-tile-copy span {
        font-size: 0.48rem !important;
        letter-spacing: 0.18em !important;
      }
      .lux-tile-copy p {
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
      }
    }

    @media (max-width: 430px) {
      .gallery-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
      }
      .lux-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1.05rem !important;
      }
      .lux-tile {
        aspect-ratio: 4 / 3 !important;
      }
    }

  

/* Uploaded media additions */
.lux-video-tile{background:#111;display:flex;flex-direction:column;min-height:100%;overflow:hidden}
.lux-video-tile video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#000}
.lux-video-caption{padding:1rem 1.1rem 1.15rem;background:#17130f;color:#fff}
.lux-video-caption span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light,#d6b46a)}
.lux-video-caption p{margin:.3rem 0 0;font-family:var(--serif);font-size:1.1rem}
@media(max-width:700px){.lux-video-tile video{aspect-ratio:9/12}}

/* Gallery media interaction fix and layout refinement */
.lux-video-tile {
  cursor: default;
  display: block;
  aspect-ratio: 1 / 1;
  background: #0a1810;
}
.lux-video-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  background: #000;
  z-index: 1;
}
.lux-video-tile::before,
.lux-video-tile::after { pointer-events: none; z-index: 3; }
.lux-video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.75rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(10,24,16,.92), rgba(10,24,16,0));
  pointer-events: none;
}
.lux-video-caption span { font-size: .52rem; }
.lux-video-caption p { margin: .2rem 0 0; font-size: .9rem; }
.lux-video-tile video::-webkit-media-controls { z-index: 4; }

@media (max-width: 768px) {
  .lux-video-tile { aspect-ratio: 1 / 1.08 !important; }
  .lux-video-tile video { border-radius: 18px; }
}
@media (max-width: 430px) {
  .lux-video-tile { aspect-ratio: 4 / 3 !important; }
}