/* hero-dual-photo-split — テキスト左 / 正方形写真2枚を右に並べるメインビジュアル
 * 出典: Figma「sitemeister_module」main5。
 * ★写真は2枚とも別スロット。同じ写真を2枚並べると重複検出(ゲート#7)で弾かれる。
 *
 * ── デザイン方針（トーン: ナチュラル / アクセント: 大きな段差 + 隙間 + 角丸）──
 * この部品の存在理由は「2つの面の対比」。受領時は2枚が隙間ゼロで接し、右端も断ち落としだったため
 * 実描画で【1枚の横長写真に見える】状態だった(実測 写真間の隙間 0px)。
 * そこで ①2枚の間に隙間 ②2枚目に大きな段差 ③はっきりした角丸、の3点で「2枚であること」を見せる。
 * 右端はフルブリードをやめて余白を取り、写真を「置く」構図にした
 * (同カテゴリの hero-split-image-right が「写真右フルブリード」なので骨格でも分かれる)。
 *
 * ★中途半端にしないこと。一度 ①隙間 ②小さい段差(写真の17%) ③控えめな角丸(12px)
 *   ④ギャラリー背後の淡い面、の4つを少しずつ乗せたが、
 *   【地の面が写真2枚の"外接矩形"にしかならず、右上と左下に直角の帯が残って不具合に見えた】。
 *   段差も「ずらした」のか「揃え損ねた」のか読めず、角丸も気づかれない量だった。
 *   面をやめて段差を写真の約50%まで振り切り、角丸も上げて【意図が読める量】に統一している。 */

.hero-dual-photo-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  padding-left: clamp(20px, 6vw, 120px);
  background: var(--color-bg);
}

.hero-dual-photo-split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* ★--space-sm は common.css の :root に未定義。フォールバックが無いと var() が無効値になり
     gap が初期値 normal(=0) に落ちて、見出し・リード・CTA が密着する(実測: PC 側で 0px だった) */
  gap: var(--space-sm, 24px);
  /* ★42%未満にしない(--fs-hero-md の見出しが不自然に折返す。実描画で確認)
     ただし flex-basis の % は padding と gap を【引く前】の値なので、この指定では実測 39.4% にしか
     着地していなかった。PC 側は下の @media(min-width:769px) で grow 比に置き換えて是正する。 */
  flex: 0 1 42%;
}

.hero-dual-photo-split__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-hero-md);
  line-height: 1.5;
  letter-spacing: 0.04em;
  /* ★--color-heading-ink も未定義。フォールバックを --color-text にしても【同色のまま】で
     階調が戻らないため、color-mix で一段濃い墨を作る
     (common.css が --color-primary-dark で使っているのと同じ手法)。
     ink と text の濃淡はテーマによって反転するので、階調は色ではなくサイズで作る。 */
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));
  margin: 0;
}

.hero-dual-photo-split__light { font-weight: 300; }

.hero-dual-photo-split__lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

.hero-dual-photo-split__cta { align-self: flex-start; }

/* CTA の面は common.css の .btn（--color-primary ＋ --color-on-primary）をそのまま使う。
   ★ホバーだけ上書きする理由: common.css の .btn:hover は
     「面を --color-primary-dark にして文字を #fff にする」ため、
     淡色ベージュのプリセットで【白文字 × 明るいベージュ = 2.59:1】になり読めなくなる（実測）。
     面と文字の組（--color-primary / --color-on-primary）は変えず、
     ホバーの合図は【浮き】で出す。矩形は動かない。 */
.hero-dual-photo-split .btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.hero-dual-photo-split__gallery {
  display: flex;
  /* ★flex の既定 align-items:stretch は【aspect-ratio より優先して】高さを決める。
     2枚目に段差を付けるとギャラリーが高くなり、1:1 のはずの写真が縦長に伸びる
     (実測 実効 0.84:1)。flex-start にして高さを aspect-ratio に任せる。 */
  align-items: flex-start;
  flex: 1 1 54%;
  max-width: 56%;
  /* ★ここに背景色を敷かないこと。flex コンテナの背景は【写真2枚の外接矩形】になるので、
     段差があると右上と左下にだけ直角の帯が残り、意匠ではなく不具合に見える(実装時に実際にそうなった)。
     面で見せたいなら擬似要素で位置とサイズを明示的に決めること。 */
}

/* 正方形2枚。固定 600px ではなく比率+上限で第一画面に収める(No.3/No.8)。 */
.hero-dual-photo-split__media {
  flex: 1 1 50%;
  aspect-ratio: 1 / 1;
  max-height: min(64vh, 520px);
  overflow: hidden;
  /* --radius-card は既定 4px。テーマが角丸を大きくしたら追従させつつ、写真が丸まりすぎない上限を付ける。
     ★12px では 466px の写真に対して「丸めたつもり」が伝わらなかった。意図が読める量まで上げる。 */
  border-radius: min(calc(var(--radius-card) * 7), 28px);
  /* ★fill-mode は backwards。both だと JS もアニメも走らない環境で opacity:0 が残る事故になる。
     backwards なら「遅延中だけ from を適用し、終了後は素の状態(可視)」に戻る。 */
  animation: hero-dual-photo-split-rise 700ms ease-out backwards;
}

/* 2枚目を遅らせる。既出モジュールと動きを被らせないための「2枚の時間差」がこの部品の演出。 */
.hero-dual-photo-split__media:nth-child(2) { animation-delay: 160ms; }

.hero-dual-photo-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes hero-dual-photo-split-rise {
  from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dual-photo-split__media { animation: none; }
}

@media (max-width: 768px) {
  .hero-dual-photo-split {
    flex-direction: column;
    /* 受領時は下が 0 で写真が画面下端に接していた。角丸を付ける構図なので下にも余白を取る。 */
    padding: 24px 20px;
    gap: 24px;
  }

  .hero-dual-photo-split__text {
    flex: none;
    width: 100%;
    gap: 20px;
  }

  /* 受領時は左右の padding を打ち消して写真だけ全幅にしていた(width:calc(100% + 40px))が、
     それだと隙間・段差・角丸が画面端で切れて「2枚であること」が SP で失われる。
     padding の内側に収めて、PC と同じ構図を小さく成立させる。 */
  .hero-dual-photo-split__gallery {
    flex: none;
    max-width: none;
    width: 100%;
    margin: 0;
    gap: 8px;
  }
  /* ★器に max-width を掛けて写真を小さくすれば 768px の高さを 72.3vh→67vh にできるが、
     写真だけが中央に寄って【全幅の CTA・テキストと左右端が揃わなくなる】ため採用しなかった。
     72.3vh は検収基準「第一画面に収まる」を満たしており、整列を優先した。 */

  /* ★aspect-ratio:1/1 と書いても max-height に当たった時点で実効比率が伸びる。
     受領時の min(40vh,280px) は 768px 幅で実効 1.371:1 になっており、
     同じ SP でも 375px=正方形 / 768px=横長 と写真の形が変わっていた。上限を上げて正方形を保つ。 */
  .hero-dual-photo-split__media { max-height: min(46vh, 380px); }
  /* SP も段差は % で入れて PC と同じ意匠にする。ただし SP は写真2枚が画面幅いっぱいで
     もともと縦を食うので、比率は PC(25%)より小さくする(10% ≒ 写真の高さの 20%)。 */
  .hero-dual-photo-split__media:nth-child(2) { margin-top: 10%; }

  /* design.md No.5: モバイル h1 は固定的に絞る */
  .hero-dual-photo-split__heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-dual-photo-split__lead { font-size: var(--fs-body); }
  .hero-dual-photo-split__cta { width: 100%; text-align: center; }
}

/* ★PC 側だけに当てる指定は min-width:769px に置く。
   @media(max-width:768px) の【後ろ】に無条件の指定を書くと SP に漏れ、狭い側が受領時より悪化する。 */
@media (min-width: 769px) {
  .hero-dual-photo-split {
    /* 受領時は上下 padding が無く、769〜1366px でテキストがセクションの上下端に接地していた
       (実測 textTop=0 / textBottom=0)。<main> 直下の最初のセクションなのでヘッダーと密着する。 */
    /* ★段差が縦方向の"間"を作っているので、上下 padding は控えめでよい。
       段差を入れる前の clamp(32px,4vw,72px) のままだと 1600px で 78.9vh まで伸びた。 */
    padding-block: clamp(24px, 2.4vw, 48px);
    /* 右端の断ち落としをやめ、写真を「置く」。角丸が成立する前提にもなる。 */
    padding-right: clamp(20px, 3vw, 56px);
  }

  /* flex-basis の % は padding と gap を引く前の値で狙った比率に着地しない。
     「padding と gap を引いた残り」を grow 比で割る。
     min-width は【狭い PC 幅でだけ】効く下限(広い側は 44% に戻るので写真を痩せさせない)。
     336px は「見出しの最終行が列幅の25%未満にならない」境界を実測で求めた値。
     固定幅ではなく下限なので、上方向には可変のまま。 */
  .hero-dual-photo-split__text {
    flex: 44 1 0;
    min-width: 336px;
  }

  .hero-dual-photo-split__gallery {
    flex: 56 1 0;
    min-width: 0;
    max-width: none;
    gap: clamp(8px, 1.2vw, 20px);
  }

  /* 段差。1枚目(LCP要素)を上に置き、左のテキスト → 1枚目 → 2枚目 と視線が流れるようにする。
     ★% のマージンは【コンテナの幅】に対する値。写真は正方形で幅 ≒ (ギャラリー幅 − 隙間) ÷ 2 なので、
     margin-top: 25% ≒ 写真の高さの 50%。px で書くと画面幅ごとに段差の"見え方"が変わってしまうが、
     % なら写真に対する比率が全幅で一定になり、どの幅でも同じ意匠になる。
     ★小さくしないこと。写真の 17% では「ずらした」のか「揃え損ねた」のか読めなかった。 */
  .hero-dual-photo-split__media:nth-child(2) { margin-top: 25%; }

  /* 中間幅(769〜1024px)で見出しが4〜5行に破綻し、最終行に1字だけ残っていた。
     vw は viewport 基準で「列が痩せた」ことを検知できないので、列幅基準の cqw に連動させる。
     上限は必ずトークン(--fs-hero-md)。係数 8.2 = 100 ÷ (11字 × (1 + 0.04em))。
     ★letter-spacing と line-height は受領時のまま動かさない(係数の前提が崩れるため)。 */
  .hero-dual-photo-split__heading { font-size: clamp(1.75rem, 3.5vw, var(--fs-hero-md)); }

  @supports (container-type: inline-size) {
    .hero-dual-photo-split__text { container-type: inline-size; }
    .hero-dual-photo-split__heading { font-size: clamp(1.75rem, 8.2cqw, var(--fs-hero-md)); }
  }
}