/* mv-fade — メインビジュアル: フェード切替
 * 出典: 社内モジュール main/_mod_21(旧WPテーマ)を機械変換したもの。
 *
 * ★この部品の定義は「写真をゆっくり重ねながら切り替える。静かで上質な印象」(README)。
 *   受領時は次の3点で、その定義がまったく成立していなかった(いずれも実測):
 *     1) data-variant="fade" が無く、実際は横送り(slide)で動いていた
 *     2) スライド幅が画像の自然幅 1280px 固定だったため、1440px 以上で slider.js の
 *        maxIndex() が 0 に落ち、ドット1個・自動送りゼロで【写真が1枚しか出ない】状態
 *     3) コピーが写真の【下】に置かれ、「写真に重ねる」構図になっていなかった
 * ★受領時は .hero-title / .hero-lead に var(--color-on-primary) を当てていたが、
 *   この部品には「ブランド色でベタ塗りした面」が存在しない。濃色/高彩度テーマでは
 *   --color-on-primary が #ffffff になり、白背景に白文字(コントラスト 1.00)で
 *   見出しもリードも完全に消えていた(24パターン中12件)。
 * ★可読性はスクリムではなく【不透明の題箋プレート】で取っている。
 *   同梱 mod-21-1.webp は左下の相対輝度が 0.602 で、白文字 4.5:1 には黒スクリム α≧0.70 が必要。
 *   それでは写真が沈み「静かで上質」という部品の性格が壊れるため、面で取り直した。
 *   結果、可読性が【写真の明るさから独立】する(01/02 が原理的にできないこと)。
 * ★セレクタはすべて .mod_21_section 配下に閉じている。
 *   .hero-title / .hero-lead は参考型9本と common.css が、.slider-* は6本が同じ名前を使うため、
 *   無スコープだと同一ページに2本載ったときに互いを壊す。
 * ★slider.js は改変不可。契約クラス(.slider[data-slider] / -viewport / -track / -slide /
 *   -dots / -prev / -next)はすべて維持している。
 *   ★fade にするからといってスライドを CSS で重ねてはいけない。maxIndex() は
 *     トラック内の実位置で送り先を決めるので、全スライドを同じ位置に重ねると
 *     trackWidth() − vpWidth() = 0 になり、上の 2) と同じ理由で送りが死ぬ。
 *     → スライドは横並びのまま(width:100%)で位置を保ち、重ねるのは中の img を
 *       .slider-viewport に対して絶対配置することで行う。 */

/* ── 器: 地の面で写真を額装する(マット) ──
 * 地は色相を持ち込まず明度だけ一段落とす。ブランド色を薄める方式は
 * 淡色案件で消え、高彩度案件で立ちすぎるため採らない。
 * --mv-edge: 外側の器を 1200px で頭打ちにして、余りをマットに回す。
 * ★これが無いと 1920px で枠が 1797px まで広がり、max-height に当たった後の
 *   実効比率が 3.1:1 まで伸びて写真の上下を 54% 捨てる(実測)。1200px 頭打ちで 20% まで下がる。
 * ★マットの太さは 6案をレンダリングして選定した。3.5rem/1440頭打ち では
 *   「余白を取り損ねた写真」にしか見えず、額装として読めなかった(⑤-2)。 */
.mod_21_section.main_visual {
  --mv-mat: clamp(1rem, 4vw, 4.5rem);
  /* 写真はセクション幅いっぱいに置く。左右の余白は --mv-mat のみ。 */
  --mv-edge: 0px;
  --mv-off: clamp(.9rem, 2.2vw, 2.5rem);
  --mv-pad: clamp(1.1rem, 2vw, 1.9rem);
  --mv-ink: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));

  position: relative;
  padding: var(--mv-mat) var(--mv-edge);
  background: color-mix(in srgb, var(--color-text) 6%, var(--color-bg));
}

.mod_21_section .slider { position: relative; }

/* 写真枠。固定 px にしない(受領時は height:640px !important)。
   width:100% を明示するのは、aspect-ratio と min-height が競合したときに
   比率から幅が逆算されて器を突き抜けるのを止めるため(02番で実測した罠)。 */
.mod_21_section .slider-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* ★器を全幅にしたぶん、高さ上限も上げないと実効比率が 3:1 まで伸びて写真の上下を
     50%捨てる。78vh/860px なら 1920px で 2.2:1 に収まり、第一画面にも入る。 */
  max-height: min(78vh, 860px);
  min-height: min(38vh, 320px);
}

.mod_21_section .slider-track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1スライド = 枠の全幅。受領時は画像の自然幅 1280px 固定で、375px では 341%
   (写真の左29%しか見えない)、1440px 以上では slider.js が送り先を見失っていた。
   ★位置は保ったまま、見た目だけ重ねる(下の img の絶対配置)。 */
.mod_21_section .slider-slide {
  flex: none;
  width: 100%;
  height: 100%;
  /* クロスフェード。slider.js(variant=fade)が opacity をインラインで書き換える。
     01/02 の横送り .45s に対して、この部品は「ゆっくり重なる」ことが存在理由。 */
  transition: opacity 1.1s ease;
}

/* JS が動かない環境でも1枚は見える状態にしておく(2枚目だけ伏せる)。
   JS の初期描画と同じ値なので、読み込み直後に余計なフェードが走らない。 */
.mod_21_section .slider-slide + .slider-slide { opacity: 0; }

/* 重なりはここで作る。包含ブロックは .slider-viewport(position:relative)。
   opacity は包含ブロックを作らないので、スライド側の opacity が効いたまま重なる。 */
.mod_21_section .slider-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  max-width: none;
}

/* ── 題箋プレート: 写真の左下に重ねる不透明の面 ──
 * 受領時はコピーが写真の下に置かれ、構図が成立していなかった。
 * 面が不透明なので、文字色はテーマのインクをそのまま使える(写真に依存しない)。 */
.mod_21_section .main_visual_copy {
  position: absolute;
  z-index: 3;
  left: calc(var(--mv-edge) + var(--mv-off));
  bottom: calc(var(--mv-mat) + var(--mv-off));
  /* 44rem。36rem から拡幅(2026 ユーザー指示)。見出し・リード文の折返しに余裕を持たせる。 */
  width: min(44rem, calc(100% - 2 * (var(--mv-edge) + var(--mv-off))));
  padding: var(--mv-pad);
  /* 下端は指標(縦ティック)のぶんを空けておく。
     ティックの下端は面の下端から --mv-pad の位置にあるので、pad + ティック高 + 行間ぶん。 */
  padding-bottom: calc(var(--mv-pad) + 1.75rem + .7rem);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-radius: var(--radius);
}

.mod_21_section .hero-title {
  font-family: var(--font-heading);
  /* ★--fs-hero-lg ではなく --fs-hero-md(40〜48px)。R-4 の表では hero-md が
     「MVキャッチ 29字以上」の段であり、この部品はキャッチ長を選べない
     (生成時に 8字も 30字も入る)ので、最長ケースが成立する段に合わせる。 */
  font-size: var(--fs-hero-md);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--mv-ink);
  margin: 0 0 .6rem;
  text-wrap: balance;
}

.mod_21_section .hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--color-text);
  margin: 0;
  max-width: 42rem;
}

/* ── 指標: 縦ティック。プレートの内側に置く ──
 * 写真の上に置くと明るい写真で消えるため、面の上に置く。
 * 01=横線 / 02=数字カウンタ / 03=縦ティック で、指標だけでも見分けが付く。
 * align-items:flex-end なので、アクティブの丈が変わっても他のティックは動かない。 */
.mod_21_section .slider-dots {
  position: absolute;
  z-index: 4;
  left: calc(var(--mv-off) + var(--mv-pad));
  bottom: calc(var(--mv-off) + var(--mv-pad));
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: .45rem;
  margin: 0;
}

.mod_21_section .slider-dot {
  width: 3px;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* ★2px / 22% 案は面の上でほとんど読めず「指標」に見えなかった(実描画で確認)。
     18番の教訓どおり、効いていない意匠は足さずに振り切る。 */
  background: color-mix(in srgb, var(--color-text) 32%, transparent);
  transition: background-color .3s ease;
}

/* ホバーは色だけ変える(レイアウトを動かさない) */
.mod_21_section .slider-dot:hover { background: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* アクティブは色＋丈。align-items:flex-end の flex なので、丈が変わっても
   他のティックの位置は動かない(ホバーではなく状態表示なので可)。 */
.mod_21_section .slider-dot.is-active {
  height: 1.75rem;
  background: var(--mv-ink);
}

.mod_21_section .slider-dot:focus-visible {
  outline: 2px solid var(--mv-ink);
  outline-offset: 3px;
}

/* ── 前後ボタン: 枠の【右上】に2つ並べる ──
 * ★左右中央に置くと、左のボタンが題箋プレート(左下・z-index 3)の裏に入って
 *   押せなくなる(実描画で発覚)。プレートの対角に逃がすと、どの幅でも重ならない。
 * 面はテーマ追従。R-7 の「半透明の面は不透明度 80% 以上」を満たす 88%。 */
.mod_21_section .slider-prev,
.mod_21_section .slider-next {
  position: absolute;
  top: var(--mv-off);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-text);
  z-index: 2;
  transition: background-color .3s ease;
}

.mod_21_section .slider-prev { right: calc(var(--mv-off) + 2.9rem); }
.mod_21_section .slider-next { right: var(--mv-off); }

.mod_21_section .slider-prev:hover,
.mod_21_section .slider-next:hover { background: var(--color-bg); }

.mod_21_section .slider-prev::before,
.mod_21_section .slider-next::before {
  content: "";
  display: block;
  width: .6rem;
  height: .6rem;
  margin: 0 auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.mod_21_section .slider-prev::before { transform: rotate(-135deg); }
.mod_21_section .slider-next::before { transform: rotate(45deg); }

.mod_21_section .slider-prev:focus-visible,
.mod_21_section .slider-next:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* slider.js は reduce のとき自動再生しない。クロスフェードもここで止める。 */
@media (prefers-reduced-motion: reduce) {
  .mod_21_section .slider-slide,
  .mod_21_section .slider-dot,
  .mod_21_section .slider-prev,
  .mod_21_section .slider-next { transition: none; }
}

/* ── モバイル(受領時は 767px / 1220px の混在。規約の 768px に統一) ── */
@media (max-width: 768px) {
  .mod_21_section.main_visual {
    --mv-off: clamp(.6rem, 2.4vw, .9rem);
    --mv-pad: 1rem;
    /* スマホではテキストを写真の下に積む構成に切り替える */
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .mod_21_section .slider-viewport {
    aspect-ratio: 4 / 3;
    max-height: min(56vw, 320px);
    min-height: unset;
    width: 100%;
    flex: none;
  }

  /* テキストプレートを写真の下に出す */
  .mod_21_section .main_visual_copy {
    position: static;
    width: 100%;
    padding: 1.25rem 1rem 1.5rem;
    background: var(--color-bg);
    border-radius: 0;
  }

  /* design.md No.5: モバイル h1 は固定的に絞る */
  .mod_21_section .hero-title {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    margin-bottom: .5rem;
  }
  /* インラインの font-size:50px / --fs-hero-xl:50px を上書き */
  .mod_21_section .hero-title--xl {
    font-size: clamp(1.7rem, 6.5vw, 2.1rem) !important;
  }

  .mod_21_section .hero-lead {
    font-size: var(--fs-body);
    line-height: 1.75;
  }

  /* ドットはビューポート内に残す */
  .mod_21_section .slider-dots {
    bottom: var(--mv-off);
    left: var(--mv-off);
  }

  .mod_21_section .slider-dot { height: .95rem; }
  .mod_21_section .slider-dot.is-active { height: 1.5rem; }

  /* 前後ボタンは SP で隠す */
  .mod_21_section .slider-prev,
  .mod_21_section .slider-next { display: none; }
}