/* ============================================================
   Lumps & Bumps slideshow — sits on top of base.css, site-extra.css
   and theme-ripple.css and reuses their tokens (navy stage,
   light-blue controls).
   ============================================================ */

.lb-intro{ padding-block:8px 0; border-bottom:none; }

.lb-show{ display:flex; flex-direction:column; gap:14px; }

.lb-frame{
  position:relative;
  background:linear-gradient(180deg, var(--footer-bg), var(--accent-strong));
  border:1px solid rgba(172,211,235,0.14);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.lb-stage{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  touch-action:pan-y;
}
@media (max-width:520px){ .lb-stage{ aspect-ratio:1/1; } }

.lb-stage img{
  position:absolute;
  top:50%; left:50%;
  width:92%; height:92%;
  max-width:none;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 18px 44px rgba(4,14,26,0.55);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0.965);
  transition:opacity 0.6s ease, transform 0.6s ease;
  z-index:0;
}
.lb-stage img.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
  z-index:1;
}
@media (prefers-reduced-motion: reduce){
  .lb-stage img{ transition:none; transform:translate(-50%,-50%) scale(1); }
}

.lb-arrow{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(172,211,235,0.35);
  background:rgba(15,47,74,0.78);
  color:var(--r-200);
  font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.lb-arrow:hover, .lb-arrow:focus-visible{ background:var(--r-200); color:var(--dark); outline:none; }
.lb-arrow.prev{ left:12px; }
.lb-arrow.next{ right:12px; }

.lb-count{
  position:absolute; top:12px; right:12px; z-index:5;
  background:rgba(15,47,74,0.78);
  border:1px solid rgba(172,211,235,0.25);
  color:var(--on-dark-soft);
  font-size:0.74rem; font-weight:600; letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  padding:4px 11px;
  border-radius:999px;
  pointer-events:none;
}

.lb-caption{
  padding:14px 18px 16px;
  text-align:center;
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:var(--on-dark);
  border-top:1px solid rgba(172,211,235,0.1);
}

.lb-thumbs{
  display:flex; gap:8px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}
.lb-thumbs::-webkit-scrollbar{ height:6px; }
.lb-thumbs::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }

.lb-thumb{
  flex:0 0 auto;
  width:58px; height:58px;
  padding:0;
  border:2px solid transparent;
  border-radius:8px;
  overflow:hidden;
  background:var(--surface-2);
  cursor:pointer;
}
.lb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0.6; transition:opacity 0.2s ease; }
.lb-thumb:hover img{ opacity:0.9; }
.lb-thumb.is-active{ border-color:var(--r-500); }
.lb-thumb.is-active img{ opacity:1; }
.lb-thumb:focus-visible{ outline:2px solid var(--r-500); outline-offset:2px; }

.lb-hint{ font-size:0.8rem; color:var(--ink-faint); }
.lb-hint kbd{
  font-family:inherit; font-size:0.74rem;
  border:1px solid var(--line-strong); border-radius:4px;
  padding:0 5px; background:var(--surface);
}

.lb-note{
  margin-top:34px;
  padding:22px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.lb-note p{ margin:0; max-width:56ch; color:var(--ink-soft); font-size:0.96rem; line-height:1.6; }
.lb-note p b{ color:var(--ink); }