/* ── GALLERY PAGE SPECIFICS ── */
.gallery-header {
  margin-bottom: 1.875rem; /* 30px */
}
.gallery-header h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.875rem, 5.5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 0.25rem;
}
.gallery-header .subtitle {
  font-size: clamp(0.75rem, 1.3vw, 0.875rem);
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.gallery-grid {
  column-width: var(--col-width);
  column-gap: var(--gallery-gap);
  padding: 0.125rem 0;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: var(--gallery-gap);
  background: var(--active-bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 100%;
}
.gallery-item:hover {
  border-color: var(--text-muted);
  transform: scale(1.008);
  z-index: 2;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.6);
}

.item-media {
  display: block;
  width: 100%;
  background: var(--active-bg);
  position: relative;
  overflow: hidden;
}
.item-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.3s, opacity 0.6s ease;
}
.gallery-item:hover .item-media img {
  filter: brightness(1.04);
}

.item-media.slideshow {
  position: relative;
}
.item-media.slideshow .slide-img {
  opacity: 1;
  transition: opacity 0.8s ease;
}
.item-media.slideshow .slide-img.fade-out {
  opacity: 0;
}

.slideshow-dots {
  position: absolute;
  bottom: .75rem; /* 10px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.375rem;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 0.25rem .75rem;
  border-radius: 1.25rem;
  border: var(--border-width) solid var(--border);
  pointer-events: none;
}
.slideshow-dots .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.3s, transform 0.3s;
}
.slideshow-dots .dot.active {
  background: var(--text);
  transform: scale(1.25);
}

.multi-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  padding: 0.125rem 0.75rem;
  border-radius: 1.25rem;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: var(--border-width) solid var(--border);
  z-index: 3;
  pointer-events: none;
  font-family: 'Space Grotesk', sans-serif;
}

.gallery-item .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 0.875rem 0.875rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  z-index: 2;
}
.gallery-item:hover .overlay,
.gallery-item:focus .overlay {
  opacity: 1;
}
.gallery-item .overlay .title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.125rem;
}
.gallery-item .overlay .desc {
  font-size: .75rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.placeholder-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.375rem;
  padding: 30% 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--active-bg);
  min-height: 10rem; /* 160px */
  text-align: center;
}
.placeholder-fallback span {
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--border-bright);
  letter-spacing: 0.05em;
}

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  cursor: pointer;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lb-container {
  display: flex;
  gap: 1.75rem;
  width: 100%;
  max-width: 80rem; /* 1280px */
  max-height: 88vh;
  background: var(--bg);
  border: var(--border-width) solid var(--border-bright);
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  cursor: default;
}

.lb-close {
  position: absolute;
  top: 0.875rem;
  right: 1.125rem;
  font-size: 1.625rem; /* 26px */
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-speed), transform 0.2s;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  z-index: 10;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.lb-close:hover {
  color: var(--text);
  transform: scale(1.1);
}

.lb-image-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  min-height: 18.75rem; /* 300px */
  padding: 1.25rem;
}
.lb-image-wrapper img {
  max-width: 100%;
  max-height: 78vh;
  display: block;
  object-fit: contain;
  border-radius: 0.125rem;
  background: var(--bg);
  box-shadow: 0 0.25rem 2.5rem rgba(0, 0, 0, 0.5);
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  border: var(--border-width) solid var(--border);
  color: var(--text-dim);
  width: 2.75rem; /* 44px */
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  z-index: 5;
  user-select: none;
}
.lb-nav:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
}
.lb-nav:active {
  transform: translateY(-50%) scale(0.94);
}
.lb-nav.prev {
  left: .75rem;
}
.lb-nav.next {
  right: .75rem;
}
.lb-nav.hidden {
  opacity: 0;
  pointer-events: none;
}

.lb-info-panel {
  width: var(--panel-width);
  min-width: 16.25rem; /* 260px */
  max-width: 23.75rem; /* 380px */
  padding: 2.25rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  background: var(--active-bg);
  border-left: var(--border-width) solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
}
.lb-info-panel::-webkit-scrollbar {
  width: 0.25rem;
}
.lb-info-panel::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 0.125rem;
}
.lb-info-panel .lb-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
  word-break: break-word;
}
.lb-info-panel .lb-desc {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  color: var(--text-dim);
  letter-spacing: 0.03em;
  line-height: 1.5;
  font-weight: 300;
  padding-bottom: 0.5rem;
  border-bottom: var(--border-width) solid var(--border);
}
.lb-info-panel .lb-meta {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.lb-info-panel .lb-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--border);
  padding: 0.25rem 0.875rem;
  border-radius: 1.25rem;
  display: inline-block;
  width: fit-content;
  font-weight: 400;
}
.lb-info-panel .lb-label .label-text {
  color: var(--text-dim);
}
.lb-info-panel .lb-counter {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 300;
}
.lb-info-panel .lb-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}
.lb-info-panel .lb-dots .lb-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.25s, transform 0.2s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.lb-info-panel .lb-dots .lb-dot.active {
  background: var(--text);
  transform: scale(1.2);
}
.lb-info-panel .lb-dots .lb-dot:hover {
  background: var(--text-muted);
}
.lb-info-panel .lb-divider {
  width: 2.5rem;
  height: var(--border-width);
  background: var(--border-bright);
  margin: 0.25rem 0 0.125rem;
}


/* ── GALLERY RESPONSIVE ── */
@media (max-width: 56.25em) {
  .lb-container { flex-direction: column; max-height: 92vh; }
  .lb-image-wrapper { padding: 1rem 1rem 0.5rem; min-height: 12.5rem; flex: 0 1 auto; }
  .lb-image-wrapper img { max-height: 50vh; }
  .lb-info-panel { width: 100%; min-width: unset; max-width: unset; padding: 1.25rem 1.5rem 1.5rem; border-left: none; border-top: var(--border-width) solid var(--border); flex-shrink: 0; max-height: 40vh; overflow-y: auto; }
  .lb-nav { width: 2.25rem; height: 2.25rem; font-size: 1.125rem; }
  .lb-nav.prev { left: 0.375rem; } .lb-nav.next { right: 0.375rem; }
  .lb-close { top: .75rem; right: 0.875rem; font-size: 1.375rem; }
  .lb-info-panel .lb-title { font-size: clamp(1.125rem, 3.5vw, 1.5rem); }
  .lightbox { padding: 0.75rem; }
}
@media (max-width: 43.75em) {
  :root { --col-width: 13.75rem; --gallery-gap: .75rem; }
  .gallery-item .overlay .title { font-size: 0.6875rem; } .gallery-item .overlay .desc { font-size: 0.5625rem; }
  .lb-info-panel { padding: 1rem 1.125rem 1.125rem; } .lb-info-panel .lb-title { font-size: 1.0625rem; } .lb-info-panel .lb-desc { font-size: 0.75rem; }
  .lb-image-wrapper img { max-height: 40vh; }
  .multi-badge { font-size: 0.5rem; padding: 0.0625rem .75rem; top: 0.375rem; right: 0.375rem; }
  .slideshow-dots { bottom: 0.375rem; padding: 0.1875rem 0.5rem; } .slideshow-dots .dot { width: 0.3125rem; height: 0.3125rem; }
}
@media (max-width: 30em) {
  :root { --col-width: 10rem; --gallery-gap: 0.5rem; }
  .gallery-header h1 { font-size: 1.5rem; } .gallery-item .overlay { padding: .75rem; } .gallery-item .overlay .title { font-size: .75rem; } .gallery-item .overlay .desc { font-size: 0.5rem; }
  .lightbox { padding: 0.375rem; } .lb-container { border-radius: 0.125rem; }
  .lb-image-wrapper { padding: .75rem .75rem 0.25rem; min-height: 8.75rem; } .lb-image-wrapper img { max-height: 32vh; }
  .lb-info-panel { padding: 0.75rem 0.875rem 0.875rem; max-height: 36vh; } .lb-info-panel .lb-title { font-size: 0.9375rem; } .lb-info-panel .lb-desc { font-size: 0.6875rem; } .lb-info-panel .lb-label { font-size: 0.5625rem; padding: 0.125rem .75rem; }
  .lb-nav { width: 1.875rem; height: 1.875rem; font-size: 0.875rem; } .lb-nav.prev { left: 0.25rem; } .lb-nav.next { right: 0.25rem; } .lb-close { top: 0.375rem; right: .75rem; font-size: 1.125rem; }
  .lb-info-panel .lb-dots .lb-dot { width: 0.5rem; height: 0.5rem; }
  .multi-badge { font-size: 0.4375rem; padding: 0.0625rem 0.5rem; top: 0.25rem; right: 0.25rem; }
  .slideshow-dots { bottom: 0.25rem; padding: 0.125rem 0.375rem; gap: 0.25rem; } .slideshow-dots .dot { width: 0.25rem; height: 0.25rem; }
  .placeholder-fallback { font-size: 1.25rem; min-height: 7.5rem; padding: 20% 0.75rem; } .placeholder-fallback span { font-size: 0.5625rem; }
}
@media (max-width: 22.5em) {
  :root { --col-width: 8.125rem; --gallery-gap: 0.375rem; }
  .gallery-header h1 { font-size: 1.25rem; }
}