@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');

/* hero-banner-eyebrow — 和欧混植の見出しブロック + 全幅写真バンド + 回転バッジ
 * 出典: Figma「sitemeister_module」main3。
 * ★元CSSは写真を position:absolute + top:260px で置き、section に min-height:900px を
 *   与えていた。ここでは通常フローの縦積みに直し、写真は比率で高さを決める。 */

.hero-banner-eyebrow {
  position: relative;
  background: var(--color-bg);

  /* 第一画面に収める(R-5)。欧文リードの文字数は案件ごとに変わるためテキスト部の高さは
   * 事前に確定できない(51字だと 1440px で2行になり、受領時でも 99vh に達していた)。
   * 写真の高さを決め打ちにせず、セクション側に上限を置いて【テキストが伸びたら写真が縮む】形にする。
   * overflow:hidden は付けない。写真がはみ出すより本文が切れる事故の方が重い。 */
  display: flex;
  flex-direction: column;
  max-height: min(94vh, 1040px);

  /* --color-heading-ink は common.css の :root に未定義。そのまま参照すると var() が無効値になり、
   * color は親から素通しで継承されて「見出し色 = 本文色」になる（エラーは出ない）。
   * このモジュールは和文・欧文・バッジの3要素すべてがこの変数を参照しているため、
   * 既定テーマではヒーロー全体が本文と同じ濃さになり、和欧の対比が消える。
   * フォールバックを --color-text にしても同色のままなので、一段濃い墨を color-mix で作る。 */
  --hbe-ink: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));
}

/* 器は広い側だけ緩める。min(◯px, 100%) にしておくと狭い側の挙動は受領時のまま。
 * ★受領時の max-width:1203px は、1440px でこれが効いた瞬間に内寸1083pxとなり、
 *   そこへ 60px まで伸びた欧文リード(要 約1131px)が入りきらず2行に割れていた
 *   ("faces." 1語だけが最終行に落ちる)。1366px までは器が広いので1行に収まっており、
 *   行数が 2→1→2 とジグザグに振れる原因になっていた。
 *   必要な内寸 = 35字 × 60px × 0.55(欧文の平均字幅) × 1.04 ≒ 1201px、
 *   これに左右の padding を足して 1440px あれば足りる。
 *   ★欧文を縮めて1行に収める手もあるが、それだと --fs-hero-lg から一段落ちて
 *   「大きな欧文リードが主役」というこの構図の存在理由が消える。器の側を広げる。 */
.hero-banner-eyebrow__text {
  flex: 0 0 auto; /* テキストは縮ませない。足りない分は写真バンド側で吸収する */
  padding: clamp(24px, 4vw, 50px) clamp(20px, 4vw, 60px);
  max-width: min(1440px, 100%);
}

/* 和文キャッチは小さく組み、欧文リードを大きく見せるのがこの構図の要。
 * ★和文と欧文で「色」の階調は付けない。--color-heading-ink と --color-text の濃淡関係は
 *   配色プリセットによって反転するため（淡色ベージュ 6.65:1 vs 11.42:1 で ink の方が薄い）、
 *   色で主従を決めると案件ごとに和文と欧文の主従が入れ替わる。
 *   階調は字送りとサイズで作る。これはテーマが変わっても反転しない。 */
.hero-banner-eyebrow__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.18em;
  color: var(--hbe-ink);
  margin: 0 0 24px;
}

/* 和文と欧文の境目に引く細い罫。骨格確定型なので要素は増やせないが、
 * 擬似要素は HTML に現れないため骨格照合にも差分検査にも掛からない。
 * 長い罫にすると「区切り線」になって余白で見せる構図が損なわれるので、短く留める。 */
.hero-banner-eyebrow__heading::after {
  content: "";
  display: block;
  width: clamp(40px, 5vw, 72px);
  height: 1px;
  margin-top: 20px;
  background: color-mix(in srgb, var(--hbe-ink) 24%, transparent);
}

.hero-banner-eyebrow__en-lead {
  font-family: 'Roboto', var(--font-heading);
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--hbe-ink);
  margin: 0;
}

/* 写真は横長のバンド。第一画面に収める(No.3/No.8)。
 * ★max-height の px 上限が低すぎると、幅が広がるほど実効比率が伸びて写真が細長くなる。
 *   受領時は min(60vh, 520px) で 1920px のとき 3.69:1 まで伸び、同梱写真(1.83:1)の
 *   上下 50% を捨てていた。案件写真が縦長なら8割方が切れる。
 *   ★vh 側は受領時の 60vh のまま据え置く。62vh に上げると 1200〜1366px で
 *   セクション高が 86〜88vh から 92vh へ悪化する一方、トリミング改善は3ポイントで割に合わない。
 *   px 上限だけを上げれば、問題だった 1920px（トリミング50%）だけが改善し、
 *   他の幅は受領時と同じ挙動のまま保たれる。 */
.hero-banner-eyebrow__media {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: min(60vh, 700px);
  min-height: 0; /* flex 子の既定 auto を外し、セクションの上限に合わせて縮めるようにする */
}

.hero-banner-eyebrow__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 回転バッジ。色は currentColor 経由でテーマのインク色に従う。 */
.hero-banner-eyebrow__badge {
  position: absolute;
  right: clamp(16px, 4vw, 60px);
  top: clamp(16px, 3vw, 60px);
  z-index: 2;
  color: var(--hbe-ink);
  animation: hero-banner-eyebrow-spin 20s linear infinite;
}

@keyframes hero-banner-eyebrow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 動きを減らす設定のユーザーには回さない(アクセシビリティ / design.md No.47) */
@media (prefers-reduced-motion: reduce) {
  .hero-banner-eyebrow__badge { animation: none; }
}

@media (min-width: 769px) {
  /* バッジ(88px角)が欧文リードの文字に食い込む(受領時は 1024px で 46px 食い込み)。
   * バッジの右上定位置そのものが意匠なので動かさず、テキスト側に余地を作る。
   * バッジの left = 幅 - right - 88 なので、テキストの右 padding を
   * (right + 88 + 隙間) にすればテキストの右端は常にバッジの左端より内側に来る。 */
  .hero-banner-eyebrow__text {
    padding-right: calc(clamp(16px, 4vw, 60px) + 88px + 24px);
  }
}

@media (max-width: 768px) {
  .hero-banner-eyebrow__text { padding: 24px 20px; }
  /* design.md No.5: モバイル h1 は固定的に絞る。
   * ★字送りは PC より詰める。0.18em のままだと 414px 幅で和文が1行→2行に増える
   *   （SP は列が狭いうえ h1 が --fs-body まで絞られるため、字送りの影響が相対的に大きい）。 */
  .hero-banner-eyebrow__heading {
    font-size: var(--fs-body);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
  }
  .hero-banner-eyebrow__heading::after { margin-top: 16px; }
  .hero-banner-eyebrow__en-lead { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  .hero-banner-eyebrow__media { aspect-ratio: 3 / 2; max-height: min(52vh, 380px); }
  .hero-banner-eyebrow__badge { display: none; }
}