/* ==========================================================================
   demo/b1-join.css — 採用情報 ／ パートナー企業募集
   --------------------------------------------------------------------------
   前任 Figma 案（node 180-882「下部イメージ」）と同じ作りにしている（三嶋指示）。
   全幅を 50/50 に割り、写真に紺の幕を被せ、その上に見出し＋1 文＋矢印を置く。

   ★★幕は navy-900 #060340 を 0.72。計算で決めた値。動かすときは必ず測り直すこと。

     素の写真に白文字を置くと、4.5:1 を切る画素が
         recruit 67% ／ partner 79%
     ある。前任案の本文が読めなかったのはこれが理由で、
     «幕が薄い» ではなく «幕が足りていない» という量の問題だった。

     両画像 44,800 画素で測った、白文字のコントラストの最悪値と、
     幕を通したあとに «写真の明暗がどれだけ残るか»（輝度の幅）：

       navy-800 0.62 → 5.49:1  明暗の幅 0.138  （前の設定）
       navy-800 0.70 → 7.33:1  0.089
       navy-900 0.68 → 7.13:1  0.095
       navy-900 0.72 → 8.29:1  0.074  ← 採用（三嶋指示「もっと濃紺で OK」）
       navy-950 0.78 → 10.93:1 0.045  （ほぼ黒。写真がほとんど消える）

     ★navy-950 ではなく navy-900 を選んだのは «濃紺» を保つため。
       950 まで行くと黒に寄り、紺として読めなくなる。
     ★0.72 で明暗の幅は 0.138 → 0.074 とほぼ半分。写真は残るが一段沈む。
       これ以上濃くすると、写真を敷いている意味が薄くなる。

     ★写真を差し替えたらこの計算をやり直すこと。
       最悪値は «いちばん明るい画素» で決まる。今回の 3 枚はいずれも
       白壁や窓で純白近くまで振れているため最悪値が揃ったが、
       暗い写真なら幕を薄くできるし、もっと明るい写真なら足りなくなる。

   ★見出しは中央揃えにしない（CLAUDE.md）。前任案は中央寄せだったが、
     ここは左揃えで通す。縦位置だけ中央に置いている。
   ========================================================================== */

.join ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .join ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.join li {
  /* 写真が読み込まれるまでの地。読み込み中に白く抜けるのを防ぐ */
  background: var(--navy-800);
}

/*
  2 つの境目。写真が続くと 1 枚の帯に見えるので 1px の縦罫で割る。
  ★塗りを変えて分ける手もあるが、隣り合う紺（navy-800 / navy-900）の差は
    1.072 : 1 しかなく（実測）、面の差では «2 つある» が伝わらない。
*/
@media (min-width: 768px) {
  .join li + li {
    box-shadow: -1px 0 0 var(--navy-600);
  }
}

.join a {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(20rem, 28vw, 26rem);
  /* ★三嶋指示で余白を太く：48px → 80px（1440px 表示時）。
     ★padding を増やすと文章列が痩せて行数が増える。
       .join__copy の max-width（30rem = 480px）と、丸（56px）＋隙間（32px）を
       引いた残りが文章の幅になる。1440px では 713 − 160 − 88 = 465px。
     ★min-height も 24rem → 26rem に上げた。padding だけ太くすると
       文字が上下に詰まって «余白を足した» ように見えない。 */
  padding: clamp(var(--space-10), 6vw, var(--space-20));
  overflow: hidden;
  /* ★矢印は currentColor で描く。ここを指定しないと body の本文色（暗い）を
     継いで紺地で見えなくなる。実際に一度そうなった。 */
  color: var(--white);
  text-decoration: none;
}

/* 写真。面いっぱいに敷く */
.join__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
  紺の幕。濃度の根拠はファイル冒頭を参照。
  ★単色のベタにしている。グラデーションにすると «どの位置で薄くなるか» が
    文字の位置と連動しないため、行数が変わった途端に薄い場所へ文字が乗る。
    単色なら面のどこに文字が来ても 8.29:1 が保証される。
*/
.join a::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(6, 3, 64, 0.72);   /* navy-900 */
}

/*
  文章と丸い矢印を横に並べる（三嶋指示で前任案と同じ配置に）。
  ★矢印は auto 幅で右端に固定し、文章側だけが伸び縮みする。
    1fr / auto にしないと、文章が短い方の矢印だけ内側に寄って
    2 つの半分で矢印の位置が揃わない。
*/
.join__body {
  position: relative;
  z-index: 2;   /* 幕より上 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(var(--space-4), 2.5vw, var(--space-8));
  align-items: center;
}

.join__copy {
  display: grid;
  gap: var(--space-4);
  max-width: 30rem;
}

/* 押せることの手掛かり。写真をわずかに寄せるだけで、装飾は足さない */
.join a:hover .join__bg,
.join a:focus-visible .join__bg {
  transform: scale(1.04);
}

.join__title {
  display: block;
  color: var(--white);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/*
  ★本文も白。navy-200 は幕の上で 5.7:1 まで上がったが、それでも白を使う。
    見出しと本文で色を分ける理由がこの節には無い（本文が 1 文しかない）。
    紺地のセクションでは navy-200 を補足色に使っているが、
    ここは «幕の上» なので条件が違う。同じトークンを機械的に持ち込まないこと。
*/
.join__text {
  display: block;
  color: var(--white);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  line-break: strict;
}

/* 白い丸の中に、ヒーローの CV と同じ 2 本線の山形を置く。 */
.join__arrow {
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 4vw, 3.5rem);
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 50%;
}

.join__arrow::before {
  width: 0.55em;
  height: 0.55em;
  content: "";
  border-top: var(--border-width-thick) solid var(--navy-800);
  border-right: var(--border-width-thick) solid var(--navy-800);
  transform: translateX(0) rotate(45deg) translate(-1px, 1px);
  transition: transform var(--duration-base) var(--ease-out);
}

.join a:hover .join__arrow::before,
.join a:focus-visible .join__arrow::before {
  transform: translateX(3px) rotate(45deg) translate(-1px, 1px);
}

@media (prefers-reduced-motion: reduce) {
  .join__bg,
  .join__arrow::before {
    transition: none;
  }
}