/* hero-split-image-right — テキスト左 / 写真右のスプリット型メインビジュアル
 * 出典: Figma「sitemeister_module」main1。生hex・固定px・PC/SP別値を契約へ変換済み。
 * ★写真に文字を重ねないので、スクリムは不要(可読性は素背景で担保)。
 *
 * 【トーン】エディトリアル。帯・すりガラス・色面をいっさい使わず、余白と字組みだけで成立させる。
 *          main-visual 18本の中で最も静かな基準点として置き、後続の hero-* が装飾側で差別化できる余地を残す。
 * 【力関係】「コピーが主役、写真は説明」。写真を大きく劇的にしない。 */

.hero-split-image-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  padding-left: clamp(20px, 6vw, 120px);
  background: var(--color-bg);
  /* R-5: セクションに上限付きの下限を与える。キャッチが8字でも30字でも第一画面の骨格が変わらない。
     写真の縦横比は案件ごとに変わるので、写真を引き伸ばして埋めるのではなく
     「余白で持たせる」側に倒している(エディトリアルのトーンとも一致)。 */
  min-height: min(56vh, 520px);
}

/* テキスト列。
   ★実効44%以上を保つこと。flex-basis の % はセクション幅に対する値だが、
     padding-left と gap はその外側で先に引かれるため、basis:44% と書いても実測41%まで痩せる
     (受領時の実測: 41.3〜41.4%)。そこで basis を 0 にして「padding と gap を引いた残り」を
     49:51 で配分する。これならどの幅でもセクション幅の約44%に着地する。 */
.hero-split-image-right__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* ★--space-sm は TECH_STACK に「24px」と載っているが common.css の :root に定義が無く、
     var() が無効値になって gap が normal(=0) に落ちていた。受領時は見出し・リード・CTA の
     間隔が全てゼロだった(実測)。TECH_STACK の記載値をフォールバックとして補う。
     ※根治は先方側。計画ファイルの「先方への指摘事項」を参照。 */
  gap: var(--space-sm, 24px);
  flex: 49 1 0;
}

.hero-split-image-right__heading {
  font-family: var(--font-heading);
  /* ★見出しは「列幅」に連動させる(下の @supports でコンテナクエリに差し替え)。
     ここはコンテナクエリ非対応環境向けのフォールバック。列幅≒セクション幅の44%なので
     8.2cqw ≒ 3.6vw として近似している。 */
  font-size: clamp(1.75rem, 3.6vw, var(--fs-hero-md));
  line-height: 1.5;
  letter-spacing: 0.04em;
  /* common.css の :root に --color-heading-ink の既定値が無く、theme.json 読込前・失敗時に
     見出しが --color-text と同色になる(受領時の既定テーマで再現)。
     フォールバックを --color-text そのものにすると同色のままで階調が戻らないため、
     common.css が --color-primary-dark で使っているのと同じ手法で本文より一段濃い墨に落とす。
     ※根治は先方側。計画ファイルの「先方への指摘事項」を参照。 */
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));
  margin: 0;
}

/* ★見出しサイズをテキスト列の実幅に連動させる。
   受領時は --fs-hero-md の下限が40pxで止まる一方、列幅は769pxで317pxまで痩せるため、
   1行8字しか入らず見出しが3〜4行に割れていた(実測: 1024で3行 / 900以下で4行 / 30字だと5行)。
   cqw なら列が狭まった分だけ見出しも縮むので、比率をどう変えても行数が破綻しない。
   上限は必ずトークン var(--fs-hero-md) で抑え、デザインシステムの最大値は動かさない。 */
@supports (container-type: inline-size) {
  .hero-split-image-right__text { container-type: inline-size; }

  .hero-split-image-right__heading {
    font-size: clamp(1.75rem, 8.2cqw, var(--fs-hero-md));
  }
}

/* 元デザインの「かぎ括弧だけ細く」の表情。太さの対比だけなので色は継承させる。 */
.hero-split-image-right__light { font-weight: 300; }

.hero-split-image-right__lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

/* CTA は「読ませる文章」ではなく「押させる操作」。見出し→リードと同じ間隔だと
   文章の4行目のように見えるので、一段深い余白で切り離す(gap 24px + 24px = 48px)。 */
.hero-split-image-right__cta {
  align-self: flex-start;
  margin-top: var(--space-sm, 24px);
}

/* 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-split-image-right .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);
}

/* 写真は第一画面に収める(design.md No.3/No.8)。固定 height ではなく比率+上限で抑える。
   ★写真の縦横比は案件ごとに違う。セクションの高さに合わせて引き伸ばす(align-self:stretch)と
     縦長にトリミングされて主役が見切れるため、比率を保ったまま余白で受ける。 */
.hero-split-image-right__media {
  flex: 51 1 0;
  aspect-ratio: 16 / 11;
  max-height: min(72vh, 620px);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.hero-split-image-right__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 主役の動きは1種類だけ。opacity:0 起点にしないのは、この写真が LCP 候補で
     初期描画を遅らせたくないため(R-8)。開始時点から可視で、寄りが緩むだけ。 */
  animation: hero-split-image-right-reveal 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* keyframes 名はグローバル空間なのでモジュール名を前置する。 */
@keyframes hero-split-image-right-reveal {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-split-image-right__media img { animation: none; }
}

@media (max-width: 768px) {
  .hero-split-image-right {
    flex-direction: column-reverse;
    padding-left: 0;
    gap: 0;
    /* SP は写真+テキストで既に十分な高さがあるため、PC の下限は持ち込まない。 */
    min-height: 0;
  }

  .hero-split-image-right__media {
    flex: none;
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    max-height: min(52vh, 380px);
    border-radius: 0;
  }

  /* 写真の下端にテキスト面を少し重ねる(元デザインの構図)。面色を敷くので文字は沈まない。
     不透明度は88%で、R-7 の「半透明の帯は80%以上」を満たす。 */
  .hero-split-image-right__text {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 20px 32px;
    gap: 20px;
    margin-top: -56px;
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  }

  /* design.md No.5: モバイル h1 は固定的に絞る */
  .hero-split-image-right__heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-split-image-right__lead { font-size: var(--fs-body); }
  /* SP は gap が 20px の実値で効いているため元から余白は出ていた。
     全幅CTAで既に塊として分離して見えるので、PC ほど深くは取らない(20 + 8 = 28px)。 */
  .hero-split-image-right__cta { width: 100%; text-align: center; margin-top: 8px; }

  /* リード文の <br> は PC 幅を想定して HTML に固定で入っている。骨格確定型で HTML は
     変更できないため、SP では CSS で無効化して自然に折り返させる。
     (375px で「心地よい空間とサービスをご用意していま / す。」と割れていた) */
  .hero-split-image-right__lead br { display: none; }
}

/* SP でも見出しを列幅連動にする。@supports の外に置くと非対応環境で上書きが効かないため、
   PC 側と同じくコンテナクエリが使えるときだけ差し替える。 */
@supports (container-type: inline-size) {
  @media (max-width: 768px) {
    .hero-split-image-right__heading {
      font-size: clamp(1.6rem, min(7vw, 9cqw), 2.2rem);
    }
  }
}