/* =========================================================
   首页专属样式 —— 大轮播 + 三列瀑布流
   ========================================================= */

/* ---------- 首页：大轮播 + .main 绝对定位布局 ---------- */
.theFirstPageBackGround {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vh;
	z-index: 1;
	background-color: #3f51b5;
}

[data-theme="dark"] .theFirstPageBackGround {
	background-color: #121212;
}

/* 让主内容层回到普通文档流（MDX 原版为 absolute，依赖 JS 撑高；
   改为 static 更稳健），顶部为 50vh 轮播预留空间 */
.main {
	position: static;
	margin-top: 50vh;
	min-height: 38.2vh;
	position: relative;
	z-index: 2;
}

/* 首页：顶栏透明浮于蓝色轮播之上（对齐 heheda.cn） */
.index-slide-toolbar .mdui-toolbar {
	background-color: transparent !important;
}

/* ---------- Flickity 轮播 ---------- */
.theFirstPageSay {
	height: 50vh !important;
	overflow: hidden !important;
}

.theFirstPageSay .swiper-wrapper {
	height: 100%;
	outline: none;
}

.theFirstPageSay .flickity-viewport {
	height: 100% !important;
	overflow: hidden;
}

.theFirstPageSay .flickity-slider {
	height: 100%;
}

.swiper-item {
	width: 100%;
	height: 50vh;
	position: relative;
	overflow: hidden;
}

.mdx-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(.5) saturate(1.05);
}

.mdx-slide-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 10%;
	color: #fff;
}

.mdx-slide-content .slide-wrap {
	max-width: 640px;
}

.mdx-slide-content h1 {
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 10px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.mdx-slide-content .time-in-post-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	opacity: .85;
	margin-bottom: 14px;
}

.mdx-slide-content p {
	font-size: 15px;
	opacity: .92;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mdx-slide-content .mdui-btn {
	margin-top: 18px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}

.mdx-slide-content .mdui-btn:hover {
	background: rgba(255, 255, 255, .3);
}

/* 自定义轮播箭头 */
.swiper-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .15);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background .25s, box-shadow .25s, transform .25s cubic-bezier(.4, 0, .2, 1);
}

.swiper-nav:hover {
	background: rgba(255, 255, 255, .35);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.swiper-nav.prev {
	left: 22px;
}

.swiper-nav.next {
	right: 22px;
}

.swiper-nav.prev:hover {
	transform: translateY(-50%) translateX(-6px) scale(1.1);
}

.swiper-nav.next:hover {
	transform: translateY(-50%) translateX(6px) scale(1.1);
}

.swiper-nav:active {
	transform: translateY(-50%) scale(.95) !important;
	transition-duration: .1s;
}

.swiper-nav .material-icons {
	font-size: 24px;
}

/* Hero 阅读全文按钮（JS 动态生成） */
.hero-read-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	background: #fff;
	color: #3f51b5;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	text-decoration: none;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
}

.hero-read-btn .material-icons {
	font-size: 26px;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.hero-read-btn:hover {
	transform: scale(1.12);
	box-shadow: 0 8px 22px rgba(63, 81, 181, .38);
}

.hero-read-btn:active {
	transform: scale(.95);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	transition-duration: .1s;
}

/* 通知模块 */
#noticeBar {
	display: none;
	margin: auto;
}

/* Flickity 分页点（白色胶囊，与 heheda.cn 一致） */
.theFirstPageSay .flickity-page-dots {
	bottom: 20px;
}

.theFirstPageSay .flickity-page-dots .dot {
	width: 10px;
	height: 10px;
	opacity: 1;
	background: rgba(255, 255, 255, .4);
	transition: width .25s, background .25s;
}

.theFirstPageSay .flickity-page-dots .dot.is-selected {
	width: 26px;
	border-radius: 6px;
	background: #fff;
}

/* ---------- 宽列表：三列卡片（对齐 MDX 原生 inline-block 机制，
   因 .mdui-center 带 display:block!important，不能用 flex） ---------- */
.mdx-wide-post-list .postList {
	text-align: center;
	/* MDX 原生 */
	padding-top: 15px;
	font-size: 0;
	/* 消除 inline-block 之间的空白字符间隙（约 4px） */
}

/* 卡片链接：inline-block 三列 */
.mdx-wide-post-list .postList>.ainList {
	display: inline-block;
	width: calc(33.333% - 30px);
	margin: 15px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	/* 恢复字号，防止内容继承父级 font-size:0 */
}

.mdx-wide-post-list .postDiv {
	width: 100%;
	max-width: none;
	margin: 0;
}

.mdx-wide-post-list .staDiv {
	min-height: 0;
	background-color: #fff;
	border-radius: 12px !important;
	overflow: hidden;
	display: block;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1), 0 1px 5px 0 rgba(0, 0, 0, .08);
	transition: box-shadow .3s, transform .3s;
}

.mdx-wide-post-list .staDiv:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, .14), 0 2px 10px rgba(0, 0, 0, .1);
	transform: translateY(-3px);
}

.mdx-wide-post-list .mdui-grid-tile-title {
	display: block;
	height: auto !important;
	overflow: visible !important;
	max-height: none !important
}

.mdx-wide-post-list .indexgaid {
	display: block !important;
	width: 100% !important;
	height: 200px !important;
	margin: 0 !important;
	border-radius: 0;
	overflow: hidden;
}

.mdx-wide-post-list .indexgaid .divimg {
	display: block;
	height: 200px !important;
	width: 100%;
	opacity: 1;
	background-size: cover;
	background-position: center;
}

.mdx-wide-post-list .sta-4 {
	display: none;
}

.mdx-wide-post-list .sayInSta {
	min-height: 0;
	padding: 18px 20px 20px;
	font-size: 14px;
	color: #4b4b4b;
}

.mdx-wide-post-list .sayInSta h1 {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: rgba(0, 0, 0, .87);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mdx-wide-post-list .sayInSta .post-summary {
	color: rgba(0, 0, 0, .54);
	font-size: 13px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 8px 0 0;
}

.mdx-wide-post-list .sayInSta .info {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 14px;
	font-size: 12px;
	color: rgba(0, 0, 0, .4);
}

a.ainList {
	display: block;
}

/* 暗色卡片 */
[data-theme="dark"] .mdx-wide-post-list .staDiv {
	background-color: #222;
}

[data-theme="dark"] .mdx-wide-post-list .sayInSta h1 {
	color: hsla(0, 0%, 100%, .87);
}

[data-theme="dark"] .mdx-wide-post-list .sayInSta,
[data-theme="dark"] .mdx-wide-post-list .sayInSta .post-summary {
	color: hsla(0, 0%, 100%, .7);
}

[data-theme="dark"] .mdx-wide-post-list .sayInSta .info {
	color: hsla(0, 0%, 100%, .4);
}

@media (max-width: 1024px) {
	.mdx-wide-post-list .postList>.ainList {
		width: calc(50% - 30px);
	}
}

@media (max-width: 640px) {
	.mdx-wide-post-list .postList>.ainList {
		width: calc(100% - 30px);
	}

	.mdx-slide-content h1 {
		font-size: 24px;
	}

	.swiper-nav {
		display: none;
	}
}

/* ---------- 搜索浮层 ---------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(4px);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 15vh;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s;
}

.search-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.search-panel {
	width: min(640px, calc(100% - 32px));
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
	overflow: hidden;
	transform: translateY(-12px);
	transition: transform .22s;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
}

.search-overlay.active .search-panel {
	transform: translateY(0);
}

.search-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid #eef0f4;
}

.search-head>.material-icons {
	color: #9aa0a6;
	font-size: 22px;
}

.search-head input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
	background: transparent;
	color: #1a1a1a;
}

.search-close {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa0a6;
	transition: background .15s;
}

.search-close:hover {
	background: #f1f3f5;
	color: #333;
}

.search-body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

.search-empty {
	padding: 32px;
	text-align: center;
	color: #9aa0a6;
	font-size: 14px;
}

.search-item {
	display: block;
	padding: 12px 18px;
	cursor: pointer;
	border-bottom: 1px solid #f4f5f8;
	text-decoration: none;
	transition: background .15s;
}

.search-item:hover {
	background: #f6f8ff;
}

.search-item:last-child {
	border-bottom: none;
}

.si-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 4px;
}

.si-summary {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-item mark {
	background: #fff3a3;
	color: #b45309;
	padding: 0 2px;
	border-radius: 2px;
}

[data-theme="dark"] .search-panel {
	background: #1a1b22;
}

[data-theme="dark"] .search-head {
	border-bottom-color: #2a2c35;
}

[data-theme="dark"] .search-head input {
	color: #f0f0f0;
}

[data-theme="dark"] .search-close:hover {
	background: #2a2c35;
	color: #f0f0f0;
}

[data-theme="dark"] .search-item {
	border-bottom-color: #25272f;
}

[data-theme="dark"] .search-item:hover {
	background: #222530;
}

[data-theme="dark"] .si-title {
	color: #f0f0f0;
}

[data-theme="dark"] .si-summary {
	color: #9ba3af;
}