/* ===== Carousel: 全デバイス共通カルーセル ===== */
.carousel {
  position: relative;
  margin: var(--space-md) 0;
  overflow: hidden;
}

/* 1スライド=コンテナ幅100% */
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* スライドを中央にスナップ */
.carousel-item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* 画像を常に大きく中央に */
.carousel .large-img {
  display: block;
  width: 100%;
  height: clamp(320px, 65vh, 680px);
  object-fit: cover;
  object-position: center center;
  border-radius: 10px;
}

/* キャプション */
.carousel figcaption {
  text-align: center;
  margin-top: var(--space-xs);
  font-size: 1rem;
  line-height: 1.5;
  font-family: var(--font-body);
  color: var(--color-primary);
}

/* ナビボタン（全デバイスで表示） */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.carousel-btn[disabled] { opacity: .4; cursor: default; }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

/* ===== style.carousel.centered.css : モバイル横長最適化 追加分 ===== */
/* 既存の centered 版に追記（または下記ブロックを下部に置けばOK） */

@media (max-width: 600px) {
  /* スマホは 1スライド=全幅、覗き見ゼロ（centered版が前提） */
  .carousel-track {
    grid-auto-columns: 100%;
    gap: 0;
    padding: 0;
  }

  /* 横長表示：16:9 を優先。高さは自動計算に切替 */
  .carousel .large-img {
    width: 100%;
    height: auto !important;     /* 既存の clamp() を上書き */
    aspect-ratio: 16 / 9;        /* 横長に固定 */
    object-fit: cover;
    object-position: center center;
    border-radius: 10px;
    display: block;
  }

  /* もし上下が窮屈なら、キャプションの余白を少し調整 */
  .carousel figcaption {
    margin-top: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
  }
}

/* （任意）更に横長にしたい場合は 21:9 に変更：
@media (max-width: 600px) {
  .carousel .large-img { aspect-ratio: 21 / 9; }
}
*/