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

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

.page-banner.gallery-banner{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius-lg) + 4px);
  margin: calc(var(--header-height-mobile) + 1rem) auto 1.7rem;
  padding: clamp(1.5rem, 4vw, 2.8rem) 0;
  background: linear-gradient(135deg, rgba(233,217,184,0.94) 0%, rgba(247,239,227,0.92) 44%, rgba(255,255,255,0.98) 100%);
  box-shadow: var(--shadow-lg);
}

.page-banner.gallery-banner::before{
  content: '';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top center, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(31,27,23,0.04), rgba(31,27,23,0.06));
  pointer-events:none;
}

.gallery-banner-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

.breadcrumb{
  width:100%;
  max-width:fit-content;
}

.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:center;
  color:var(--color-text-muted);
  font-size:0.84rem;
  list-style:none;
}

.breadcrumb li+li::before{
  content:'/';
  color:var(--color-text-muted);
}

.breadcrumb a{
  color:var(--color-text);
  opacity:0.85;
}

.page-banner-title{
  margin:0;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1.05;
  max-width:820px;
}

.page-banner-desc{
  margin:0;
  max-width:760px;
  font-size:clamp(0.95rem, 2.2vw, 1.05rem);
  line-height:1.85;
  color:var(--color-text-muted);
  text-align:center;
}

.gallery-section{padding:0 0 3rem}

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

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

.album-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--color-bg-alt);display:flex;flex-direction:column;border:1px solid rgba(31,27,23,0.06);padding:0;cursor:pointer;transition:transform .24s ease, box-shadow .24s ease}
.album-card:hover,.album-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.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,.album-card:focus-visible .album-cover{transform:scale(1.03)}
.album-count-badge{position:absolute;top:0.7rem;left:0.7rem;display:inline-flex;align-items:center;gap:0.35rem;padding:0.35rem 0.6rem;border-radius:999px;background:rgba(0,0,0,0.56);color:#fff;font-size:0.72rem;font-weight:700;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,0.2)}
.album-count-badge i{font-size:0.9rem}
.album-content{display:flex;flex-direction:column;gap:0.45rem;padding:0.9rem 0.95rem 1rem;background:linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(250,245,238,0.95) 100%)}
.album-title{color:var(--color-text);font-weight:700;font-size:clamp(0.96rem, 2.4vw, 1.1rem);line-height:1.35;margin:0}
.album-meta{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;color:var(--color-text-muted);font-size:clamp(0.78rem, 1.8vw, 0.9rem)}
.album-date{font-weight:600}
.album-count{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:480px){
  .gallery-albums-view{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--gallery-gap)}
}
@media(min-width:768px){
  .gallery-albums-view{grid-template-columns:repeat(3, minmax(0, 1fr));gap:1rem}
  .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, minmax(0, 1fr));gap:1.15rem}
  .photos-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:380px){
  .gallery-section{padding:1.35rem 0 2rem}
  .gallery-heading{margin-bottom:0.9rem}
  .gallery-intro{font-size:0.88rem;line-height:1.7}
  .album-content{padding:0.8rem 0.8rem 0.9rem}
  .album-title{font-size:0.94rem}
  .album-meta{font-size:0.74rem}
}

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