/* ===========================================================
   Object / Project / Supervisor Box（P-13）
   pattern-supervisor: 監修医プロフィール（疾患ページ末尾）。
   ・背景: yellow-50、角丸16px、padding PC24 / SP上下24左右16
   ・写真: 丸形 PC100 / SP80
   ・名前ライン: 「監修医師：」黒 + 名前 navy-500（PCのみ20px）
   ・「監修医の情報を見る」: テキストリンク + icon-arrow-right-pink.svg

   重要: 本テーマは theme.json を持たない classic テーマのため、
   WP コアの wp_restore_group_inner_container フィルタ
   （wp-includes/block-supports/layout.php:1093-1150）が
   core/group ブロックの中身を <div class="wp-block-group__inner-container">
   で包む。さらに is-layout-* class は外側からこの inner-container に移される。

   実出力 DOM 構造:
     <div class="wp-block-group p-supervisor">
       <div class="wp-block-group__inner-container is-layout-flow ...">
         <div class="wp-block-group p-supervisor__head">
           <div class="wp-block-group__inner-container is-layout-flow ...">
             <figure class="wp-block-image p-supervisor__avatar">…</figure>
             <p class="p-supervisor__name-line">…</p>
           </div>
         </div>
         <p class="p-supervisor__bio">…</p>
         <p class="p-supervisor__link-wrap">…</p>
       </div>
     </div>

   そのため CSS では「>」（直下子結合子）を使わず、必ず子孫セレクタで書く。
   __inner-container を意識せずに貫通してマッチさせる。

   レイアウト方針:
     PC（min-width:768px）:
       .p-supervisor__head を Flex 横並び（align-items: center）。
       写真 100px ｜ 名前。bio / link は __head の外で全幅で下段。
     SP:
       .p-supervisor__head は display 未指定 → block flow になり、
       中の図と段落が縦積み。後続の bio / link も縦積みで続く。
   =========================================================== */

/* ===========================================================
   外側コンテナ
   =========================================================== */

.p-supervisor.wp-block-group {
	background-color: var(--color-yellow-50);
	border-radius: var(--radius-lg);
	padding: 24px 16px;
	/*
	 * 前ブロックとの区切り感を確保するため上マージンを広めに取る。
	 * 既存の縦リズム（layout/_page.css の .l-page__inner > * + *）の
	 * 20/24px では詰まりすぎたため、セクション境界相当の余白に上書き。
	 * セレクタは .p-supervisor.wp-block-group = 0,2,0 で _page.css の
	 * 0,1,0 を確実に上書き（!important 不使用）。
	 * 既存スケール: subsection 40/48 ＜ ここ 48/64 ＜ section 56/80。
	 */
	margin-top: 48px;
}

@media (min-width: 768px) {
	.p-supervisor.wp-block-group {
		padding: 24px;
		margin-top: 64px;
	}
}

/* ===========================================================
   上段 __head（写真＋名前）
   ・SP: display 指定なし（block flow）
   ・PC: 子孫セレクタで display: flex を当てる（> は使わない）
   ・flex-direction / flex-wrap / justify-content を明示

   重要: classic テーマ（theme.json なし）では WP の
   wp_restore_group_inner_container フィルタにより、
   __head の中にさらに <div class="wp-block-group__inner-container">
   が挟まる。実 DOM はこうなる:

     <div class="p-supervisor__head">
       <div class="wp-block-group__inner-container">  ← flex の実際の親はここ
         <figure class="p-supervisor__avatar">
         <p class="p-supervisor__name-line">
       </div>
     </div>

   そのため __head に display:flex を当てるだけだと「flex の子は
   __inner-container 1個」となり、写真と名前は __inner-container の中で
   block flow のまま縦積みになって横並びにならない。
   解決: __inner-container 自体を flex コンテナにする。

   なお、エディタ canvas の React レンダリングでは
   __inner-container が挟まらないケースもあるため、__head 側にも
   display:flex を残しておく（保険）。__head 直下が figure と p の場合は
   __head の flex がそのまま効く。
   =========================================================== */

@media (min-width: 768px) {
	/* 保険: __inner-container が挟まらない環境（エディタの一部レンダリング等） */
	.p-supervisor .p-supervisor__head {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		column-gap: 24px;
	}

	/* 本命: フロント出力では __head の中にさらに __inner-container が挟まる。
	   実際に写真と名前を子に持つコンテナを flex 化する。 */
	.p-supervisor .p-supervisor__head .wp-block-group__inner-container {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		column-gap: 24px;
	}
}

/* ===========================================================
   アバター（丸形写真）
   ・PC では flex item として固定幅 100px
   ・WP が __inner-container 子要素に margin-block-start を当てて
     来た場合に備えて margin: 0 で打ち消す
   =========================================================== */

.p-supervisor .p-supervisor__avatar {
	margin: 0;
}

@media (min-width: 768px) {
	.p-supervisor .p-supervisor__head .p-supervisor__avatar {
		flex: 0 0 100px;
		margin: 0;
	}
}

.p-supervisor .p-supervisor__avatar img {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.p-supervisor .p-supervisor__avatar img {
		width: 100px;
		height: 100px;
	}
}

/* ===========================================================
   名前ライン
   SP: 写真の下に通常段落として積まれる（上12px）
   PC: __head 内 Flex の右側アイテム。avatar に対して上下中央
   =========================================================== */

.p-supervisor .p-supervisor__name-line {
	margin: 12px 0 0;
	color: var(--color-text);
	font-weight: 700;
	line-height: var(--lh-tight);
}

@media (min-width: 768px) {
	.p-supervisor .p-supervisor__head .p-supervisor__name-line {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
	}
}

.p-supervisor .p-supervisor__name {
	color: var(--color-navy-500);
}

@media (min-width: 768px) {
	.p-supervisor .p-supervisor__name {
		font-size: 20px;
	}
}

/* ===========================================================
   経歴文（__head の外、全幅）
   =========================================================== */

.p-supervisor .p-supervisor__bio {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: var(--lh-base);
}

@media (min-width: 768px) {
	.p-supervisor .p-supervisor__bio {
		margin-top: 16px;
		font-size: 15px;
	}
}

/* ===========================================================
   情報リンク（テキストリンク + ピンク右矢印アイコン）
   =========================================================== */

.p-supervisor .p-supervisor__link-wrap {
	margin: 12px 0 0;
}

.p-supervisor .p-supervisor__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-navy-500);
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.p-supervisor .p-supervisor__link::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url("../../../images/svg/icon-arrow-right-pink.svg") no-repeat center / contain;
}

@media (hover: hover) and (min-width: 768px) {
	.p-supervisor .p-supervisor__link:hover {
		color: var(--color-navy-600);
	}
}