/* reader-slider.css — peek carousel (LP2) */

/* ===========================
   Outer clip container
=========================== */
.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* ===========================
   Scrollable track
   padding + first/last margin で両端の隣カードを覗かせる
=========================== */
.slider-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* 左右に peek 分の余白 → position: relative で offsetLeft の基準を track に固定 */
  position: relative;
  padding: 8px 0 16px; /* 上下のカードシャドウ分余白 */
}

.slider-track::-webkit-scrollbar { display: none; }

/* ===========================
   Slide items — 82% width で両端に 9% ずつ見える
=========================== */
.slider-track > .reader-slide {
  flex: 0 0 82%;
  width: 82%;
  scroll-snap-align: center;
  box-sizing: border-box;
  /* 隣カードをやや小さく・薄くして「選んだ感」を演出 */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease;
  transform: scale(0.93);
  opacity: 0.65;
}

/* アクティブカードは100%表示 */
.slider-track > .reader-slide.is-active {
  transform: scale(1);
  opacity: 1;
}

/* 両端のスナップ余白（padding の代わりに first/last margin） */
.slider-track > .reader-slide:first-child { margin-left: 9%; }
.slider-track > .reader-slide:last-child  { margin-right: 9%; }

/* ===========================
   Nav buttons（モバイル非表示）
=========================== */
.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(197, 165, 90, 0.3);
  color: #1A1A2E;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.12);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.slider-prev { left: 2px; }
.slider-next { right: 2px; }

.slider-prev:hover,
.slider-next:hover {
  background: #fff;
  border-color: #C5A55A;
  transform: translateY(-50%) scale(1.08);
}

@media (max-width: 767px) {
  .slider-prev,
  .slider-next { display: none !important; }
}

.slider.at-start .slider-prev { display: none; }
.slider.at-end   .slider-next { display: none; }

.slider.is-scrolling .slider-prev,
.slider.is-scrolling .slider-next { opacity: 0.4; }

/* ===========================
   Dot indicators
=========================== */
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 1.25rem;
}

.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(26, 26, 46, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

.slider-dot.is-active {
  width: 22px;
  background: #C5A55A;
}

.slider-dot:hover:not(.is-active) { background: rgba(26, 26, 46, 0.3); }