/* ═══════════════════════════════════════════════════════════════
   PlayPlus 部落格列表頁面 (blog.html) 專用樣式表
   風格完全契合 PlayPlus 2026 設計系統
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Hero：文案與最新文章雙欄 ── */
.blog-top-wrapper {
	position: relative;
	padding-bottom: 0;
}

.blog-hero-section {
	position: relative;
	overflow: hidden;
	padding: var(--space-4xl) 0 clamp(1.5rem, 2.5vw, 2.5rem);
}

/* 底部柔和淡出至清單白底，避免 Hero 與清單區之間出現硬邊界 */
.blog-hero-section::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 70px;
	background: linear-gradient(to bottom, transparent, var(--bg-surface-white, var(--swatch-white)));
	z-index: 1;
	pointer-events: none;
}

.blog-hero-container {
	position: relative;
	z-index: 2;
}

/* Hero 雙欄佈局：左側標題區、右側最新文章區 */
.blog-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

/* 左側標題區 */
.blog-hero-content {
	display: flex;
	flex-direction: column;
	max-width: 580px;
}

.blog-hero-title {

	color: var(--swatch-slate-dark);

	margin: 0 0 var(--space-xl) 0;
}

/* 段落樣式與「專業服務」Hero 一致：一般字重、不加粗 */
.blog-hero-subtitle,
.blog-hero-desc {
	max-width: 620px;
	font-size: round(nearest, clamp(1rem, 1.25vw, 1.15rem), 2px);
	font-weight: 400;
	color: var(--swatch-slate-light);
	line-height: 1.85;
	margin: 0;
}

.blog-hero-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* 綠色標記在第二行標題後方，進場時由左至右畫出（同專業服務 Hero） */
.blog-hero-content.visible .services-marker::before {
	transform: scaleX(1) rotate(-1deg);
}

/* 右側最新文章區 */
.blog-hero-featured {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

/* 封面圖左上方的 LATEST 標記 */

/* 整張背景封面圖片 */

/* 圖片下半部半透明黑色遮罩（範圍縮短 1/3，自底部向上覆蓋約 2/3） */

/* 內容主體（押在圖片下半部） */

/* ── 2. 下半部：清單段落 (左側 75% 清單卡片 + 右側 25% SideBar) ── */
.blog-list-section {
	padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem);
	background: var(--bg-surface-white, var(--swatch-white));
	position: relative;
	z-index: 1;
}

/* 左右分欄：75% vs 25% */
.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	gap: clamp(2rem, 3.5vw, 3.5rem);
	align-items: start;
}

/* 左側主區域 (佔比 3/4 = 75%) */
.blog-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* 主區域頂部資訊列 (計數 + 快速狀態) */
.blog-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-lg);
	margin-bottom: var(--space-xl);
	border-bottom: 1px solid rgba(21, 22, 26, 0.08);
}

.blog-main-title {
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--swatch-slate-dark);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.blog-main-count {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
}

.blog-main-count strong {
	color: var(--swatch-slate-dark);
	font-size: var(--text-base);
	font-weight: 800;
	margin: 0 3px;
}

/* 3 欄文章清單網格 */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3xl) var(--space-lg);
}

/* 文章卡片與專業服務頁共用 style.css 的 portfolio-card 與 article-card-meta。 */

/* 點擊標籤亦可觸發篩選的互動效果 */
.blog-tag-item {
	cursor: pointer;
	user-select: none;
}

.blog-grid .article-card-meta .blog-tag-item:hover {
	background: var(--swatch-brand-green);
	color: var(--swatch-white);
	border-color: var(--swatch-brand-green);
}

/* ── 3. 右側 SideBar (佔比 1/4 = 25%) ── */
.blog-sidebar {
	min-width: 0;
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* SideBar 區塊外觀 (質感玻璃卡片風格) */
.sidebar-box {
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(21, 22, 26, 0.08);
	border-radius: var(--radius-card);
	padding: var(--space-xl);
	box-shadow:
		0 12px 28px -6px rgba(24, 25, 28, 0.05),
		0 2px 6px rgba(24, 25, 28, 0.02);
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* 1. 關鍵字搜尋 */
.sidebar-search .pf-search {
	position: relative;
	width: 100%;
}

.sidebar-search .pf-input {
	height: 48px;
	font-size: var(--text-sm);
	padding: 0 var(--space-md) 0 42px;
}

.sidebar-search .pf-search-icon {
	left: 14px;
	width: 16px;
	height: 16px;
}

/* 2. 文章分類標籤 (橫向排列 Wrap，Pill 樣式) */
.sidebar-tags-group {
	display: flex;
	flex-direction: column;
}

.sidebar-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 沒被選擇時：Outline 樣式 */
.sidebar-tag-opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 14px;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--swatch-slate-dark);
	background: var(--swatch-white);
	border: 1.5px solid rgba(21, 22, 26, 0.16);
	cursor: pointer;
	user-select: none;
	transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.sidebar-tag-opt:hover {
	border-color: var(--swatch-brand-green);
	color: var(--swatch-brand-green-dark, #167a16);
	background: rgba(51, 204, 51, 0.04);
}

/* 被選擇時：Filled 綠色 */
.sidebar-tag-opt.is-active,
.sidebar-tag-opt:has(input:checked) {
	background: var(--swatch-brand-green, var(--swatch-brand-green));
	border-color: var(--swatch-brand-green, var(--swatch-brand-green));
	color: var(--swatch-white);
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(51, 204, 51, 0.28);
}

.sidebar-tag-opt.is-active:hover,
.sidebar-tag-opt:has(input:checked):hover {
	background: var(--swatch-brand-green-dark, #28a728);
	border-color: var(--swatch-brand-green-dark, #28a728);
	color: var(--swatch-white);
}

.sidebar-tag-opt input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.sidebar-tag-label {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* 3. 目前所選擇的篩選條件 */
.sidebar-active-section {
	padding-top: var(--space-md);
	border-top: 1px solid rgba(21, 22, 26, 0.08);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.sidebar-active-section[hidden] {
	display: none;
}

.sidebar-active-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sidebar-active-title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--swatch-slate-light);
}

/* 「清除全部」：沒有 border 的 12px 綠色粗體文字 */
.sidebar-clear-btn,
#blog-clear-all {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: inherit;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	color: var(--swatch-brand-green, var(--swatch-brand-green)) !important;
	cursor: pointer;
	line-height: 1.2;
	display: inline-block;
	text-decoration: none;
	transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.sidebar-clear-btn:hover,
#blog-clear-all:hover {
	color: var(--swatch-brand-green-dark, #167a16) !important;
	background: none !important;
	text-decoration: underline;
}

.sidebar-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* 晶片標籤 */
.sidebar-active-chips .pf-chip {
	margin: 0;
}

/* 搜尋命中紅色高亮 (同 portfolio.css) */
.pf-hit {
	background: transparent;
	color: var(--state-error, #e53e3e);
	font-weight: 800;
	text-decoration: none;
}

/* 空狀態無結果 */
.blog-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-6xl) var(--space-lg);
	background: rgba(247, 248, 245, 0.6);
	border: 1px dashed rgba(21, 22, 26, 0.15);
	border-radius: var(--radius-card);
}

.blog-empty[hidden] {
	display: none;
}

.blog-empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--swatch-white);
	border: 1px solid var(--swatch-cloud-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-md);
	color: var(--swatch-cloud-dark);
	box-shadow: var(--shadow-1);
}

.blog-empty-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--swatch-slate-dark);
	margin: 0 0 var(--space-xs) 0;
}

.blog-empty-desc {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin: 0 0 var(--space-lg) 0;
}

/* ── 3.5 Lazy Loading 載入指示區 ── */
.blog-lazy-footer {
	margin-top: var(--space-2xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 36px;
}

.blog-lazy-footer[hidden] {
	display: none;
}

.blog-sentinel {
	width: 100%;
	height: 1px;
	pointer-events: none;
	opacity: 0;
}

.blog-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 22px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(21, 22, 26, 0.08);
	box-shadow: 0 4px 16px rgba(24, 25, 28, 0.06);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--swatch-slate-dark);
}

.blog-loading[hidden] {
	display: none;
}

.blog-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(51, 204, 51, 0.25);
	border-top-color: var(--swatch-brand-green, var(--swatch-brand-green));
	border-radius: 50%;
	animation: blog-spin 0.8s linear infinite;
}

@keyframes blog-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── 4. 響應式佈局 (RWD) ── */
@media (max-width: 1200px) {
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2xl) var(--space-md);
	}
}

@media (max-width: 991px) {

	.blog-hero-section { padding: var(--space-2xl) 0 var(--space-4xl); }
	.blog-hero-featured { justify-content: flex-start; }
	

	.blog-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2xl);
	}

	.blog-hero-content,
	.blog-hero-featured {
		min-width: 0;
		max-width: 100%;
	}

	.blog-layout {
		grid-template-columns: 1fr;
		gap: var(--space-3xl);
	}

	/* 手機/平板下，SideBar 可置於清單上方供快速篩選 */
	.blog-sidebar {
		position: relative;
		/* 桌機版 position:sticky; top:100px 的 top 值沒有一起重設，
		   relative 定位下 top:100px 會把整塊往下推 100px，
		   不只在上方空出一大片死白，還往下疊到 .blog-main-header
		   （「共26篇文章」那行）身上造成跑版 */
		top: 0;
		order: -1;
	}

	/* Hero 原本在底部淡出變白（::after），會讓篩選區塊卡在米色 Hero 與
	   白色清單背景的交界上，造成斷層；改為讓米色背景延伸到篩選區塊
	   下緣才開始淡出變白，交界線自然落在篩選區塊之後 */
	.blog-hero-section::after {
		display: none;
	}

	/* Hero 區塊自己的米色背景（.blog-top-wrapper，來自 enterprise-system.css
	   的 .hero-scenarios-wrapper 配方）帶了好幾顆不同位置的光暈色塊，
	   最底部那一行實際顯示的顏色會隨視窗寬度跑位、不一定剛好是純米色。
	   強制讓 Hero 區塊最底下 50px 收斂成跟下面 .blog-sidebar::before
	   起始色完全一致的純米色（不含光暈），不管視窗寬度造成色塊跑到哪，
	   交界處永遠是同一個顏色，才能保證真正無縫銜接、不會因為色塊位置
	   不同又跑出一條線 */
	.blog-top-wrapper::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		background: linear-gradient(to bottom, transparent, var(--swatch-ivory-light) 75%);
		z-index: 1;
		pointer-events: none;
	}

	/* 原本這裡疊一片接近純白的實色（--swatch-ivory-light 0~72%），跟
	   Hero 區塊真正的米色底幾乎同色、肉眼難以分辨，而且淡出動作在
	   篩選卡片「底部邊緣前」就做完了，看起來就像直接切到死白、沒有
	   真的在往下延伸。改成：上緣帶一點品牌綠／赭棕暖色呼應 Hero 的
	   光暈色調，中段用米色撐滿整張卡片的高度（不管卡片因標籤數量
	   換行而變高變矮都蓋得到），最後額外延伸 160px 才淡出成透明，
	   讓過渡落在篩選卡片「之後」而不是卡片內部 */
	.blog-sidebar::before {
		content: "";
		position: absolute;
		left: 50%;
		width: 100vw;
		transform: translateX(-50%);
		/* 原本 top:-4px 會讓這片疊色往上多蓋 4px，剛好跟上面 Hero
		   區塊（.blog-top-wrapper）自己的背景重疊、疊出一條顏色比
		   兩邊都深的線，看起來像一條分界線。改成貼齊 0，跟 Hero
		   背景的交界只有一層顏色，不會疊加出深色接縫 */
		top: 0;
		bottom: -160px;
		/* 0% 先用跟 Hero 背景同一個米色（--swatch-ivory-light），顏色完全
		   接軌、交界處不會有色差；品牌綠／赭棕暖色延後到約 10% 才慢慢
		   加入，落在篩選卡片內部而不是卡片最上緣，才不會在交界線上
		   疊出一條色差明顯的線 */
		background: linear-gradient(
			180deg,
			var(--swatch-ivory-light) 0%,
			rgba(154, 205, 50, 0.16) 14%,
			rgba(212, 162, 127, 0.18) 30%,
			var(--swatch-ivory-light) 50%,
			var(--swatch-ivory-light) calc(100% - 160px),
			transparent 100%
		);
		z-index: -1;
		pointer-events: none;
	}

	.sidebar-box {
		padding: var(--space-lg);
		gap: var(--space-lg);
	}

	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.blog-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	

	.blog-main-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}
/* 桌機：文案在上（標題左、描述右），最新文章橫跨整個版面作為主視覺 */
@media (min-width: 992px) {
	/* 左：標題與描述；右：最新文章背景（扣除間距後左右 40%／60%，撐滿高度）。
	   高度與作品集 Hero 一致，兩頁首屏區塊等高 */
	.blog-hero-grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: stretch;
		min-height: clamp(340px, 26vw, 380px);
	}

	.blog-hero-content {
		align-self: start;
		max-width: none;
	}

	.blog-hero-subtitle,
	.blog-hero-desc {
		max-width: none;
	}

	.blog-hero-featured {
		justify-content: stretch;
		height: 100%;
	}

	

	

	
}

/* ── 最新文章：圖片邊緣羽化融入背景，文字疊在封面上方 ── */
.blog-hero-featured {
	display: flex;
	min-width: 0;
}

.blog-feature {
	display: flex;
	width: 100%;
	min-width: 0;
	color: var(--swatch-white);
	text-decoration: none;
}

.blog-feature-media {
	position: relative;
	flex: 1 1 auto;
	min-height: 260px;
	width: 100%;
	overflow: visible;
}

/* 最新文章在手機維持獨立圖片，桌機延伸為 Hero 右欄背景。 */
.blog-feature-img {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 16px;
}

.blog-feature-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--duration-slow) var(--ease-out);
}

.blog-feature:hover .blog-feature-img img {
	transform: scale(1.04);
}

/* 文字區下方的柔和暗化，確保白字在封面上清楚可讀 */
.blog-feature-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 20, 40, 0.72) 0%, rgba(10, 20, 40, 0.18) 55%, transparent 80%);
	pointer-events: none;
}

.blog-feature-latest {
	position: absolute;
	top: 22px;
	left: 26px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.94);
	color: var(--swatch-slate-dark);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	box-shadow: 0 4px 12px rgba(15, 17, 21, 0.12);
}

.blog-feature-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--swatch-brand-green);
	box-shadow: 0 0 0 3px rgba(51, 204, 51, 0.3);
}

.blog-feature-body {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.blog-feature-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}

.blog-feature-sep {
	opacity: 0.5;
}

.blog-feature-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: round(nearest, clamp(1.2rem, 1.9vw, 1.6rem), 2px);
	font-weight: 700;
	line-height: 1.38;
	letter-spacing: -0.01em;
	color: var(--swatch-white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-feature-more {
	font-size: var(--text-sm);
	font-weight: 700;
	color: #b6f2b6;
	transition: letter-spacing var(--duration-fast) ease;
}

.blog-feature:hover .blog-feature-more {
	letter-spacing: 0.04em;
}

@media (min-width: 992px) {
	.blog-feature {
		height: 100%;
	}
}

@media (max-width: 991px) {
	.blog-feature-media {
		flex: none;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.blog-feature-latest {
		top: 16px;
		left: 16px;
	}

	.blog-feature-body {
		left: 18px;
		right: 18px;
		bottom: 16px;
	}

	.blog-feature-title {
		font-size: round(nearest, clamp(1.05rem, 4vw, 1.3rem), 2px);
	}

	.blog-feature-meta {
		font-size: var(--text-xs);
	}
}

/* 知識筆記清單：列與列之間的垂直間距加大，避免卡片過於擁擠 */
.blog-grid {
	row-gap: var(--space-6xl);
}

/* 手機版單欄排列時，56px 的列距會讓使用者要滑很久，減半為 28px */
@media (max-width: 640px) {
	.blog-grid {
		row-gap: 28px;
	}
}

/* 手機版拿掉「最新文章」卡片，只留標題跟簡介文字，讓頁面上半部更單純、
   跟下面篩選卡片的銜接也更乾淨，不用再處理滿版裁切、遮罩漸層這些細節 */
@media (max-width: 640px) {
	.blog-hero-featured {
		display: none;
	}

	.blog-hero-section {
		padding-bottom: var(--space-xl);
	}

	/* .blog-list-section 背景是純白，跟上面 hero 文字區交界處如果留太多
	   純色間距、沒有任何內容，看起來會像一塊不明的白色色塊，這裡不額外
	   留白，由下面 .sidebar-box 自己的陰影／圓角來呈現分隔 */
	.blog-list-section {
		padding-top: 0;
	}
}

@media (min-width: 992px) {
	.blog-top-wrapper {
		/* 將背景延伸至導覽列下方，包含麵包屑整列。 */
		--breadcrumb-band-height: calc(var(--space-sm) * 2 + var(--text-sm) * 1.6);
		overflow: clip;
	}
	.blog-top-wrapper .breadcrumb-nav { padding-top: calc(68px + var(--space-sm)); }
	.blog-top-wrapper .breadcrumb-list { line-height: 1.6; }
	.blog-hero-section {
		overflow: visible;
		--hero-bottom-space: clamp(3rem, 4vw, 4rem);
		padding-bottom: var(--hero-bottom-space);
	}
	.blog-hero-content { position: relative; z-index: 2; }

	.blog-feature-img {
		inset: calc(-1 * (var(--space-4xl) + var(--breadcrumb-band-height))) 0 calc(-1 * var(--hero-bottom-space)) 0;
		border-radius: 0;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22feather%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%204.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M20%207%20C40%206%2060%206%2080%207%20C89%207%2093%2011%2093%2020%20C94%2040%2094%2060%2093%2078%20C93%2087%2089%2090%2080%2090%20C60%2091%2040%2091%2020%2090%20C11%2090%207%2087%207%2078%20C6%2060%206%2040%207%2020%20C7%2011%2011%207%2020%207Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23feather%29%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
		mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22feather%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%224%204.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M20%207%20C40%206%2060%206%2080%207%20C89%207%2093%2011%2093%2020%20C94%2040%2094%2060%2093%2078%20C93%2087%2089%2090%2080%2090%20C60%2091%2040%2091%2020%2090%20C11%2090%207%2087%207%2078%20C6%2060%206%2040%207%2020%20C7%2011%2011%207%2020%207Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23feather%29%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 2%, #000 98%, transparent);
		/* 弧形輪廓柔化左右邊界，不模糊圖片或文字。 */
		mask-size: 100% 100%;
		mask-repeat: no-repeat;
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
	.blog-feature-body { bottom: 28px; left: 48px; right: 48px; }
	.blog-feature-latest { left: 32px; }
}

/* ── 文章卡片分類標籤：日期靠左、標籤靠右同一行；超過兩個以「+N」收合，避免換行造成參差 ── */
.blog-grid .article-card-meta {
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: var(--space-2xs);
}

.blog-grid .article-card-meta .portfolio-desc {
	flex-shrink: 0;
	white-space: nowrap;
	margin: 0;
}

.blog-grid .article-card-meta .blog-tag-group {
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 6px;
	min-width: 0;
	margin-left: auto;
}

.blog-grid .article-card-meta .blog-tag-item {
	flex-shrink: 0;
	white-space: nowrap;
}

.blog-grid .article-card-meta .blog-tag-item:nth-child(n+3) {
	display: none;
}

.blog-tag-more {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 2px 10px;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.6;
	color: var(--text-muted);
	background: transparent;
	border: 1px dashed var(--border-light-subtle);
}

@media (max-width: 480px) {
	.blog-grid .article-card-meta {
		flex-wrap: wrap;
	}

	.blog-grid .article-card-meta .blog-tag-group {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-left: 0;
	}
}

/* ── 右側分類標籤：與文章卡片分類標籤採同一套元件樣式（淺色填滿、無外框），選取狀態以品牌綠填滿 ── */
.sidebar-tag-opt {
	padding: 6px 14px;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-secondary);
	background: var(--swatch-ivory-medium);
	border: none;
	box-shadow: none;
}

.sidebar-tag-opt:hover {
	border-color: transparent;
	color: var(--swatch-slate-dark);
	background: rgba(51, 204, 51, 0.14);
}

.sidebar-tag-opt.is-active,
.sidebar-tag-opt:has(input:checked) {
	background: var(--swatch-brand-green);
	border-color: transparent;
	color: var(--swatch-white);
	font-weight: 600;
	box-shadow: none;
}

.sidebar-tag-opt.is-active:hover,
.sidebar-tag-opt:has(input:checked):hover {
	background: var(--swatch-brand-green-dark, #28a728);
	border-color: transparent;
}

/* 卡片寬度有限：日期保持 14px，標籤縮為 12px、內距縮小，確保日期與標籤能同一行放下 */
.blog-grid .article-card-meta {
	gap: 8px;
}

.blog-grid .article-card-meta .blog-tag-group {
	gap: 4px;
}

.blog-grid .article-card-meta .blog-tag-item,
.blog-tag-more {
	font-size: var(--text-xs);
	padding: 2px 8px;
}

/* ── 側邊欄樣式對齊作品集 search bar：不要外框線、淺色填滿 ── */
/* 外層卡片去除外框線與陰影，搜尋列直接呈現在頁面底色上（同作品集） */
.sidebar-box {
	background: var(--swatch-white);
	border: none;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	padding: var(--space-xl);
}

/* 已選條件區的分隔線一併移除，與作品集已選條件列一致 */
.sidebar-active-section {
	border-top: none;
	padding-top: 0;
}

/* 已選條件晶片：淺色填滿、無外框（與 search bar 填色一致） */
.sidebar-active-chips .pf-chip {
	background: var(--swatch-ivory-light);
	border: none;
	color: var(--swatch-slate-dark);
	font-weight: 500;
}

.sidebar-active-chips .pf-chip:hover {
	background: var(--swatch-ivory-medium);
}

.sidebar-active-chips .pf-chip-key {
	color: var(--swatch-slate-light);
}

/* ── 關鍵字搜尋區塊：比照作品集 search bar，白底＋陰影的區塊感 ── */