/* ==========================================================================
   restart-fluent · feed.css
   首页信息流：工具栏、最新一篇、文章卡、分页。
   ========================================================================== */

/* ---------- 工具栏 ---------- */
.feed-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--stroke);
}

.feed-toolbar .chips { flex: 1; }

/* ---------- 首页布局：主栏 + 右侧 side-card ---------- */
.home-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 268px;
	gap: 18px;
	align-items: start;
}

.home-layout.no-side { grid-template-columns: minmax(0, 1fr); }

.home-main { min-width: 0; }

.home-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: start;
	/* 兜底：列宽不随子卡片的 min-content（如日历里未换行的长标题）膨胀 */
	min-width: 0;
}

/* side-card 是通用容器：当前放站点概览与作者，后续日历、说说
   按同样的 <section class="side-card"> 结构追加即可。 */
.side-card {
	padding: 16px;
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
}

.side-card-title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--text-dim);
}

.side-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.side-stat {
	padding: 3px 2px;
	text-align: center;
}

.side-stat + .side-stat { border-left: 1px solid var(--stroke); }

.side-stat b {
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.side-stat span {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--text-mute);
}

.side-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.side-avatar-link { flex: none; }

.side-avatar {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 1px solid var(--stroke-strong);
}

.side-avatar-fallback {
	display: grid;
	place-items: center;
	background: var(--accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

.side-author-info { min-width: 0; }

.side-author-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.side-author-name:hover { color: var(--accent-text); }

.side-motto {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-mute);
}

.side-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.side-social a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid transparent;
	color: var(--text-mute);
	font-size: 14px;
	transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

.side-social a:hover {
	background: var(--surface-hover);
	border-color: var(--stroke);
	color: var(--accent-text);
}

/* ---------- 最新一篇 ---------- */
.featured {
	position: relative;
	margin-bottom: 22px;
	padding: 24px 26px 22px;
	overflow: hidden;
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	border-left: 3px solid var(--accent);
	transition: background .15s var(--ease), border-color .15s var(--ease);
}

.featured:hover { border-color: var(--stroke-strong); }

.featured-tag {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-bottom: 10px;
	padding: 2px 8px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent);
}

.featured-title {
	position: relative;
	z-index: 1;
	margin: 0 0 8px;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.featured-title a { transition: color .12s var(--ease); }
.featured-title a:hover { color: var(--accent-text); }

.featured-digest {
	position: relative;
	z-index: 1;
	max-width: 66ch;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--text-dim);
}

.featured-meta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--text-mute);
}

.featured-meta .fa { margin-right: 5px; }
.featured-meta a { color: var(--text-dim); }
.featured-meta a:hover { color: var(--accent-text); }

.featured-meta .dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.featured-more {
	margin-left: auto;
	color: var(--accent-text);
	white-space: nowrap;
}

.featured-more .fa {
	margin-left: 3px;
	transition: transform .12s var(--ease);
}

.featured-more:hover .fa { transform: translateX(3px); }

/* ---------- 区块标题 ---------- */
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.section-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--text-dim);
}

.section-more {
	font-size: 12.5px;
	color: var(--text-dim);
	white-space: nowrap;
}

.section-more:hover { color: var(--accent-text); }
.section-more .fa { margin-left: 3px; }

/* ---------- 文章卡 ---------- */
.post-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.post-list.list-view { grid-template-columns: minmax(0, 1fr); }

.post-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 16px;
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	transition: background .14s var(--ease), border-color .14s var(--ease), padding .18s var(--ease);
}

.post-card:hover {
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
}

.post-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 11.5px;
	color: var(--text-mute);
}

.post-cat {
	padding: 1px 7px;
	font-size: 11px;
	color: var(--text-dim);
	background: var(--surface);
	border: 1px solid var(--stroke);
	white-space: nowrap;
	transition: color .12s var(--ease), border-color .12s var(--ease);
}

a.post-cat:hover {
	color: var(--text);
	border-color: var(--stroke-strong);
}

.post-cat.is-muted { opacity: .66; }

.post-date {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.post-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.005em;
}

.post-title a {
	display: block;
	transition: color .12s var(--ease);
}

.post-title a:hover { color: var(--accent-text); }

.post-digest {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.72;
	color: var(--text-dim);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.post-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
}

.post-time {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--text-mute);
	white-space: nowrap;
}

.post-time .fa { margin-right: 4px; }

/* ---------- 紧凑模式 ---------- */
html.is-compact .post-card {
	gap: 6px;
	padding: 11px 13px;
}

html.is-compact .post-digest { -webkit-line-clamp: 1; }
html.is-compact .post-list { gap: 8px; }
html.is-compact .featured { padding: 18px 20px 17px; }
html.is-compact .featured-title { font-size: 22px; }
html.is-compact .featured-digest { margin-bottom: 12px; }

/* ---------- 分页 ---------- */
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--stroke);
}

.pager-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	color: var(--text-dim);
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

.pager-btn:hover {
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
	color: var(--text);
}

.pager-btn.is-disabled {
	opacity: .38;
	pointer-events: none;
}

.pager-now {
	font-size: 12.5px;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}

.pager-now b { color: var(--text); }

/* ---------- 更多 ---------- */
.home-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 18px;
	padding: 11px;
	font-size: 13px;
	color: var(--text-dim);
	border: 1px dashed var(--stroke-strong);
	background: transparent;
	transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}

.home-more:hover {
	background: var(--tile-tint);
	border-color: var(--stroke-strong);
	color: var(--text);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1120px) {
	.home-layout { grid-template-columns: minmax(0, 1fr); }

	.home-side {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.home-side { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.post-list { grid-template-columns: minmax(0, 1fr); }

	.featured { padding: 18px; }
	.featured-title { font-size: 20px; }
	.featured-more { margin-left: 0; }

	.feed-toolbar {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.feed-toolbar .view-seg { margin-left: auto; }

	.pager { gap: 10px; }
}

/* ---------- 首页 hero：demo hero-inner + 现有 featured + 最近文章循环带 ---------- */
.home-hero {
	margin-bottom: 18px;
	background: var(--panel-solid);
	border: 1px solid var(--stroke);
	overflow: hidden;
}

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
	gap: 28px;
	align-items: center;
	padding: 38px 28px 30px;
}

.hero-copy { min-width: 0; }

.hero-month {
	margin: 0;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--text-mute);
}

.hero-title {
	max-width: 24ch;
	margin: 6px 0 0;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.26;
	letter-spacing: -.01em;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-slogan {
	max-width: 60ch;
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--text-dim);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.hero-feature { min-width: 0; }
.hero-feature .featured { margin: 0; }
.hero-feature .featured-title { font-size: 22px; }
.hero-feature .featured-digest {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero-recent {
	overflow: hidden;
	border-top: 1px solid var(--stroke);
}

.hero-recent-label {
	display: block;
	padding: 10px 28px 0;
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--text-mute);
}

.hero-track {
	display: flex;
	width: max-content;
	margin-left: 28px;
	padding: 8px 0 12px;
	animation: hero-scroll 48s linear infinite;
}

.hero-recent:hover .hero-track,
.hero-recent:focus-within .hero-track {
	animation-play-state: paused;
}

.hero-post {
	display: flex;
	flex-direction: column;
	flex: 0 0 260px;
	min-width: 0;
	margin-right: 10px;
	padding: 12px 14px;
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	transition: background .14s var(--ease), border-color .14s var(--ease);
}

.hero-post:hover {
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
}

.hero-post-date {
	font-size: 11px;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}

.hero-post-cat {
	margin-top: 3px;
	font-size: 11px;
	color: var(--text-mute);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hero-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text);
}

@keyframes hero-scroll {
	to { transform: translateX(-50%); }
}

@media screen and (max-width: 900px) {
	.hero-inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 28px 20px 24px;
	}
	.hero-title { font-size: 28px; }
	.hero-feature { order: 2; }
	.hero-recent-label { padding-left: 20px; }
	.hero-track { margin-left: 20px; }
}

@media screen and (max-width: 600px) {
	.hero-inner { padding: 24px 16px 20px; gap: 20px; }
	.hero-title { font-size: 25px; }
	.hero-post { flex-basis: 230px; }
	.hero-recent-label { padding-left: 16px; }
	.hero-track { margin-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-track { animation: none; }
	.hero-recent { overflow-x: auto; }
}

/* ---------- Hero 幻灯片 ---------- */
.hero-slider { position: relative; }

.hero-slider .hero-inner {
	--hero-pad-top: 30px;
	--hero-pad-x: 28px;
	--hero-pad-bottom: 48px;
	display: block;
	padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
}

.hero-slides {
	display: grid;
	min-height: 190px;
}

.hero-slide {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(18px);
	pointer-events: none;
	transition: opacity .38s var(--ease), transform .38s var(--ease), visibility 0s linear .38s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .38s var(--ease), transform .38s var(--ease), visibility 0s linear 0s;
}

.hero-slider .hero-feature .featured {
	margin: 0;
}

/* 第一页背景图：只作用于第一张 slide，不铺到第二页 */
.hero-slide-cover.has-image {
	position: relative;
	overflow: hidden;
	margin: calc(-1 * var(--hero-pad-top)) calc(-1 * var(--hero-pad-x)) calc(-1 * var(--hero-pad-bottom));
	padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
	background-color: var(--body-bg);
	background-image: var(--hero-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-slide-cover.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--hero-dim, .52));
	pointer-events: none;
}

.hero-slide-cover.has-image .hero-copy {
	position: relative;
	z-index: 1;
}

.hero-slide-cover.has-image .hero-title { color: #fff; }
.hero-slide-cover.has-image .hero-month,
.hero-slide-cover.has-image .hero-slogan { color: rgba(255, 255, 255, .78); }

.hero-slide:nth-child(2) .hero-title { font-size: 27px; }

.hero-controls {
	position: absolute;
	right: 28px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hero-nav,
.hero-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--text-mute);
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	cursor: pointer;
	transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}

.hero-dots { display: flex; gap: 4px; }

.hero-dot.is-active {
	color: var(--text);
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
	font-weight: 600;
}

.hero-nav:hover,
.hero-dot:hover {
	color: var(--text);
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
}

@media screen and (max-width: 900px) {
	.hero-slider .hero-inner {
		--hero-pad-top: 26px;
		--hero-pad-x: 20px;
		--hero-pad-bottom: 48px;
		padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
	}
	.hero-controls { right: 20px; }
}

@media screen and (max-width: 600px) {
	.hero-slider .hero-inner {
		--hero-pad-top: 22px;
		--hero-pad-x: 16px;
		--hero-pad-bottom: 46px;
		padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
	}
	.hero-controls { right: 16px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
}