/**
 * 圖片切換樣式
 * 全部 class 皆加 .dy- 前綴，不覆蓋 WordPress / Elementor 原生 class。
 *
 * 顏色皆以 CSS 變數設定預設值；Elementor Style 面板設定後由 selectors 直接覆寫，
 * 故此檔只負責「佈局與動態行為」，顏色僅作為無設定時的 fallback。
 */


.dy-material-card{
	display: block;
	font-family: "Noto Serif TC", serif;
	text-align: left;       /* 預設內部文字靠左，由「文字對齊」控制項覆蓋 */
}

/* ---------- 標題區 ---------- */
.dy-material-card__head{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 26px;
}

/* 左側編號 + 直線分隔 */
.dy-material-card__index{
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 6px;
}

.dy-material-card__num{
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	/* 預設白色；Elementor Style 面板設定後覆寫 */
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	transition: color .35s ease, -webkit-text-fill-color .35s ease,
	            background .35s ease, background-image .35s ease;
}

/* Hover 預設金色漸層 */
.dy-material-card:hover .dy-material-card__num{
	background: linear-gradient(180deg, #B67B19 0%, #D1A64F 50%, #A96F14 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dy-material-card__divider{
	width: 1px;
	height: 44px;
	/* 預設白色；Elementor Style 面板設定後覆寫 */
	background: #ffffff;
	opacity: .8;
	transition: background .35s ease;
}

/* ---------- 中英文標題 ---------- */
.dy-material-card__title{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dy-material-card__zh{
	font-size: 32px;
	font-weight: 700;
	line-height: 140%;
	/* 預設白色；Elementor Style 面板設定後覆寫 */
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	transition: color .35s ease, -webkit-text-fill-color .35s ease,
	            background .35s ease, background-image .35s ease;
}

/* Hover 預設金色漸層；Elementor 顏色選擇器設定後改為純色 */
.dy-material-card:hover .dy-material-card__zh{
	background: linear-gradient(180deg, #B67B19 0%, #D1A64F 50%, #A96F14 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dy-material-card__en{
	font-size: 22px;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: .06em;
	/* 預設白色；Elementor Style 面板設定後覆寫 */
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	transition: color .35s ease, -webkit-text-fill-color .35s ease,
	            background .35s ease, background-image .35s ease;
}

/* Hover 預設金色漸層；Elementor 顏色選擇器設定後改為純色 */
.dy-material-card:hover .dy-material-card__en{
	background: linear-gradient(180deg, #B67B19 0%, #D1A64F 50%, #A96F14 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------- 連結 reset（包住圖片容器的 <a>）---------- */
.dy-material-card__link{
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

/* ---------- 圓形圖片容器 ---------- */
.dy-material-card__circle{
	position: relative;
	/* 預設尺寸；Elementor 寬度/高度 Slider 分別覆寫 width / height */
	width: 280px;
	height: 280px;
	max-width: 100%;       /* 不超出父層寬度 */
	/* 預設完全圓形；Elementor 圓角 Slider 的 selectors 會覆寫 */
	border-radius: 50%;
	overflow: hidden;
	/* 框線與陰影皆不預設，使用者在 Style 面板自行設定 */
}

/* 預設圖片：正常顯示 */
.dy-material-card__img--default{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	transition: opacity .5s ease;
}

/* Hover 切換圖片：平時透明，疊在預設圖片上方 */
.dy-material-card__img--hover{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity .5s ease;
}

/* 有 hover 圖片時（has-hover class）：滑入後交換透明度 */
.dy-material-card__circle.has-hover:hover .dy-material-card__img--default{
	opacity: 0;
}
.dy-material-card__circle.has-hover:hover .dy-material-card__img--hover{
	opacity: 1;
}

/* 讓 hover 圖片切換不被 Wrapper Link 蓋住（Elementor wrapper hover 補強） */
.elementor-widget-dy_material_card:hover .dy-material-card__img--default{
	opacity: 0;
}
.elementor-widget-dy_material_card:hover .dy-material-card__img--hover{
	opacity: 1;
}

/* ---------- 敘述 ---------- */
.dy-material-card__desc{
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.7;
	/* 預設白色；Elementor Style 面板設定後覆寫 */
	color: #ffffff;
	transition: color .35s ease;
}

/* ---------- 無障礙：使用者關閉動畫時不做過場 ---------- */
@media (prefers-reduced-motion: reduce){
	.dy-material-card__num,
	.dy-material-card__divider,
	.dy-material-card__zh,
	.dy-material-card__en,
	.dy-material-card__desc,
	.dy-material-card__img--default,
	.dy-material-card__img--hover{
		transition: none;
	}
}

/* ---------- RWD：768px 以下 ---------- */
@media (max-width: 768px){
	.dy-material-card__zh{ font-size: 26px; }
	.dy-material-card__en{ font-size: 18px; }
	.dy-material-card__num{ font-size: 20px; }
	.dy-material-card__divider{ height: 38px; }
	/* 手機版圖片容器高度預設縮小；寬度維持 100% 跟著父層走 */
	.dy-material-card__circle{ height: 240px; }
}