@use "variables" as *;

// ===========================================================================
// 症例 (case). Archive = the お客様の声 list look (dashed $color-rule rows, green
// title, 詳細 pill) with the green flower icon. Single = a fixed 原因/症状/治療
// stack: each block is a flower-icon heading over a dashed rule + wpautop body.
// Content column = --narrow (1024).
// ===========================================================================

// --- archive list ----------------------------------------------------------
.case-item {
	border-top: 1px dashed $color-rule;

	&:last-child {
		border-bottom: 1px dashed $color-rule;
	}
}

.case-item__link {
	display: flex;
	align-items: center;
	gap: rem(20);
	padding: rem(32) 0;
	transition: opacity 0.3s;

	&:hover {
		opacity: 0.7;
		text-decoration: none;
	}

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

.case-item__icon {
	flex-shrink: 0;
	display: block;
	width: rem(32);

	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.case-item__title {
	flex: 1;
	min-width: 0;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.6;
	color: $color-green;

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

.case-item__btn {
	flex-shrink: 0; // .pill-btn — green "詳細"
}

// keep the row fade uniform (don't let .pill-btn's own hover dim it extra)
.case-item__link:hover .case-item__btn {
	opacity: 1;
}

.case-empty {
	padding-block: rem(24);
	color: $color-text;
}

// --- single -----------------------------------------------------------------
.case-block {
	margin-top: rem(60);

	&:first-child {
		margin-top: 0;
	}

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

// flower-icon heading sitting over a dashed rule (title h1 + 原因/症状/治療 h2)
.case-block__heading {
	display: flex;
	align-items: center;
	gap: rem(20);
	padding-bottom: rem(24);
	border-bottom: 1px dashed $color-rule;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(24);
	line-height: 1.4;
	color: $color-green;

	&::before {
		content: "";
		flex-shrink: 0;
		width: rem(32);
		height: rem(31);
		background: url("../img/common/icon-case-mark.webp") center / contain no-repeat;
	}

	@include sp {
		gap: rem(12);
		padding-bottom: rem(16);
		font-size: rem(20);
	}
}

.case-block__body {
	margin-top: rem(40);

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

// dashed divider above the 戻る button
.case-article__foot {
	margin-top: rem(60);
	padding-top: rem(60);
	border-top: 1px dashed $color-rule;

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