/**
 * Mizuki 布局模式修正 —— 全屏模式 + 网格模式
 *
 * 对齐上游 Mizuki (https://github.com/LyraVoid/Mizuki) 的布局行为:
 * 1. 全屏模式 (fullscreen): banner 作为全屏背景,主内容区 top:0 直接呈现文章
 * 2. 网格模式 (grid): 文章列表变 2×2 网格,保留右侧边栏
 *
 * 必须在 mizuki-main.css 之后加载以覆盖相关规则。
 *
 * @package Mizuki
 */

/* ============================================================
 * 问题一:全屏模式 (fullscreen-banner)
 * 对齐上游 getMainPanelTop("fullscreen") = "0"
 * banner 作为 fixed 全屏背景(z-index:0),主内容区贴顶(z-index:30)
 * ============================================================ */

/* Overlay uses an independent fixed wallpaper, matching upstream FullscreenWallpaper. */
[data-fullscreen-wallpaper] {
	position: fixed;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	opacity: var(--wallpaper-opacity, 0.8);
	filter: blur(var(--wallpaper-blur, 1.5px));
	transform: translateZ(0);
}

body.overlay-wallpaper [data-fullscreen-wallpaper] {
	display: block !important;
}

[data-fullscreen-wallpaper] .banner-image-slot-mobile,
[data-fullscreen-wallpaper] .banner-image-slot-desktop,
[data-fullscreen-wallpaper] img {
	width: 100%;
	height: 100%;
}

[data-fullscreen-wallpaper] img {
	object-fit: cover;
}

body.overlay-wallpaper,
body.overlay-wallpaper #page-bg,
body.overlay-wallpaper .bg-\[var\(--page-bg\)\] {
	background-color: transparent !important;
}

/* 全屏模式下 banner 作为固定全屏背景 */
body.enable-banner.fullscreen-banner #banner-wrapper.w-full {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	height: 100vh !important;
	max-height: 100vh !important;
	transform: none !important;
	z-index: 0 !important;
}

/* 全屏模式下隐藏 banner 底部水波纹(全屏背景不需要) */
body.fullscreen-banner #header-waves {
	display: none !important;
}

/* Fullscreen wallpaper mode shows content immediately, without hero copy. */
body.fullscreen-banner .banner-text-overlay,
body.fullscreen-banner .banner-page-overlay {
	display: none !important;
}

/* 全屏模式下主内容区贴顶,覆盖 header.php 内联 top 与 banner.css 的 35vh 规则 */
body.enable-banner.fullscreen-banner .absolute.w-full.z-30:not(.no-banner-layout) {
	position: absolute !important;
	top: 0 !important;
	margin-top: 0 !important;
	min-height: 0 !important;
}

/* Keep the first-row cards below the fixed navbar while remaining in view. */
body.enable-banner.fullscreen-banner .absolute.w-full.z-30:not(.no-banner-layout) > .relative {
	padding-top: 5.5rem;
}

/* 全屏模式下 navbar 提到最上层(z-index 高于 banner 背景) */
body.fullscreen-banner #top-row {
	z-index: 50 !important;
}

/* 全屏模式下内容区背景半透明 + 毛玻璃,保证文字可读性 */
body.fullscreen-banner #main-grid {
	background-color: transparent !important;
}

body.fullscreen-banner #swup-container,
body.fullscreen-banner #content-wrapper {
	background-color: transparent !important;
}

/* 全屏模式下卡片用半透明 + 毛玻璃效果,让背景图透出 */
body.fullscreen-banner .card-base {
	background-color: var(--card-bg-transparent, rgba(255, 255, 255, 0.82)) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

/* 全屏模式下页面整体背景透明,露出 fixed banner */
body.fullscreen-banner {
	background-color: transparent !important;
}

body.fullscreen-banner #page-bg,
body.fullscreen-banner .bg-\[var\(--page-bg\)\] {
	background-color: transparent !important;
}

/* 全屏模式下非首页也显示 banner 背景(上游 fullscreen 是全站背景) */
body.fullscreen-banner #banner-wrapper.mobile-hide-banner {
	display: block !important;
}

/* ============================================================
 * Grid mode: two-column post cards and upstream desktop sidebar geometry.
 * ============================================================ */

/* 网格模式下文章列表容器变 2 列 grid (≥769px) */
@media (min-width: 769px) {
	#post-list-container.grid-mode {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem !important;
		flex-direction: row !important;
		background: transparent !important;
		padding: 0 !important;
	}

	/* 网格模式下文章卡片宽度 100%,间距统一 */
	#post-list-container.grid-mode .post-card-item {
		width: 100% !important;
		margin-bottom: 0 !important;
	}

	/* 网格模式下卡片改垂直布局:封面在上,文字在下 */
	#post-list-container.grid-mode .post-card-item {
		flex-direction: column !important;
	}

	/* 封面图:从 absolute 改为 relative,占满卡片宽度,固定高度 */
	#post-list-container.grid-mode .post-card-item > a[class*="md:absolute"] {
		order: -1;
		display: block !important;
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 14rem !important;
		top: auto !important;
		bottom: auto !important;
		right: auto !important;
		left: auto !important;
		margin: 0 !important;
		border-radius: 0 !important;
		min-height: 10rem;
		font-size: inherit !important;
		line-height: normal !important;
		-webkit-line-clamp: unset !important;
		-webkit-box-orient: initial !important;
	}

	/* 文字区:占满宽度 */
	#post-list-container.grid-mode .post-card-item > .pl-6,
	#post-list-container.grid-mode .post-card-item > div[class*="md:w-[72%"],
	#post-list-container.grid-mode .post-card-item > div[class*="md:w-[calc"] {
		width: 100% !important;
		padding: 1.25rem !important;
	}

	/* 标题字号略小,2 行截断 */
	#post-list-container.grid-mode .post-card-item .post-card-title {
		font-size: 1.125rem !important;
		line-height: 1.5rem !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}

	/* Keep category/tag links on their utility sizes; the legacy bundle targets every card link. */
	#post-list-container.grid-mode .post-card-item a.link-lg {
		display: inline-block !important;
		-webkit-line-clamp: unset !important;
		-webkit-box-orient: initial !important;
		overflow: visible !important;
	}

	#post-list-container.grid-mode .post-card-item a.link-lg.text-sm {
		font-size: var(--text-sm, 0.875rem) !important;
		line-height: var(--text-sm--line-height, 1.25rem) !important;
	}

	#post-list-container.grid-mode .post-card-item a.link-lg.text-xs {
		font-size: var(--text-xs, 0.75rem) !important;
		line-height: var(--text-xs--line-height, 1rem) !important;
	}

	/* 摘要 2 行截断 */
	#post-list-container.grid-mode .post-card-item .line-clamp-2,
	#post-list-container.grid-mode .post-card-item .description {
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		margin-bottom: 0.5rem !important;
		font-size: 0.875rem !important;
		line-height: 1.25rem !important;
		display: -webkit-box !important;
		overflow: hidden !important;
	}

	/* 元信息更紧凑 */
	#post-list-container.grid-mode .post-card-item .meta-icon {
		font-size: 0.75rem !important;
	}

	/* 隐藏移动端分隔线(网格模式下不需要) */
	#post-list-container.grid-mode > .border-t-\[1px\],
	#post-list-container.grid-mode > div[class*="border-dashed"] {
		display: none !important;
	}
}

/* 移动端(≤768px)网格模式退化为单列 */
@media (max-width: 768px) {
	#post-list-container.grid-mode {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: 1fr !important;
		gap: 0.5rem !important;
	}
}

/* The wrapper is the grid item, matching upstream MainGridLayout. */
.right-sidebar-container {
	align-self: start;
	display: contents;
}

.right-sidebar-container #right-sidebar {
	height: fit-content;
}

.hidden-in-grid-mode {
	display: none !important;
}

/* Grid mode removes the right track and keeps main content in column two. */
@media (min-width: 1280px) {
	#main-grid[data-layout-mode="grid"] {
		grid-template-columns: 17.5rem 1fr !important;
	}

	#main-grid[data-layout-mode="grid"] #swup-container {
		grid-column: 2 / 3;
	}
}

/* 网格模式下列表与网格容器过渡动画 */
#post-list-container {
	transition: all 0.3s ease-in-out;
}