/* Shared gallery carousel — used by bedside/powerfly/iterait.
   Colors pull from each page's :root tokens (--blue, --sep, --ink, --l2, --l3),
   with fallbacks so the file is self-sufficient if a token is absent. */

.gc{margin-top:26px}

/* main stage */
.gc-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(135deg,#EFF1F4,#E3E7EC);
  border:1px solid var(--sep,rgba(60,60,67,.11))}
.gc-slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.gc-slide.active{opacity:1}
.gc-slide img{width:100%;height:100%;object-fit:contain;display:block}

/* counter badge */
.gc-counter{position:absolute;top:14px;right:14px;z-index:3;
  background:rgba(15,15,15,.72);color:#fff;font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:999px;letter-spacing:.02em}

/* arrows */
.gc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink,#0f0f0f);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.15);transition:background .15s,transform .15s}
.gc-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gc-prev{left:14px}.gc-next{right:14px}

/* caption */
.gc-caption{margin-top:14px;font-size:13.5px;line-height:1.5;
  color:var(--l2,rgba(60,60,67,.62));min-height:1.4em}

/* dots */
.gc-dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.gc-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--sep,rgba(60,60,67,.2));transition:background .15s,transform .15s}
.gc-dot.active{background:var(--blue,#1877F2);transform:scale(1.3)}

/* thumbnail strip */
.gc-thumbs{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:4px}
.gc-thumb{flex:0 0 auto;width:84px;height:56px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;padding:0;cursor:pointer;opacity:.55;
  background:linear-gradient(135deg,#EFF1F4,#E3E7EC);
  transition:border-color .15s,opacity .15s}
.gc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gc-thumb.active{border-color:var(--blue,#1877F2);opacity:1}
.gc-thumb:hover{opacity:1}

/* static fallback (1-2 images, no carousel) */
.gc-static{display:grid;gap:14px;margin-top:26px}
.gc-static.two{grid-template-columns:1fr 1fr}
.gc-static figure{margin:0}
.gc-static .gc-static-img{border-radius:16px;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(135deg,#EFF1F4,#E3E7EC);
  border:1px solid var(--sep,rgba(60,60,67,.11))}
.gc-static img{width:100%;height:100%;object-fit:cover;display:block}
.gc-static figcaption{margin-top:9px;font-size:13px;color:var(--l3,rgba(60,60,67,.36))}

@media(max-width:880px){
  .gc-stage{aspect-ratio:4/3}
  .gc-static.two{grid-template-columns:1fr}
  .gc-arrow{width:34px;height:34px;font-size:19px}
}