/* =========================================================
   KV Featured Posts v1.0（2026-08-18）
   ---------------------------------------------------------
   精選文章區塊。首頁桌機 3x2 靜態；簡報培訓與網站顧問頁
   桌機 3x1 輪播。平板兩欄、手機單欄，皆可輪播。

   規範
     ‧ 色彩沿用品牌變數（--kv-purple / --kv-lilac / --kv-aqua
       / --kv-ink），標題樣式對齊首頁「相關經歷 Experience」
     ‧ 斷點沿用 Blocksy 內建：999.98px、689.98px
     ‧ 全部 scope 在 .kvfp 底下，不影響 Greenshift 既有版面
   ========================================================= */

.kvfp {
	--kvfp-gap: 26px;
	--kvfp-radius: 18px;
	--kvfp-per: 3;
	/* 這幾支若主題沒定義就用備援值，避免在頁面情境下失色 */
	--kvfp-ink: var(--kv-ink, #180027);
	--kvfp-text: var(--kv-text, #3e3a39);
	--kvfp-purple: var(--kv-purple, #ae6cdc);
	--kvfp-lilac: var(--kv-lilac, #cd92f8);
	--kvfp-aqua: var(--kv-aqua, #8dd3dd);
	--kvfp-line: var(--kv-line, #e1e8ed);

	position: relative;
	/* 寬度跟著 Blocksy 的容器走（1290px），與頁面上其他 Greenshift 區塊切齊。
	   視窗比容器窄時，外層 entry-content 自己會收邊，這裡不必再補 padding。 */
	max-width: var(--theme-normal-container-max-width, 1290px);
	margin: 0 auto 80px;
	padding: 8px 0 4px;
}

/* 區塊落在內容最後一個元素時，主題會把 margin-bottom 歸零（實測 computed 為 0px），
   這裡用 0-3-0 的權重補回來，否則會直接黏在頁尾上。 */
.entry-content > .kvfp:last-child {
	margin-bottom: 80px;
}

/* ---------- 標題：對齊首頁 Experience 那組 ---------- */
.kvfp__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: 42px;
	text-align: center;
}
.kvfp .kvfp__title {
	margin: 0;
	font-size: 3em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 8px;
	text-indent: 8px;
	color: var(--kvfp-lilac);
	text-shadow: 2px 4px 3px var(--kvfp-line);
}
.kvfp .kvfp__sub {
	margin: 0;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 4px;
	text-indent: 4px;
	color: var(--kvfp-lilac);
	text-shadow: 2px 4px 3px var(--kvfp-line);
}
.kvfp .kvfp__lead {
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.9;
	color: var(--kvfp-text);
	letter-spacing: .01em;
}

/* ---------- 舞台與箭頭 ---------- */
.kvfp__stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
.kvfp__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
	/* 卡片有陰影與徽章，留一點溢出空間再用 padding 補回來 */
	padding: 6px 4px 10px;
	margin: -6px -4px -10px;
}
.kvfp__track {
	display: flex;
	gap: var(--kvfp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.kvfp__item {
	flex: 0 0 calc((100% - (var(--kvfp-per) - 1) * var(--kvfp-gap)) / var(--kvfp-per));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kvfp__item::before,
.kvfp__item::marker {
	content: none;
}

.kvfp__nav {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--kvfp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--kvfp-purple);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.kvfp__nav svg {
	width: 19px;
	height: 19px;
	display: block;
}
.kvfp__nav:hover {
	background: var(--kvfp-purple);
	border-color: var(--kvfp-purple);
	color: #fff;
}
.kvfp__nav:focus-visible {
	outline: 3px solid var(--kvfp-aqua);
	outline-offset: 2px;
}
.kvfp__nav[hidden] {
	display: none;
}

/* ---------- 卡片 ---------- */
.kvfp .kvfp__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--kvfp-line);
	border-radius: var(--kvfp-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kvfp .kvfp__card:hover {
	transform: translateY(-4px);
	border-color: rgba(174, 108, 220, .5);
	box-shadow: 0 16px 34px rgba(24, 0, 39, .12);
}
.kvfp .kvfp__card:focus-visible {
	outline: 3px solid var(--kvfp-purple);
	outline-offset: 3px;
}

.kvfp__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #faf6fe 0%, #f2fafc 100%);
	overflow: hidden;
}
.kvfp__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
.kvfp .kvfp__card:hover .kvfp__thumb img {
	transform: scale(1.045);
}
.kvfp .kvfp__label {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(24, 0, 39, .82);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.6;
	backdrop-filter: blur(4px);
}

.kvfp__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}
.kvfp .kvfp__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
	color: var(--kvfp-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kvfp .kvfp__desc {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--kvfp-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kvfp .kvfp__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--kvfp-purple);
}
.kvfp__more svg {
	width: 16px;
	height: 16px;
	transition: transform .25s ease;
}
.kvfp .kvfp__card:hover .kvfp__more svg {
	transform: translateX(4px);
}

/* ---------- 頁點 ---------- */
.kvfp__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 26px;
}
.kvfp__dots:empty {
	display: none;
}
.kvfp__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kvfp-line);
	cursor: pointer;
	transition: background-color .25s ease, width .25s ease;
}
.kvfp__dot[aria-selected="true"] {
	width: 26px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--kvfp-purple), var(--kvfp-aqua));
}
.kvfp__dot:focus-visible {
	outline: 2px solid var(--kvfp-purple);
	outline-offset: 3px;
}

/* =========================================================
   RWD
   ========================================================= */

/* 桌機格狀（首頁）：3x2 靜態，不需要箭頭與頁點 */
@media (min-width: 1000px) {
	.kvfp[data-desktop="grid"] .kvfp__track {
		flex-wrap: wrap;
		row-gap: var(--kvfp-gap);
		transform: none !important;
	}
	.kvfp[data-desktop="grid"] .kvfp__nav,
	.kvfp[data-desktop="grid"] .kvfp__dots {
		display: none;
	}
	.kvfp[data-desktop="grid"] .kvfp__viewport {
		overflow: visible;
	}
}

/* 平板：兩欄輪播 */
@media (max-width: 999.98px) {
	.kvfp {
		--kvfp-per: 2;
		--kvfp-gap: 20px;
		margin-bottom: 60px;
	}
	.entry-content > .kvfp:last-child {
		margin-bottom: 60px;
	}
	.kvfp .kvfp__title {
		font-size: 2.3em;
		letter-spacing: 6px;
		text-indent: 6px;
	}
	.kvfp .kvfp__sub {
		font-size: 1.5em;
	}
	.kvfp__head {
		margin-bottom: 34px;
	}
	.kvfp__nav {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}
}

/* 手機：單欄輪播 */
@media (max-width: 689.98px) {
	.kvfp {
		--kvfp-per: 1;
		--kvfp-gap: 16px;
		--kvfp-radius: 16px;
		margin-bottom: 40px;
	}
	.entry-content > .kvfp:last-child {
		margin-bottom: 40px;
	}
	.kvfp .kvfp__title {
		font-size: 1.85em;
		letter-spacing: 4px;
		text-indent: 4px;
	}
	.kvfp .kvfp__sub {
		font-size: 1.15em;
		letter-spacing: 3px;
		text-indent: 3px;
	}
	.kvfp__head {
		margin-bottom: 28px;
	}
	/* 箭頭改成疊在圖上，把寬度全部留給卡片 */
	.kvfp__stage {
		gap: 0;
	}
	.kvfp__nav {
		position: absolute;
		top: 27%;
		z-index: 2;
		flex-basis: 38px;
		width: 38px;
		height: 38px;
		background: rgba(255, 255, 255, .93);
		box-shadow: 0 3px 12px rgba(24, 0, 39, .16);
	}
	.kvfp__nav--prev {
		left: 6px;
	}
	.kvfp__nav--next {
		right: 6px;
	}
	.kvfp__body {
		padding: 18px 18px 20px;
	}
	.kvfp .kvfp__name {
		font-size: 16.5px;
	}
	.kvfp__dots {
		margin-top: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kvfp__track {
		transition: none;
	}
	.kvfp .kvfp__card,
	.kvfp__thumb img,
	.kvfp__more svg {
		transition: none;
	}
	.kvfp .kvfp__card:hover {
		transform: none;
	}
	.kvfp .kvfp__card:hover .kvfp__thumb img {
		transform: none;
	}
}