@use "variables" as *;

// ===========================================================================
// 舌診 (page-tongue.php, slug `tongue`) — 健康チェック / Check の一機能。
// 舌診(ベロメーター)の解説(点線区切りの読み物)＋ 8つの舌タイプ紹介
// (写真 | 説明 + 詳細ボタン の 2カラムリスト)。体質チェック(page-chart.php)
// と同じバンド配下で、ヒーローは chart-hero と同じ 1024 x 350。
// ===========================================================================

$tongue-fig-bg: #fff6f0; // タイプ写真の背景(うすいピンク) — Figma 指定

// --- ヒーロー写真 (1024 x 350) --------------------------------------------
.tongue-hero {
	margin: 0;
	aspect-ratio: 1024 / 350;
	border-radius: rem(20);
	overflow: hidden;

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

	@include sp {
		aspect-ratio: 343 / 180;
	}
}

// ===========================================================================
// 解説ブロック — 緑の見出し + 本文、ブロック間と末尾を点線で区切る
// ===========================================================================
.tongue-about {
	margin-top: rem(60);
	border-bottom: 1px dashed $color-rule; // 末尾(タイプ一覧との境)の点線

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

.tongue-block {
	padding-block: rem(40);

	& + & {
		border-top: 1px dashed $color-rule; // ブロック間の点線
	}

	@include sp {
		padding-block: rem(30);
	}
}

.tongue-block__title {
	margin-bottom: rem(16);
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.4;
	color: $color-green;

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

.tongue-block__text {
	font-size: rem(16);
	line-height: 2; // 32 / 16
	// 本文は改行(br-pc)区切りの1段落。文間に余白は入れない(Figma準拠)。
}

// ===========================================================================
// 舌タイプ一覧 — 写真 | 説明 + 詳細ボタン の 2カラム
// ===========================================================================
.tongue-types {
	margin-top: rem(60);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: rem(60) rem(40);
	list-style: none;
	padding: 0;

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

.tongue-type {
	display: flex;
	align-items: stretch; // body を写真の高さまで伸ばし、詳細ボタンを下端に
	gap: rem(24);

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

// 写真ボックス(うすいピンク・角丸) — 幅はカラム幅に対して可変(rem(236) 上限)
.tongue-type__fig {
	flex-shrink: 0;
	align-self: flex-start; // 縦は写真自身のアス比を保持(body のストレッチに伸ばされない)
	width: clamp(rem(120), 40%, rem(236));
	aspect-ratio: 236 / 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: $tongue-fig-bg;
	border-radius: rem(20);

	img {
		width: 85%;
		height: auto;
	}

	@include sp {
		border-radius: rem(12);
	}
}

.tongue-type__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column; // 詳細ボタンを margin-top:auto で下端へ
}

.tongue-type__name {
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	line-height: 1.4;
	color: $color-green;

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

.tongue-type__desc {
	margin-top: rem(12);
	margin-bottom: rem(20); // ボタンが下端に来ても本文との最低限の余白を確保
	font-size: rem(16);
	line-height: 2; // 32 / 16

	@include sp {
		margin-bottom: rem(16);
		font-size: rem(14);
		line-height: 1.85;
	}
}

// 詳細ボタン群 — body 下端に固定(写真の下端と揃う)。複数(痰湿)は折り返し。
.tongue-type__btns {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: rem(12);
}

// ボタン右端に矢印(白い右向き三角)を付与
.tongue-type__btn::after {
	content: "";
	margin-left: rem(8);
	border-style: solid;
	border-width: rem(4) 0 rem(4) rem(6);
	border-color: transparent transparent transparent currentColor;
	@include tri-center-x; // 三角の視覚的中央寄せ
}