/* ==========================================================================
   04 私たちについて（会長あいさつ）ページ 専用CSS
   構成：①+②ファーストビュー（見出し＋会長あいさつカード＋写真、背景ベージュ）
        ③白い余白 ④Heroアクセント（subpage.css） ⑤フッター（site-footer.css）
   ・style.css / subpage.css のトークンを継承する
   ・02「研修会・イベント」の開催予定カード、03「お知らせ」の一覧と同じ
     「ベージュの見出しエリアに白いカードを置く」レイアウト思想を踏襲する
     （.section__container--split をそのまま使用し、左＝見出し、右＝白いカード）
   ・ベージュ背景は固定高さの背景レイヤー（::before）とし、セクション自体の
     背景は白のまま。白いカードはベージュの高さを超えて下方向に伸び、
     結果として白背景側へ「はみ出す」ように見える
   ・写真は見出し・カードとは独立した要素とし、左カラムの下側
     （カードより低い位置）から現れ、ベージュ／白の境界をまたぐ
   ・新しい色・装飾は追加していない
   ========================================================================== */

:root {
  --color-accent-warm: #880015; /* 深紅の下地板（関係先リンク等では使用せず、
                                    会長あいさつカードのアクセントのみで使用する） */
}

/* --------------------------------------------------------------------------
   このページには右側固定ナビ（TOPページ内セクション移動用）が無いため、
   style.css 側で確保されている余白（body の padding-right）と
   フッターの相殺マージンを、このページ内でのみ解除する（02・03と同じ対応）
   ※ style.css 自体は変更しない
   -------------------------------------------------------------------------- */
body {
  padding-right: 0;
}
.site-footer {
  margin-right: 0;
  padding-right: clamp(24px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   ①+②ファーストビュー
   ・セクション自体の背景は白（.section の既定）のまま使用し、
     .section--cream は付与しない
   ・ベージュは ::before による固定高さの背景レイヤーとして重ねる
   ・高さの目安：ヘッダー分の余白＋見出し＋カード上部が一つの構図として
     見える程度（要調整）
   -------------------------------------------------------------------------- */
.president-intro {
  position: relative;
  padding-bottom: clamp(64px, 8vw, 110px);
}
.president-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(552px, 58vw, 696px); /* ベージュ背景の高さ（460/48vw/580pxから約20%拡大） */
  background-color: #F6F1E8; /* 下層ページ共通のベージュ調整に合わせる（.section--cream と同じ色） */
  z-index: 0;
}

/* 見出し・カード・写真は、いずれも ::before より手前（z-index:1）に重ねる */
.president-intro .section__container--split {
  position: relative;
  z-index: 1;
  grid-template-rows: auto auto;
  row-gap: 0;
}

/* --------------------------------------------------------------------------
   PC版のみ：02・03より両サイドの余白を少し狭く取り、その分をカード幅の
   拡大に充てる（左カラムも少し狭め、カラム間の余白も少し詰める）
   -------------------------------------------------------------------------- */
/* 02・03の下層ページと同じ余白（.section__container / .section__container--split の
   既定値）に統一するため、04独自のPC用余白上書きは行わない */

.president-intro__heading {
  grid-column: 1;
  grid-row: 1;
}

/* --------------------------------------------------------------------------
   会長あいさつカード：02の開催予定カード（.event-card--accent）と
   同じ視覚言語（白背景・細い枠線・角丸・大きな影は使わない）
   ・右カラムいっぱいの幅を使う（02/03と同じ考え方。個別のmax-widthは設けない）
   ・grid-row を 1/3 にすることで縦に長く、下のベージュ境界を越えて伸びる
   -------------------------------------------------------------------------- */
/* ラッパー：グリッド上の配置（02の .archive-card-wrap と同じ考え方）
   ・実際のグリッド配置（列・行・幅）はここに持たせる */
.president-greeting-card-wrap {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: start;
  width: 90%; /* あいさつ文カードの幅：グリッド枠に対して10%縮小 */
}

/* 深紅の下地板（02の .archive-card__backer と同じ仕組み）。
   02ではhover時のみカードが動いて右辺を覗かせるが、04ではホバーを条件とせず、
   常時オフセットした状態＝アクセントとして表示する */
.president-greeting-card__backer {
  position: absolute;
  inset: 0;
  background-color: var(--color-accent-warm);
  border-radius: var(--radius-card);
  z-index: 0;
}

.president-greeting-card {
  position: relative;
  z-index: 1;
  transform: translateX(-6px); /* 02のhover表現（カードが左へ6px）を常時適用し、
                                   右辺に深紅の下地板を覗かせる（静的なアクセント） */
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(32px, 5vw, 56px);
}

.president-greeting-card__body p {
  font-family: var(--font-sans);
  font-size: 16.2px; /* 本文18px の90% */
  font-weight: 400;
  line-height: 2.1;
  color: var(--color-text);
  margin: 0;
  /* max-width は設けない：カードの左右パディングにそのまま揃える
     （幅を制限すると、カードを広げた際に右側だけ余白が余って見えるため） */
}
.president-greeting-card__body p + p {
  margin-top: 1.4em;
}

/* 会長氏名：あいさつ文カードからは削除し、写真の下（キャプション）に配置する。
   本文と同じフォントを使用する */
.president-intro__photo-caption {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 16.2px; /* 本文と同じサイズ */
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-body);
  text-align: center; /* 写真幅に対して中央配置 */
  white-space: nowrap; /* 写真幅より文字が長いため折り返さない */
}

/* --------------------------------------------------------------------------
   会長写真：見出し・カードとは独立した要素
   ・左カラム、2行目に配置（見出しの下）
   ・margin-top で意図的に開始位置を下げ、カードより低い位置から現れ、
     ベージュ／白の境界をまたぐようにする（初期値・要調整）
   ・写真とカードの上端は揃えない
   ・写真の右側にだけ、見出し-カード間の余白（column-gap）とは独立した
     追加の余白（PHOTO_EXTRA_GAP）を持たせている。これにより、写真-カード間の
     余白だけを、見出し-カード間の余白と切り離して個別に調整できる
   -------------------------------------------------------------------------- */
.president-intro__photo {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  margin-top: 0; /* さらに上へ：見出しとほぼ同じ高さから開始 */
  /* 写真-カード間だけに追加する独立した余白（初期値・要調整） */
  padding-right: clamp(48px, 6vw, 96px);
}
.president-intro__photo-img {
  display: block;
  width: 140%; /* 表示サイズの拡大。transform:scaleではなく実幅を変えることで、
                  下に続くキャプションの位置が正しく後に続くようにする */
  height: auto;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   関係先・情報サイト リンク一覧
   ・会長あいさつセクションの下、背景はサイト共通のベージュ（.section--cream）
   ・「関連機関」「学術集会情報」「子育て情報」の3カテゴリを、独立したカードに
     せず、一つのベージュ背景の中で罫線・タイポグラフィによって整理する
   ・アクセントカラーは var(--color-accent)（TOPページ「私たちについて」の
     詳しく見るリンクと同じ色）。02の var(--color-accent-warm) は使用しない
   -------------------------------------------------------------------------- */
.president-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(48px, 6vw, 96px);
}

/* 「小児関連機関」「学術集会情報」を統合したカテゴリー：
   見出しは1つにまとめるが、下のリストは元の2列構成のまま独立して並べる
   （グリッド上は3列のうち2列分を占有し、内部をさらに2列に分割する） */
.president-links__category--merged {
  grid-column: span 2;
}
.president-links__merged-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(48px, 6vw, 96px);
}

.president-links__category-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.president-links__list {
  display: flex;
  flex-direction: column;
}
.president-links__list li {
  border-bottom: 1px solid var(--color-border);
}
.president-links__list li:last-child {
  border-bottom: none;
}

.president-links__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  transition: color 0.2s ease;
}
.president-links__link:hover,
.president-links__link:focus-visible {
  color: var(--color-accent);
}
.president-links__link-icon {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.president-links__link:hover .president-links__link-icon,
.president-links__link:focus-visible .president-links__link-icon {
  transform: translateX(3px);
  color: var(--color-accent);
}

/* 学術集会情報：現時点でリンクが無いための「準備中」表示。
   li 自体は他カテゴリの li と同じ罫線・余白を持たせ、構造の一貫性を保つ */
.president-links__placeholder {
  padding: 14px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .president-links__link,
  .president-links__link-icon {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ：スマートフォン（〜767px）
   ・会長あいさつファーストビュー：PC用に組んだ grid-column / grid-row の
     個別指定（見出し＝1列目1行目、写真＝1列目2行目、カード＝2列目1〜2行目）が
     モバイルでもそのまま生きており、1カラム化しても「2列目」が暗黙的に
     生成されてしまい、カードだけ右側へ張り出す形で崩れていた。
   ・モバイルでは全て1カラムに揃え、DOM順（見出し→あいさつ文カード→写真→氏名）で
     自然に縦積みにする（figure/figcaptionの標準順のまま、並び替えは行わない）。
   ・あいさつ文カードと写真の間は、他の行間（40px）より少し広めの約50pxにする。
   ・PC用のCSS（このメディアクエリの外側の指定）は一切変更していない。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* PC用に高さを固定していたベージュ背景（::before）は、縦積みになった
     モバイルのコンテンツ量に対して短すぎ、あいさつ文の途中から先（氏名・写真含む）が
     白背景になってしまっていた。モバイルでは固定高さのオーバーレイをやめ、
     セクション自体の背景色をベージュにして、コンテンツの高さに自然に追従させる。 */
  .president-intro::before {
    display: none;
  }
  .president-intro {
    background-color: #F6F1E8;
  }

  .president-intro .section__container--split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 40px;
  }
  .president-intro__heading,
  .president-greeting-card-wrap,
  .president-intro__photo {
    grid-column: 1;
    grid-row: auto;
  }
  .president-greeting-card-wrap {
    width: 100%;
  }
  .president-greeting-card {
    transform: none; /* PC用の常時オフセット表現は、幅いっぱいに広がるモバイルでは不要 */
  }
  .president-intro__photo {
    /* 「写真→氏名」の通常順（HTML標準のfigure/figcaption順）に戻すため、
       column-reverseは使わずdisplay:blockのままにする */
    margin-top: 10px; /* 上のグリッドrow-gap(40px)と合わせて、カード-写真間を約50pxにする */
    padding-right: 0; /* PC版はカードとの間隔調整用。モバイルでは不要 */
  }
  .president-intro__photo-img {
    width: 100%; /* PC用の140%（意図的なはみ出し表示）はモバイルでは幅超過になるため戻す */
  }
  .president-intro__photo-caption {
    margin-top: 16px; /* 写真の下、氏名との間の余白 */
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ：スマートフォン（〜767px）
   ・このセクションのみ、自然な縦並びに対応する
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .president-links__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .president-links__category--merged {
    grid-column: auto;
  }
  .president-links__merged-columns {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ：スマートフォン（〜767px）※ファーストビューは今回未調整
   （PC確定後に対応。関係先リンク一覧セクションのみ上のブロックで対応済み）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .subpage-header,
  .subpage-intro {
    padding-top: 140px;
  }
}