/* ============================================
   hero-carousel.css
   ヒーロー自動再生カルーセル
   既存の style.css の変数（--indigo-900 等）をそのまま利用します。
   style.css の後、responsive.css の前に読み込んでください。
   ============================================ */

.hero-carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--paper-warm);

  /* 全デバイス共通のアスペクト比。管理画面（admin/hero-images.html）で
     選ばれた比率（9:16 または 3:4）を hero-carousel.js がJSで
     --hero-ratio カスタムプロパティとして設定する。
     未設定時（JS未実行時など）は 3:4 をフォールバックにする。
     ※以前はPC/iPad/スマホでブレークポイントごとに異なる比率
     （21:9 / 4:3 / 3:4）を出し分けていたが、「全デバイスで同じ
     トリミングの画像を見せる」という方針に変更したため廃止した。 */
  aspect-ratio: var(--hero-ratio, 3 / 4);
  touch-action: pan-y; /* 縦スクロールは邪魔しない。横スワイプだけ拾う */
}

@media (max-width: 860px) {
  .hero-carousel { border-radius: 12px; }
}

.hero-carousel-track {
  display: flex;
  height: 100%;
  /* transformだけを動かすのでGPU合成が効き、スマホでも滑らか */
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-carousel-track.is-dragging { transition: none; }

.hero-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  /* 元画像の比率を保ったまま表示枠に合わせてトリミング */
  object-fit: cover;
  /* object-position は各スライドの data-focus 属性からJSで設定。
     管理者側の「トリミング位置調整」はこの値を変えるだけで実現できます。 */
  object-position: 50% 50%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.5s ease;
  transform: scale(1);
}

/* PCのみ：ホバーで控えめに拡大・浮き上がる */
@media (hover: hover) and (pointer: fine) {
  .hero-carousel-slide:hover img {
    transform: scale(1.035);
  }
  .hero-carousel-slide img {
    will-change: transform;
  }
}

.hero-carousel-slide::after {
  /* 文字を上に載せる場合の可読性用（現状は透明。必要なら濃くする） */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,58,95,0) 55%, rgba(30,58,95,0.18) 100%);
  pointer-events: none;
}

/* --- スライドキャプション（画像に重ねる見出し・本文） --- */
.hero-carousel-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 28px 56px;
  background: linear-gradient(180deg, rgba(15,26,43,0) 0%, rgba(15,26,43,0.72) 65%, rgba(15,26,43,0.82) 100%);
  color: var(--white);
  z-index: 4;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.hero-carousel-slide.is-active .hero-carousel-caption {
  opacity: 1;
  transform: translateY(0);
}
.hero-carousel-caption-title {
  font-family: var(--font-display, inherit);
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.hero-carousel-caption-body {
  font-size: 0.92rem;
  line-height: 1.7;
  opacity: 0.95;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  max-width: 32em;
}
@media (max-width: 600px) {
  .hero-carousel-caption { padding: 20px 18px 44px; }
  .hero-carousel-caption-title { font-size: 1.08rem; }
  .hero-carousel-caption-body { font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-caption { transition: none; }
}

/* --- 矢印ボタン --- */
.hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--indigo-900);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  z-index: 5;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-carousel-arrow:hover { background: var(--amber-500); transform: translateY(-50%) scale(1.06); }
.hero-carousel-arrow:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 2px; }
.hero-carousel-arrow.prev { left: 14px; }
.hero-carousel-arrow.next { right: 14px; }

@media (max-width: 600px) {
  .hero-carousel-arrow { width: 40px; height: 40px; font-size: 1rem; }
}

/* --- ドットインジケーター --- */
.hero-carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex; gap: 14px; justify-content: center;
  z-index: 5;
}
.hero-carousel-dot {
  /* タップしやすいよう実際のボタンは24x24を確保し、中央に小さな点だけ見せる */
  width: 24px; height: 24px; padding: 0;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.hero-carousel-dot::after {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-carousel-dot.active::after {
  background: var(--amber-500);
  transform: scale(1.25);
}
.hero-carousel-dot:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-track { transition: none; }
  .hero-carousel-slide img { transition: none; }
}