/* =====================================================
   Stacked Gallery – stacked-gallery.css
   ===================================================== */

/* ── Custom properties ───────────────────────────── */
.sg-wrap {
  --sg-radius:      12px;
  --sg-shadow:      0 8px 32px rgba(0,0,0,.18);
  --sg-accent:      #1a1a2e;
  --sg-white:       #ffffff;
  --sg-ease:        cubic-bezier(.4,0,.2,1);
  --sg-strip-h:     72px;
  display:          inline-block;
  font-family:      'Georgia', serif;
}

/* ── Album title ─────────────────────────────────── */
.sg-album-title {
  font-size:    .85rem;
  font-weight:  600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:        #666;
  margin:       0 0 .6rem 6px;
}

/* ─────────────────────────────────────────────────── 
   STACK WIDGET
─────────────────────────────────────────────────── */
.sg-stack {
  position:  relative;
  display:   inline-block;
  cursor:    pointer;
  /* enough room for the offset cards behind */
  padding:   10px 18px 0 0;
  outline:   none;
}

/* base card style */
.sg-card {
  border-radius: var(--sg-radius);
  overflow:      hidden;
  position:      absolute;
  background:    var(--sg-white);
  box-shadow:    var(--sg-shadow);
  transition:    transform .3s var(--sg-ease), opacity .3s;
}

/* back shadow cards */
.sg-card--back2 {
  width:   100%;
  height:  100%;
  top:     0; right: 0;
  transform: rotate(5deg) translate(10px,-4px);
  opacity: .35;
  background: #c9d6e3;
  z-index: 1;
}
.sg-card--back1 {
  width:   100%;
  height:  100%;
  top:     0; right: 0;
  transform: rotate(2.5deg) translate(5px,-2px);
  opacity: .6;
  background: #dde8f2;
  z-index: 2;
}

/* front card */
.sg-card--front {
  position: relative;
  z-index:  3;
  line-height: 0;
}

.sg-stack:hover .sg-card--back2 { transform: rotate(7deg) translate(14px,-6px); }
.sg-stack:hover .sg-card--back1 { transform: rotate(3.5deg) translate(7px,-3px); }
.sg-stack:hover .sg-card--front { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.sg-stack:focus-visible .sg-card--front { outline: 3px solid #4a90e2; outline-offset: 3px; }

/* thumbnail image */
.sg-thumb {
  display:     block;
  width:       280px;
  height:      200px;
  object-fit:  cover;
  border-radius: var(--sg-radius);
  user-select: none;
  pointer-events: none;
}

/* photo count badge */
.sg-count-badge {
  position:    absolute;
  bottom:      10px; right: 10px;
  background:  rgba(0,0,0,.55);
  color:       #fff;
  font-family: system-ui, sans-serif;
  font-size:   .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding:     4px 10px;
  border-radius: 20px;
  display:     flex;
  align-items: center;
  gap:         5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────── 
   LIGHTBOX
─────────────────────────────────────────────────── */
.sg-lightbox {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    99999;
  align-items: center;
  justify-content: center;
}
.sg-lightbox.sg-open { display: flex; }

/* backdrop */
.sg-lb-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(10,10,18,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation:  sgFadeIn .22s var(--sg-ease);
}

/* shell */
.sg-lb-shell {
  position:   relative;
  z-index:    1;
  width:      min(90vw, 860px);
  background: #0d0d1a;
  border-radius: 18px;
  overflow:   hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation:  sgSlideUp .28s var(--sg-ease);
  display:    flex;
  flex-direction: column;
}

/* close button */
.sg-lb-close {
  position:   absolute;
  top:        14px; right: 14px;
  z-index:    10;
  width:      36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border:     none;
  color:      #fff;
  cursor:     pointer;
  display:    flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sg-lb-close:hover { background: rgba(255,255,255,.22); }

/* stage (image + arrows) */
.sg-lb-stage {
  display:  flex;
  align-items: center;
  gap:      0;
  padding:  0;
  min-height: 320px;
  position: relative;
}

.sg-lb-img-wrap {
  flex:     1;
  display:  flex;
  align-items: center;
  justify-content: center;
  padding:  20px 0 12px;
  min-height: 320px;
}

.sg-lb-img {
  max-width:  100%;
  max-height: 60vh;
  border-radius: 10px;
  object-fit: contain;
  display:    block;
  transition: opacity .2s;
  user-select: none;
}
.sg-lb-img.sg-fading { opacity: 0; }

/* arrows */
.sg-lb-arrow {
  flex-shrink: 0;
  width:      48px; height: 48px;
  background: rgba(255,255,255,.08);
  border:     none;
  color:      #fff;
  cursor:     pointer;
  display:    flex; align-items: center; justify-content: center;
  transition: background .15s;
  align-self: stretch;
}
.sg-lb-arrow:hover { background: rgba(255,255,255,.18); }
.sg-lb-prev { border-radius: 0; }
.sg-lb-next { border-radius: 0; }

/* footer */
.sg-lb-footer {
  display:  flex;
  align-items: center;
  justify-content: space-between;
  padding:  6px 20px 10px;
}
.sg-lb-caption {
  font-family: 'Georgia', serif;
  font-style: italic;
  color:      rgba(255,255,255,.6);
  font-size:  .85rem;
  margin:     0;
  max-width:  70%;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}
.sg-lb-counter {
  font-family: system-ui, sans-serif;
  font-size:  .78rem;
  color:      rgba(255,255,255,.35);
  letter-spacing: .06em;
  white-space: nowrap;
}

/* thumbnail strip */
.sg-lb-strip {
  display:  flex;
  gap:      6px;
  padding:  10px 14px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
  -webkit-overflow-scrolling: touch;
}
.sg-lb-strip::-webkit-scrollbar { height: 4px; }
.sg-lb-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.sg-lb-strip-btn {
  flex-shrink: 0;
  width:      var(--sg-strip-h);
  height:     var(--sg-strip-h);
  border:     2px solid transparent;
  border-radius: 8px;
  overflow:   hidden;
  cursor:     pointer;
  padding:    0;
  background: none;
  opacity:    .55;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.sg-lb-strip-btn img {
  width:   100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.sg-lb-strip-btn:hover { opacity: .85; transform: translateY(-2px); }
.sg-lb-strip-btn.sg-active {
  opacity:      1;
  border-color: #4a90e2;
  transform:    translateY(-2px);
}

/* ── Animations ──────────────────────────────────── */
@keyframes sgFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes sgSlideUp { from { transform: translateY(24px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
  .sg-thumb        { width: 220px; height: 160px; }
  .sg-lb-img-wrap  { min-height: 200px; }
  .sg-lb-arrow     { width: 36px; }
  .sg-lb-strip     { --sg-strip-h: 52px; }
}