/**
 * 特色卡片（Feature Card）樣式
 * 矩形容器，預設顯示主標題（直排/橫排）+ 右下資訊區，hover 時淡入第二張圖與描述文字。
 */

/* ── 容器 ── */
.dy-fc {
	position: relative;
	width: 100%;
	height: 480px;
	overflow: hidden;
	cursor: pointer;
}

/* 卡片整體為連結時重設 <a> 預設樣式 */
a.dy-fc.has-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* ── 背景圖層 ── */
.dy-fc__bg {
	position: absolute;
	inset: 0;
}

.dy-fc__img--default,
.dy-fc__img--hover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.dy-fc__img--default {
	opacity: 1;
	transition: opacity .5s ease;
}

.dy-fc__img--hover {
	opacity: 0;
	transition: opacity .5s ease;
}

/* hover 時切換圖片 */
.dy-fc.has-hover-img:hover .dy-fc__img--default { opacity: 0; }
.dy-fc.has-hover-img:hover .dy-fc__img--hover   { opacity: 1; }

/* ── 遮罩 ── */
.dy-fc__overlay {
	position: absolute;
	inset: 0;
	transition: opacity .5s ease;
}

.dy-fc__overlay--default { opacity: 1; }
.dy-fc__overlay--hover   { opacity: 0; }

.dy-fc:hover .dy-fc__overlay--default { opacity: 0; }
.dy-fc:hover .dy-fc__overlay--hover   { opacity: 1; }

/* ── 內容共用 ── */
.dy-fc__content {
	position: absolute;
	inset: 0;
	transition: opacity .5s ease;
}

/* ── 預設狀態內容 ── */
.dy-fc__content--default {
	opacity: 1;
	display: flex;
	flex-direction: column;
	align-items: center;     /* 水平置中 */
	justify-content: center; /* 垂直置中 */
	gap: 16px;
	text-align: center;
	padding: 32px; /* 預設內距，可由 Elementor 控制項覆蓋 */
}

.dy-fc:hover .dy-fc__content--default { opacity: 0; pointer-events: none; }

/* ── 主標題 ── */
.dy-fc__title {
	font-size: 80px;
	font-weight: 700;
	line-height: 1.1;
	color: #ffffff;
	font-family: "Noto Serif TC", serif;
	/* 預設直排 */
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* 橫排模式（by prefix_class） */
.dy-fc-title-horizontal .dy-fc__title {
	writing-mode: horizontal-tb;
	text-orientation: mixed;
}

/* 右下資訊區（副標題 + 英文 + 編號）不再獨立靠右，改為正常 flex 子項 */
.dy-fc__default-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* ── 副標題 ── */
.dy-fc__subtitle {
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	letter-spacing: .08em;
	padding: 6px 20px;
	--dy-fc-subtitle-border-color: rgba(255,255,255,.7);
	text-align: center;
}

/* 單框 — 上下 */
.dy-fc-subtitle-border-single-tb .dy-fc__subtitle {
	border-top: 1px solid var(--dy-fc-subtitle-border-color);
	border-bottom: 1px solid var(--dy-fc-subtitle-border-color);
}

/* 雙框 — 上下（box-shadow 模擬第二條線） */
.dy-fc-subtitle-border-double-tb .dy-fc__subtitle {
	border-top: 1px solid var(--dy-fc-subtitle-border-color);
	border-bottom: 1px solid var(--dy-fc-subtitle-border-color);
	box-shadow:
		0 -4px 0 var(--dy-fc-subtitle-border-color),
		0  4px 0 var(--dy-fc-subtitle-border-color);
	margin-top: 4px;
	margin-bottom: 4px;
}

/* 單框 — 四邊 */
.dy-fc-subtitle-border-single-all .dy-fc__subtitle {
	border: 1px solid var(--dy-fc-subtitle-border-color);
}

/* 雙框 — 四邊（outline 模擬第二層框） */
.dy-fc-subtitle-border-double-all .dy-fc__subtitle {
	border: 1px solid var(--dy-fc-subtitle-border-color);
	outline: 3px solid var(--dy-fc-subtitle-border-color);
	outline-offset: 3px;
}

/* 無框 */
.dy-fc-subtitle-border-none .dy-fc__subtitle {
	border: none;
	box-shadow: none;
	outline: none;
	padding-left: 0;
	padding-right: 0;
}

/* ── 英文標題 ── */
.dy-fc__en {
	font-size: 11px;
	font-weight: 400;
	color: rgba(255,255,255,.8);
	letter-spacing: .14em;
	text-align: center;
}

/* ── 編號 ── */
.dy-fc__num {
	font-size: 24px;
	font-weight: 700;
	color: #ffffff;
	font-family: "Noto Serif TC", serif;
	text-align: center;
}

/* 圓形框 */
.dy-fc-num-border-circle .dy-fc__num {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 50%;
}

/* 方框 */
.dy-fc-num-border-square .dy-fc__num {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 0;
}

/* 無框 */
.dy-fc-num-border-none .dy-fc__num {
	border: none;
	width: auto;
	height: auto;
	line-height: normal;
}

/* ── Hover 狀態內容 ── */
.dy-fc__content--hover {
	opacity: 0;
	display: flex;
	flex-direction: row; /* 版型 A：左右並排（預設） */
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 32px; /* 預設內距，可由 Elementor 控制項覆蓋 */
	pointer-events: none;
}

.dy-fc:hover .dy-fc__content--hover {
	opacity: 1;
	pointer-events: auto;
}

/* ── 版型 B：上下堆疊（標題直排置中，描述在下，按鈕最底） ── */
.dy-fc-hover-layout-stack .dy-fc__content--hover {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.dy-fc-hover-layout-stack .dy-fc__hover-title {
	writing-mode: vertical-rl; /* stack 版型強制直排 */
	text-orientation: mixed;
	flex-shrink: 0;
}

.dy-fc-hover-layout-stack .dy-fc__hover-body {
	align-items: center;
	width: 100%;
	flex: 0 0 auto; /* 不撐滿，讓 justify-content: center 真正生效 */
}

.dy-fc-hover-layout-stack .dy-fc__desc {
	width: 100%;
	text-align: center;
}

.dy-fc-hover-layout-stack .dy-fc__btn {
	align-self: center;
}

/* ── Hover 主標題 ── */
.dy-fc__hover-title {
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	color: #ffffff;
	font-family: "Noto Serif TC", serif;
	/* 預設直排 */
	writing-mode: vertical-rl;
	text-orientation: mixed;
	flex-shrink: 0;
}

/* Hover 標題橫排 */
.dy-fc-hover-title-horizontal .dy-fc__hover-title {
	writing-mode: horizontal-tb;
	text-orientation: mixed;
}

/* 若 hover 標題是橫排且非 stack 版型，改成垂直排列整體 */
.dy-fc-hover-title-horizontal:not(.dy-fc-hover-layout-stack) .dy-fc__content--hover {
	flex-direction: column;
}

/* ── Hover 右側內容（描述 + 按鈕） ── */
.dy-fc__hover-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

/* ── 描述文字 ── */
.dy-fc__desc {
	font-size: 15px;
	line-height: 1.8;
	color: #ffffff;
	padding: 12px 16px;
	--dy-fc-desc-border-color: rgba(255,255,255,.5);
}

/* 描述框線：單框四邊（預設） */
.dy-fc-desc-border-single-all .dy-fc__desc {
	border: 1px solid var(--dy-fc-desc-border-color);
}

/* 描述框線：雙框四邊 */
.dy-fc-desc-border-double-all .dy-fc__desc {
	border: 1px solid var(--dy-fc-desc-border-color);
	outline: 3px solid var(--dy-fc-desc-border-color);
	outline-offset: 3px;
}

/* 描述框線：單框上下 */
.dy-fc-desc-border-single-tb .dy-fc__desc {
	border-top: 1px solid var(--dy-fc-desc-border-color);
	border-bottom: 1px solid var(--dy-fc-desc-border-color);
}

/* 描述框線：雙框上下 */
.dy-fc-desc-border-double-tb .dy-fc__desc {
	border-top: 1px solid var(--dy-fc-desc-border-color);
	border-bottom: 1px solid var(--dy-fc-desc-border-color);
	box-shadow:
		0 -4px 0 var(--dy-fc-desc-border-color),
		0  4px 0 var(--dy-fc-desc-border-color);
	margin-top: 4px;
	margin-bottom: 4px;
}

/* 描述框線：無框 */
.dy-fc-desc-border-none .dy-fc__desc {
	border: none;
	box-shadow: none;
	outline: none;
	padding-left: 0;
	padding-right: 0;
}

.dy-fc__btn {
	display: inline-block;
	border: 1px solid #ffffff;
	color: #ffffff;
	padding: 10px 24px;
	font-size: 14px;
	letter-spacing: .06em;
	text-decoration: none;
	transition: background .25s ease, color .25s ease;
	align-self: flex-start;
	white-space: nowrap;
}

.dy-fc__btn:hover {
	background: #ffffff;
	color: #000000;
}

/* ── 無障礙 ── */
@media (prefers-reduced-motion: reduce) {
	.dy-fc__img--default,
	.dy-fc__img--hover,
	.dy-fc__overlay,
	.dy-fc__content { transition: none; }
}

/* ── RWD ── */
@media (max-width: 768px) {
	/* 高度由 Elementor responsive 控制項覆蓋，此處不寫死 */

	.dy-fc__title,
	.dy-fc__hover-title { font-size: 44px; }

	.dy-fc__content { padding: 24px; }

	/* 手機上 hover 改直排佈局 */
	.dy-fc__content--hover {
		flex-direction: column;
		gap: 16px;
	}

	.dy-fc__hover-title {
		writing-mode: horizontal-tb; /* 手機螢幕窄，強制橫排 */
	}
}