/**
 * 產品／服務分類單頁樣式 — single-pd（CPT pd）。
 *
 * 依 DESIGN.md：暖白 canvas、hairline 分層、銅棕稀有 accent、無陰影（案例圖除外）、
 * 亮帶↔深帶節奏、作品優先、圓角 0–6px、1440 max、手機單欄不橫捲。
 *
 * 依賴 :root token（由 style.css 提供）。以下為 style.css 未載入時的安全 fallback。
 * lightbox overlay 樣式（.dd-lightbox*）本檔自帶，pd 頁不依賴 single-case.css 是否載入。
 */
:root {
	--ink: #1C1E20;
	--paper: #F4F2ED;
	--metal: #6D7378;
	--steel: #323A40;
	--copper: #9A744D;
	--white: #FFFFFF;
	--copper-hover: rgba(154, 116, 77, .85);
	--ink-on-dark: #F4F2ED;
	--metal-on-dark: #A9AEB2;
	--hairline: rgba(109, 115, 120, .28);
	--hairline-strong: rgba(109, 115, 120, .5);
	--hairline-on-dark: rgba(244, 242, 237, .16);
	--font-zh: "Noto Sans TC", sans-serif;
	--font-en: "Inter", "Manrope", sans-serif;
	--radius: 4px;
	--sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px;
	--sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px;
	--sp-section: 96px; --sp-section-sm: 56px;
	--container: 1440px; --gutter: 32px;
	--ease-out: cubic-bezier(.16, .84, .44, 1);
	--dur-fast: 180ms; --dur: 280ms; --dur-slow: 400ms;
}

/* ── 版型骨架（頁面局部，避免依賴全站 .container 已定義） ── */
.pd-single .container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.pd-single .section {
	padding-block: var(--sp-section);
}
.pd-single img {
	max-width: 100%;
	height: auto;
}
.section-white { background: var(--white); color: var(--ink); }
.section-dark { background: var(--steel); color: var(--ink-on-dark); }

/* ── 1. 標題帶（暖白亮帶，乾淨風） ── */
.pd-head {
	background: var(--paper);
	padding-block: var(--sp-xxl) var(--sp-xl);
	border-bottom: 1px solid var(--hairline);
}
.pd-head__crumbs {
	font: 400 .8125rem/1.5 var(--font-zh);
	color: var(--metal);
	letter-spacing: .2px;
	display: flex; gap: var(--sp-xs); align-items: center;
	flex-wrap: wrap;
}
.pd-head__crumbs a { color: var(--metal); text-decoration: none; }
.pd-head__crumbs a:hover { color: var(--copper); }
.pd-head__crumbs span[aria-current] { color: var(--ink); }

.pd-head__row {
	display: flex;
	align-items: center;
	gap: var(--sp-xl);
	margin-top: var(--sp-lg);
}
.pd-head__banner {
	flex: 0 0 auto;
	width: 240px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--hairline);
	background: var(--paper);
}
.pd-head__banner img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
.pd-head__text { min-width: 0; }
.pd-head__eyebrow {
	font: 600 .8125rem/1.3 var(--font-en);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--copper);
}
.pd-head__title {
	font: 700 clamp(1.75rem, 4vw, 2.5rem)/1.2 var(--font-zh);
	color: var(--ink);
	margin: var(--sp-xs) 0 0;
	letter-spacing: 0;
}
.pd-head__count {
	font: 400 .9375rem/1.6 var(--font-zh);
	color: var(--metal);
	margin: var(--sp-sm) 0 0;
}
.pd-head__num {
	color: var(--copper);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ── 2. 範例圖 grid（純白帶） ── */
.pd-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-lg);
}
@media (max-width: 1023px) {
	.pd-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.pd-gallery__grid { grid-template-columns: 1fr; gap: var(--sp-md); }
}

.pd-gallery__item {
	display: block; position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
	cursor: zoom-in;
	border: 1px solid var(--hairline);
	transition: border-color var(--dur) var(--ease-out);
}
.pd-gallery__item:hover { border-color: var(--copper); }
.pd-gallery__item:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.pd-gallery__item img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
	transition: transform var(--dur-slow) var(--ease-out);
}
.pd-gallery__item:hover img { transform: scale(1.04); }
.pd-gallery__item figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 10px 12px;
	font: 400 .8125rem/1.4 var(--font-zh);
	color: var(--ink-on-dark);
	background: linear-gradient(180deg, rgba(28, 30, 32, 0) 0%, rgba(28, 30, 32, .62) 100%);
}

.pd-gallery__empty {
	font: 400 1.0625rem/1.7 var(--font-zh);
	color: var(--metal);
	text-align: center;
	padding-block: var(--sp-xl);
}

/* ── 3. 底部 CTA（深帶） ── */
.pd-cta__wrap {
	max-width: 720px;
}
.pd-cta__title {
	font: 700 clamp(1.5rem, 3vw, 1.875rem)/1.25 var(--font-zh);
	color: var(--ink-on-dark);
	margin: 0;
	letter-spacing: 0;
}
.pd-cta__text {
	font: 400 1.0625rem/1.7 var(--font-zh);
	color: var(--metal-on-dark);
	margin: var(--sp-md) 0 0;
}
.pd-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sp-xl);
	background: var(--copper);
	color: var(--white);
	font: 600 1rem/1 var(--font-zh);
	letter-spacing: .4px;
	border-radius: var(--radius);
	padding: 14px 28px;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pd-cta__btn:hover { background: var(--copper-hover); }
.pd-cta__btn:active { transform: scale(.98); }
.pd-cta__btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* ── Lightbox overlay（本檔自帶；JS 在 assets/js/lightbox.js） ── */
.dd-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: none;
	align-items: center; justify-content: center;
	background: rgba(28, 30, 32, .92);
	padding: env(safe-area-inset-top) var(--gutter) env(safe-area-inset-bottom);
	opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.dd-lightbox.is-open { display: flex; opacity: 1; }
.dd-lightbox__img {
	max-width: min(1200px, 92vw); max-height: 84vh;
	object-fit: contain; border-radius: var(--radius);
	box-shadow: 0 5px 30px rgba(28, 30, 32, .18);
}
.dd-lightbox__cap {
	position: absolute; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom));
	text-align: center; font: 400 .875rem/1.5 var(--font-zh);
	color: var(--metal-on-dark); padding-inline: var(--gutter);
}
.dd-lightbox__btn {
	position: absolute; top: 20px; right: 24px;
	width: 44px; height: 44px; border-radius: 9999px;
	background: rgba(244, 242, 237, .1); border: 1px solid var(--hairline-on-dark);
	color: var(--ink-on-dark); font-size: 22px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease-out);
}
.dd-lightbox__btn:hover { background: rgba(244, 242, 237, .2); }
.dd-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px; border-radius: 9999px;
	background: rgba(244, 242, 237, .1); border: 1px solid var(--hairline-on-dark);
	color: var(--ink-on-dark); font-size: 26px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease-out);
}
.dd-lightbox__nav:hover { background: rgba(244, 242, 237, .2); }
.dd-lightbox__nav.prev { left: 20px; }
.dd-lightbox__nav.next { right: 20px; }
@media (max-width: 639px) {
	.dd-lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
	.dd-lightbox__nav.prev { left: 8px; }
	.dd-lightbox__nav.next { right: 8px; }
}

/* ── 手機收斂 ── */
@media (max-width: 767px) {
	.pd-single .section { padding-block: var(--sp-section-sm); }
	.pd-head { padding-block: var(--sp-xl) var(--sp-lg); }
	.pd-head__row { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
	.pd-head__banner { width: 100%; max-width: 320px; }
}

/* ── 進場 reduced-motion 尊重 ── */
@media (prefers-reduced-motion: reduce) {
	.pd-gallery__item:hover img { transform: none; }
	.dd-lightbox { transition: none; }
}