/* =========================================================
   lightbox.css
   Fancybox v4 + Splide の上乗せ。
   本文画像の置き方は img.css。
   ========================================================= */

/* ---------------------------------------------------------
   Fancybox v4
   ギャラリーは既存どおり
   <a data-fancybox="gallery" href="大画像">
     <img src="サムネ">
   </a>
   --------------------------------------------------------- */
.fancybox__container {
  --fancybox-color: #fff;
  --fancybox-bg: rgba(24, 24, 24, 0.92);
  --fancybox-accent-color: var(--color-accent, #ffbb27);
}

.gallery-container a[data-fancybox],
.img-single a[data-fancybox] {
  display: block;
  cursor: zoom-in;
}

/* ---------------------------------------------------------
   Splide
   マークアップ例:
   <div class="splide img-slider">
     <div class="splide__track">
       <ul class="splide__list">
         <li class="splide__slide">
           <img src="..." alt="">
         </li>
       </ul>
     </div>
   </div>
   --------------------------------------------------------- */
.img-slider {
  margin: 1.25rem 0;
}

.img-slider .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 矢印・ページネーションはライブラリ色をサイト色に寄せる */
.img-slider .splide__arrow {
  background: rgba(255, 255, 255, 0.9);
}

.img-slider .splide__pagination__page.is-active {
  background: var(--color-accent, #ffbb27);
}

@media (max-width: 768.98px) {
  .img-slider .splide__arrow {
    width: 2rem;
    height: 2rem;
  }
}