@use "variables" as *;

// ===========================================================================
// About page (東西薬局とは, page-about.php). Body is hand-coded in the classic
// editor with utilities (spacing on a 60 base, fz/fw). Only the page reading
// rhythm and the 猪越英明 profile card (固有) live here.
// ===========================================================================
.page-about {
	// generous reading rhythm (design: 16px / line-height 32)
	p,
	li {
		line-height: 2;
	}
}

// --- 猪越 英明 profile card (unique) ---------------------------------------
.about-doctor {
	position: relative;
	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;
		gap: rem(24);
		padding: rem(24);
	}
}

.about-doctor__photo {
	flex-shrink: 0;
	width: rem(203);
	aspect-ratio: 203 / 300;
	background: #d9d9d9 url("../img/pages/about/ikoshi.webp") no-repeat center / cover;
	border-radius: rem(10);

	@include sp {
		width: rem(180);
		align-self: center;
	}
}

.about-doctor__body {
	flex: 1;
	min-width: 0;
	padding-top: rem(4); // align the name with the absolutely-placed button

	@include sp {
		display: flex; // lets the button drop to the bottom, centered
		flex-direction: column;
		padding-top: 0;
	}
}

// schedule button (reuses .pill-btn); pinned top-right on PC,
// SP: pushed to the bottom-centre of the card
.about-doctor__btn {
	position: absolute;
	top: rem(40);
	right: rem(40);

	@include sp {
		position: static;
		order: 1; // after name + credentials
		align-self: center;
		margin-top: rem(24);
	}
}

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

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

.about-doctor__name-ruby {
	font-size: rem(14);
}

.about-doctor__credentials {
	margin-top: rem(20);

	li {
		font-size: rem(16);
		color: $color-text;
	}
}