/* =============================================================================
   masonry-gallery.css
   Self-contained styles for the media masonry grid + lightbox overlay.

   Usage:
     <link rel="stylesheet" href="masonry-gallery.css">

   Expected CSS custom properties (define on :root in your host page, or the
   defaults below will be used):
     --bg      background colour  (default #080808)
     --fg      foreground colour  (default #EDEAE4)
     --dim     muted foreground   (default rgba(237,234,228,0.36))
     --dimmer  very muted         (default rgba(237,234,228,0.12))
     --border  subtle border      (default rgba(237,234,228,0.07))
     --gap     masonry gutter     (default 3px)
   ============================================================================= */

/* ── Fallback tokens (only applied when the host page hasn't defined them) ── */
:root {
  --mg-bg:     var(--bg,     #080808);
  --mg-fg:     var(--fg,     #EDEAE4);
  --mg-dim:    var(--dim,    rgba(237,234,228,0.36));
  --mg-dimmer: var(--dimmer, rgba(237,234,228,0.12));
  --mg-border: var(--border, rgba(237,234,228,0.07));
  --mg-gap:    var(--gap,    3px);
}

/* ── MASONRY CONTAINER ────────────────────────────────────────────────────────
   Height is set by JS after layout. Items are absolutely positioned.
   visibility:hidden until JS marks it .laid-out to prevent flash of
   un-positioned items.
   ─────────────────────────────────────────────────────────────────────────── */
.media-masonry {
  position:   relative;
  margin:     46px 0;
  visibility: hidden;
}
.media-masonry.laid-out {
  visibility: visible;
}

/* Each wrapper is absolutely positioned by JS */
.mc-wrap {
  position:   absolute;
  box-sizing: border-box;
}

/* ── MEDIA CARD ─────────────────────────────────────────────────────────────── */
.media-card {
  position:   relative;
  overflow:   hidden;
  background: #0d0d0d;
  display:    block;
  cursor:     pointer;
}

/* Below-card label area */
.mc-label {
  padding:     10px 2px 0;
  font-family: 'Syne', sans-serif;
  font-size:   0.84rem;
  line-height: 1.65;
  color:       rgba(237,234,228,0.55);
}
.mc-label-title {
  color:       rgba(237,234,228,0.72);
  font-weight: 600;
  font-size:   0.82rem;
}
.mc-label-sub {
  font-family:    'Syne Mono', monospace;
  font-size:      0.58rem;
  letter-spacing: 0.16em;
  color:          rgba(237,234,228,0.3);
  margin-top:     2px;
}
.mc-label-desc {
  font-family: 'Syne', sans-serif;
  font-size:   0.78rem;
  line-height: 1.6;
  color:       rgba(237,234,228,0.42);
  margin-top:  7px;
}
.mc-label-desc:empty { display: none; }

/* Media elements */
.media-card img,
.media-card video {
  display:     block;
  width:       100%;
  height:      auto;
  max-height:  70vh;
  object-fit:  cover;
  filter:      grayscale(80%) brightness(0.72) saturate(0.8);
  transition:  filter 0.45s ease,
               transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.media-card:hover img,
.media-card:hover video {
  filter:    grayscale(10%) brightness(0.92) saturate(1.1);
  transform: scale(1.04);
}

/* Inset border overlay */
.media-card::after {
  content:         '';
  position:        absolute;
  inset:           0;
  border:          1px solid rgba(237,234,228,0.04);
  pointer-events:  none;
  z-index:         4;
  transition:      border-color 0.3s;
}
.media-card:hover::after { border-color: rgba(237,234,228,0.18); }

/* Gradient overlay (revealed on hover) */
.mc-overlay {
  position:        absolute;
  inset:           0;
  z-index:         2;
  background:      linear-gradient(180deg, transparent 45%, rgba(8,8,8,0.88) 100%);
  opacity:         0;
  transition:      opacity 0.35s;
  pointer-events:  none;
}
.media-card:hover .mc-overlay { opacity: 1; }

/* Hover caption (slides up) */
.mc-info {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    3;
  padding:    12px 15px 16px;
  transform:  translateY(6px);
  opacity:    0;
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1),
              opacity   0.28s;
}
.media-card:hover .mc-info { transform: translateY(0); opacity: 1; }

.mc-title {
  font-family:    'Cormorant Garamond', serif;
  font-size:      1.05rem;
  font-weight:    300;
  letter-spacing: 0.05em;
  color:          var(--mg-fg);
  line-height:    1.2;
  margin-bottom:  4px;
}
.mc-sub {
  font-family:    'Syne Mono', monospace;
  font-size:      0.6rem;
  letter-spacing: 0.18em;
  color:          rgba(237,234,228,0.58);
}

/* Corner badge (e.g. "Video") */
.mc-badge {
  position:        absolute;
  top:             10px;
  left:            10px;
  z-index:         5;
  font-family:     'Syne Mono', monospace;
  font-size:       0.5rem;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  padding:         3px 9px;
  border-radius:   100px;
  border:          1px solid rgba(237,234,228,0.2);
  color:           rgba(237,234,228,0.65);
  background:      rgba(8,8,8,0.65);
  backdrop-filter: blur(6px);
}

/* ── LIGHTBOX ────────────────────────────────────────────────────────────────
   The lightbox <div id="mg-lightbox"> is injected into <body> by masonry-gallery.js.
   ─────────────────────────────────────────────────────────────────────────── */
#mg-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(8,8,8,0.96);
  backdrop-filter: blur(28px);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.38s cubic-bezier(0.16,1,0.3,1);
}
#mg-lightbox.open {
  opacity:        1;
  pointer-events: all;
}

#mg-lb-stage {
  position:        relative;
  width:           min(90vw, 1300px);
  height:          min(86vh, 960px);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

#mg-lb-media-wrap {
  max-width:  100%;
  max-height: 100%;
  display:    flex;
  align-items:     center;
  justify-content: center;
}
#mg-lb-media-wrap img {
  display:    block;
  max-width:  min(90vw, 1300px);
  max-height: min(80vh, 920px);
  width:      auto;
  height:     auto;
  object-fit: contain;
  opacity:    0;
  transition: opacity 0.3s ease;
  border:     1px solid rgba(237,234,228,0.07);
}
#mg-lb-media-wrap img.ready { opacity: 1; }
#mg-lb-media-wrap video {
  display:    block;
  max-width:  min(90vw, 1300px);
  max-height: min(80vh, 920px);
  width:      auto;
  height:     auto;
  opacity:    0;
  transition: opacity 0.3s ease;
  border:     1px solid rgba(237,234,228,0.07);
}
#mg-lb-media-wrap video.ready { opacity: 1; }

/* Prev / next arrows */
.mg-lb-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  border:          1px solid rgba(237,234,228,0.18);
  background:      rgba(8,8,8,0.65);
  backdrop-filter: blur(10px);
  color:           rgba(237,234,228,0.6);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      border-color 0.22s, color 0.22s;
}
.mg-lb-arrow:hover { border-color: rgba(237,234,228,0.5); color: var(--mg-fg); }
.mg-lb-arrow svg {
  width:            18px;
  height:           18px;
  stroke:           currentColor;
  fill:             none;
  stroke-width:     1.5;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}
#mg-lb-prev { left:  -70px; }
#mg-lb-next { right: -70px; }

/* Close button */
#mg-lb-close {
  position:        fixed;
  top:             28px;
  right:           38px;
  z-index:         520;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1px solid rgba(237,234,228,0.16);
  background:      rgba(8,8,8,0.65);
  backdrop-filter: blur(10px);
  color:           rgba(237,234,228,0.5);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      border-color 0.22s, color 0.22s;
}
#mg-lb-close:hover { border-color: rgba(237,234,228,0.45); color: var(--mg-fg); }
#mg-lb-close svg {
  width:          14px;
  height:         14px;
  stroke:         currentColor;
  fill:           none;
  stroke-width:   1.8;
  stroke-linecap: round;
}

/* Counter */
#mg-lb-counter {
  position:       fixed;
  top:            32px;
  left:           50%;
  transform:      translateX(-50%);
  font-family:    'Syne Mono', monospace;
  font-size:      0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--mg-dimmer);
  z-index:        520;
  pointer-events: none;
}

/* Caption block */
#mg-lb-caption {
  position:        fixed;
  bottom:          48px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         520;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  pointer-events:  none;
  max-width:       min(72vw, 860px);
  width:           max-content;
}

#mg-lb-title-wrap {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  opacity:         0;
  transform:       translateY(6px);
  transition:      opacity 0.3s 0.12s, transform 0.3s 0.12s;
}
#mg-lightbox.open #mg-lb-title-wrap { opacity: 1; transform: translateY(0); }

#mg-lb-title {
  font-family:    'Cormorant Garamond', serif;
  font-size:      1.2rem;
  font-weight:    300;
  letter-spacing: 0.06em;
  color:          var(--mg-fg);
  white-space:    nowrap;
}
#mg-lb-sub {
  font-family:    'Syne Mono', monospace;
  font-size:      0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--mg-dim);
}
#mg-lb-desc {
  font-family: 'Syne', sans-serif;
  font-size:   0.82rem;
  line-height: 1.72;
  color:       rgba(237,234,228,0.42);
  text-align:  center;
  max-width:   min(72vw, 860px);
  margin-top:  2px;
}
#mg-lb-desc:empty { display: none; }

/* Dot pagination */
#mg-lb-dots {
  display:        flex;
  align-items:    center;
  gap:            8px;
  pointer-events: all;
}
.mg-lb-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  border:       1px solid rgba(237,234,228,0.3);
  background:   transparent;
  cursor:       pointer;
  transition:   background 0.25s, border-color 0.25s, transform 0.25s;
}
.mg-lb-dot.active {
  background:   var(--mg-fg);
  border-color: var(--mg-fg);
  transform:    scale(1.3);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  /* Always show full-colour media on touch devices (no hover state) */
  .media-card img,
  .media-card video {
    filter:    grayscale(0%) brightness(0.85) saturate(1) !important;
    transform: none !important;
  }
  .media-card .mc-overlay { opacity: 1 !important; }
  .media-card .mc-info {
    transform: translateY(0) !important;
    opacity:   1 !important;
  }
  .media-card::after { border-color: rgba(237,234,228,0.10) !important; }

  #mg-lb-prev { left:  -4px; }
  #mg-lb-next { right: -4px; }
}