/*
 * shuiyun-core 的元件樣式。
 * 顏色一律走 CSS 變數並帶 fallback，主題只要定義 --shuiyun-* 就能接管外觀，
 * 不定義也能獨立看。
 */

.shuiyun-series,
.shuiyun-en {
	--_accent: var(--shuiyun-accent, #8a6a3d);
	--_surface: var(--shuiyun-surface, #f6f4f0);
	--_border: var(--shuiyun-border, #e2ddd4);
	--_text: var(--shuiyun-text, #23201c);
	--_muted: var(--shuiyun-muted, #6d665c);
	font-size: 0.95rem;
	line-height: 1.8;
}

/* ---------- 系列導航 ---------- */

.shuiyun-series {
	margin: 2.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--_surface);
	border: 1px solid var(--_border);
	border-radius: 10px;
}

.shuiyun-series__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	margin-bottom: 0.9rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--_border);
}

.shuiyun-series__label {
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	padding: 0.15em 0.6em;
	color: #fff;
	background: var(--_accent);
	border-radius: 3px;
}

.shuiyun-series__name {
	font-weight: 600;
	color: var(--_text);
	text-decoration: none;
}

.shuiyun-series__name:hover { text-decoration: underline; }

.shuiyun-series__count {
	margin-inline-start: auto;
	color: var(--_muted);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.shuiyun-series__list {
	margin: 0;
	padding-inline-start: 1.6rem;
	counter-reset: none;
}

.shuiyun-series__item { margin: 0.35rem 0; }
.shuiyun-series__item a { color: var(--_text); text-decoration: none; border-bottom: 1px solid transparent; }
.shuiyun-series__item a:hover { border-bottom-color: var(--_accent); }

.shuiyun-series__item.is-current {
	font-weight: 600;
	color: var(--_accent);
}

.shuiyun-series__item.is-current::marker { color: var(--_accent); }

/* ---------- 英文版連結 ---------- */
/* 放在文章開頭。目標讀者看不懂中文，所以文字全用英文、整塊可點， */
/* 而且要一眼看得出是個連結。 */

.shuiyun-en {
	margin: 0 0 1.75rem;
}

.shuiyun-en__link {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--_border);
	border-inline-start: 3px solid var(--_accent);
	border-radius: 6px;
	text-decoration: none;
	color: var(--_text);
	transition: border-color .15s, background-color .15s;
}

.shuiyun-en__link:hover,
.shuiyun-en__link:focus-visible {
	border-color: var(--_accent);
	background: color-mix(in srgb, var(--_accent) 6%, transparent);
	text-decoration: none;
}

.shuiyun-en__flag {
	flex: none;
	font: 600 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
	letter-spacing: 0.1em;
	padding: 0.45em 0.55em;
	color: var(--_accent);
	border: 1px solid currentColor;
	border-radius: 3px;
}

.shuiyun-en__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.shuiyun-en__lead {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--_accent);
}

.shuiyun-en__title {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--_muted);
}

.shuiyun-en__arrow {
	flex: none;
	color: var(--_accent);
	font-size: 1rem;
	line-height: 1;
}

/* ---------- 廣告 ---------- */

.shuiyun-ad {
	margin: 2rem 0;
	min-height: 1px;   /* 沒填滿時不要留下一大塊空白 */
}

/* ---------- 深色模式 ---------- */

@media (prefers-color-scheme: dark) {
	.shuiyun-series,
	.shuiyun-en {
		--_surface: var(--shuiyun-surface, #24211d);
		--_border: var(--shuiyun-border, #3a352e);
		--_text: var(--shuiyun-text, #ece7de);
		--_muted: var(--shuiyun-muted, #a49c8f);
		--_accent: var(--shuiyun-accent, #c9a568);
	}
}

/* ---------- 窄螢幕 ---------- */

@media (max-width: 480px) {
	.shuiyun-series { padding: 1rem 1.1rem; }
	.shuiyun-series__count { margin-inline-start: 0; width: 100%; }
	.shuiyun-en { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}