@use "variables" as *;

// ===========================================================================
// お客様の声 archive (archive-voice.php). FAQ-list look (dashed $color-rule rules,
// 18px green title) minus the accordion: each row links to its single via the
// title + a 詳細 pill button. Content column = --narrow (1024).
// ===========================================================================
.voice-item {
	border-top: 1px dashed $color-rule;

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

// whole row is one link; hover fades the entire row
.voice-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);
	}
}

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

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

.voice-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);
	}
}

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

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

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

// ===========================================================================
// Single お客様の声 (single-voice.php). ACF meta (お客様 / 担当) + 担当者コメント
// box, around the block-editor body (.entry-content). Reuses .article shell.
// ===========================================================================
.voice-meta {
	margin-bottom: rem(40);
}

.voice-meta__row {
	font-family: $font-sans;
	font-size: rem(14);
	line-height: 2;
	color: $color-text;
}

.voice-meta__label {
	display: inline-block;
	width: rem(70); // align the colon / values

	&::after {
		content: "：";
	}
}

// 担当者からのコメント — white card, 2px green border (design)
.voice-comment {
	margin-top: rem(60);
	padding: rem(40);
	background: $color-white;
	border: 2px solid $color-green;
	border-radius: rem(30);

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

.voice-comment__title {
	margin-bottom: rem(20);
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.6;
	color: $color-green;
}