/* Gallery styles: grid, carousel, fullscreen */
.gallery-controls { margin: 0 0 1.5rem 0; display:flex; gap:0.5rem; flex-wrap:wrap }
.gallery-option { display:none }
.gallery-option.visible { display:block }

#gallery-options { margin-bottom: 14rem !important }

/* Extra vertical space between the gallery section and the projects list */
#gallery-options + .posts { margin-top: 10rem !important }

@media (max-width:800px) {
	#gallery-options + .posts { margin-top: 6rem !important }
}

.grid-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0 }
.grid-item { position:relative; overflow:hidden; border-radius:6px; background:#111 }
.grid-item .media { width:100%; height:0; padding-top:66%; position:relative; display:block }
.grid-item img, .grid-item video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s }
.lightbox.open { opacity:1; pointer-events:auto }
.lightbox-content { max-width:95vw; max-height:90vh }
.lightbox img, .lightbox video { width:100%; height:100%; object-fit:contain }
.lightbox .close { position:absolute; top:1rem; right:1rem; background:transparent; color:#fff; border:none; font-size:2rem }
.gallery-error { color:#fff; }

/* Carousel */
.carousel { position:relative; max-width:900px; margin:0 auto }
.carousel .slides { position:relative; overflow:hidden; height:420px; background:#111 }
.carousel .slide { position:absolute; inset:0; display:none; align-items:center; justify-content:center }
.carousel .slide.active { display:flex }
.carousel .slide img, .carousel .slide video { width:100%; height:100%; object-fit:cover }
.carousel-nav { position:absolute; inset:0; pointer-events:none }
.carousel-nav button { pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.4); color:#fff; border:0; padding:0.6rem 0.8rem; font-size:1.4rem }
.carousel-nav #prev { left:0.5rem }
.carousel-nav #next { right:0.5rem }

/* Fullscreen slideshow */
.fullscreen-slideshow { display:flex; gap:0.6rem; flex-direction:column; align-items:center }
.fullscreen-slideshow .fs-stage { width:100%; max-width:1100px; height:65vh; background:#111; display:flex; align-items:center; justify-content:center }
.fs-stage img, .fs-stage video { width:100%; height:100%; object-fit:cover }
.fs-thumbs { display:flex; gap:0; overflow:auto; padding:0.4rem; max-width:1100px }
.fs-thumb { width:90px; height:60px; flex:0 0 auto; border-radius:4px; overflow:hidden }
.fs-thumb img, .fs-thumb video { width:100%; height:100%; object-fit:cover }

@media (max-width:640px){ .carousel .slides { height:260px } }

/* Background blurred carousel behind intro */
.bg-carousel { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; transition:opacity 0.1s ease-out }
/* Keep intro content above the background carousel */
#intro { position:relative }
#intro > :not(.bg-carousel) { position:relative; z-index:3 }
.bg-track { display:flex; gap:0; align-items:center; height:100%; transform:translate3d(0,0,0); will-change:transform }
.bg-item { flex:0 0 auto; width:34vw; height:100%; position:relative; overflow:hidden }
.bg-item img, .bg-item video { width:100%; height:100%; object-fit:cover; filter:blur(3px) brightness(0.55); transform:scale(1.06) }

@media (max-width:900px){ .bg-item { width:48vw } }
@media (max-width:480px){ .bg-item { width:80vw } }