/* NV Studio — gallery.css
   Gallery page: luxury editorial magazine aesthetic
   Palette: Warm Luxury (Cream · Near-Black · Gold Accent)
   Type: Cormorant Garamond (display) · DM Sans (body)
   ─────────────────────────────────────────────────── */


/* ── 1. Design Tokens ─────────────────────────────── */
:root {
  --cream:       #FAFAF8;
  --cream-alt:   #F5F3EE;
  --near-black:  #1C1916;
  --warm-gray:   #6B6560;
  --muted:       #9C9590;
  --gold:        #C9A96E;
  --gold-dark:   #A88848;
  --hairline:    #E2DDD6;
  --white:       #FFFFFF;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --nav-h: 72px;
  --r:     2px;
}


/* ── 2. Reset & Base ──────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background:  var(--cream);
  color:       var(--near-black);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  cursor:     pointer;
  border:     none;
  background: none;
}


/* ── 3. Nav (.gnav) ───────────────────────────────── */
.gnav {
  position:      fixed;
  top:           0;
  left:          0;
  right:         0;
  z-index:       100;
  height:        var(--nav-h);
  background:    rgba(250, 250, 248, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.gnav__inner {
  position:        relative;
  max-width:       1160px;
  margin:          0 auto;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 24px;
}

.gnav__back {
  display:         flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--font-body);
  font-size:       0.68rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--near-black);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.gnav__back svg {
  color:            inherit;
  flex-shrink:      0;
  transition:       transform 0.2s ease;
}

.gnav__back:hover {
  color: var(--gold);
}

.gnav__back:hover svg {
  transform: translateX(-2px);
}

.gnav__title {
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--warm-gray);
  position:       absolute;
  left:           50%;
  transform:      translateX(-50%);
}

.gnav__cta {
  font-family:     var(--font-body);
  font-size:       0.62rem;
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--white);
  background:      var(--near-black);
  padding:         0.6em 1.4em;
  border-radius:   var(--r);
  min-height:      36px;
  display:         flex;
  align-items:     center;
  transition:      background 0.2s ease;
  white-space:     nowrap;
}

.gnav__cta:hover {
  background: var(--gold);
}


/* ── 4. Gallery Page ──────────────────────────────── */
.gallery-page {
  padding-top:    calc(var(--nav-h) + 48px);
  padding-bottom: 80px;
  min-height:     100vh;
}


/* ── 5. Gallery Header ────────────────────────────── */
.gallery-header {
  max-width:   1160px;
  margin:      0 auto;
  padding:     0 24px 48px;
  text-align:  center;
}

.gallery-label {
  font-family:    var(--font-body);
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  16px;
}

.gallery-heading {
  font-family:  var(--font-display);
  font-size:    clamp(36px, 5vw, 56px);
  font-weight:  300;
  line-height:  1.1;
  color:        var(--near-black);
}

.gallery-heading em {
  font-style:  italic;
  font-weight: 300;
}

.gallery-sub {
  font-family:    var(--font-body);
  font-size:      0.88rem;
  color:          var(--warm-gray);
  margin-top:     16px;
  max-width:      420px;
  margin-inline:  auto;
  line-height:    1.65;
}


/* ── 6. Filters ───────────────────────────────────── */
.gallery-filters {
  max-width:   1160px;
  margin:      0 auto;
  padding:     0 24px 40px;
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
}

.filter-btn {
  font-family:    var(--font-body);
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.6em 1.4em;
  border:         1.5px solid var(--hairline);
  border-radius:  99px;
  background:     transparent;
  color:          var(--warm-gray);
  cursor:         pointer;
  transition:     all 0.18s ease;
  min-height:     36px;
  line-height:    1;
}

.filter-btn:hover {
  border-color: var(--near-black);
  color:        var(--near-black);
}

.filter-btn--active {
  background:   var(--near-black);
  border-color: var(--near-black);
  color:        var(--cream);
}

.filter-btn--active:hover {
  background:   var(--gold);
  border-color: var(--gold);
  color:        var(--white);
}


/* ── 7. Gallery Grid — CSS Columns Masonry ───────── */
.gallery-grid {
  columns:    3;
  column-gap: 4px;
  max-width:  1160px;
  margin:     0 auto;
  padding:    0 24px;
}

@media (max-width: 900px) {
  .gallery-grid {
    columns:    2;
    column-gap: 3px;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    columns:    2;
    column-gap: 2px;
    padding:    0 12px;
  }
}


/* ── 8. Gallery Item ──────────────────────────────── */
.gallery-item {
  break-inside:  avoid;
  margin-bottom: 4px;
  position:      relative;
  cursor:        pointer;
  overflow:      hidden;
  background:    linear-gradient(90deg, var(--cream-alt) 25%, #ede9e2 50%, var(--cream-alt) 75%);
  background-size: 200% 100%;
  animation:     shimmer 1.6s ease-in-out infinite;
  min-height:    120px;        /* placeholder height while loading */

  opacity:    0;
  transition: opacity 0.4s ease;
}

.gallery-item.loaded {
  opacity:    1;
  background: none;
  animation:  none;
  min-height: 0;
}

.gallery-item.hidden {
  display: none;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* All media — full natural width, no cropping */
.gallery-item img,
.gallery-item video {
  display:    block;
  width:      100%;
  height:     auto;
  max-width:  100%;
}

/* Hover darken */
.gallery-item::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     rgba(28, 25, 22, 0);
  transition:     background 0.25s ease;
  pointer-events: none;
}

.gallery-item:hover::after {
  background: rgba(28, 25, 22, 0.2);
}

/* Video dark placeholder before thumbnail loads */
.gallery-item__video-thumb {
  display:    block;
  width:      100%;
  min-height: 220px;
  background: #2A2724;
}

/* Video play icon */
.gallery-item__play {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%);
  width:           44px;
  height:          44px;
  background:      rgba(255, 255, 255, 0.92);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  z-index:         1;
  transition:      transform 0.2s ease, background 0.2s ease;
}

.gallery-item__play svg {
  color:       var(--near-black);
  margin-left: 2px;
}

.gallery-item:hover .gallery-item__play {
  transform:  translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 1);
}

/* VIDEO badge */
.gallery-item__badge {
  position:        absolute;
  bottom:          8px;
  right:           8px;
  background:      rgba(28, 25, 22, 0.72);
  backdrop-filter: blur(4px);
  color:           rgba(255,255,255,0.9);
  font-family:     var(--font-body);
  font-size:       0.52rem;
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         3px 7px;
  border-radius:   99px;
  pointer-events:  none;
  z-index:         1;
}


/* ── 9. Gallery Empty State ───────────────────────── */
.gallery-empty {
  text-align:  center;
  padding:     80px 24px;
  font-family: var(--font-body);
  font-size:   0.88rem;
  color:       var(--muted);
}


/* ── 10. Lightbox ─────────────────────────────────── */
.lightbox {
  position:        fixed;
  inset:           0;
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(11, 11, 10, 0.95);
  cursor:     pointer;
}

.lightbox__stage {
  position:        relative;
  z-index:         1;
  max-width:       min(90vw, 900px);
  max-height:      90vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.lightbox__stage img {
  max-width:    100%;
  max-height:   90vh;
  object-fit:   contain;
  border-radius: var(--r);
  display:      block;
  user-select:  none;
  -webkit-user-select: none;
}

.lightbox__stage video {
  max-width:     100%;
  max-height:    90vh;
  border-radius: var(--r);
  outline:       none;
  display:       block;
}

.lightbox__close {
  position:        fixed;
  top:             20px;
  right:           20px;
  z-index:         2;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.12);
  color:           var(--white);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.2s ease;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox__nav {
  position:        fixed;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         2;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.1);
  color:           var(--white);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.2s ease;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox__nav--prev {
  left: 16px;
}

.lightbox__nav--next {
  right: 16px;
}

.lightbox__counter {
  position:       fixed;
  bottom:         20px;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        2;
  font-family:    var(--font-body);
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  color:          rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  white-space:    nowrap;
}

@media (max-width: 600px) {
  .lightbox__nav--prev {
    left:   8px;
    width:  40px;
    height: 40px;
  }

  .lightbox__nav--next {
    right:  8px;
    width:  40px;
    height: 40px;
  }

  .lightbox__stage {
    max-width: 96vw;
  }
}


/* ── 11. Responsive overrides ─────────────────────── */
@media (max-width: 480px) {
  .gnav__title {
    display: none;
  }

  .gallery-header {
    padding-bottom: 32px;
  }

  .gallery-heading {
    font-size: 32px;
  }

  .gallery-filters {
    padding-bottom: 28px;
    gap: 6px;
  }

  .filter-btn {
    font-size: 0.58rem;
    padding:   0.5em 1em;
  }
}


/* ── 12. Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-item__media,
  .gallery-item__overlay {
    transition: none !important;
  }

  .gallery-item {
    opacity:   1 !important;
    transform: none !important;
  }

  .gallery-item { animation: none !important; }
}