/* ========== CATEGORY TABS ========== */
.gallery-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 2.5rem auto 3rem auto;
}

.gallery-tab {
  background: transparent;
  border: 2px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-soft);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  padding: 0.6rem 1.6rem;
  padding-bottom: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  transition: color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.2s ease;
}

.gallery-tab:hover {
  color: var(--color-gold-bright);
  border-color: var(--color-crimson);
  box-shadow: 0 0 10px var(--color-crimson), 0 0 20px var(--color-gold-dim);
  transform: translateY(-1px);
}

.gallery-tab.is-active {
  color: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  box-shadow: 0 0 14px var(--color-gold), 0 0 24px var(--color-crimson-dim);
  transform: translateY(-1px);
}

/* ========== GALLERY VISIBILITY ========== */
.gallery-view {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-view.is-visible {
  display: block;
  opacity: 1;
}

/* ========== GALLERY GRID ========== */
.gallery-grid {
  display: grid;
  gap: var(--space-md);
  cursor: pointer;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-soft);
  border: 2px solid rgba(212, 175, 55, 0.25);
  transition: border-color 0.25s ease, transform 0.25s ease,
              box-shadow 0.25s ease;
}

.gallery-item img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover {
  border-color: var(--color-crimson);
  box-shadow: 0 0 12px var(--color-crimson), 0 0 25px var(--color-gold-dim);
  transform: translateY(0px);
}

.gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.1) contrast(1.1) saturate(1.1);
}

.gallery-play-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 1.4rem;
  color: var(--color-gold-bright);
  text-shadow: 0 0 6px var(--color-gold), 0 0 12px var(--color-gold-bright);
  opacity: 0.9;
  pointer-events: none;
}

/* ========== LIGHTBOX ========== */
.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(20, 10, 6, 0.88);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(10, 10, 12, 0.9) 100%
  );
  z-index: 0;
}

.lightbox-content {
  position: relative;
  z-index: 2;
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--radius-soft);
  border: 2px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 25px rgba(169, 27, 13, 0.4),
              0 0 55px rgba(212, 175, 55, 0.2);
  background: linear-gradient(
    135deg,
    rgba(21, 21, 24, 0.95) 0%,
    rgba(10, 10, 12, 0.9) 100%
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Media inside lightbox */
.lightbox-image,
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-soft);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.lightbox-image.loaded,
.lightbox-video.loaded {
  opacity: 1;
}

.lightbox-video {
  cursor: pointer;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: -1.2rem;
  right: 0.2rem;
  font-size: 3.0rem;
  font-family: var(--font-display);
  color: var(--color-gold);
  background: none;
  border: none;
  cursor: pointer;
  text-shadow: 0 0 10px var(--color-gold);
  z-index: 3;
  transition: color 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
  color: var(--color-crimson);
  transform: scale(1.2);
}

/* ---- Visible centered arrows with manual offset controls ---- */
:root {
  --arrow-offset-x: 0px;  /* distance from the edge, increase to push outwards */
  --arrow-offset-y: -18px;   /* vertical adjustment, + moves down, - moves up */
}

.lightbox-nav {
  position: absolute;
  top: calc(50% + var(--arrow-offset-y));
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--color-gold-bright);
  background: none;
  border: none;
  opacity: 1;
  pointer-events: auto;
  text-shadow: 0 0 12px var(--color-gold),
               0 0 20px var(--color-crimson-dim);
  z-index: 9999;
  transition: color 0.25s ease, transform 0.2s ease;
  cursor: pointer;
}

.lightbox-prev {
  left: var(--arrow-offset-x);
}

.lightbox-next {
  right: var(--arrow-offset-x);
}

.lightbox-nav:hover {
  color: var(--color-crimson);
  transform: translateY(-50%) scale(1.1);
}

/* Mobile scale */
@media (max-width: 768px) {
  :root {
    --arrow-offset-x: 30px;
    --arrow-offset-y: 0px;
  }
  .lightbox-nav {
    font-size: 2.8rem;
  }

  /* Category tabs mobile adjustments */
  .gallery-tabs {
    gap: 0.4rem;
	margin: 0.8rem auto 0.8rem auto; /* Add this line */
  }

  .gallery-tab {
    padding: 0.4rem 0.6rem;
	padding-bottom: 18px;
    font-size: 1.5rem;
  }
}

/* Cursor fix */
button,
.gallery-tab,
.gallery-item,
.lightbox-close,
.lightbox-nav {
  cursor: pointer;
}

/* Prevent page jump when scrollbar is hidden */
body.no-scroll {
  overflow: hidden;
  /* Reserve space equal to scrollbar width */
  margin-right: calc(-1 * (100vw - 100%));
}