@use "variables" as *;

// ===========================================================================
// 漢方健康食品 archive (archive-health_food.php). 3-col card grid; each card is
// an independent-height link: product photo (white box, faint green border) +
// green title row with a circle arrow + a dashed-bordered "おすすめポイント"
// list (ACF recommend_points). Content column = --narrow (1024). No taxonomy.
// ===========================================================================
.hfood-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: rem(80) rem(40); // design: 80 row / 40 column
	align-items: start; // cards size to their own content (no row stretch)

	@include tab {
		grid-template-columns: repeat(2, 1fr);
		gap: rem(60) rem(30);
	}

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

// whole card is one link; hover fades it (data-anim lives on .hfood-item)
.hfood-card {
	display: flex;
	flex-direction: column;
	transition: opacity 0.3s;

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

// product photo — contained on a white card with a faint green border
.hfood-card__img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 315 / 177;
	background: $color-white;
	border: 1px solid rgba($color-green, 0.2);
	border-radius: rem(10);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

// title + arrow row
.hfood-card__head {
	display: flex;
	align-items: center;
	gap: rem(12);
	margin-top: rem(20);
}

.hfood-card__title {
	flex: 1;
	min-width: 0;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.55;
	color: $color-green;
}

// optional よみがな (ACF reading) — smaller than the title, inline after it
.hfood-card__reading {
	margin-left: rem(4);
	font-size: rem(14);
	font-weight: 700;
}

// green circle + white right-triangle (CSS — no glyph)
.hfood-card__arrow {
	@include circle-arrow($bg: $color-green, $fg: $color-white);
}

// おすすめポイント — white box, dashed green border, green disc bullets
.hfood-card__points {
	margin-top: rem(16);
	padding: rem(20);
	background: $color-white;
	border: 1px dashed $color-green;
	border-radius: rem(10);

	li {
		position: relative;
		padding-left: rem(18);
		font-size: rem(16);
		line-height: 1.75; // 28px @16 — matches design
		color: $color-text;

		&::before {
			content: "";
			position: absolute;
			top: rem(14);
			left: 0;
			width: rem(8);
			height: rem(8);
			background: $color-green;
			border-radius: 50%;
			transform: translateY(-50%);
		}
	}
}

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

// ===========================================================================
// 漢方健康食品 single (single-health_food.php). All ACF custom fields: title +
// reading, hero (image | 見出し lead + 本文 body), 情報 spec table (info
// repeater), caption note, 戻る. Content column = --narrow (1024).
// ===========================================================================
.hfood-single__head {
	padding-bottom: rem(20);
	border-bottom: 1px dashed $color-rule; // design: dashed rule under the title
}

.hfood-single__title {
	font-family: $font-sans;
	font-weight: 600;
	font-size: rem(20);
	line-height: 1.8;
	color: $color-green;
}

.hfood-single__reading {
	margin-left: rem(4);
	font-size: rem(14);
}

// hero: product image | lead heading + body
.hfood-single__hero {
	display: grid;
	grid-template-columns: rem(492) 1fr;
	gap: rem(40);
	margin-top: rem(60);

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(24);
		margin-top: rem(40);
	}
}

.hfood-single__img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 492 / 277;
	background: $color-white;
	border: 1px solid rgba($color-green, 0.2);
	border-radius: rem(10);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.hfood-single__lead-title {
	margin-bottom: rem(16);
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(20);
	line-height: 1.6;
	color: $color-green;
}

.hfood-single__body {
	font-size: rem(16);
	line-height: 1.85;
	color: $color-text;

	p {
		margin-bottom: 1em;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

// 情報 spec table — the rounded perimeter is drawn by the wrapper's own border
// (outside the overflow:hidden clip, so it never gets cut at the corners); the
// cells only carry the *inner* divider lines, so nothing is clipped by the radius.
.hfood-spec-wrap {
	margin-top: rem(60);
	border: 1px solid #bbb;
	border-radius: rem(20);
	overflow: hidden;

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

.hfood-spec {
	width: 100%;
	border-collapse: collapse;

	th,
	td {
		padding: rem(20) rem(30);
		border-bottom: 1px solid #bbb; // inner row divider only
		font-size: rem(16);
		line-height: 1.75;
		text-align: left;
		vertical-align: middle;

		@include sp {
			display: block;
			width: 100%;
			padding: rem(14) rem(16);
		}
	}

	th {
		width: 33%;
		border-right: 1px solid #bbb; // inner column divider only
		font-weight: 700;
		color: $color-text;
		background: $color-bg-tint;
		white-space: nowrap;

		@include sp {
			border-right: 0;
			white-space: normal;
		}
	}

	td {
		background: $color-white;
		color: $color-text;
	}

	// drop the divider under the very last row (wrapper draws the bottom edge)
	tr:last-child th,
	tr:last-child td {
		border-bottom: 0;
	}

	// SP stacks label above content → keep the label/content divider on the last row
	@include sp {
		tr:last-child th {
			border-bottom: 1px solid #bbb;
		}
	}
}

// caption note under the table
.hfood-single__caption {
	margin-top: rem(30);
	font-size: rem(14);
	line-height: 1.85;
	color: $color-text;

	p {
		margin-bottom: 0.4em;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

// 戻る — divider line then the green pill (design: line above the button)
.hfood-single__foot {
	margin-top: rem(40);
	padding-top: rem(40);
	border-top: 1px dashed $color-rule; // design: dashed rule above the 戻る button
}