/* ========== Event Detail Page Slider Styles ========== */

/* Slider Container Layout */
main .container .slideG {
  width: 100%;
  margin-bottom: 34px;
  gap: 24px;
}

main .container .slideBar {
  width: 55%;
}

/* ========== Slider Components ========== */
.slider-container {
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3比率 (3/4 = 0.75) */
  position: relative;
  background: var(--color-bg-white);
  border-radius: 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  margin-bottom: 4px;
}

.main-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* スマホでの画像表示条件 */
@media (max-width: 768px) {
  .main-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
  }

  /* 横長画像（幅 >= 高さ）の場合: 幅100% */
  .main-image.landscape,
  .main-image:not(.portrait) {
    width: 100%;
    height: auto;
  }

  /* 縦長画像（高さ > 幅）の場合: 高さ100%、中央揃え */
  .main-image.portrait {
    width: auto;
    height: 100%;
  }
}

/* ========== Slider Navigation Arrows ========== */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xl);
  background: var(--color-shadow-overlay);
  color: var(--color-text-white);
  padding: 5px var(--spacing-sm);
  cursor: pointer;
  z-index: var(--z-index-dropdown);
  border-radius: var(--border-radius-sm);
}

.arrow.left {
  left: var(--spacing-sm);
}

.arrow.right {
  right: var(--spacing-sm);
}

/* ========== Image Counter ========== */
.image-count {
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--spacing-sm);
  background: var(--color-shadow-strong);
  color: var(--color-text-white);
  padding: var(--spacing-xs) 6px;
  border-radius: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

/* ========== Thumbnail Slider ========== */
.thumbnail-wrapper {
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
  background: var(--color-bg-white);
}

.thumbnail-row {
  display: flex;
  transition: transform var(--transition-normal);
  will-change: transform;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 13px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  user-select: none;
}

.thumbnail-row::-webkit-scrollbar {
  display: none;
}

.thumbnail {
  flex: 0 0 auto;
  width: 101px;
  height: 62px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border var(--transition-fast);
  border-radius: 0;
}

.thumbnail.active {
  border: 2px solid var(--color-blue-link);
}

/* ========== Responsive Styles ========== */
@media (max-width: 965px) {
  .thumbnail {
    width: 80px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  main .container .slideG {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  main .container .slideBar {
    width: 100%;
    order: -1;
  }

  .thumbnail {
    width: 60px;
    height: 40px;
  }
}

@media (max-width: 500px) {
  main .container .slideG {
    gap: var(--spacing-lg);
  }

  .thumbnail {
    width: 50px;
    height: 35px;
  }

  .thumbnail-row {
    gap: 6px;
  }
}

@media (max-width: 390px) {
  .thumbnail {
    width: 75px;
    height: 50px;
  }
}