/* ==========================================================================
   POTOMAK 2026 — スタッフインタビュー(一覧 / 詳細)
   出典: Figma「POTOSITE_FINAL」インタビュー (4172:1586) /
         Aさんのインタビュー (4172:2019)

   RECRUITページの一部なので、page-recruit.css の決めごとをそのまま使う。
   (明朝は使わない / 弱いグレーの文字は使わない / 図形を記号として共有する)
   このファイルは page-recruit.css のあとに読み込む。
   ========================================================================== */

/*
 * 一覧のヒーロー画像は置かない方針になったため、
 * 関連する指定(.itv-hero)は削除した。
 * ページは見出しから始まる。
 */


/* ---------- 一覧(見出しは共通の rec-intro を使用) ---------- */

/*
 * 見出しは template-parts/recruit-page-intro(.rec-intro)で出す。
 * 一覧側セクションの上余白は詰める(イントロの下余白と二重にしないため)。
 */
.interview-list {
  padding-top: 0;
}


/* ---------- カードの並び ---------- */

.itv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /*
   * 左右は他の一覧と同じ24px。上下は64px。
   * Figmaの実測(60/25)をそのまま書いていたが、
   * 1px・4pxの差に意味がないのでトークンに寄せた。
   */
  gap: var(--space-2xl) var(--space-md);
}

.itv-card__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/* 記事のタイトルにあたる部分 */
.itv-card__quote {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  /* カードの1行なので、読ませる長文の Lead Body ではなく Body */
  font: var(--type-body);
  /* Body の行間は 1.9 だが、カードの引用文では空きすぎるので詰める */
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  transition: color 0.25s ease;
}

.itv-card:hover .itv-card__quote {
  color: var(--color-accent);
}

/* 職種と氏名 */
.itv-card__meta {
  /* 説明どうしの行。全ページ共通の 4px */
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}


/* ---------- 詳細のヒーロー ---------- */

/*
 * 大きい写真の右下に、白いカードを重ねる。
 * Figma実測は 写真800x600 / カード570x282。
 * 画面幅が変わっても関係が崩れないよう、%で置いている。
 */
.itv-detail__hero {
  position: relative;
  /*
   * 写真 → 本文。
   *
   * ヒーローは全面写真で下端が硬い縁になっているので、
   * ふつうの区切り(24px)だと文字が写真に貼り付いて見える。
   * さらにここは「顔と名前」から「読む文章」へ切り替わる場所なので、
   * 区切り(48px)より一拍広い64pxを取る。
   * RECRUITのヒーローの下やTOPの上と同じ「ひと呼吸」の値。
   */
  padding-bottom: var(--space-2xl);
}

.itv-detail__photo {
  width: 66%;
  /*
   * 広い画面では 3:2。
   * 4:3(1.33)と16:9(1.78)のちょうど中間で、一眼レフの標準比率でもあるので
   * 元の写真をいちばん切り落とさずに済む。
   */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.itv-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * カードの bottom は、ヒーローの padding-bottom と必ず同じ値にすること。
 * 同じにしておくと、カードの下端が写真の下端とぴったりそろう。
 * 片方だけ変えるとズレる。
 */
.itv-detail__card {
  position: absolute;
  /*
   * 右端は画面のふち寄せ。
   *
   * 写真が画面の左端から始まっているので、カードだけ本文の余白(120px)ぶん
   * 内側に引っ込んでいると、右側だけが空いて見える。
   * かといって画面のふちに付けると窮屈なので、48pxだけ空ける。
   * 本文の余白(120px)より狭く、カードの内側の余白(48px)と同じ値。
   * NEWS詳細(.news-detail__card)と同じ考え方。
   */
  right: var(--space-xl);
  bottom: var(--rule-section);
  width: min(570px, 46%);
  /* 枠の内側。トークンの48px(--space-xl)。以前は50pxの直値だった */
  padding: var(--space-xl);
  background-color: var(--color-paper);
}

.itv-detail__label {
  display: flex;
  align-items: center;
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink);
}

.itv-detail__catch {
  /* ラベル → 見出し。全ページ共通の8px */
  margin-top: var(--space-xs);
  /* 記事の題名。ゴシック32px(H1-San)。字間は他ページのH1と同じ0.08em */
  font: var(--type-h1-san);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}

/* 「Job Name」と、その右に職種と氏名 */
/*
 * 職種と氏名。
 * 以前は「Job Name」のラベルと2列で組んでいたが、ラベルを外したので
 * ふつうの1段落になった(列の指定は要らない)。
 */
.itv-detail__meta {
  /* 見出し → 中身。全ページ共通の24px */
  margin: var(--rule-head) 0 0;
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- 詳細の本文 ---------- */

/*
 * 読み物なので、横幅を絞る。
 * 1行が長すぎると目が戻る位置を見失って読みづらくなる。
 */
.itv-detail__body {
  width: min(800px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--rule-section);
}

.itv-block__heading {
  /* 「見出し + 文章 + 写真」のかたまりどうし。全ページ共通の48px */
  margin-top: var(--rule-block);
  /*
   * 記事の中の見出しは、RECRUITトップのメッセージの呼びかけ(.rec-message__lead)と
   * 同じルール。文章の上に置く小見出しの組み(--type-subhead)。
   * 20px・ウエイト350・墨色で、本文(Body 15px)との差は大きさでつける。
   *
   * 以前は瑠璃色にしていたが、日本語の文章を瑠璃色にしているのが
   * サイトでここと .rec-message__lead の2箇所だけだったので外した。
   * 瑠璃色は英字ラベルとリンクの色に絞っている。
   *
   * 行送りだけは、章の頭の1行なので広めの2.0にしている。
   */
  font: var(--type-subhead);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/* 最初の見出しの上には、ヒーローの空きがあるので足さない */
.itv-block__heading:first-child {
  margin-top: 0;
}

.itv-block__text {
  /* 見出し → 本文。全ページ共通の24px */
  margin-top: var(--rule-head);
  /*
   * 記事の本文。サイト全体と同じ Body(15px)。
   * 読み物だからと大きくしていたが、他のページの本文と
   * 見え方がそろわないので共通の大きさに戻した。
   */
  font: var(--type-body);
  /*
   * 行送りは「読ませる本文」の2.2(--lh-read)。
   * 他のページの本文(1.9)は数行で終わるが、
   * ここは何十行も続けて読むので、行が詰まっていると目が次の行を拾いにくい。
   * RECRUITトップのメッセージ(.rec-message__text)と同じ値。
   * font: の一括指定は行送りも書き換えてしまうので、必ずそのあとに置く。
   */
  line-height: var(--lh-read);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/*
 * 段落どうしの空き。ちょうど1行ぶん空ける。
 *
 * 行送りは2.2(--lh-read)なので、1行の高さは 2.2em。
 * 同じだけ上に空きを取ると、段落のあいだに空の行が1本入って見える。
 * 1.4emでは1行の高さより狭く、行と行の間との差が付かなかった。
 */
.itv-block__text p + p {
  margin-top: calc(var(--lh-read) * 1em);
}

/* 段落のあとに入る写真。本文の幅いっぱい */
.itv-block__figure {
  /* 文章 → 写真。かたまりの中の区切りなので48px。以前は96pxで開きすぎだった */
  margin: var(--rule-block) 0 0;
}

.itv-block__figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------- PROFILE ---------- */

.itv-profile {
  /* 本文 → プロフィール枠。かたまりどうしなので48px */
  margin-top: var(--rule-block);
  /* 枠の内側。トークンの48px。以前は40pxの直値だった */
  padding: var(--space-xl);
  background-color: var(--color-bg-alt);
}

.itv-profile__title {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink);
}

/*
 * 氏名。
 * 文章の上に置く小見出しなので --type-subhead(20px)。
 * 英字ラベル(PROFILE)との空きは、全ページ共通の8px。
 */
.itv-profile__name {
  margin-top: var(--space-xs);
  font: var(--type-subhead);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/*
 * 経歴。
 *
 * 氏名との空きは16px。
 * 「見出し → 中身」の24pxではなく、このページの
 * 「見出し → リード文」と同じ狭いほう(page-recruit.css の
 * .rec-head:has(+ .rec-lead) と同じ考え方)。
 * 氏名と経歴はひとかたまりとして読ませたい。
 */
.itv-profile__text {
  margin-top: var(--space-sm);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  .itv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .itv-detail__card {
    padding: var(--space-xl);
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  .itv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /*
   * 狭い画面では重ねるのをやめる。
   * 重ねたままだと写真もカードも小さくなって、どちらも読めなくなる。
   */
  .itv-detail__hero {
    padding-bottom: 0;
  }

  /*
   * 写真は正方形にそろえる。
   * 縦に積む画面では、横長だと1枚の高さが足りず、
   * 人物も空間も小さく見える。
   */
  .itv-detail__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  /*
   * 記事の途中に入る写真は、元の形のまま流す。
   * 正方形にそろえるのはヒーローの1枚だけ。
   * 記事中まで切り取ると、料理や店内など横長で見せたい写真まで
   * 左右が落ちてしまうため。
   */

  .itv-detail__card {
    position: static;
    width: 100%;
    padding: var(--space-xl) var(--gutter);
  }

  /*
   * 記事の題名は H1-San(32px) → H2-San(24px)。
   * PCではカードが写真の上に乗って幅が570pxあるが、
   * 狭い画面では画面いっぱいに広がるので、32pxのままだと
   * 1行に10文字ほどしか入らず、題名だけで画面が埋まってしまう。
   */
  .itv-detail__catch {
    font: var(--type-h2-san);
    letter-spacing: var(--ls-display);
  }

  .itv-profile {
    padding: var(--space-lg);
  }
}