/* ==========================================================================
   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(--c-surface);
	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 screen and (max-width: 900px) {
	.cal-card {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
}

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