/* DSTUDIO Gallery Styles */

/* Navigation header */
.nav-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(245,242,236,.96);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}
.nav-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:500;
  transition:all .3s var(--ease);
}
.back-link:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.page-title{
  font-family:"Inter", sans-serif;
  font-size:clamp(1.5rem, 3vw, 2rem);
  margin:0;
  font-weight:600;
  text-align:center;
  flex:1;
}
.gallery-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:500;
  font-size:.85rem;
  transition:all .3s var(--ease);
  text-decoration:none;
  color:inherit;
}
.gallery-btn:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.gallery-btn .btn-icon{
  display:none;
}
.gallery-btn .btn-text{
  display:inline;
}

/* Mobile responsive navigation */
@media (max-width: 767.98px) {
  .back-link .back-text {
    display: none;
  }
  .back-link {
    padding: .75rem;
    width: 48px;
    height: 48px;
    justify-content: center;
    border-radius: 50%;
  }
  .gallery-btn .btn-text {
    display: none;
  }
  .gallery-btn .btn-icon {
    display: inline;
  }
  .gallery-btn {
    padding: .75rem;
    width: 48px;
    height: 48px;
    justify-content: center;
    border-radius: 50%;
  }
}
}

/* Project header */
.project-title{
  font-family:"Inter", sans-serif;
  font-size:clamp(1.5rem, 3vw, 2rem);
  margin:0;
  font-weight:600;
  text-align:center;
  flex:1;
}

/* Hero section */
.hero{
  padding:var(--space) 0;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hero-content{
  text-align:center;
  max-width:800px;
  margin:0 auto;
}
.hero-content .eyebrow{
  color:var(--accent);
  font-weight:600;
  margin-bottom:.5rem;
}
.hero-content h1{
  font-family:"Inter", sans-serif;
  font-size:clamp(2.5rem, 5vw, 4rem);
  margin:1rem 0;
  font-weight:600;
  line-height:1.1;
}
.hero-content .lead{
  font-size:clamp(1.1rem, 2.5vw, 1.25rem);
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

/* Gallery section */
.gallery{
  padding:var(--space) 0;
}

/* Masonry grid layout */
.masonry-container{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px, 2vw, 24px);
  margin-top:2rem;
}
.masonry-item{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:all .4s var(--ease);
  aspect-ratio:4/3;
}
.masonry-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.masonry-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease), opacity .3s ease;
}
.masonry-item img.lazy{
  opacity:0.3;
}
.masonry-item:hover img{
  transform:scale(1.05);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .4s var(--ease);
}
.lightbox.active{
  opacity:1;
  visibility:visible;
}
.lightbox-content{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-content img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:var(--radius);
}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  width:48px;
  height:48px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  transition:all .3s var(--ease);
  backdrop-filter:blur(10px);
  z-index:10001;
}
.lightbox-close{
  top:2rem;
  right:2rem;
}
.lightbox-prev{
  left:2rem;
  top:50%;
  transform:translateY(-50%);
}
.lightbox-next{
  right:2rem;
  top:50%;
  transform:translateY(-50%);
}
.lightbox-close:hover,
.lightbox-nav:hover{
  background:rgba(255,255,255,.2);
  transform:scale(1.1);
}
.lightbox-prev:hover{
  transform:translateY(-50%) scale(1.1);
}
.lightbox-next:hover{
  transform:translateY(-50%) scale(1.1);
}

/* Project meta information */
.project-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:2rem;
  margin-top:3rem;
  padding:2rem 0;
  border-top:1px solid var(--line);
}
.meta-item h4{
  font-weight:600;
  margin:0 0 .5rem 0;
  color:var(--ink);
}
.meta-item p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

/* Responsive design */
@media (max-width: 991.98px){
  .masonry-container{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width: 767.98px){
  .masonry-container{
    grid-template-columns:repeat(2, 1fr);
  }

  /* Mobile lightbox improvements */
  .lightbox{
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  .lightbox-content{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem 1rem 1rem; /* Top padding for close button */
    box-sizing: border-box;
  }
  .lightbox-content img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .lightbox-close,
  .lightbox-nav{
    width:44px;
    height:44px;
    z-index:10002;
    background:rgba(0,0,0,.8);
    border:2px solid rgba(255,255,255,.3);
  }
  .lightbox-close{
    top:1rem;
    left:50%;
    transform:translateX(-50%);
    right:auto;
  }
  .lightbox-prev,
  .lightbox-next{
    display: none; /* Hide navigation buttons on mobile - use swipe instead */
  }
  .lightbox-prev:hover{
    transform:translateY(-50%) scale(1.1);
  }
  .lightbox-next:hover{
    transform:translateY(-50%) scale(1.1);
  }
}

@media (max-width: 575.98px){
  .masonry-container{
    grid-template-columns:1fr;
  }
  .project-meta{
    grid-template-columns:1fr;
    gap:1rem;
  }
}