/* Gallery styles - mobile-first, refined for UX */
:root{
  --gallery-gap: 12px;
}

/* prevent background scroll when lightbox open */
body.no-scroll{overflow:hidden}

.gallery-section{padding:2rem 0}
.gallery-heading{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem;align-items:center;text-align:center}
.gallery-heading .section-tag{display:inline-block}
.gallery-heading .section-title{max-width:900px;margin:0 auto}

.gallery-albums-view{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gallery-gap)}

.album-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:#111;display:block;border:0;padding:0}
.album-cover{width:100%;aspect-ratio:4/3;display:block;object-fit:cover;transition:transform .32s ease,filter .32s ease}
.album-card:hover .album-cover{transform:translateY(-6px) scale(1.04)}
.album-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%);}
.album-title{color:#fff;font-weight:700;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.1;text-shadow:0 6px 18px rgba(0,0,0,0.6)}
.album-meta{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.95);font-size:clamp(.85rem,1.8vw,.95rem)}
.album-count{background:rgba(0,0,0,0.35);padding:6px 10px;border-radius:999px;font-weight:600}

/* Photos view */
.gallery-photos-view{margin-top:1rem}
.gallery-photos-header{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;align-items:flex-start}
.gallery-photos-header .btn{align-self:flex-start}
.gallery-photos-header .gallery-meta{display:flex;flex-direction:column}
.gallery-meta h3{margin:0;font-size:clamp(1.1rem,2.8vw,1.8rem);line-height:1.05}
.gallery-date{color:var(--color-accent);font-size:clamp(.9rem,1.8vw,1rem);margin-top:4px}
.photos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.photo-item{overflow:hidden;border-radius:10px;position:relative}
.photo-thumb{width:100%;height:100%;display:block;object-fit:cover;transition:transform .28s ease,filter .28s ease,opacity .28s ease}
.photo-item:hover .photo-thumb{transform:scale(1.03);filter:brightness(1.04)}
.photos-loadmore{display:flex;justify-content:center;margin:18px 0}

/* Lightbox - glassmorphism + refined controls */
.gallery-lightbox{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, visibility .22s ease}
.gallery-lightbox.active{display:flex;opacity:1;visibility:visible;pointer-events:auto}
.lightbox-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.85));backdrop-filter:blur(6px)}
.lightbox-content{position:relative;z-index:2;max-width:min(1200px, 95vw);width:100%;padding:16px;display:flex;align-items:center;justify-content:center;gap:12px;animation:lightboxIn .28s ease}
.lightbox-figure{margin:0;flex:1;display:flex;align-items:center;justify-content:center;max-width:100%}
.lightbox-figure img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:10px;transition:opacity .28s ease}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.15);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
  font-size:1.5rem;
  line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
  z-index:3;
  transition:background-color .18s ease, opacity .18s ease;
  animation:none;
}

.lightbox-close{top:1rem;right:1rem}
.lightbox-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:1rem;top:50%;transform:translateY(-50%)}

.lightbox-close i,
.lightbox-prev i,
.lightbox-next i{font-size:1.5rem;line-height:1}

@media (pointer:fine){
  .lightbox-close:hover,
  .lightbox-prev:hover,
  .lightbox-next:hover,
  .lightbox-close:focus-visible,
  .lightbox-prev:focus-visible,
  .lightbox-next:focus-visible{
    background-color:rgba(255,255,255,0.25);
    opacity:1;
  }
}

@media (max-width:767px){
  .gallery-lightbox{
    inset:0;
    padding:0;
    overflow:hidden;
    background:rgba(10,8,6,0.97);
  }
  .gallery-lightbox.active{
    display:flex;
  }
  .lightbox-backdrop{
    background:rgba(10,8,6,0.97);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .lightbox-content{
    position:fixed;
    inset:0;
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:100vh;
    padding:0;
    margin:0;
    gap:0;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .lightbox-figure{
    width:100vw;
    height:100vh;
    max-width:100vw;
    max-height:100vh;
    margin:0;
  }
  .lightbox-figure img{
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:100vh;
    object-fit:contain;
    border-radius:0;
    display:block;
  }
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next{
    width:44px;
    height:44px;
    font-size:1.35rem;
    background:rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 16px rgba(0,0,0,0.35);
  }
  .lightbox-close{top:0.9rem;right:0.9rem}
  .lightbox-prev{left:0.9rem;top:50%}
  .lightbox-next{right:0.9rem;top:50%}
  .lightbox-counter{
    position:fixed;
    top:1rem;
    left:50%;
    transform:translateX(-50%);
    width:fit-content;
    padding:0.4rem 1rem;
  }
}

.lightbox-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  color:#fff;
  font-size:0.85rem;
  font-weight:600;
  white-space:nowrap;
  z-index:4;
}

@media (max-width:767px){
  .lightbox-counter{
    position:fixed;
    top:1rem;
    left:50%;
    transform:translateX(-50%);
    width:fit-content;
    padding:0.4rem 1rem;
    background:rgba(0,0,0,0.45);
    border-color:rgba(255,255,255,0.2);
  }
}

@media (min-width:768px){
  .lightbox-counter{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    padding:8px 12px;
  }
}

@keyframes lightboxIn{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:scale(1)}}

/* image switch animation helpers */
.img-fade-out{opacity:0;transform:scale(.98)}
.img-fade-in{opacity:1;transform:scale(1)}

/* Responsive */
@media(min-width:640px){
  .gallery-albums-view{grid-template-columns:repeat(3,1fr)}
  .photos-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-photos-header{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(min-width:1024px){
  .gallery-albums-view{grid-template-columns:repeat(4,1fr)}
  .photos-grid{grid-template-columns:repeat(4,1fr)}
}

/* utility */
.hidden{display:none !important}