@use "variables" as *;

// ===========================================================================
// Dictionary / 一覧 list component — shared by 生薬辞典 (page-syoyakudic.php) and
// 漢方薬・中成薬一覧 (page-kanpo.php). Both are an あいうえお index nav (anchor-jumps
// to each 行) + per-行 accordion list; each row toggles open to a pale detail
// box. The two pages differ only in the detail-box INNER layout:
//   - 生薬辞典 : image | single-column field list            (.dic-cols)
//   - 漢方     : [image | 説明] then 2-col [効能・用法 | 価格] (.dic-kanpo)
// The open/close mechanism mirrors the FAQ accordion (grid-template-rows
// 0fr → 1fr, .is-open toggled by main.js on .dic-item__head / .dic-item).
// ===========================================================================

// --- あいうえお index nav ---------------------------------------------------
.dic-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: rem(10);
	margin-bottom: rem(60);

	@include sp {
		gap: rem(8);
		margin-bottom: rem(40);
	}
}

.dic-nav__btn {
	@include hover-invert($hover: "&:not(.is-disabled):hover", $duration: 0.25s);
	display: flex;
	align-items: center;
	justify-content: center;
	width: rem(40);
	height: rem(40);
	border: 1px solid $color-green;
	border-radius: rem(8);
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1;

	// rows with no entries (e.g. わ行) — greyed out, not a link.
	&.is-disabled {
		border-color: #cfcfcf;
		background: #e4e4e4;
		color: #b2b2b2;
		cursor: default;
	}
}

// --- per-行 group -----------------------------------------------------------
.dic-group {
	scroll-margin-top: $header-h-pc; // anchor lands clear of the fixed header

	@include sp {
		scroll-margin-top: $header-h-sp;
	}

	& + & {
		margin-top: rem(60);

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

.dic-group__head {
	margin-bottom: rem(10);
	padding-bottom: rem(20);
	border-bottom: 1px solid $color-green;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(20);
	line-height: 1.4;
	color: $color-green;
}

// --- accordion list ---------------------------------------------------------
.dic-item__head {
	display: flex;
	align-items: center;
	gap: rem(20);
	width: 100%;
	padding: rem(24) 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;

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

.dic-item__name {
	flex: 1;
	min-width: 0;
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(16);
	line-height: 1.6;
	color: $color-green;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

// +/- toggle (CSS shapes, no glyphs). Open state drops the vertical bar → "−".
.dic-item__toggle {
	position: relative;
	flex-shrink: 0;
	width: rem(20);
	height: rem(20);

	&::before,
	&::after {
		content: "";
		position: absolute;
		background: $color-green;
		transition: opacity 0.3s, transform 0.3s;
	}

	&::before {
		left: 0;
		top: 50%;
		width: 100%;
		height: rem(3);
		transform: translateY(-50%);
	}

	&::after {
		left: 50%;
		top: 0;
		width: rem(3);
		height: 100%;
		transform: translateX(-50%);
	}
}

.dic-item.is-open .dic-item__toggle::after {
	opacity: 0; // becomes a minus
}

// collapsible body (grid 0fr → 1fr, like the FAQ accordion)
.dic-item__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.dic-item.is-open .dic-item__body {
	grid-template-rows: 1fr;
}

.dic-item__body-inner {
	overflow: hidden; // clips the detail box while collapsed
}

// --- detail box (shared shell: pale tint, padding, radius) ------------------
.dic-item__detail {
	margin-bottom: rem(24);
	padding: rem(24) rem(30);
	border-radius: $radius-sm;
	background: #fdfeef; // pale tint from the design

	@include sp {
		padding: rem(20);
	}
}

// shared photo
.dic-figure {
	flex-shrink: 0;
	width: rem(300);

	@include sp {
		width: 100%;
		max-width: rem(280);
		margin-inline: auto;
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: rem(8);
		object-fit: cover;
	}
}

// shared <dl> field list (＜label＞ + value)
.dic-data {
	margin: 0;
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;

	.dic-row + .dic-row {
		margin-top: rem(16);

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

.dic-label {
	font-weight: 400;
	color: $color-text;

	&::before {
		content: "＜";
	}

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

.dic-value {
	margin: rem(2) 0 0; // reset the browser default <dd> indent
}

// --- 生薬辞典 layout: image | single-column field list ----------------------
.dic-cols {
	display: flex;
	gap: rem(30);

	@include sp {
		flex-direction: column;
		gap: rem(20);
	}

	.dic-data {
		flex: 1;
		min-width: 0;
	}
}

// --- 漢方 layout: [image | 説明] then 2-col [効能・用法 | 価格] --------------
.dic-kanpo__top {
	display: flex;
	gap: rem(30);

	@include sp {
		flex-direction: column;
		gap: rem(20);
	}
}

.dic-kanpo__lead {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: $font-sans;
	font-size: rem(16);
	line-height: 1.75;
	color: $color-text;
}

.dic-kanpo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: rem(20) rem(40);
	margin-top: rem(24);

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

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