/* 陶藝設計實驗室：典藏大圖輪播（2026.10.11 v3）——只用在 ceramics-lab-museum.html，接在 ceramics-lab.css 之後
   概念：先看到展名（知道身在何處），再遇見一面滿版的典藏大圖；圖上不放字，圖下只留一行說明與進度。
   圖片：2026改版/陶藝輪播/輪播圖 的 9 張（不含《素白之間》，該件只放藝廊）；1600×900 攝影棚圖，同色背景、作品置中。 */
.cm-hero { --hd: 76px; --head: 118px; --foot: 64px; --dur: 7.5s; position: relative; padding-top: var(--hd); background: var(--wall); color: var(--ink); }
.cm-in { width: min(1320px, calc(100% - 64px)); margin: 0 auto; }

/* ── 上方展名列 ── */
.cm-head { height: var(--head); display: flex; align-items: center; }
.cm-head-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cm-brand .ce-crumb { margin: 0 0 12px; font-size: 12px; }
.cm-brand-row { display: flex; align-items: center; gap: 22px; }
.cm-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: .32em; color: var(--ink); white-space: nowrap; }
.cm-sub { margin: 0; padding-left: 22px; border-left: 1px solid var(--ink-3); font-family: var(--serif); font-size: 13px; line-height: 1.75; letter-spacing: .16em; color: var(--ink-2); }
.cm-en { display: block; font: italic 500 15px/1.4 var(--en); letter-spacing: .12em; color: var(--clay); }
.cm-now { display: flex; align-items: center; gap: 18px; padding-bottom: 2px; }
.cm-count { font: italic 400 14px/1 var(--en); letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }
.cm-count b { font-size: 26px; font-weight: 400; color: var(--clay); }
.cm-cap { margin: 0; min-width: 190px; text-align: right; transition: opacity .5s ease, transform .5s ease; }
.cm-cap.swap, .cm-d.swap { opacity: 0; transform: translateY(5px); }
.cm-t { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; letter-spacing: .12em; color: var(--ink); }
.cm-e { display: block; margin-top: 2px; font: italic 400 15px/1.2 var(--en); color: var(--ink-3); }
.cm-arrows { display: flex; gap: 8px; }
.cm-arrows button { width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; transition: background .25s, color .25s; }
.cm-arrows button:hover, .cm-arrows button:focus-visible { background: var(--ink); color: #fff; outline: none; }

/* ── 大圖舞台：圖上不放任何字 ── */
.cm-stage { position: relative; height: clamp(31.25vw, calc(100svh - var(--hd) - var(--head) - var(--foot)), 56.25vw); overflow: hidden; background: #B9AFA5; }
.cm-slides, .cm-slide { position: absolute; inset: 0; margin: 0; }
.cm-slide { opacity: 0; transition: opacity 1.8s ease; }
.cm-slide.on { opacity: 1; z-index: 1; }
.cm-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.025); transform-origin: center; transition: transform 9s cubic-bezier(.2, .6, .2, 1); }
.cm-slide.on img { transform: none; }

/* ── 圖下：一行說明＋進度短線 ── */
.cm-foot { height: var(--foot); border-bottom: 1px solid var(--line); }
.cm-foot-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cm-d { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--serif); font-size: 14px; letter-spacing: .08em; color: var(--ink-2); transition: opacity .5s ease, transform .5s ease; }
.cm-k { margin-right: 16px; padding-right: 16px; border-right: 1px solid var(--line); font-family: var(--sans); font-size: 12px; letter-spacing: .26em; color: var(--clay); }
.cm-bars { flex: none; display: flex; gap: 6px; }
.cm-bars button { position: relative; width: 28px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.cm-bars button::before, .cm-bars i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.cm-bars i { background: var(--clay); transform-origin: left; transform: scaleX(0); }
.cm-bars button.done i { transform: scaleX(1); opacity: .45; }
.cm-bars button.on i.run { animation: cmProg var(--dur) linear forwards; }
.cm-bars button:hover::before, .cm-bars button:focus-visible::before { background: var(--ink-3); }
.cm-bars button:focus-visible { outline: none; }
.cm-hero.paused .cm-bars i.run { animation-play-state: paused; }
@keyframes cmProg { to { transform: scaleX(1); } }

/* ── 中尺寸：英文詩句收起 ── */
@media (max-width: 1100px) {
	.cm-sub { display: none; }
	.cm-cap { min-width: 0; }
}
/* ── 手機：圖完整 16:9 ── */
@media (max-width: 760px) {
	.cm-hero { --hd: 64px; --head: auto; --foot: auto; }
	.cm-in { width: calc(100% - 32px); }
	.cm-head { padding: 20px 0 16px; }
	.cm-head-in { flex-direction: column; align-items: stretch; gap: 14px; }
	.cm-title { font-size: 30px; letter-spacing: .26em; }
	.cm-now { justify-content: space-between; gap: 12px; }
	.cm-cap { flex: 1; text-align: left; }
	.cm-t { font-size: 17px; }
	.cm-arrows button { width: 36px; height: 36px; }
	.cm-stage { height: 56.25vw; min-height: 0; }
	.cm-foot-in { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0 16px; }
	.cm-d { white-space: normal; line-height: 1.8; }
	.cm-k { display: block; margin: 0 0 2px; padding: 0; border: 0; }
	.cm-bars { gap: 4px; }
	.cm-bars button { flex: 1; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-slide, .cm-slide img, .cm-cap, .cm-d { transition: none; }
	.cm-slide img { transform: none; }
	.cm-bars button.on i.run { animation: none; transform: scaleX(1); }
}

/* ── 藝廊索引／典藏選粹：改用 16:9 攝影棚圖 ── */
.ce-index { row-gap: 26px; }
.ce-index img { aspect-ratio: 4 / 3; }
.ce-pick .ce-zoom img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 760px) { .ce-index { grid-template-columns: repeat(10, 38%); } }

/* ── 教學典藏：分頁選單捲動時固定在本頁導覽下方（top 由 JS 依導覽高度設定） ── */
.ce-teach .ce-tabs { position: sticky; top: var(--tabs-top, 128px); z-index: 25; margin-left: -12px; margin-right: -12px; padding: 14px 12px 0; background: rgba(245, 241, 234, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ce-teach .ce-tabs.stuck { box-shadow: 0 10px 18px -16px rgba(34, 32, 28, .45); }