/* ========== CONFIGURATION — TWEAK THESE VALUES ========== */
:root {
  /* Lightbox player maximum size.
     The player fills as much space as possible within BOTH bounds
     while preserving its natural aspect ratio.
     - Set --lightbox-width to limit how wide it can get (e.g. 50vw)
     - Set --lightbox-height to limit how tall it can get (e.g. 50vh)
     The tighter constraint wins automatically. */
  --lightbox-width: 90vw;
  --lightbox-max-width: 1200px;
  --lightbox-height: 50vh;

  /* Vertical offset from center (positive = push down, negative = up) */
  --lightbox-vertical-offset: 0px;

  /* Close button position */
  --close-top: -3.0rem;
  --close-right: 0.2rem;
  --close-size: 3rem;

  /* Nav arrows position and size */
  --arrow-offset-x: -40px;
  --arrow-offset-y: 0px;
  --arrow-size: 3.4rem;

  /* Thumbnail aspect ratios */
  --thumb-ratio-image: 1 / 1;
  --thumb-ratio-video: 16 / 9;

  /* Font alias */
  --font-display-cond: var(--font-display);
}

/* ========== CATEGORY TABS ========== */
.gallery-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 3rem;
margin: 2.5rem auto 3rem;
}
.gallery-tab {
background: transparent;
border: 1px solid var(--glass-border);
border-radius: var(--radius-soft);
color: var(--color-text);
font-family: var(--font-display-cond);
font-size: 1.6rem;
letter-spacing: 0.15em;
padding: 1.2rem 1.6rem 1.4rem;
text-align: center;
cursor: pointer;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
opacity: 0.8;
transition: color 0.25s ease, border-color 0.25s ease,
box-shadow 0.25s ease, opacity 0.25s ease;
}
.gallery-tab:hover {
color: var(--color-crimson-bright);
border-color: var(--color-crimson);
box-shadow: var(--glow-crimson);
opacity: 1;
}
.gallery-tab.is-active {
color: var(--color-gold-bright);
border-color: var(--color-gold-bright);
box-shadow: var(--glow-gold), var(--glow-crimson-intense);
opacity: 1;
}

/* ========== 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;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
cursor: pointer;
}
@media (min-width: 480px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--radius-soft);
border: 1px solid var(--glass-border);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.gallery-item img {
width: 100%;
display: block;
aspect-ratio: var(--thumb-ratio-image);
object-fit: cover;
filter: saturate(0.85) brightness(0.92);
transition: filter 0.3s ease;
}
.gallery-item:has(.gallery-play-icon) img {
aspect-ratio: var(--thumb-ratio-video);
}
.gallery-item:hover {
border-color: var(--color-crimson);
box-shadow: var(--glow-crimson-intense);
}
.gallery-item:hover img {
filter: saturate(1.1) brightness(1.08) contrast(1.08);
}
.gallery-play-icon {
position: absolute;
bottom: 8px;
right: 8px;
font-size: 1.4rem;
color: var(--color-gold-bright);
text-shadow: var(--glow-gold);
opacity: 0.9;
pointer-events: none;
}

/* ========== LIGHTBOX OVERLAY ========== */
.lightbox {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, rgba(20, 14, 30, 0.55) 0%, transparent 70%),
rgba(2, 4, 14, 0.93);
z-index: 1000;
opacity: 0;
pointer-events: none;
contain: layout style;
transition: opacity 0.3s ease;
}
.lightbox.is-visible {
opacity: 1;
pointer-events: auto;
}

body.lightbox-open .nav-wrapper {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.lightbox-open .nav-right li::before,
body.lightbox-open .nav-right li::after {
animation-play-state: paused;
}
body.lightbox-open #signal-grid-canvas {
visibility: hidden;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
var(--color-gold-dim) 0%,
rgba(8, 8, 16, 0.5) 100%
);
z-index: 0;
}

/* ========== LIGHTBOX CONTENT SHELL ========== */
/* Container shrink-wraps the media — never wider or taller than the player. */
.lightbox-content {
position: relative;
z-index: 2;
width: fit-content;
max-width: min(var(--lightbox-width), var(--lightbox-max-width));
max-height: var(--lightbox-height);
margin-top: var(--lightbox-vertical-offset);
border-radius: var(--radius-soft);
border: 1px solid var(--glass-border);
box-shadow: var(--glow-crimson), var(--glow-gold);
background: linear-gradient(
135deg,
rgba(13, 13, 22, 0.96) 0%,
rgba(8, 8, 16, 0.92) 100%
);
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}

/* ========== LIGHTBOX MEDIA ELEMENTS ========== */
.lightbox-media {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

/* IMAGE — natural proportions, capped by both width and height */
.lightbox-image {
display: block;
max-width: min(var(--lightbox-width), var(--lightbox-max-width));
max-height: var(--lightbox-height);
width: auto;
height: auto;
border-radius: var(--radius-soft);
object-fit: contain;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.lightbox-image.loaded { opacity: 1; }

/* SELF-HOSTED VIDEO — natural proportions, capped by both bounds */
.lightbox-video {
display: block;
max-width: min(var(--lightbox-width), var(--lightbox-max-width));
max-height: var(--lightbox-height);
width: auto;
height: auto;
border-radius: var(--radius-soft);
object-fit: contain;
cursor: pointer;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.lightbox-video.loaded { opacity: 1; }

/*
YOUTUBE IFRAME — forced 16:9.
Width is the MINIMUM of:
  - desired width (--lightbox-width)
  - absolute ceiling (--lightbox-max-width)
  - the width that would make height equal --lightbox-height at 16:9
This guarantees the iframe never exceeds either bound and the
container shrink-wraps it with zero side padding.
*/
.lightbox-youtube {
display: block;
width: min(
var(--lightbox-width),
var(--lightbox-max-width),
calc(var(--lightbox-height) * 16 / 9)
);
aspect-ratio: 16 / 9;
height: auto;
border: none;
border-radius: var(--radius-soft);
}

/* ========== CLOSE BUTTON ========== */
.lightbox-close {
position: absolute;
top: var(--close-top);
right: var(--close-right);
font-size: var(--close-size);
font-family: var(--font-display);
color: var(--color-gold);
background: none;
border: none;
cursor: pointer;
text-shadow: var(--glow-gold);
opacity: 0.85;
z-index: 3;
transition: color 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease;
}
.lightbox-close:hover {
color: var(--color-crimson-bright);
opacity: 1;
text-shadow: var(--glow-crimson-intense);
}

/* ========== NAV ARROWS ========== */
.lightbox-nav {
position: absolute;
top: calc(50% + var(--arrow-offset-y));
transform: translateY(-50%);
font-family: var(--font-display);
font-size: var(--arrow-size);
color: var(--color-gold-bright);
background: none;
border: none;
opacity: 0.85;
pointer-events: auto;
text-shadow: var(--glow-gold);
z-index: 9999;
transition: color 0.25s ease, opacity 0.25s ease, text-shadow 0.25s ease;
}
.lightbox-prev { left:  var(--arrow-offset-x); }
.lightbox-next { right: var(--arrow-offset-x); }
.lightbox-nav:hover {
color: var(--color-crimson-bright);
opacity: 1;
text-shadow: var(--glow-crimson-intense);
}

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 768px) {
:root {
--arrow-offset-x: 8px;
--arrow-offset-y: 0px;
--arrow-size: 2.8rem;
--lightbox-width: 96vw;
}
.gallery-tabs {
gap: 0.6rem;
margin: 0.8rem auto;
}
.gallery-tab {
padding: 0.4rem 0.8rem 1rem;
font-size: 1.3rem;
}
}

/* ========== CURSOR HELPERS ========== */
button,
.gallery-tab,
.gallery-item,
.lightbox-close,
.lightbox-nav { cursor: pointer; }

body.no-scroll {
overflow: hidden;
margin-right: calc(-1 * (100vw - 100%));
}