@charset "UTF-8";

/* ==========================================================================
   Project: 教職員紹介 教員カード
   File:    staff.css
   対象:    /outline/staff/
   依存:    common.css（デザイントークン）
   --------------------------------------------------------------------------
   【カードレイアウト構造】
   ┌──────────┬──────────────────────────┐
   │  写真    │  専門分野（右上）         │
   │  ──────  │  担当科目（右下）         │
   │  氏名    │                           │
   │  役職    │                           │
   │  学位    │                           │
   │  ボタン  │                           │
   └──────────┴──────────────────────────┘
   --------------------------------------------------------------------------
   【カラー設計】
   - 学科カラーは .hyg / .nrs クラスで切替（--color-main を継承）
   - 歯科衛生：--staff-accent #5EA4E1 / --staff-pale #EEF6FD
   - 看護　　：--staff-accent #f47ca2 / --staff-pale #FDE8F3
   ========================================================================== */


/* --------------------------------------------------
   学科カラー：カードスコープ変数
   -------------------------------------------------- */
.hyg .c-staff-card,
.c-staff-card.hyg {
  --staff-accent: var(--color-hygiene); /* #5EA4E1 */
  --staff-pale:   #EEF6FD;
}

.nrs .c-staff-card,
.c-staff-card.nrs {
  --staff-accent: var(--color-nursing); /* #f47ca2 */
  --staff-pale:   #FDE8F3;
}

/* --------------------------------------------------
   H2見出しは学科カラーを継承しない
   .hyg / .nrs は本来 --color-main を学科カラーに切り替えるが、
   本ページの H2 アコーディオンは他ページと同じデフォルトカラー
   （緑：var(--color-main) の通常値）に統一するため、
   section.hyg / section.nrs 内の H2 でのみ変数を打ち消す。
   -------------------------------------------------- */
.hyg > .c-heading-lvl2,
.nrs > .c-heading-lvl2 {
  --color-main: #12C19E;
}


/* ==========================================================================
   グリッド：PC 2列 / SP 1列
   ========================================================================== */
.c-staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: var(--spacing-2xl);
}

@media (max-width: 768px) {
  .c-staff-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ==========================================================================
   カード外枠
   grid-template-areas:
     "left  subject"  ← 左カラム（写真＋氏名等） / 右カラム（専門分野＋担当科目）
   左カラムは flex で縦積み、右カラムは stretch で高さを揃える
   ========================================================================== */
.c-staff-card {
  --staff-accent: var(--color-hygiene); /* フォールバック */
  --staff-pale:   #EEF6FD;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "left    subject"
    "extra   extra";
  align-items: stretch;
}


/* ==========================================================================
   左カラム（写真 ＋ 氏名・役職・学位・業績ボタン）
   ========================================================================== */
.c-staff-card__left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 0;  /* 写真周囲の余白 */
}

/* 写真エリアをラインと横並びにするラッパー */
.c-staff-card__photo-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 6px;              /* ラインと写真の間の余白 */
  flex-shrink: 0;
}

/* 学科カラーアクセントライン */
.c-staff-card__photo-wrap::before {
  content: "";
  display: block;
  width: 6px;
  flex-shrink: 0;
  background-color: var(--staff-accent);
}

/* 写真 */
.c-staff-card__photo {
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 3; /* 横長長方形 */
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-staff-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* プレースホルダーSVG */
.c-staff-card__photo svg {
  width: 46%;
  height: auto;
  opacity: 0.35;
}

/* 氏名・役職・学位・ボタンエリア */
.c-staff-card__info {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.c-staff-card__name {
  font-size: var(--fs-2xl); /* パターン2に合わせて統一 */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 0 0 6px;
}

.c-staff-card__role {
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-tight);
  margin: 0 0 2px;
}

.c-staff-card__degree {
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
}

/* 業績リンク（ピル型・学科カラー） */
.c-staff-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--staff-accent);
  border: 2px solid var(--staff-accent);
  border-radius: var(--radius-pill);
  padding: 5px 32px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.c-staff-card__link::after {
  content: "›";
  font-size: 1.1em;
  line-height: 1;
}

.c-staff-card__link:hover {
  background-color: var(--staff-accent);
  color: #ffffff;
  text-decoration: none;
}


/* ==========================================================================
   右カラム（専門分野 ＋ 担当科目）
   ========================================================================== */
.c-staff-card__subject {
  grid-area: subject;
  padding: 16px 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 専門分野 */
.c-staff-card__field-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  border-bottom: 2px solid var(--staff-accent);
  padding-bottom: 4px;
  margin: 0 0 4px;
}

.c-staff-card__field-value {
  font-size: var(--fs-base);
  color: var(--color-text);
  line-height: var(--lh-normal);
  margin: 0;
}

/* 担当科目 */
.c-staff-card__subjects-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 6px;
}

.c-staff-card__subjects {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--staff-pale);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
}


/* ==========================================================================
   趣味・一言（カード下段・全幅）
   データがない教員は HTML 側でこのブロック自体を出力しないため、
   存在する場合のみ表示される
   ========================================================================== */
.c-staff-card__extra {
  grid-area: extra;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 14px 20px 18px 26px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

/* PC：区切り線をカード幅の85%に（左端は本文と揃える） */
.c-staff-card__extra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  width: 85%;
  border-top: 1px solid var(--color-border);
}

.c-staff-card__hobby {
  margin: 0 0 4px;
}

.c-staff-card__hobby b {
  font-weight: normal;
}

.c-staff-card__message {
  margin: 0;
  color: var(--color-gray-700);
}


/* ==========================================================================
   レスポンシブ（SP：768px以下）
   案B：完全縦積みレイアウト
   ┌─────────────────────────┐
   │ [ライン][写真]           │
   │ 氏名                     │
   │ 役職・学位               │
   │ 専門分野                 │
   │ 担当科目                 │
   │ 業績ボタン               │
   └─────────────────────────┘
   ========================================================================== */
@media (max-width: 768px) {

  /* カード全体：1カラム縦積みに変更 */
  .c-staff-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "subject"
      "extra";
  }

  /* 左エリア：写真周囲に余白を追加 */
  .c-staff-card__left {
    padding: 12px 12px 0;
  }

  /* 写真ラッパー：横並びを維持しつつ全幅に */
  .c-staff-card__photo-wrap {
    gap: 6px;
  }

  /* 写真：横長アスペクトに変更（縦の圧迫感を軽減） */
  .c-staff-card__photo {
    aspect-ratio: 4 / 3;
  }

  /* ライン：写真と同じ高さに合わせる */
  .c-staff-card__photo-wrap::before {
    width: 6px;
  }

  /* 氏名・役職・学位・ボタン */
  .c-staff-card__info {
    padding: 14px 16px 16px;
  }

  .c-staff-card__name {
    font-size: var(--fs-xl); /* SP：--fs-2xlより一段小さく読みやすく */
  }

  .c-staff-card__role {
    font-size: var(--fs-base);
  }

  .c-staff-card__degree {
    font-size: var(--fs-base);
    margin-bottom: 16px;
  }

  /* 専門分野・担当科目 */
  .c-staff-card__subject {
    padding: 14px 16px 16px;
    gap: 12px;
    border-top: 1px solid var(--color-border);
  }

  .c-staff-card__subjects {
    font-size: var(--fs-sm);
  }

  .c-staff-card__extra {
    padding: 14px 16px 18px 28px;
    border-top: 1px solid var(--color-border);
  }

  /* SPでは::beforeの短い線を使わず、上のborder-topで全幅表示 */
  .c-staff-card__extra::before {
    display: none;
  }
}

/* ==========================================================================
   パターン2
   ┌──────────┬──────────────────────────┐
   │          │  氏名（大きめ）           │
   │  写真    │  役職                     │
   │          │  学位                     │
   │          │  専門分野                 │
   │          │  業績ボタン               │
   ├──────────┴──────────────────────────┤
   │【担当科目】テキスト（全幅・背景なし）│
   └─────────────────────────────────────┘
   クラス：.c-staff-card--p2
   ========================================================================== */

/* カード外枠：上段（写真＋プロフィール）/ 下段（担当科目・全幅） */
.c-staff-card--p2 {
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "left    profile"
    "subjects subjects"
    "extra   extra";
  position: relative; /* ::before の基準点 */
}

/* カード全高ライン：内側に余白を取って配置 */
.c-staff-card--p2::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 12px;
  background-color: var(--staff-accent);
  border-radius: 2px;
  z-index: 1;
}

/* photo-wrap::before（写真左のみのライン）は非表示 */
.c-staff-card--p2 .c-staff-card__photo-wrap::before {
  display: none;
}

/* 左カラム：::beforeラインと重ならないよう左余白を確保 */
.c-staff-card--p2 .c-staff-card__left {
  padding-left: 34px; /* ライン(12px) + カードpadding(10px) + 余白(6px) */
}

/* 右カラム：氏名・役職・学位・専門分野・業績ボタン */
.c-staff-card--p2 .c-staff-card__profile {
  grid-area: profile;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-staff-card--p2 .c-staff-card__name {
  font-size: var(--fs-2xl);     /* パターン1より大きく */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 0 0 8px;
}

.c-staff-card--p2 .c-staff-card__role {
  font-size: var(--fs-base);
  color: var(--color-gray-700);
  line-height: var(--lh-tight);
  margin: 0;
}

.c-staff-card--p2 .c-staff-card__degree {
  font-size: var(--fs-base);
  color: var(--color-gray-700);
  line-height: var(--lh-tight);
  margin: 0 0 4px;
}

/* 専門分野：ラベルと値を縦積み表示 */
.c-staff-card--p2 .c-staff-card__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 12px;
}

.c-staff-card--p2 .c-staff-card__field-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  border-bottom: none;      /* パターン1の下線を無効化 */
  padding-bottom: 0;
  margin: 0;
  white-space: nowrap;
}

.c-staff-card--p2 .c-staff-card__field-value {
  font-size: var(--fs-base);
  color: var(--color-text);
  margin: 0;
}

/* 業績リンク：パターン1と同じスタイルを継承 */
.c-staff-card--p2 .c-staff-card__link {
  align-self: flex-start;
}

/* 下段：担当科目（全幅・背景なし・上ラインなし） */
/* padding-left：ライン(12px) + カード内余白(10px) + テキスト余白(6px) = 34px */
.c-staff-card--p2 .c-staff-card__subjects-block {
  grid-area: subjects;
  padding: 14px 16px 16px 34px;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* 趣味・一言：左ライン分の余白を確保 */
.c-staff-card--p2 .c-staff-card__extra {
  padding: 14px 20px 18px 34px;
}

.c-staff-card--p2 .c-staff-card__extra::before {
  left: 34px;
}


/* ==========================================================================
   パターン2：レスポンシブ（SP：768px以下）
   パターン1と同じ完全縦積みレイアウト
   ========================================================================== */
@media (max-width: 768px) {

  .c-staff-card--p2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "profile"
      "subjects"
      "extra";
  }

  /* SP：全エリアにpadding-leftを追加してラインとの重なりを解消 */
  .c-staff-card--p2 .c-staff-card__left {
    padding: 12px 12px 0 34px;
  }

  .c-staff-card--p2 .c-staff-card__photo {
    aspect-ratio: 4 / 3;
  }

  .c-staff-card--p2 .c-staff-card__profile {
    padding: 14px 16px 16px 34px;
  }

  .c-staff-card--p2 .c-staff-card__name {
    font-size: var(--fs-xl);
  }

  .c-staff-card--p2 .c-staff-card__subjects-block {
    padding: 14px 16px 16px 34px;
  }

  .c-staff-card--p2 .c-staff-card__extra {
    padding: 14px 16px 18px 34px;
  }
}