@use "variables" as *;

// ===========================================================================
// 症状別 term-list page (archive-symptoms.php). Reuses the TOP .symptom-btn
// component (white card, green border, photo thumb left, green circle arrow)
// but in a fixed 2-column grid with larger 147²-square thumbs (Figma 492×167).
// Content column = --narrow (1024, 208 inset @1440).
// ===========================================================================
.symptom-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: rem(40);

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(20);
	}
}

// Override the TOP sizing for the bigger archive cards.
.symptom-grid {
	.symptom-btn {
		height: rem(167);
		padding-right: rem(30);
		gap: rem(20);

		@include sp {
			height: rem(120);
			padding-right: rem(20);
		}
	}

	.symptom-btn__thumb {
		width: rem(147);
		margin: rem(10);
		border-radius: rem(10);

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

	.symptom-btn__label {
		font-size: rem(20);

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

// ===========================================================================
// 症状別 term archive (taxonomy-symptom_cat.php): .sec-head term heading +
// 2-column post cards (thumb / excerpt / 詳細) + a pill nav to other terms.
// ===========================================================================
.symptom-posts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: rem(40);

	@include sp {
		grid-template-columns: 1fr;
	}
}

.symptom-post {
	border-bottom: 1px dashed $color-rule;

	// top rule on the first row only (both columns on PC).
	&:nth-child(-n + 2) {
		border-top: 1px dashed $color-rule;
	}

	@include sp {
		&:nth-child(2) {
			border-top: 0;
		}
	}
}

.symptom-post__link {
	display: flex;
	gap: rem(20);
	padding-block: rem(30);
	color: $color-text;

	&:hover {
		text-decoration: none;

		.symptom-post__btn {
			opacity: 0.85;
		}
	}

	@include sp {
		gap: rem(16);
		padding-block: rem(20);
	}
}

.symptom-post__thumb {
	flex: 0 1 rem(200);
	min-width: 0;
	overflow: hidden;
	border-radius: rem(10);

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

	@include tab {
		flex-basis: rem(160);
	}

	@include sp {
		flex-basis: rem(120);
	}
}

.symptom-post__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.symptom-post__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: rem(15);
	line-height: 1.75;
}

.symptom-post__btn {
	align-self: flex-end;
	margin-top: auto;

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

.symptom-posts__empty {
	padding-block: rem(40);
	text-align: center;
}

// term pill nav (other terms) — green outline pills, fill green on hover.
.symptom-nav {
	display: flex;
	flex-wrap: wrap;
	gap: rem(20) rem(16);

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

.symptom-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: rem(130);
	height: rem(40);
	padding: 0 rem(16);
	border: 1px solid $color-green;
	border-radius: $radius-pill;
	font-size: rem(14);
	font-weight: 500;
	color: $color-green;
	transition: background-color 0.3s, color 0.3s;

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

	@include sp {
		min-width: 0;
		padding: 0 rem(10);
	}
}