/* mv-slide-basic — メインビジュアル: 写真スライド(標準)
 * 出典: 社内モジュール main/_mod_19 を機械変換したもの。
 *
 * ★この部品の定義は「背景写真を切り替えながら、その上にキャッチコピーを重ねる」(README)。
 *   受領時はコピーが写真の【下】に置かれており、構図そのものが成立していなかった。
 *   コピーを写真の上へ重ね、可読性はスクリム(半透明の敷き)で確保している。
 * ★受領時は .hero-title / .hero-lead に var(--color-on-primary) を当てていたが、
 *   この部品には「ブランド色でベタ塗りした面」が存在しない。濃色/高彩度テーマでは
 *   --color-on-primary が #ffffff になり、白背景に白文字(コントラスト 1.00)で消えていた。
 *   写真の上に乗せる構図に直したうえで、白文字(R-1 の明示的な例外)に置き換えた。
 * ★セレクタはすべて .mod_19_section 配下に閉じている。
 *   .hero-title / .hero-lead は参考型9本と common.css が、.slider-* は6本が同じ名前を使うため、
 *   無スコープだと同一ページに2本載ったときに互いを壊す。
 * ★slider.js は改変不可。契約クラス(.slider[data-slider] / -viewport / -track / -slide /
 *   -dots / -prev / -next)はすべて維持している。同時表示枚数は CSS の .slider-slide の width で決まる。 */

/* ── 器: 第一画面に収める。写真の縦横比は案件ごとに変わるので固定 px にしない ── */
.mod_19_section.main_visual {
  position: relative;
  overflow: hidden;
}

.mod_19_section .slider { position: relative; }

/* 高さの上限。実測で 720px を選定（620px 案と第一画面の余地は同じ93pxのまま、
   1920px での写真の捨て率が 41% → 31% に下がるため。写真が主役の部品なので広く見せる） */
.mod_19_section .slider-viewport {
  position: relative;
  overflow: hidden;
  height: min(78vh, 720px);
}

.mod_19_section .slider-track {
  display: flex;
  height: 100%;
  transition: transform .45s ease;
  will-change: transform;
}

/* 1スライド = ビューポート全幅。受領時は画像の自然幅 1408px で固定されており、
   375px では 375%(写真の左27%しか見えない)、1920px では 73%(隣のスライドが見切れる)だった。
   slider.js はトラック内の実位置を測って送るので、属性の指定は不要。 */
.mod_19_section .slider-slide {
  flex: none;
  width: 100%;
  height: 100%;
}

.mod_19_section .slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── スクリム: コピーのある左下に寄せて立ち上げる ──
 * 16番(全面均一の黒スクリム)との差別化であり、「写真が主役」という用途にも合う。
 * ★縦だけのグラデーションでは足りなかった(実測)。コピーは下端から約40%の高さまで伸びるので、
 *   そこまで濃さを保とうとすると写真の下半分が一様に暗くなり「写真優先」が壊れる。
 *   → 縦 × 横の2枚重ねにして、暗さを【コピーがある左下だけ】に集める。右側の写真は素のまま残る。
 * ★濃さは実測で決めた。同梱6枚のうち最も明るい mod-19-7.webp が基準。
 *   白文字の条件は 小さい文字(リード)が 4.5:1、大きい文字(見出し 24px以上)が 3:1。
 * 写真の上に敷く黒スクリムの生値は R-1 の明示的な例外。 */
.mod_19_section .slider-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, .82) 0%,
      rgba(0, 0, 0, .66) 34%,
      rgba(0, 0, 0, .22) 58%,
      rgba(0, 0, 0, 0) 78%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, .35) 0%,
      rgba(0, 0, 0, .12) 35%,
      rgba(0, 0, 0, 0) 60%
    );
}

/* ── コピー: 写真の上に重ねる（受領時は写真の下にあった） ──
 * 左端はサイトの .container(最大1440px + 左右 clamp)と揃える。「標準形」らしい素直さを出す。 */
.mod_19_section .main_visual_copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3.4rem, 8vh, 5rem);
  /* 写真の上に乗る文字なので生値可(R-1 の明示的な例外) */
  color: #fff;
}

.mod_19_section .hero-title {
  font-family: var(--font-heading);
  /* ★--fs-hero-lg(48〜60px) ではなく --fs-hero-md(40〜48px)。R-4 の表では
     hero-md が「MVキャッチ 29字以上」の段であり、この部品はキャッチ長を選べない
     (生成時に 8字も 30字も入る)ので、最長ケースが成立する段に合わせる。
     hero-lg のままだと 30字が3行になり、見出しの上端がスクリムの薄い高さまで届いて
     コントラストが 2.5:1 まで落ちた(実測)。 */
  font-size: var(--fs-hero-md);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
  /* 器を絞って行長を抑える。17字 × 48px × 1.02 ≒ 832px */
  max-width: min(860px, 100%);
  margin: 0 0 .75rem;
  text-wrap: balance;
}

.mod_19_section .hero-lead {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: #fff;
  max-width: min(640px, 100%);
  margin: 0;
}

/* ── 進行インジケータ: 線状にしてコピーと左端を揃える ──
 * 受領時は中央下の丸ドットで、コピー(写真の下)とさらに分離していた。
 * 「スライドであること」を意匠にする。既出7本はすべて静止画なので、ここが見分けになる。 */
.mod_19_section .slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(1.2rem, 3vh, 1.9rem);
  display: flex;
  justify-content: flex-start;
  gap: .5rem;
}

.mod_19_section .slider-dot {
  width: 2.25rem;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* 写真の上に乗る指標なので生値可 */
  background: rgba(255, 255, 255, .45);
  transition: background-color .3s ease;
}

.mod_19_section .slider-dot.is-active { background: #fff; }

.mod_19_section .slider-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── 前後ボタン: 受領時のまま(テーマ追従)。位置だけ器に合わせる ── */
.mod_19_section .slider-prev,
.mod_19_section .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  color: var(--color-text);
  z-index: 3;
}

.mod_19_section .slider-prev { left: clamp(.5rem, 1.5vw, 1.25rem); }
.mod_19_section .slider-next { right: clamp(.5rem, 1.5vw, 1.25rem); }

.mod_19_section .slider-prev::before,
.mod_19_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_19_section .slider-prev::before { transform: rotate(-135deg); }
.mod_19_section .slider-next::before { transform: rotate(45deg); }

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

/* slider.js は reduce のとき自動再生しない。送りのアニメーションもここで止める。 */
@media (prefers-reduced-motion: reduce) {
  .mod_19_section .slider-track { transition: none; }
  .mod_19_section .slider-dot { transition: none; }
}

/* ── モバイル（受領時は 767px。規約の 768px に寄せた） ── */
@media (max-width: 768px) {
  .mod_19_section .slider-viewport { height: min(72vh, 520px); }

  /* SP はコピーが横幅いっぱいに広がるので、横方向のグラデーションは効かない。
     縦1枚に戻して、そのぶん濃くする。 */
  .mod_19_section .slider-viewport::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .82) 0%,
      rgba(0, 0, 0, .70) 34%,
      rgba(0, 0, 0, .28) 60%,
      rgba(0, 0, 0, 0) 82%
    );
  }

  .mod_19_section .main_visual_copy {
    padding: 0 1.25rem clamp(3rem, 7vh, 3.75rem);
  }

  /* design.md No.5: モバイル h1 は固定的に絞る */
  .mod_19_section .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    margin-bottom: .5rem;
  }

  .mod_19_section .hero-lead { font-size: var(--fs-body); }

  .mod_19_section .slider-dots { padding: 0 1.25rem 1.1rem; }
  .mod_19_section .slider-dot { width: 1.75rem; }

  /* 前後ボタンは SP で隠す。写真とコピーに重なるうえ、スワイプ(slider.js が対応)で送れる。 */
  .mod_19_section .slider-prev,
  .mod_19_section .slider-next { display: none; }
}