/* ==========================================================================
   TEYLL — よくある質問（page-teyll-faq.php。Figma 06 TEYLL の 1343:621・SP 1389:5905）
   - PC：左 216 に分類の切り替え（sticky・上 128）、右 960 に分類ごとの質問（分類の間 120）。分類の見出しの右に説明（幅 560）
     切り替えの1つは高さ 56 の白いカプセル。いま見ている分類は Ring の輪 2px（aria-current。assets/js/pages/teyll-faq.js）
   - SP：見出しのすぐ下に 2×2 のリンク（固定しない・輪は出さない）。分類ごとに 上 64・下 48、見出し → 16 → 説明 → 32 → 質問（間 12）
   質問は c-teyll-faq-item（component-faq.css）
   ========================================================================== */
.p-teyll-faq {
	padding-block: 120px 80px;
}

.p-teyll-faq__inner {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

/* ---------- 分類の切り替え ---------- */
.p-teyll-faq__nav {
	position: sticky;
	top: 128px; /* 浮いたヘッダーの下 */
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-teyll-faq__nav-title {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
}

.p-teyll-faq__nav-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-teyll-faq__nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 24px;
	border: 2px solid transparent;
	border-radius: var(--radius-full);
	background: var(--teyll-bg-canvas) padding-box;
	color: var(--teyll-text-primary);
	text-decoration: none;
	transition: background 0.2s ease;
}

.p-teyll-faq__nav-item.is-current,
.p-teyll-faq__nav-item:hover {
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		var(--teyll-gradient-ring) border-box;
}

.p-teyll-faq__nav-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--teyll-accent-green);
}

.p-teyll-faq__nav-dot--purple {
	background: var(--teyll-accent-purple);
}

.p-teyll-faq__nav-dot--sky {
	background: var(--teyll-accent-sky);
}

.p-teyll-faq__nav-dot--yellow {
	background: var(--teyll-accent-yellow);
}

.p-teyll-faq__nav-label {
	flex: 1;
	min-width: 0;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

.p-teyll-faq__nav-count {
	flex: none;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ---------- 分類ごとの質問 ---------- */
.p-teyll-faq__list {
	display: flex;
	flex-direction: column;
	gap: 120px;
	min-width: 0;
}

.p-teyll-faq__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	column-gap: 40px;
	align-items: start;
	margin-bottom: 64px;
}

.p-teyll-faq__intro {
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* 狭い PC：説明の文の列を半分までにして、見出しの場所を残す */
@media (max-width: 1279px) {
	.p-teyll-faq__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, 50%));
	}
}

/* ---------- 狭い PC（1023px 以下）：分類の切り替えは上に横並び ---------- */
@media (max-width: 1023px) {
	.p-teyll-faq__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 64px;
	}

	.p-teyll-faq__nav {
		position: static;
	}

	.p-teyll-faq__nav-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-teyll-faq__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.p-teyll-faq {
		padding-block: 16px 0;
	}

	.p-teyll-faq__inner {
		gap: 0;
	}

	.p-teyll-faq__nav {
		gap: 12px;
	}

	.p-teyll-faq__nav-list {
		gap: 8px;
	}

	.p-teyll-faq__nav-item {
		gap: 8px;
		padding: 0 12px;
	}

	.p-teyll-faq__nav-label {
		white-space: nowrap;
	}

	.p-teyll-faq__nav-item.is-current {
		background: var(--teyll-bg-canvas) padding-box; /* SP は輪を出さない */
	}

	.p-teyll-faq__list {
		gap: 0;
	}

	.p-teyll-faq__group {
		padding-block: 64px 48px; /* ページ内リンクで移ったときの浮いたヘッダーの分は、html の scroll-padding-top（--header-height 88） */
	}

	.p-teyll-faq__head {
		row-gap: 16px;
		margin-bottom: 32px;
	}

	.p-teyll-faq .c-teyll-faq-list {
		gap: 12px;
	}
}