/**
   Reusable Swiper gallery styles.

   Use with /help/help-assets/swiper-gallery.js.

   @author Hirano Satoshi with Happy (LLM)
   @copyright 2026 Peace and Passion
   @since 2026/05/13
*/

.swiper-gallery .sg-main {
  --swiper-navigation-size: 24px;
  --swiper-navigation-color: var(--primary-dim-color);
  aspect-ratio: var(--swiper-gallery-main-aspect-ratio, 4 / 3);
  height: auto;
  max-height: var(--swiper-gallery-main-max-height, 720px);
}
.swiper-gallery .sg-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.swiper-gallery .sg-thumbs {
  margin-top: 8px;
  padding-bottom: 12px;
}
.swiper-gallery .sg-thumbs .swiper-scrollbar {
  height: 3px;
  bottom: 2px;
  background: rgba(99, 52, 44, 0.08);
}
.swiper-gallery .sg-thumbs .swiper-scrollbar-lock {
  display: none;
}
.swiper-gallery .sg-thumbs .swiper-scrollbar-drag {
  background: rgba(99, 52, 44, 0.24);
}
.swiper-gallery .sg-thumbs .swiper-slide {
  width: auto !important;
}
.swiper-gallery .sg-thumbs .swiper-slide img {
  width: clamp(80px, 14vw, 100px);
  height: clamp(60px, 10.5vw, 75px);
  object-fit: cover;
  object-position: top;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.60;
  transition: opacity 0.3s;
}
.swiper-gallery .sg-thumbs .swiper-slide-thumb-active img {
  opacity: 1;
}

.swiper-gallery .sg-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 12px auto 0;
}
.swiper-gallery .sg-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--font-color, #63342C);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.swiper-gallery .sg-control .material-icons-outlined {
  font-size: 1.55rem;
  line-height: 1;
}
.swiper-gallery .sg-control:hover,
.swiper-gallery .sg-control:focus-visible {
  background: rgba(250, 231, 204, 0.72);
  color: #784C43;
}
.swiper-gallery .sg-control:active {
  transform: translateY(1px);
}
#theme-gallery-mobile {
  --swiper-gallery-main-aspect-ratio: 9 / 16;
  --swiper-gallery-main-max-height: 680px;
}
#theme-gallery-desktop {
  --swiper-gallery-main-aspect-ratio: 4 / 3;
  --swiper-gallery-main-max-height: 680px;
}
.oneshot-gallery {
  --swiper-gallery-main-aspect-ratio: 3 / 2;
  --swiper-gallery-main-max-height: 760px;
}