/* ============================================================
   採用TOP「PHOTO FEATURE」セクション専用スタイル
   - 読み込み元：corporate-html/recruit/index.html（採用TOPの1ページのみ）。
     experiment/recruit-photo-v1 での試作としてこのファイルを起こしたが、
     現在は本番候補として採用TOPから常時読み込んでいる。
     ファイル名の "photo-experiment" は試作当時の名残で、実験ブランチ限定の
     ファイルではない（名前の変更と forward.css への統合は別途検討する）。
   - forward.css / forward.js / site.css は無改修（このファイルの追加のみで完結）。
   - クラスは .fwd-photo-feature 名前空間に限定し、既存の .fwd- 系
     コンポーネントには一切影響させない。
   - 色は既存Recruitのトークン（--brand-deep / --brand-cyan / white）のみ。
     新しいaccent colorは追加しない。
   - 撤去する場合：index.html からこのCSSの<link>とPHOTO FEATUREの
     <section>を外すだけで元の採用TOPに戻る。
   ============================================================ */

/* ------------------------------------------------------------
   セクション本体
   ------------------------------------------------------------
   PROJECT（白面）と WHY（淡いブルー面）の間に置く「特集扉」。
   既存セクションはすべて .fwd-scene__inner の内側に収まるが、
   ここだけは全幅で断ち切る。番号付きeyebrowを持たないこととあわせて、
   「章と章のあいだの1ページ」として本文セクションと区別する。
------------------------------------------------------------ */
.fwd-photo-feature {
  position: relative;
  /* 写真の周囲・SPでの下段はすべてこの濃紺。実写だけが明るく浮かないよう、
     セクション全体を既存navy面と同じ地の上に置く。 */
  background-color: var(--brand-deep);
  color: #fff;
  overflow: hidden;
}

/* ------------------------------------------------------------
   写真フレーム
------------------------------------------------------------ */
.fwd-photo-feature__frame {
  position: relative;
  width: 100%;
}
/* SPは写真本来の縦横比のまま置く（object-fit: coverで左右を切らない）。
   横一列に並んだ人物が端で断ち切られるのを避けることを最優先する。 */
.fwd-photo-feature__img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  /* 実写の構造（実測）にレイアウトを合わせる：
       ・8人が横幅いっぱい（x 9%〜95%）に並ぶ → 左右は1pxも切れない
       ・顔は上から33〜42%
       ・足元が88%と既に下端に近い → 上下も10%以上切ると足が切れる
     この2条件から、取りうる比率は元の3:2（1.5）〜1.65程度に限られる。
     16/10（1.6）＋object-position中央付近なら、上下の切り落としは
     各3%程度に収まり、樹冠の抜けも舗装面も残したまま全身が入る。
     1画面に収めるためのmax-heightは入れない（入れるとcoverの切り取りが
     深くなり、足元が切れる）。 */
  .fwd-photo-feature__frame {
    aspect-ratio: 16 / 10;
  }
  .fwd-photo-feature__img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 46%;
  }
}

/* 濃紺のveil：実写の色温度を既存のnavy-cyan世界へ寄せ、
   同時にコピーが乗る下段（PC）／下端（SP）の可読性を確保する。
   ベタで暗くせず、下から上へ抜ける勾配だけで処理する。 */
.fwd-photo-feature__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* SP：コピーの食い込みが深いぶん、濃紺の立ち上がりも少し上まで伸ばす。
     顔は下から58〜67%の位置にあるので、46%より上には一切掛けない。 */
  background:
    linear-gradient(
      to top,
      rgba(11, 31, 58, 0.95) 0%,
      rgba(11, 31, 58, 0.86) 7%,
      rgba(11, 31, 58, 0.66) 15%,
      rgba(11, 31, 58, 0.4) 25%,
      rgba(11, 31, 58, 0.16) 35%,
      rgba(11, 31, 58, 0) 46%
    ),
    /* 緑の強い実写を既存のnavy-cyanの面に馴染ませるための、ごく薄い寒色の膜。
       SPは写真自体が小さく見えるため、PC（0.12）より薄くして抜けを残す。 */
      linear-gradient(rgba(11, 31, 58, 0.08), rgba(11, 31, 58, 0.08));
}
@media (min-width: 768px) {
  /* PC：立ち上がりを2段構えにする。下端14%までをほぼ濃紺の「地」として
     起こし、そこから57%へ向けてゆるやかに抜く。コピーが濃紺の面に座って
     見えるようになり、写真・タイポ・濃紺が1枚として繋がる。
     顔（下から58〜67%）には従来どおり一切掛からない。
     左側の強いwashは、いちばん左の人物を沈めてしまうため使わない。 */
  .fwd-photo-feature__veil {
    background:
      linear-gradient(
        to top,
        rgba(11, 31, 58, 0.95) 0%,
        rgba(11, 31, 58, 0.9) 7%,
        rgba(11, 31, 58, 0.76) 14%,
        rgba(11, 31, 58, 0.58) 22%,
        rgba(11, 31, 58, 0.38) 31%,
        rgba(11, 31, 58, 0.18) 41%,
        rgba(11, 31, 58, 0.04) 50%,
        rgba(11, 31, 58, 0) 57%
      ),
      /* 既存の左サイドナビ（.fwd-rail / 固定要素）は白背景・濃紺背景の上を
         通る前提の1色で、明るい実写の上では判読できなくなる。
         人物は左端9%より内側にいるため、左端8%までのごく狭い帯だけを落とす。
         人物には一切掛からない（%指定なので画面幅が変わっても関係は保たれる）。 */
      linear-gradient(90deg, rgba(11, 31, 58, 0.58) 0%, rgba(11, 31, 58, 0.3) 4%, rgba(11, 31, 58, 0) 8%),
      linear-gradient(rgba(11, 31, 58, 0.12), rgba(11, 31, 58, 0.12));
  }
}

/* grain 2枚目：Sales / Creative の CROSS TEAM 導入写真
   （role.css の .fwdr-lead__figure::after）と同じレシピ
   ── --fwd-grain / opacity 0.095 / multiply ── をここにも重ねる。
   採用TOPの集合写真と下層2ページの写真で「同じ粒状グランジ」を
   使うことが目的で、数値をこのファイル独自に持たない。
   ⚠️ 3枚とも並木のある屋外写真で、葉そのものが高周波を多く含むため、
      実測での見た目の変化は小さい（平均輝度 -2.4 ＝ 約2%、平均色相差
      0.7°）。それでも質感のルールを1本に揃えておくことで、写真素材を
      差し替えたときにトーンがばらけない。
   ⚠️ サイト全体のgrainを一段強めた際に 0.075 → 0.095 まで引き上げた。
      ただし 0.10 を超えると、ざらつきは増えず暗くなるだけなのでそれ以上は
      上げない（Sales / Creative 側で 0.10 / 0.14 まで実測済み）。
   ⚠️ isolation は、multiply が写真の外（セクションの濃紺地）まで
      抜けないようにするため。コピーは z-index:1 の別要素なので、
      この上に重なったままで影響を受けない。 */
.fwd-photo-feature__frame {
  isolation: isolate;
}
.fwd-photo-feature__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain);
  opacity: 0.095;
  mix-blend-mode: multiply;
}

/* grain 1枚目：forward.cssの統一fine grain system（.fwd-photo-grain /
   --fwd-grain-photo）を採用。旧実装（recruit-bg-grain-navy.webp、
   opacity .18、multiply）はラスター画像の粗さがそのまま写真に乗り、
   顔まわりが荒れて見えるリスクがあった。新レシピは中立グレー・
   overlay合成のため、写真を暗くも明るくもせず、ごく僅かなフィルム
   粒子感だけを足す（HTML構造・要素は無変更、CSSのみ差し替え）。 */
.fwd-photo-feature__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain-photo);
  opacity: 0.065;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   コピー
   PC：写真の上（左下）に直接置く。
   SP：写真の直下、濃紺の続きの中に置く。写真の下端はveilで
       そのまま濃紺へ溶けるため、写真とコピーは1つの面として続く。
------------------------------------------------------------ */
.fwd-photo-feature__copy {
  position: relative;
  z-index: 1;
  /* SPは写真を左右で切らない＝高さを稼げないため、コピーを写真の下端へ
     食い込ませる。veilで最下部はほぼ濃紺になっており、そこは地面（顔のない
     領域）なので、ラベルと大見出しの入りが写真の上に乗っても可読性を損なわない。
     写真とコピーの境目が消え、全体が1枚の面として続いて見える。 */
  margin-top: -3.75rem;
  /* 下の余白を詰めるほど、セクションに占める写真の割合が上がる。
     写真自体はこれ以上大きくできない（左右を切らない＝3:2が上限）ため、
     プロポーションでSPの写真の印象を持ち上げる。 */
  padding: 0 0 2.25rem;
}
@media (min-width: 768px) {
  .fwd-photo-feature__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    /* 濃く起こした下端側へコピーをわずかに寄せ、濃紺の地に座らせる。 */
    padding: 0 0 clamp(2.25rem, 0.8rem + 3vw, 4rem);
  }
}

.fwd-photo-feature__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  /* ラベルは実写のいちばん明るい帯（舗装面・淡色の服）の高さに乗るため、
     cyanのままだと地に沈む。文字は白に上げ、cyanはruleに残す。
     PCではveilが弱い高さ（下から約35%）に来るので特にここが効く。 */
  color: rgba(255, 255, 255, 0.94);
}
/* cyanは細いruleだけに使う。面では使わない。 */
.fwd-photo-feature__rule {
  display: block;
  width: clamp(1.75rem, 3vw, 3.25rem);
  height: 1px;
  background: var(--brand-cyan);
  opacity: 0.85;
}

.fwd-photo-feature__title {
  /* ラベル→見出し→リードの間隔を少しだけ詰め、3要素を1つの塊として読ませる。 */
  margin: 0.95rem 0 0;
  /* HEROの主コピー（最大5rem）より確実に小さく、
     セクション見出し（最大2.6rem）より大きい中間に置く。
     ここがページ内で2番目に強い文字であることを崩さない。 */
  /* 下限を2.15remにしているのはSP専用の調整。390pxではvw項が効かず下限が
     そのまま採用されるため、SPだけ見出しがひと回り大きくなり、写真との
     一体感が上がる（768px以上ではvw項が上回るのでPCの見え方は変わらない）。 */
  font-size: clamp(2.15rem, 1.1rem + 3.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: #fff;
}
.fwd-photo-feature__line {
  display: block;
}

.fwd-photo-feature__lead {
  margin: 1.15rem 0 0;
  max-width: 30rem;
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}