@use "variables" as *;

// ===========================================================================
// はじめての方 (page-beginner.php). Body is hand-coded in the classic editor
// with utilities (60-base rhythm, fz/fw); only the page-specific pieces below
// get bespoke CSS: the big intro image, the in-page anchor nav, the flow steps.
// Grey placeholders stand in until real photos land in img/pages/beginner/.
// ===========================================================================
.page-beginner {
	p,
	li {
		line-height: 2; // design: 16 / 32
	}
}

// --- 漢方について: full-width intro image -----------------------------------
.beginner-kampo {
	display: block;
	width: 100%;
	aspect-ratio: 1024 / 350;
	object-fit: cover;
	border-radius: rem(20);
	background: #d9d9d9; // fallback while loading
}

// --- 相談の流れ: in-page anchor nav (4 pills jumping to the flow steps) -----
.flow-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: rem(20);

	@include sp {
		grid-template-columns: repeat(2, 1fr);
		gap: rem(12);
	}
}

.flow-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: rem(40);
	padding: rem(6) rem(40) rem(6) rem(20);
	background: $color-white;
	border: 1px solid $color-green;
	border-radius: $radius-lg; // 40 — pill
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1.3;
	color: $color-green;
	text-align: center;
	transition: background-color 0.3s, color 0.3s;

	&:hover {
		background: $color-green;
		color: $color-white;
		text-decoration: none;
	}

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

// green circle + white down-arrow (= "jump down to this step")
.flow-nav__arrow {
	position: absolute;
	top: 50%;
	right: rem(10);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: rem(20);
	height: rem(20);
	border-radius: 50%;
	background: $color-green;
	transition: background-color 0.3s;

	// downward triangle via clip-path; nudge down to optically centre ▼
	&::before {
		content: "";
		width: rem(8);
		height: rem(5);
		background: $color-white;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		transition: background-color 0.3s;
		@include tri-center-y;
	}
}

.flow-nav__link:hover .flow-nav__arrow {
	background: $color-white;

	&::before {
		background: $color-green;
	}
}

// --- 相談の流れ: flow steps <ol> (image | text, 2-col) ---------------------
.flow-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: rem(80); // vertical gap between steps

	@include sp {
		gap: rem(40);
	}
}

.flow-step {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: rem(40);
	align-items: start;
	scroll-margin-top: $header-h-pc; // anchor lands clear of the fixed header

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(20);
		scroll-margin-top: $header-h-sp;
	}
}

.flow-step__img {
	display: block;
	width: 100%;
	aspect-ratio: 492 / 300;
	object-fit: cover;
	border-radius: rem(20);
	background: #d9d9d9; // fallback while loading
}

// .flow-step__body — heading (utilities: ff-sans fw-bold tc-green fz-24) +
// paragraphs (fz-16). Inline arrow-link uses a clip-path triangle (no emoji).
.flow-step__link {
	display: inline-flex;
	align-items: center;
	gap: rem(8);
	font-weight: 700;
	color: $color-green;

	&:hover {
		text-decoration: underline;
	}
}

.flow-step__link-arrow {
	width: rem(7);
	height: rem(10);
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%); // right-pointing triangle
	@include tri-center-x; // optically centre ▶
}