/* ==================================================================
 * 大郁 - 圖片標題卡片（Image Caption Card）
 *
 * 結構：
 *  .dy-icc__grid   → 整排 grid
 *  .dy-icc         → 單張卡片
 *    .dy-icc__bg   → 圖片背景（含遮罩）
 *    .dy-icc__box  → 雙框文字框
 *      .dy-icc__text → 標題文字
 * ================================================================== */

.dy-icc {
	--dy-icc-overlay:       rgba(0, 0, 0, 0.60);
	--dy-icc-overlay-hover: rgba(0, 0, 0, 0.40);
	--dy-icc-box-gap:       8px;     /* 雙框內間距 */
	--dy-icc-box-color:     #ffffff; /* 框線顏色 */
	--dy-icc-text-color:    #ffffff;
	--dy-icc-ratio:         75%;     /* 卡片高寬比（padding-bottom trick） */
}

/* ---------- Grid ---------- */
.dy-icc__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0; /* 預設無間距，Elementor 可調 */
}

/* ---------- 單張卡片 ---------- */
.dy-icc {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

/* 高寬比撐高 */
.dy-icc::before {
	content: '';
	display: block;
	padding-bottom: var(--dy-icc-ratio);
}

/* ---------- 圖片背景 + 遮罩 ---------- */
.dy-icc__bg {
	position: absolute;
	inset: 0;
	background-color: #333;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* 遮罩：偽元素疊在圖片上 */
	transition: background-color 0.3s ease;
}

.dy-icc__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--dy-icc-overlay);
	transition: background 0.3s ease;
}

.dy-icc:hover .dy-icc__bg::after {
	background: var(--dy-icc-overlay-hover);
}

/* ---------- 文字框（雙框）---------- */
.dy-icc__box {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;        /* 預設置中，Elementor 可調 */
	justify-content: flex-start;
	padding: 20px;
	z-index: 1;
}

/* 連結包裝（去除底線與顏色繼承） */
.dy-icc__link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

/* 外框 */
.dy-icc__frame-outer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dy-icc-box-color);
	padding: var(--dy-icc-box-gap);
	background-color: transparent;
	transition: background-color 0.3s ease; /* Hover 背景過渡，Elementor 可調 */
}

/* 內框 */
.dy-icc__frame-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dy-icc-box-color);
	padding: 8px 16px;
}

/* ---------- 標題文字 ---------- */
.dy-icc__text {
	margin: 0;
	color: var(--dy-icc-text-color);
	white-space: nowrap;
}

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

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