/* ==================================================================
 * 大郁 - 圓形流程時間軸
 * 所有可調顏色 / 尺寸皆以 CSS 變數提供，數值由 Elementor 控制項寫入，
 * 此檔只負責「版面與各狀態的邏輯」。
 * ================================================================== */

.dy-ptl {
	/* 版面 */
	--dy-ptl-gap: 20px;
	--dy-ptl-circle-size: 180px;
	--dy-ptl-item-basis-tablet: 42%;
	--dy-ptl-item-basis-mobile: 76%;

	/* 圓框 */
	--dy-ptl-border-w: 1px;
	--dy-ptl-border-color: rgba(255, 255, 255, 0.55);
	--dy-ptl-border-color-hover: #ffffff;

	/* 編號與連線 */
	--dy-ptl-line-color: rgba(255, 255, 255, 0.35);
	--dy-ptl-num-color: rgba(255, 255, 255, 0.85);
	--dy-ptl-num-bg: #2b2118;             /* 預設背景色（需與區塊背景同色，蓋住貫穿線） */
	--dy-ptl-num-color-hover: #ffffff;
	--dy-ptl-num-bg-hover: #B58A45;       /* 編號 hover 背景色 */
	--dy-ptl-num-border-hover: #ffffff;   /* 編號 hover 框線色 */

	/* 標題 */
	--dy-ptl-title-color: #ffffff;
	--dy-ptl-title-color-hover: #c8a45d;

	/* 敘述 */
	--dy-ptl-desc-color: rgba(255, 255, 255, 0.75);
	--dy-ptl-desc-color-hover: #c8a45d;

	position: relative;
}

/* ---------- 滿版貫穿線（獨立於內容寬度）---------- */
.dy-ptl__fullline {
	position: absolute;
	left: -9999px;    /* 向左延伸超出任何容器 */
	right: -9999px;
	top: 0;           /* 由 JS-free CSS 對齊：用 padding-top 推到編號圓圈中心 */
	height: 1px;
	background: var(--dy-ptl-line-color);
	pointer-events: none;
}

/* ---------- 內容區：限制最大寬度、置中 ---------- */
.dy-ptl__inner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

/* ---------- 軌道與項目 ---------- */
.dy-ptl__track {
	display: flex;
	gap: var(--dy-ptl-gap);
	align-items: flex-start;
	position: relative;
}

.dy-ptl__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---------- 頂部：編號圓圈 ---------- */
.dy-ptl__head {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 18px;
	position: relative;
	z-index: 1;
}

.dy-ptl__num {
	flex: 0 0 auto;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	border: 1px solid var(--dy-ptl-line-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dy-ptl-num-color);
	background: var(--dy-ptl-num-bg);    /* 蓋住貫穿線 */
	position: relative;
	z-index: 1;
	transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

/* ---------- 圓形圖片 ---------- */
.dy-ptl__circle {
	position: relative;
	width: var(--dy-ptl-circle-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: var(--dy-ptl-border-w) solid var(--dy-ptl-border-color);
	overflow: hidden;
	transition: border-color 0.3s ease;
}

.dy-ptl__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.35s ease;
}

/* Hover 圖預設隱藏，滑上去才淡入 */
.dy-ptl__img--hover {
	opacity: 0;
}

/* ---------- 標題與敘述 ---------- */
.dy-ptl__title {
	margin: 16px 0 8px;
	color: var(--dy-ptl-title-color);
	transition: color 0.3s ease;
}

.dy-ptl__desc {
	margin: 0;
	color: var(--dy-ptl-desc-color);
	transition: color 0.3s ease;
}

/* ==================================================================
 * Hover ／ 預設強調（.is-active）狀態
 * ================================================================== */
.dy-ptl__item:hover .dy-ptl__circle,
.dy-ptl__item.is-active .dy-ptl__circle {
	border-color: var(--dy-ptl-border-color-hover);
}

.dy-ptl__item:hover .dy-ptl__img--hover,
.dy-ptl__item.is-active .dy-ptl__img--hover {
	opacity: 1;
}

/* 只有在「有上傳 Hover 圖」時，一般圖才需要淡出 */
.dy-ptl__item:hover .dy-ptl__img--hover ~ .dy-ptl__img--normal,
.dy-ptl__item.is-active .dy-ptl__img--hover ~ .dy-ptl__img--normal {
	opacity: 0;
}

/* 編號圓圈 hover：背景填色 + 框線 + 文字 */
.dy-ptl__item:hover .dy-ptl__num,
.dy-ptl__item.is-active .dy-ptl__num {
	color: var(--dy-ptl-num-color-hover);
	border-color: var(--dy-ptl-num-border-hover);
	background-color: var(--dy-ptl-num-bg-hover);
}

.dy-ptl__item:hover .dy-ptl__title,
.dy-ptl__item.is-active .dy-ptl__title {
	color: var(--dy-ptl-title-color-hover);
}

.dy-ptl__item:hover .dy-ptl__desc,
.dy-ptl__item.is-active .dy-ptl__desc {
	color: var(--dy-ptl-desc-color-hover);
}

/* ==================================================================
 * 貫穿線對齊：讓 fullline 垂直位置對準編號圓圈中心
 * 圓圈高度 2.4em，預設字級 16px → 2.4*16 = 38.4px，中心 ≈ 19px
 * 用 margin-top 把 fullline 推到正確位置
 * ================================================================== */
.dy-ptl__fullline {
	margin-top: 19px;  /* 圓圈中心高度（與字級連動，可在 Elementor 調整編號字體大小時微調） */
}

/* ==================================================================
 * RWD：平板（≤1024px）起改為可左右滑動，手機（≤767px）每欄更寬
 * ================================================================== */
@media (max-width: 1024px) {
	.dy-ptl__track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 12px;
	}
	.dy-ptl__item {
		flex: 0 0 var(--dy-ptl-item-basis-tablet);
		scroll-snap-align: center;
	}
}

@media (max-width: 767px) {
	.dy-ptl__item {
		flex-basis: var(--dy-ptl-item-basis-mobile);
	}
}

/* 捲軸樣式（低調） */
.dy-ptl__track::-webkit-scrollbar {
	height: 6px;
}
.dy-ptl__track::-webkit-scrollbar-thumb {
	background: rgba(128, 128, 128, 0.4);
	border-radius: 3px;
}