/* ==========================================================================
   calendar.css — 首页日历 + 节假日提示
   只在首页（layout/index.ejs）引入；数据由 _partial/calendar-data.ejs 输出，
   渲染与交互在 js/calendar.js。

   风格沿用 main.css：零圆角、零阴影，层级靠 1px 描边 + 色块；
   唯一的主色是 --c-primary，节假日用它的浅色底（--c-primary-soft），
   有文章的日期用描边 + 小圆点表示，两者不会混淆。
   ========================================================================== */

/* ---------- 节假日提示条（正文顶部） ---------- */
.cal-prompt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-text);
	background: var(--c-primary-soft);
	border: 1px solid var(--c-primary);
	/* 左侧加粗一档，和正文里 blockquote 的语言一致 */
	border-left-width: 3px;
	animation: cal-prompt-in .3s ease both;
}

/* [hidden] 的 UA 规则是 display:none，会被上面的 display:flex 盖掉，
   必须自己补一条，否则「今天不是节假日」时提示条照样占位。 */
.cal-prompt[hidden] {
	display: none;
}

.cal-prompt i {
	flex-shrink: 0;
	font-size: 16px;
	color: var(--c-primary);
}

.cal-prompt-text {
	min-width: 0;
}

/* 调休上班日：不是「放假」的喜讯，用中性色，不抢主色 */
.cal-prompt[data-kind="workday"] {
	background: var(--tile-tint);
	border-color: var(--c-border-strong);
	border-left-color: var(--c-faint);
}

.cal-prompt[data-kind="workday"] i {
	color: var(--c-muted);
}

@keyframes cal-prompt-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- 月历卡片（首页右栏，名片之下） ---------- */
.cal-card {
	margin-top: 16px;
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	animation: cal-card-in .5s ease both;
	animation-delay: .1s;
}

@keyframes cal-card-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cal-body {
	padding: 12px;
}

/* ---------- 月份切换 ---------- */
.cal-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.cal-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 13px;
	color: var(--c-muted);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.cal-step:hover {
	color: #fff;
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.cal-title {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-title);
	text-align: center;
	background: transparent;
	cursor: pointer;
	transition: color .15s ease;
}

.cal-title:hover {
	color: var(--c-primary);
}

/* ---------- 日期网格 ---------- */
.cal-week,
.cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.cal-week {
	margin-bottom: 4px;
}

.cal-week span {
	font-size: 11px;
	color: var(--c-faint);
	text-align: center;
}

.cal-day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	font-size: 12px;
	color: var(--c-text);
	background: transparent;
	border: 1px solid transparent;
	cursor: default;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* 法定节假日：浅主色底 + 主色字 */
.cal-day.is-holiday {
	color: var(--c-primary);
	background: var(--c-primary-soft);
}

/* 调休上班日：字压暗，提示「这天要上班」 */
.cal-day.is-workday {
	color: var(--c-faint);
}

/* 有文章：描边 + 底部小圆点，鼠标可点开当天文章 */
.cal-day.has-post {
	color: var(--c-title);
	font-weight: 600;
	border-color: var(--c-primary);
	cursor: pointer;
}

.cal-day.has-post::after {
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	background: var(--c-primary);
}

.cal-day.has-post:hover {
	color: #fff;
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.cal-day.has-post:hover::after {
	background: #fff;
}

/* 今天：实线深框。放在最后，压过 has-post 的主色描边 */
.cal-day.is-today {
	border-color: var(--c-title);
}

/* 选中的那天：浅主色底 + 主色描边。
   早先是整格铺主色，点完再点别处会看着像「按钮一直保持选中」；
   改成浅底之后仍能从一排日子里认出来，也不至于像被按住了。
   再点一次同一天、或点格子外的空白处都可以取消选中。 */
.cal-day.selected,
.cal-day.has-post.selected {
	color: var(--c-primary);
	background: var(--c-primary-soft);
	border-color: var(--c-primary);
}

.cal-day.selected::after {
	background: var(--c-primary);
}

/* 触摸设备上 :hover 在抬手后仍会命中，按钮会一直亮着 ——
   只在真有悬停能力的设备上给 hover 反馈。 */
@media (hover: none) {
	.cal-day.has-post:hover {
		color: var(--c-title);
		background: transparent;
		border-color: var(--c-primary);
	}

	.cal-day.has-post:hover::after {
		background: var(--c-primary);
	}

	.cal-step:hover {
		color: var(--c-muted);
		background: var(--c-surface);
		border-color: var(--c-border);
	}
}

/* ---------- 全年分布柱 ---------- */
.cal-hist {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--c-border);
}

.cal-bars {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 3px;
	align-items: end;
	height: 30px;
}

.cal-bar {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	background: transparent;
	cursor: pointer;
}

.cal-bar i {
	display: block;
	width: 8px;
	min-height: 1px;
	height: 1px;
	background: var(--c-border-strong);
	transition: height .25s ease, background-color .15s ease;
}

.cal-bar.has-post i {
	background: var(--c-primary);
}

.cal-bar:hover i {
	background: var(--c-primary);
}

.cal-months {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 3px;
	margin-top: 3px;
}

.cal-months span {
	font-size: 9px;
	color: var(--c-faint);
	text-align: center;
}

/* ---------- 底部说明 ---------- */
.cal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	font-size: 11px;
	color: var(--c-muted);
}

.cal-legend {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--c-faint);
}

.cal-mk {
	display: inline-block;
	width: 8px;
	height: 8px;
}

.cal-mk.post {
	border: 1px solid var(--c-primary);
}

.cal-mk.holiday {
	background: var(--c-primary-soft);
	border: 1px solid var(--c-primary);
}

/* ---------- 当天文章列表 ---------- */
.cal-posts {
	list-style: none;
	padding-left: 0;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--c-border);
	animation: cal-list-in .2s ease both;
}

.cal-posts[hidden] {
	display: none;
}

@keyframes cal-list-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cal-posts li {
	font-size: 12px;
	line-height: 1.6;
}

.cal-posts li + li {
	margin-top: 4px;
}

.cal-post-day {
	font-size: 11px;
	color: var(--c-faint);
	letter-spacing: .06em;
}

.cal-posts a {
	display: block;
	color: var(--c-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cal-posts a:hover {
	color: var(--c-primary);
}

@media (prefers-reduced-motion: reduce) {
	.cal-card,
	.cal-prompt,
	.cal-posts,
	.cal-grid,
	.cal-bar i {
		animation: none;
		transition: none;
	}
}

/* ---------- restart-fluent：作为首页 side-card 的一块 ---------- */
.side-card.cal-card {
	margin-top: 0;
	/* 宽度永远跟随列：不让 min-content（如文章列表里未换行的长标题）
	   把卡片撑出列宽 —— 否则选中日期与未选中时宽度会跳变。 */
	min-width: 0;
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
}

.side-card.cal-card .cal-body { padding: 0; }
.side-card.cal-card .side-card-title { margin-bottom: 10px; }

.side-card.cal-card .cal-step {
	width: 24px;
	height: 24px;
	padding: 0;
	font-size: 14px;
}

/* 当天文章也做成按钮行，避免日历里出现「只有文字可点」的区域 */
.cal-posts li + li { margin-top: 6px; }

/* 列表封顶可滚：点中多篇文章的日期时，卡片不会被撑满整屏 */
.cal-posts {
	max-height: 192px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cal-posts a {
	/* 必须是 block：上面基础段的 text-overflow: ellipsis 只对块容器生效，
	   flex 里匿名文本项收不到 min-width 收缩，长标题会被硬切没有省略号 */
	display: block;
	min-height: 32px;
	padding: 0 10px;
	line-height: 30px; /* 上下边框 2px + 行高 30 = 32px，单行垂直居中 */
	background: var(--surface);
	border: 1px solid var(--stroke);
	transition: background .14s var(--ease), border-color .14s var(--ease);
}

.cal-posts a:hover {
	background: var(--surface-hover);
	border-color: var(--stroke-strong);
	color: var(--text);
}

/* 日期格统一正方形；柱状图按钮清掉浏览器默认边框/内边距 */
.side-card.cal-card .cal-day {
	aspect-ratio: 1 / 1;
	height: auto;
	min-width: 0;
	padding: 0;
}

.side-card.cal-card .cal-day.is-empty {
	aspect-ratio: 1 / 1;
}

.side-card.cal-card .cal-title {
	height: 28px;
	padding: 0 8px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--stroke);
}

.side-card.cal-card .cal-title:hover {
	color: var(--text);
	background: var(--surface-hover);
	border-color: var(--stroke-strong);
}

.side-card.cal-card .cal-bar {
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.side-card.cal-card .cal-hist {
	overflow: hidden;
}

/* 列（681~1120px 两列时可达 536px）或宽卡片里格子会变成 50~70px 的巨块：
   日历主体（标题条 + 导航 + 星期 + 网格）封顶 390px 并整体居中，
   卡片本身仍占满列宽，与同列其它 side-card 对齐。 */
.side-card.cal-card .side-card-title,
.side-card.cal-card .cal-nav,
.side-card.cal-card .cal-week,
.side-card.cal-card .cal-grid {
	max-width: 390px;
	margin-inline: auto;
}

/* ---------- 翻页动画：重建网格后短暂挂方向类，重放入场 ---------- */
@keyframes cal-page-next {
	from {
		opacity: 0;
		translate: 14px 0;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes cal-page-prev {
	from {
		opacity: 0;
		translate: -14px 0;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

.cal-grid.cal-page-next {
	animation: cal-page-next .26s var(--ease) both;
}

.cal-grid.cal-page-prev {
	animation: cal-page-prev .26s var(--ease) both;
}

/* ---------- 手机：格子随宽度放大，字号跟进 ---------- */
@media screen and (max-width: 680px) {
	.side-card.cal-card .cal-day { font-size: 14px; }
	.side-card.cal-card .cal-title { font-size: 14px; }
	.side-card.cal-card .cal-week span { font-size: 13px; }
	.side-card.cal-card .cal-months span { font-size: 10px; }
	.side-card.cal-card .cal-foot { font-size: 12px; }
}