/*!
 * toppage-f-carousel.css - カルーセルの共通部分（③が用意、④も同じものを使う）
 *
 * 担当ジョブ: ③最近更新された記事カルーセル実装（CLD-241）
 * 配置先:     cocoon-child-master/assets/css/toppage-f-carousel.css
 * 値の出典:   toppage-f-prototype/static/assets/css/toppage-f.css の
 *             カルーセル・矢印・ドット部分。色・寸法は変えていない。
 *
 * ここに入れるもの
 *   カルーセルの枠（.f-carousel-wrap / .f-carousel / .f-carousel__track）
 *   矢印（.f-carousel__arrow）
 *   ドット（.f-dots / .f-dot）
 *   prefers-reduced-motion のときの transition 無効化
 *
 * ④（カテゴリーから探すカルーセル）へ:
 *   このファイルの指定を作り直さないこと。④が足すのはカテゴリーカードの見た目だけでよい。
 *   トラックの gap は .f-carousel--categories の1行だけここに置いてある。
 *
 * カード幅・gap の変数（--f-article-card-w など）は①の toppage-f-base.css が持つ。
 * ブレークポイントごとの枚数（PC3 / タブレット2 / スマホ1）もそちらで決まる。
 * このファイルは JS が実寸を測れる状態を作るだけで、px を決め打ちしない。
 */

/* ------------------------------------------------------------------ *
 * 枠とトラック
 * ------------------------------------------------------------------ */
.f-carousel-wrap { position: relative; }

.f-carousel {
  overflow: hidden;
  width: 100%;
  /*
   * 上下だけ余白を持たせて、カード上端のマスキングテープ（top: -10px）と
   * ベタ影（下方向5px）が切り取られないようにする。
   * 先行試作は padding が無く、実際にテープの上半分が切れていた
   * （toppage-f-prototype/docs/screenshots/f-toppage-1440.png で確認）。
   * 左右は切ったままにする。次のカードが画面端で切れて「横に続く」ことを示すため。
   * 見た目の位置が下へずれないよう、上は負のマージンで相殺する。
   */
  padding: 12px 0 10px;
  margin: -12px 0 -4px;
  /*
   * スワイプを受けているのはこの要素（pointerdown / pointerup は [data-carousel] に付く）。
   * トラックだけに pan-y を置くと、トラックの箱から外れた場所から払ったときに
   * ここの touch-action が auto のままになり、ブラウザが横の指の動きを
   * スクロールと判断して pointercancel を出す（＝スワイプが黙って捨てられる）。
   * 外れる場所は実際にある。
   *   - 上下の padding 帯（12px / 10px）
   *   - 1枚でも送ったあとの右側。トラックの箱は枠と同じ幅しか持たず、
   *     カードはそこからはみ出して描かれる。1024px で1枚送ると
   *     箱の右端は 501px、枠の右端は 958px で、その差の中の
   *     カードとカードの隙間が枠に直接当たる（③-b-2 で実測）。
   * ここは overflow: hidden で横スクロールしないので、pan-y にしても
   * 縦スクロールを妨げない。
   */
  touch-action: pan-y;
}

.f-carousel__track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
  touch-action: pan-y; /* 縦スクロールは妨げず、横スワイプだけ拾う */
}

/* 横に払ったときに画像のゴーストが付いてこないようにする */
.f-carousel__track img {
  -webkit-user-drag: none;
  user-select: none;
}

.f-carousel--articles .f-carousel__track { gap: var(--f-article-gap); }
.f-carousel--categories .f-carousel__track { gap: var(--f-category-gap); }

/* ------------------------------------------------------------------ *
 * 矢印ボタン
 *
 * PC＝クリック、スマホ・タブレット＝スワイプの補助。Tab＋Enter でも動く。
 * 専用の一時停止ボタンは設けない（CLD-236 / ③依頼本文）。
 *
 * PC ではカードの左右に置くと、F案の余白（1440pxで19px）ではカード面に重なって
 * サムネイルや記事タイトルを隠してしまう。そのため見出し行の右側（空いている場所）に
 * 2つ並べる。タブレット・スマホでは横幅に余裕があるので左右へ戻す。
 * ------------------------------------------------------------------ */
.f-carousel__arrow {
  position: absolute;
  top: -52px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--f-ink-line);
  background: white;
  box-shadow: 3px 3px 0 var(--f-shadow);
  color: var(--f-ink);
  font-family: 'Kosugi Maru', sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.f-carousel__arrow:hover { background: var(--f-thumb-bg); }
.f-carousel__arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--f-shadow); }
/* カードが表示枚数以下のときは JS が hidden を立てる（動かす先が無いため） */
.f-carousel__arrow[hidden] { display: none; }
.f-carousel__arrow--prev { right: 50px; left: auto; }
.f-carousel__arrow--next { right: 0; }

/* ------------------------------------------------------------------ *
 * ドット（現在位置の目印。操作部品ではないので読み上げ対象から外してある）
 * ------------------------------------------------------------------ */
.f-dots { display: flex; gap: 8px; margin-top: 16px; padding-left: 4px; }
.f-dots--sm { gap: 8px; margin-top: 14px; }
.f-dots[hidden] { display: none; }
.f-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--f-hairline); display: inline-block;
}
.f-dots--sm .f-dot { width: 8px; height: 8px; }
.f-dot.is-active { background: var(--f-red); }

/* ================================================================== *
 * レスポンシブ
 * ================================================================== */

/* --- タブレット（769〜1024px） ------------------------------------- */
@media (max-width: 1024px) {
  /* 横幅に余裕があるので、矢印をカードの左右へ戻す。
     カード面に重ねないよう、左右に矢印の置き場所（余白）を作ってそこへ入れる。 */
  .f-carousel-wrap { padding: 0 34px; }
  .f-carousel__arrow {
    top: 50%;
    transform: translateY(-50%);
  }
  .f-carousel__arrow:active { transform: translateY(-50%) translate(2px, 2px); }
  .f-carousel__arrow--prev { left: -4px; right: auto; }
  .f-carousel__arrow--next { right: -4px; }
}

/* --- スマートフォン（〜768px） ------------------------------------- */
@media (max-width: 768px) {
  /* タップ目標を 44px 確保しつつ、カード面を隠しすぎない位置に置く */
  .f-carousel__arrow { width: 44px; height: 44px; font-size: 22px; }
  .f-carousel-wrap { padding: 0 38px; }
  .f-carousel-wrap--articles .f-carousel__arrow { top: 60px; }
}

/* ------------------------------------------------------------------ *
 * 動きを減らす設定（prefers-reduced-motion: reduce）
 *
 * 自動スライドは JS 側で止める（carousel.js の停止理由 'reduced'）。
 * ここでは残った transition を無効にする。手動操作（矢印・スワイプ）は動く。
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .f-carousel__track { transition: none !important; }
}