/* ==========================================================================
   SKIIN - GALLERY page only  (gallery-page/gallery.css)
   Banner, headings, cards grid, hover "+" overlay are GLOBAL
   (assets/css/skiin-components.css). Only gallery-specific rules live here:
   group spacing + the photo viewer (lightbox).
   ========================================================================== */

/* space between the photo groups (e.g. "Skin Concerns" -> "Body and Veins") */
.sk-gallery__group + .sk-gallery__group { margin-top: clamp(48px, 6vw, 88px); }
.sk-gallery__head { margin-bottom: 28px; }

/* gallery tiles are image-only: no caption under them, so remove the space the global card reserves */
.sk-gallery .sk-card__img { margin-bottom: 0; }

/* ---------- lightbox (native <dialog>) ---------- */
html.sk-noscroll { overflow: hidden; }   /* page behind the viewer must not scroll */

.sk-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-white);
}
.sk-lightbox::backdrop { background: rgba(35, 31, 32, .92); }   /* dark brand tint behind the photo */
.sk-lightbox__stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 100%; padding: clamp(56px, 6vw, 72px) clamp(16px, 7vw, 110px);
}
.sk-lightbox__img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px);
  object-fit: contain; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.sk-lightbox__meta { display: flex; gap: 16px; margin: 0; font-size: 14px; color: rgba(255, 255, 255, .8); }
.sk-lightbox__count { color: var(--color-rose-accent); }

.sk-lightbox__btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--color-white); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%; cursor: pointer; transition: background .25s ease, border-color .25s ease;
}
.sk-lightbox__btn:hover, .sk-lightbox__btn:focus-visible { background: var(--color-rose-accent); border-color: var(--color-rose-accent); }
.sk-lightbox__btn[hidden] { display: none; }
.sk-lightbox__close { top: 18px; right: 18px; }
.sk-lightbox__prev { left: 18px; top: 50%; margin-top: -24px; }
.sk-lightbox__next { right: 18px; top: 50%; margin-top: -24px; }

@media (max-width: 767px) {
  .sk-lightbox__stage { padding: 64px 12px 28px; }
  .sk-lightbox__img { max-height: calc(100vh - 190px); }
  /* arrows move below the photo so they never cover it on phones */
  .sk-lightbox__prev, .sk-lightbox__next { top: auto; bottom: 18px; margin-top: 0; }
  .sk-lightbox__prev { left: calc(50% - 60px); }
  .sk-lightbox__next { right: calc(50% - 60px); }
}