@charset "UTF-8";

/* ============================================================
   page.css（英語版）— 下層ページ共通
   1. ページヘッダー帯（一覧・People 共通）
   2. 一覧セクション
   3. VIEW MORE（段階表示）
   4. 詳細 — 記事エリア
   5. 詳細 — 記事ヘッダー
   6. 詳細 — 記事本文（素タグ）
   7. 詳細 — 記事コンポーネント（図版・動画）
   8. 詳細 — 下部セクション（Related Publications / Latest News）
   9. People
   ============================================================ */
/* ページ全体: 青グラデーション背景。Faculty はグラデーション、以降は Blue/1000 ベタ */
.people {
  color: var(--neutral-0);
  background: var(--blue-1000);
}

.people-section--faculty {
  padding: var(--tb-m) var(--side);
  background: linear-gradient(to bottom, var(--blue-800), var(--blue-1000));
}

.people-roster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: var(--tb-m) var(--side);

  @media (max-width: 840px) {
    gap: 56px;
  }
}

/* 内側カラム（Figma 1000px） */
.people-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;

  @media (max-width: 840px) {
    gap: var(--gap-m);
  }
}

.people-section--faculty .people-inner {
  gap: var(--gap-m);
}

/* 白ピルのラベル（Faculty / Students / Alumni） */
.people-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 108px;
  /* Fustat は字面が行ボックスの上寄りに乗るため、上下の余白を入れ替えて視覚的に中央へ（高さは 4px + 4px のまま） */
  padding: 6px 8px 2px;
  font-size: var(--text-p);
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-600);
  background: var(--neutral-0);
  border-radius: 32px;

  @media (max-width: 840px) {
    padding-top: 5px;
    padding-bottom: 3px;
  }
}

/* Faculty */
/* 教員が複数のときは縦に並べる */
.people-prof-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

.people-prof {
  display: flex;
  align-items: center;
  gap: 48px;

  @media (max-width: 840px) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-m);
  }
}

.people-prof-img {
  flex-shrink: 0;
  width: 280px;
  height: 280px;
  overflow: hidden;
  border-radius: var(--radius);

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

  @media (max-width: 840px) {
    width: 200px;
    height: 200px;
  }
}

.people-prof-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.people-prof-role {
  font-size: var(--text-p);
  line-height: 1.5;
}

.people-prof-name {
  font-size: var(--title-m);
  font-weight: 500;
  line-height: 1.2;
}

.people-prof-bio {
  font-size: var(--text-p-s);
  line-height: 1.4;
}

.people-prof-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-ss);
  font-size: var(--text-p-s); /* PC 14px / SP 12px */
  line-height: 1.4;

  a {
    text-decoration: underline;
    text-underline-position: from-font;
    transition: color 0.2s;

    @media (hover: hover) {
      &:hover {
        color: var(--blue-200);
      }
    }
  }
}

/* Students（5 カラム → SP 2 カラム） */
.people-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap-m);

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

.people-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);

  /* href あり → hover で写真を少し暗く */
  &[href] {
    @media (hover: hover) {
      &:hover .people-card-img img {
        opacity: 0.8;
      }
    }
  }
}

.people-card-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
  }
}

.people-card-text {
  display: flex;
  flex-direction: column;
}

.people-card-name {
  font-size: var(--title-s);
  font-weight: 600;
  line-height: 1.3;
}

.people-card-role {
  font-size: var(--text-p-s);
  line-height: 1.4;
}

/* Alumni（年ごとに見出し + 罫線、5 カラム → SP 2 カラム） */
.people-year-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.people-year {
  display: flex;
  align-items: center;
  gap: var(--gap-ss);
  font-size: var(--text-p);
  font-weight: 400;
  line-height: 1.5;

  &::after {
    content: "";
    flex: 1;
    min-width: 1px;
    height: 1px;
    background: rgb(255 255 255 / 0.3);
  }
}

/* Figma: 縦横とも 32px（PC = gap-m / SP = gap-l） */
.people-alumni {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap-m);

  @media (max-width: 840px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-l);
  }
}

.people-alumni-name {
  font-size: var(--title-s);
  font-weight: 600;
  line-height: 1.3;
}

.people-alumni-company {
  font-size: var(--text-p-s);
  line-height: 1.4;
}

/* ============================================================
   1. ページヘッダー帯
   固定ヘッダーが重なるため padding-top で逃がす。
   PC: 120px + 82px（見出し）+ 32px = 234px / SP: 72px + 61px + 24px ≒ 157px
   マークアップは People ページと共通:
   <div class="page-header"><div class="section-head">…</div></div>
   ============================================================ */
.page-header {
  padding: var(--tb-l) var(--side) var(--tb-s);
  background: var(--neutral-150);

  @media (max-width: 840px) {
    padding-top: var(--header-h);
  }
}

/* ============================================================
   2. 一覧セクション
   白背景 + 中央寄せコンテナ。グリッド → VIEW MORE の順に縦積み。
   ============================================================ */
.page-section {
  padding-block: var(--tb-m);
  background: var(--neutral-0);
}

/* Related Publications / Latest News など */
.page-section--gray {
  background: var(--neutral-150);
}

.page-section-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-l);
}

/* 一覧・詳細の下部セクション内のグリッド間隔
   PC: プロジェクト 24px / ニュース・論文 16px、SP: 18px */
.page-section .card-grid {
  @media (max-width: 840px) {
    gap: var(--gap-m);
  }
}

.page-section .card-grid--wide {
  gap: var(--side-s);

  @media (max-width: 840px) {
    gap: var(--gap-m);
  }
}

/* ============================================================
   3. VIEW MORE（段階表示）
   page.js が data-per-page 件ごとに hidden を外す。
   JS 無効時は全件表示し、ボタンは隠す。
   ============================================================ */
.js-more-list > [hidden],
.js-more-action[hidden] {
  display: none;
}

html:not(.js) .js-more-action {
  display: none;
}

/* 追加表示されたカードのフェードイン（.js-reveal と同じ動き・まとめて表示） */
.js-more-list > .is-more-enter {
  animation: more-enter var(--reveal-duration) var(--ease-out-expo) both;
}

@keyframes more-enter {
  from {
    opacity: 0;
    filter: blur(14px);
    translate: 0 28px;
  }

  to {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
  }
}

/* ============================================================
   4. 詳細 — 記事エリア
   本文カラム最大 960px。固定ヘッダー分の上余白を持つ。
   ============================================================ */
.page-article {
  padding: var(--tb-l) var(--side) var(--tb-m);
  background: var(--neutral-100);

  @media (max-width: 840px) {
    padding-top: var(--header-h);
  }
}

.page-article-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-l);
  max-width: 960px;
  margin-inline: auto;

  /* BACK TO LIST は中央寄せ */
  > .btn-wrap {
    justify-content: center;
  }
}

/* ============================================================
   5. 詳細 — 記事ヘッダー（タグ → h1 → 日付）
   ============================================================ */
.article-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-ss);
  padding-block: var(--tb-s);
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
}

.article-title {
  font-size: var(--title-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--neutral-1000);
}

.article-date {
  font-size: var(--text-p-s);
  line-height: 1.4;
  color: var(--neutral-700);
}

/* アイキャッチ（プロジェクト記事のみ・任意）: 本文の手前に元の比率のまま表示 */
.article-eyecatch {
  margin: 0;

  img {
    width: 100%;
    height: auto;
  }
}

/* ============================================================
   6. 詳細 — 記事本文（素タグ）
   CMS から出力される class なしの素タグをそのままスタイルする。
   デザインにある要素（リード文・本文の段落、図版）のみ対応
   ============================================================ */
.article-body {
  display: flow-root;
  color: var(--neutral-900);
  overflow-wrap: break-word;

  /* 要素間の基本間隔 */
  > * + * {
    margin-top: var(--gap-m);
  }

  p:not([class]) {
    font-size: var(--text-p);
    line-height: 1.5;
  }

  img:not([class]) {
    width: 100%;
    height: auto;
  }

  figure:not([class]) {
    margin-inline: 0;
  }
}

/* ============================================================
   7. 詳細 — 記事コンポーネント
   YouTube 埋め込み（プロジェクト記事のみ・任意）: 16:9 レスポンシブ
   ============================================================ */
.article-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--neutral-200);

  iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* ============================================================
   8. 詳細 — 下部セクション
   Related Publications（プロジェクト詳細のみ）/ Latest News（ニュース詳細のみ）
   背景・余白は .page-section--gray、見出しは .section-head を使用。
   ============================================================ */

/* ============================================================
   9. People
   ============================================================ */