/* 作品頁（work/*.html）：新網站的版型，素材來自舊 Wix 作品頁。頁面由 notes/build_work_pages.py 產生。 */

/* 標題區：有 Wix 的背景素材時，鋪在後面並壓暗 */
.pj-hero { position: relative; overflow: hidden; }
.pj-hero-bg { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
.pj-hero-bg img, .pj-hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-hero.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55) 40%, var(--bg) 96%); }
/* 有背景素材時，標題區往上延伸到選單列後面，選單的毛玻璃就會透出背景（--hh 是選單高度，main.js 會量） */
.pj-hero.has-bg { margin-top: calc(-1 * var(--hh, 58px)); padding-top: var(--hh, 58px); }
.project-page .site-header { border-bottom-color: rgba(255,255,255,.08); }
.pj-hero .project-hero { position: relative; z-index: 1; padding-block: 40px 32px; gap: 22px; }
.pj-hero h1 { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.05; }

/* 完整影片 */
.pj-films { display: grid; gap: 12px; padding-bottom: 8px; }
.pj-film { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pj-film figcaption { font-size: 12px; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.pj-film .media img, .pj-film .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-film .media video[controls] { object-fit: contain; background: #000; }
.wx-dead { display: grid; place-items: center; border: 1px dashed var(--line); }

/* 概念 */
.pj-brief { padding-block: 48px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px 40px; border-bottom: 1px solid var(--line); }
.pj-brief-h { margin: 0; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; }
.pj-brief-h small { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; letter-spacing: .08em; }
.pj-brief-body { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.pj-zh { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.8; letter-spacing: .02em; text-wrap: pretty; }
.pj-en { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.pj-en p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
@media (max-width: 700px) { .pj-brief { grid-template-columns: 1fr; } }

/* 素材區塊：同一列等高，寬度照素材比例分 */
.pj-sec { padding-block: 0 40px; }
.pj-sec .section-head { margin-bottom: 12px; }
.pj-sec .section-head h2 { font-size: clamp(22px, 2.2vw, 32px); }
.pj-row { display: flex; gap: 8px; margin: 0 auto 8px; }
.pj-row > .pj-cell { flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); }
.pj-cell img, .pj-cell video, .pj-band img, .pj-band video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-band { aspect-ratio: var(--ar); margin-bottom: 8px; overflow: hidden; }

/* 元素：等大方格，填滿整個寬度，素材完整顯示（不裁切） */
.pj-elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pj-el { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #111113; display: grid; place-items: center; }
.pj-el img, .pj-el video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Credits：有 Wix 的背景影片時鋪在後面 */
.pj-credits { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.pj-credits .section { position: relative; z-index: 1; padding-block: 56px; }
.pj-credit-bg { position: absolute; inset: 0; z-index: 0; border-radius: 0; opacity: .35; }
.pj-credit-bg img, .pj-credit-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-credit-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px; color: var(--accent); }
.pj-credits .credits { font-size: 13px; gap: 12px 28px; }

@media (max-width: 700px) {
  .pj-hero h1 { font-size: 22px; line-height: 1.15; }
  .pj-row { flex-wrap: wrap; }
  .pj-row.n3 > .pj-cell, .pj-row.n4 > .pj-cell { flex-basis: calc(50% - 4px); }
  .pj-elements { grid-template-columns: repeat(3, 1fr); }
  .pj-facts { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 16px; }
  .pj-facts > div { border-left: 0; padding: 12px 0; }
  .pj-facts .f-role { grid-column: 1 / -1; }
}

/* 作品頁全部黑底：素材載入前也不顯示灰色斜線格 */
.project-page .media { background: #000; }

/* 玻璃效果：標題區的資訊欄、Credits 疊在 Wix 背景素材上時用毛玻璃面板 */
.pj-hero .facts, .pj-credits.has-bg .section {
  background: var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: 8px; box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* 資訊欄：欄寬照內容分配，欄與欄之間細線分隔 */
.pj-facts { display: flex; gap: 0; padding: 0; border-top: 0; width: fit-content; max-width: 100%; }
.pj-facts > div { flex: 0 1 auto; }
.pj-facts > div { padding: 16px 28px; border-left: 1px solid var(--glass-edge); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pj-facts > div:first-child { border-left: 0; }
.pj-facts dt { font-size: 11px; color: var(--accent); }
.pj-facts dd { font-size: 15px; line-height: 1.45; }
.pj-facts dd small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .pj-facts { display: grid; grid-template-columns: 1.5fr 1fr 1fr; padding: 0; width: auto; }
  .pj-facts > div { padding: 14px 16px !important; border-left: 1px solid var(--glass-edge); min-width: 0; }
  .pj-facts > div:first-child { border-left: 0; }
  .pj-facts .f-year, .pj-facts .f-type { min-width: 0; }
  .pj-facts .f-role { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--glass-edge); }
  .pj-chips { flex-wrap: wrap; }
}
.pj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chips span { font-size: 12px; padding: 3px 10px; border: 1px solid var(--glass-edge); border-radius: 999px; background: rgba(255,255,255,.04); white-space: nowrap; }
.pj-credits.has-bg .section { margin-block: 40px; padding: 32px 28px; }
.pj-credits.has-bg .pj-credit-bg { opacity: .6; }

/* 作品頁內容拉寬，跟首頁一樣用滿畫面 */
.project-page main .wrap { max-width: 1440px; padding-inline: clamp(16px, 8vw, 160px); }

/* 資訊欄 v2：不用框，改成整寬的規格列。上下細線、欄間細線，數值用大字標題字體，標籤前面有編號 */
.pj-hero .pj-facts {
  background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, 2fr);
  border-top: 1px solid var(--text, #EDEBE6); border-bottom: 1px solid var(--line); counter-reset: fact; margin-top: 8px;
}
.pj-hero .pj-facts > div { padding: 18px 24px 22px; border-left: 1px solid var(--line); gap: 14px; counter-increment: fact; }
.pj-hero .pj-facts > div:first-child { border-left: 0; padding-left: 0; }
.pj-hero .pj-facts dt { display: flex; gap: 10px; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.pj-hero .pj-facts dt::before { content: counter(fact, decimal-leading-zero); color: var(--accent); }
.pj-hero .pj-facts dd { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.15; letter-spacing: -.01em; }
.pj-hero .pj-facts dd small { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; margin-top: 6px; }
.pj-hero .pj-facts .f-year dd { color: var(--accent); }
.pj-hero .pj-facts .pj-chips { font-family: inherit; font-weight: 400; font-size: inherit; gap: 8px; }
.pj-hero .pj-facts .pj-chips span { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 6px 12px; border: 1px solid rgba(198,255,61,.45); color: var(--accent); background: rgba(198,255,61,.06); }
@media (max-width: 700px) {
  .pj-hero .pj-facts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .pj-hero .pj-facts > div { padding: 14px 12px 16px !important; border-left: 1px solid var(--line) !important; border-top: 0 !important; gap: 10px; }
  .pj-hero .pj-facts > div:first-child { border-left: 0 !important; padding-left: 0 !important; }
  .pj-hero .pj-facts dd { font-size: 16px; }
  .pj-hero .pj-facts .f-role { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line) !important; padding-left: 0 !important; }
}
/* 資訊欄內容一律單行：每欄照內容寬，角色欄放不下時整欄換到下一列（不會被切掉） */
.pj-hero .pj-facts { display: flex; flex-wrap: wrap; }
.pj-hero .pj-facts > div { flex: 0 0 auto; padding-right: 40px; }
.pj-hero .pj-facts .f-role { flex: 1 0 auto; }
.pj-hero .pj-facts dd, .pj-hero .pj-facts dt { white-space: nowrap; }
.pj-hero .pj-facts .pj-chips { flex-wrap: nowrap; }
/* 字不要太重：數值用內文字體中等粗細，拿掉編號 */
.pj-hero .pj-facts dt::before { content: none; }
.pj-hero .pj-facts dt { color: var(--accent); }
.pj-hero .pj-facts dd { font-family: var(--body, 'Noto Sans TC', system-ui, sans-serif); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: 0; }
.pj-hero .pj-facts .f-year dd { color: inherit; }
.pj-hero .pj-facts .pj-chips span { font-family: inherit; font-size: 13px; letter-spacing: 0; }
/* 手機：每項一列，標籤在左、內容在右；角色標籤橫向滑動，不換行 */
@media (max-width: 700px) {
  .pj-hero .pj-facts { display: block; }
  .pj-hero .pj-facts > div { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .pj-hero .pj-facts > div:first-child { border-top: 0 !important; }
  .pj-hero .pj-facts dd { font-size: 16px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pj-hero .pj-facts dd small { display: none; }
  .pj-hero .pj-facts .f-role { flex-direction: column; align-items: flex-start; }
  .pj-hero .pj-facts .pj-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; text-align: left; scrollbar-width: none; }
}
@media (max-width: 700px) { .pj-hero .pj-facts .pj-chips { gap: 6px; } .pj-hero .pj-facts .pj-chips span { font-size: 11px; padding: 5px 9px; letter-spacing: 0; } }
/* 資訊欄壓扁、分隔線統一同一種顏色 */
.pj-hero .pj-facts { --fl: rgba(255,255,255,.16); border-top: 1px solid var(--fl); border-bottom: 1px solid var(--fl); }
.pj-hero .pj-facts > div { padding-top: 12px; padding-bottom: 13px; gap: 6px; border-color: var(--fl) !important; }
.pj-hero .pj-facts dd { line-height: 1.3; }
.pj-hero .pj-facts .pj-chips span { padding: 3px 10px; }
@media (max-width: 700px) { .pj-hero .pj-facts > div { padding: 10px 0 !important; } }
/* Credits 分組（金馬這類長名單） */
.pj-cgroup + .pj-cgroup { margin-top: 28px; }
.pj-cgroup-h { margin: 0 0 12px; font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: .06em; }
.pj-cgroup .credits { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* 中間的影片和素材收窄一點、置中（不要撐滿整個內容欄） */
.pj-film { width: min(100%, 960px); margin-inline: auto; }
.pj-sec .pj-row, .pj-sec .pj-band, .pj-sec .pj-elements { width: min(100%, 960px); margin-inline: auto; }

/* 個人負責段落：角色標籤後面的小時間軸＋時間碼（單行，點了從那一秒播放） */
.pj-hero .pj-facts .pj-part { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 400 12px/1 var(--mono); letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.pj-part-bar { position: relative; display: block; width: 56px; height: 3px; background: rgba(255,255,255,.16); }
.pj-part-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--s); right: calc(100% - var(--e)); background: var(--accent); }
.pj-hero .pj-facts .pj-part:hover, .pj-hero .pj-facts .pj-part:focus-visible { color: var(--accent); }
@media (max-width: 700px) { .pj-hero .pj-facts .pj-part { font-size: 11px; } .pj-part-bar { width: 40px; } }
.pj-hero .pj-facts .pj-part span { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
/* 手機：角色標籤也靠右（標籤多時從左往右排、可橫向滑動，不會被切掉開頭） */
@media (max-width: 700px) {
  .pj-hero .pj-facts .f-role { flex-direction: row; align-items: center; }
  .pj-hero .pj-facts .f-role .pj-chips { min-width: 0; }
  .pj-hero .pj-facts .f-role .pj-chips > :first-child { margin-left: auto; }
}
/* 角色有總類時（Motion：A、B、C）：總類標籤在前，細線隔開，後面是各項目 */
.pj-sep { display: block; flex: none; align-self: center; width: 1px; height: 14px; background: rgba(255,255,255,.28); margin: 0 2px; }
/* 手機：角色標籤放不下時整組換到下一行靠右，不被切掉 */
@media (max-width: 700px) {
  .pj-hero .pj-facts .f-role { flex-wrap: wrap; row-gap: 8px; }
  .pj-hero .pj-facts .f-role .pj-chips { margin-left: auto; max-width: 100%; }
}
/* 分隔線精簡：概念區下緣、中英文之間不再畫線，每個區塊只留小標題下那一條 */
.pj-brief { border-bottom: 0; }
.pj-en { border-top: 0; padding-top: 0; margin-top: 10px; }
/* 分隔線放在大標上方（不在下方） */
.pj-sec .section-head { border-bottom: 0; padding-bottom: 0; border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 20px; }
.pj-brief { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 40px; }

/* 直式影片（IG Reels）：9:16，寬度收窄置中 */
.ratio-9x16 { aspect-ratio: 9 / 16; }
.pj-film .media.pj-tall { width: min(100%, 420px); margin-inline: auto; }
.pj-film .media.pj-tall video[controls] { object-fit: cover; }
/* 直式影片頁：影片在左，專案概念在右（手機上下排） */
.pj-split { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 8px 48px; }
.pj-split .pj-films { padding: 0; }
.pj-split .pj-film, .pj-split .pj-film .media.pj-tall { width: 100%; margin: 0; }
.pj-split .pj-brief { display: flex; flex-direction: column; gap: 24px; padding: 0; margin: 0; border: 0; }
@media (max-width: 800px) { .pj-split { grid-template-columns: 1fr; gap: 32px; } .pj-split .pj-film .media.pj-tall { width: min(100%, 420px); margin-inline: auto; } }