/* Post gallery slider — single-post.php
   Lightweight replacement for the removed RoyalSlider. Uses the brand
   variables defined in first-style.css (--brand, --ink, --radius-lg, etc.). */

.post-gallery {
  margin: 40px auto;
  max-width: 100%;
}

/* ---- Stage (main image + side arrows) ---- */
.post-gallery__stage {
  position: relative;
  width: 100%;
}

.post-gallery__viewport {
  position: relative;
  width: 100%;
  /* Keep a stable box so the absolutely-positioned slides have room and the
     fade doesn't collapse the layout. */
  min-height: 320px;
}

.post-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.post-gallery__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.post-gallery__img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius-lg, 10px);
  object-fit: contain;
}

/* ---- Navigation arrows ---- */
.post-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(40, 40, 40, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

/* Reveal the arrows only while the mouse is over the image (RoyalSlider-style
   arrowsNavAutoHide). Keep them visible on keyboard focus for accessibility. */
.post-gallery__stage:hover .post-gallery__nav,
.post-gallery__nav:focus-visible {
  opacity: 1;
}

.post-gallery__nav:hover,
.post-gallery__nav:focus-visible {
  background: var(--brand, #004f42);
  outline: none;
}

.post-gallery__nav:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 79, 66, 0.35);
}

.post-gallery__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Touch devices have no hover state — keep the arrows visible there. */
@media (hover: none) {
  .post-gallery__nav {
    opacity: 1;
  }
}

.post-gallery__nav--prev {
  left: 14px;
}

.post-gallery__nav--next {
  right: 14px;
}

/* ---- Thumbnails ---- */
.post-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  /* `safe center` centers the thumbs when they fit, but falls back to
     start-alignment when they overflow — otherwise centering would clip the
     first thumb beyond the scroll-start edge, making it unreachable. */
  justify-content: safe center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 4px 0;
  list-style: none;
  overflow-x: auto;
  /* Keep horizontal scrolling but hide the scrollbar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Edge fade hints that there are more thumbnails to scroll to. Toggled by
   post-gallery.js only when the strip actually overflows. */
.post-gallery__thumbs.is-overflow-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}

.post-gallery__thumbs.is-overflow-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.post-gallery__thumbs.is-overflow-start.is-overflow-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

.post-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.post-gallery__thumbs li {
  flex: 0 0 auto;
  margin: 0;
}

.post-gallery__thumb {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  opacity: 0.6;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
}

.post-gallery__thumb img {
  display: block;
  width: 90px;
  height: 64px;
  object-fit: cover;
}

.post-gallery__thumb:hover,
.post-gallery__thumb:focus-visible {
  opacity: 1;
  outline: none;
}

.post-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--brand, #004f42);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .post-gallery {
    margin: 28px auto;
  }

  .post-gallery__viewport {
    min-height: 220px;
  }

  .post-gallery__img {
    max-height: 56vh;
  }

  .post-gallery__nav {
    width: 42px;
    height: 42px;
  }

  .post-gallery__nav--prev {
    left: 8px;
  }

  .post-gallery__nav--next {
    right: 8px;
  }

  .post-gallery__thumb img {
    width: 70px;
    height: 50px;
  }
}