/* ==================================================================
 * 大郁 - 服務流程卡片（Service Card）
 *
 * 結構：
 *  .dy-sc__grid       → 整排 grid
 *  .dy-sc             → 單張卡片（單一金色邊框，背景 #292421）
 *    .dy-sc__img-wrap → 圖片區（position:relative，供編號圓圈定位）
 *      .dy-sc__img    → 圖片
 *      .dy-sc__num-wrap → 編號圓圈（絕對定位在圖片底部中央）
 *    .dy-sc__body     → 文字區（標題 + 描述）
 * ================================================================== */

.dy-sc {
	--dy-sc-card-bg:      #292421;
	--dy-sc-border-color: #B67B19;
	--dy-sc-border-w:     1px;
	--dy-sc-radius:       4px;
	--dy-sc-num-size:     52px;
	--dy-sc-num-bg:       #B67B19;
	--dy-sc-num-color:    #292421;
	--dy-sc-num-offset:   20px;   /* 編號圓圈往下突出量（Elementor 可調） */
}

/* ---------- Grid（欄數與間距由 Elementor 控制項輸出）---------- */
.dy-sc__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* fallback，Elementor selector 會覆蓋 */
	gap: 24px;                              /* fallback，Elementor selector 會覆蓋 */
}

/* ---------- 單張卡片（金色框 + 深色背景）---------- */
.dy-sc {
	display: flex;
	flex-direction: column;
	/* border-style 由 Elementor 控制項動態輸出，預設 solid */
	border: var(--dy-sc-border-w) solid var(--dy-sc-border-color);
	border-style: solid; /* fallback，Elementor selector 會覆蓋此行 */
	border-radius: var(--dy-sc-radius);
	background: var(--dy-sc-card-bg);
	overflow: hidden;
}

/* ---------- 圖片區 ---------- */
.dy-sc__img-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 100%;   /* 預設 1:1，Elementor 可調 */
	overflow: visible;      /* 讓編號圓圈可以突出圖片底部 */
	flex-shrink: 0;
}

.dy-sc__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- 編號圓圈（絕對定位在圖片底部中央）---------- */
.dy-sc__num-wrap {
	position: absolute;
	/* --dy-sc-num-offset 由 Elementor「編號圓圈偏移量」控制項設定 */
	bottom: calc(-1 * var(--dy-sc-num-offset, 20px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.dy-sc__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dy-sc-num-size);
	height: var(--dy-sc-num-size);
	border-radius: 50%;
	background-color: var(--dy-sc-num-bg); /* 用 background-color，不與 gradient 等自訂衝突 */
	color: var(--dy-sc-num-color);
	font-size: 1.1em;
	line-height: 1;
	border: 0 solid transparent; /* 框線預設隱藏，Elementor 控制項可調 */
	box-sizing: border-box;       /* 框線不撐大圓圈尺寸 */
}

/* ---------- 文字區 ---------- */
.dy-sc__body {
	/* padding-top 由 Elementor「編號圓圈與標題間距」控制項動態輸出，不在此硬編碼 */
	/* 預設：偏移量 + 間距，確保圓圈不遮住文字 */
	padding-top: calc(var(--dy-sc-num-offset, 20px) + 12px);
	padding-right: 16px;
	padding-bottom: 24px;
	padding-left: 16px;
	text-align: center;
	flex: 1;
}

.dy-sc__title {
	margin: 0 0 10px;
	color: #ffffff;
}

.dy-sc__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
}

/* ==================================================================
 * RWD
 * ================================================================== */
@media (max-width: 1024px) {
	.dy-sc__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.dy-sc__grid {
		grid-template-columns: 1fr;
	}
}