@use "variables" as *;

// ===========================================================================
// スタッフ詳細 (single-staff.php): profile card (photo + 名前 + ふりがな + 肩書き)
// → 出勤カレンダー (FullCalendar) → スケジュール注釈 → 漢方相談予約 ボタン → 戻る.
// The profile card mirrors .about-doctor (same 猪越先生 card language).
// ===========================================================================

// --- Profile card ----------------------------------------------------------
.staff-profile {
	display: flex;
	align-items: flex-start;
	gap: rem(40);
	padding: rem(40);
	background: $color-white;
	border: 2px solid $color-green;
	border-radius: rem(30);

	@include sp {
		flex-direction: column;
		align-items: center;
		gap: rem(24);
		padding: rem(24);
	}
}

.staff-profile__photo {
	flex-shrink: 0;
	width: rem(203);
	margin: 0;
	border-radius: rem(10);
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		aspect-ratio: 203 / 300;
		object-fit: cover;
	}

	@include sp {
		width: rem(180);
	}
}

.staff-profile__body {
	flex: 1;
	min-width: 0;
}

.staff-profile__name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: rem(6);
	font-family: $font-serif;
	font-weight: 700;
	color: $color-green;
}

.staff-profile__name-ja {
	font-size: rem(24);
	line-height: 1.2;
}

.staff-profile__name-ruby {
	font-size: rem(14);
}

.staff-profile__credentials {
	margin-top: rem(20);
	font-size: rem(16);
	line-height: 1.9;
	color: $color-text;

	@include sp {
		font-size: rem(14);
	}
}

// --- Calendar --------------------------------------------------------------
.staff-calendar {
	margin-top: rem(80);

	@include sp {
		margin-top: rem(40);
	}

	// Brand the FullCalendar chrome (default build is blue).
	.fc {
		.fc-button-primary {
			background-color: $color-green;
			border-color: $color-green;

			&:not(:disabled):hover,
			&:not(:disabled):active,
			&:not(:disabled).fc-button-active {
				background-color: #005a2c; // green, slightly darker for active/hover
				border-color: #005a2c;
			}

			&:focus {
				box-shadow: none;
			}
		}

		.fc-toolbar-title {
			font-family: $font-serif;
			font-size: rem(22);
			color: $color-green;
		}

		.fc-col-header-cell-cushion,
		.fc-daygrid-day-number {
			color: $color-text;
			text-decoration: none;
		}

		// Sun / holiday accent reads via event colour; keep grid neutral.
		.fc-day-today {
			background: rgba($color-green, 0.06);
		}

		// 出勤イベントの Google タイトルはスタッフ名なので隠し、店舗名ラベルに
		// 置き換える（定休日など holiday は実タイトルのまま）。色・大きさは既定。
		.fc-event.kichi,
		.fc-event.hachi,
		.fc-event.chofu {
			.fc-event-title {
				display: none;
			}

			.fc-event-title-container::before {
				display: block;
				color: $color-white;
				font-size: rem(14);
				line-height: 1.3;
				padding-inline: rem(4);
			}
		}

		.fc-event.kichi .fc-event-title-container::before {
			content: "吉祥寺";
		}
		.fc-event.hachi .fc-event-title-container::before {
			content: "八王子";
		}
		.fc-event.chofu .fc-event-title-container::before {
			content: "調布";
		}

		// SP: セル幅が狭いのでカレンダー内の文字を一回り小さく
		// （定休日などのイベントタイトル・店舗ラベル・日付・曜日見出し）。
		@include sp {
			.fc-event-title,
			.fc-event.kichi .fc-event-title-container::before,
			.fc-event.hachi .fc-event-title-container::before,
			.fc-event.chofu .fc-event-title-container::before {
				font-size: rem(10);
				line-height: 1.2;
			}

			.fc-col-header-cell-cushion,
			.fc-daygrid-day-number {
				font-size: rem(11);
			}

			.fc-toolbar-title {
				font-size: rem(18);
			}
		}
	}
}

// --- Schedule note (legend + 注意書き) -------------------------------------
.staff-note {
	margin-top: rem(40);
	font-size: rem(15);
	line-height: 1.9;
	color: $color-text;

	p {
		margin: 0;
	}

	p + p {
		margin-top: rem(12);
	}

	@include sp {
		margin-top: rem(30);
		font-size: rem(13);
	}
}

// --- 漢方相談予約 button ---------------------------------------------------
.staff-reserve-wrap {
	margin-top: rem(50);
	text-align: center;

	@include sp {
		margin-top: rem(40);
	}
}

.staff-reserve {
	@include hover-invert;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: rem(387);
	padding: rem(15) rem(30);
	border: 1px solid $color-green;
	border-radius: $radius-pill;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(18);

	@include sp {
		min-width: 0;
		width: 100%;
		font-size: rem(16);
	}
}

.staff-reserve__arrow {
	@include circle-arrow($bg: var(--fg), $fg: var(--bg));
	position: absolute;
	right: rem(30);
	top: 50%;
	transform: translateY(-50%);
}