/* ==========================================================================
   Portfolio CSS (consolidated & commented)
   - Layout: timeline rail & list
   - Components: card (details.porto), hero, embeds
   - Filter dock + slide-down panel
   - Micro tags & chips (single source of truth)
   - Theme variants (project dark theme)
   - Rhythm: vertical spacing, separators
   --------------------------------------------------------------------------
   NOTE:
   * 已去重：.badge-chip / .tags-row / .tag--micro / .filter-chips .chip-toggle
   * 僅保留單一權威版本，避免日後維護混亂
   ========================================================================== */


/* ====== 1) Timeline: rail pinned to container's left edge ================= */

.tl-wrap{
  position: relative;
  /* 軌道距離容器左邊的距離（手機近、桌機遠） */
  --railInset: clamp(16px, 2vw, 10px);
  /* 軌道與卡片的水平距離（卡片離軌道的距離） */
  --railPad: 28px;
  /* 時間點半徑（=直徑/2） */
  --dotR: 4px;
}

.tl-rail{
  position: absolute;
  left: var(--railInset);              /* 固定在容器左邊往內 --railInset */
  top: 120px; bottom: 100px;
  width: 4px;
  background: rgb(0 0 0 / 0.2);
  z-index: 0;
}

.tl-list{
  position: relative; z-index: 1;
  /* 卡片區以「軌道位置 + railPad * 0.75」當左內距，讓卡片微貼近軌道 */
  padding-left: calc(var(--railInset) + var(--railPad) * 0.75);
}

.tl-inner{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.tl-item{ position: relative; margin: 28px 0; }

.tl-dot{
  position: absolute;
  left: calc(-1 * var(--railPad) - var(--dotR));
  top: 18px;
  width: calc(var(--dotR) * 2);
  height: calc(var(--dotR) * 2);
  border-radius: 9999px;
  background: #ffffff29;
  box-shadow: 0 0 0 3px rgba(17,17,17,.16);
}

/* 年份標籤：和點同座標系，含輕微 reveal 動畫 */
.year-label{
  position: sticky; left: 0;
  transform: translateX(calc(-1 * var(--railPad) - var(--dotR))) translateY(6px);
  font-size: .9rem; color: rgb(57 57 63);
  margin: 8px 0 6px 0;
  opacity: .6;
  transition: transform .25s ease, opacity .25s ease;
}
.year-label.in{
  opacity: 1;
  transform: translateX(calc(-1 * var(--railPad) - var(--dotR))) translateY(0);
}

/* 手機：可微調卡片離軌道的距離（不動軌道位置） */
@media (max-width: 640px){
  .tl-wrap{ --railPad: 25px; }
}


/* ====== 2) Card: details chip ============================================ */

details.porto {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
details.porto[open] {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

details.porto > summary {
  list-style: none; cursor: pointer;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
details.porto > summary::marker { display: none; }

.chip-title { font-weight: 600; }
.chip-meta  { color: rgb(82 82 91); font-size: .9rem; }

/* 卡片內容：統一提供 padding-top，避免第一個元素（tags-row）貼上分隔線 */
.porto-body {
  padding: 12px 16px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* 內容節奏（所有相鄰兄弟間距）：統一只留這一組 */
.porto-body > * + * { margin-top: 14px; }


/* ====== 3) Media blocks =================================================== */

.hero {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 12px; margin: 12px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.embed {
  width: 100%; height: 320px;
  border: 0; border-radius: 12px; background: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.embed.sc { height: 120px; } /* tiny SoundCloud */


/* ====== 4) Filter dock + slide-down panel ================================ */

.filter-dock{ position: sticky; top: 0; z-index: 20; }

/* NAV Bar（整條可點，FILTER 置中） */
.filter-bar{
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,12,.96);
  color: #eaeaea;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  cursor: pointer; user-select: none;
}
.filter-bar-title{
  font-size: .9rem; letter-spacing: .14em; font-weight: 600;
}

/* Panel：從上方滑入（覆蓋在 bar 之上） */
.filter-panel{
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(12,12,12,.96);
  color: #e5e5e5;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateY(-100%);
  transition: transform .25s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

/* 打開狀態（點擊或 hover） */
.filter-dock[data-open="1"] .filter-panel{ transform: translateY(0); }

/* 桌面 hover：除非剛按過 Close（data-closed=1） */
@media (hover:hover) and (pointer:fine){
  .filter-dock[data-closed="0"]:hover .filter-panel{
    transform: translateY(0);
  }
}

.filter-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
}
.filter-title{ font-size: .86rem; letter-spacing: .1em; color: #cfcfcf; }
.filter-close{
  height: 28px; width: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #eee; border: 1px solid rgba(255,255,255,.12);
}
.filter-body{ padding: 8px 10px 12px 10px; }
.filter-row{
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 6px 4px;
}
.filter-label{ min-width: 70px; color: #a3a3a3; font-size: .8rem; }

/* Chips on dark panel —— 單一權威版本（移除舊版 auto margin） */
.filter-chips .chip-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  /*padding: .3rem .6rem;*/
  padding: 3px;
  margin: 0 .28rem .28rem 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e5e5;
  font-size: .85rem; font-weight: 500;
}
.filter-chips .chip-toggle.active{
  background: #fff; color: #111; border-color: #fff;
}

/* 打開時（行動裝置）推下主內容避免被 panel 蓋住（依實際 panel 高度微調） */
@media (max-width: 1023.98px){
  body.filters-open main{ margin-top: 104px; }
}


/* ====== 5) Micro tags & small buttons ==================================== */

/* Hashtag 容器與標籤 —— 單一權威版本（用容器 gap 控距） */
.tags-row{ display:flex; flex-wrap:wrap; gap: .35rem .5rem; }
.tag--micro{
  display:inline-flex; align-items:center; line-height:1;
  padding: .16rem .5rem; border-radius: 999px;
  background: rgba(24,24,27,.08);
  font-size: .72rem; margin: 0;
}

/* 小方塊按鈕（links）：統一半徑與手感 */
.sw-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .4rem .8rem;
  border-radius: 3px;              /* 與測試頁一致的 3px */
  font-size: .85rem; font-weight: 600;
  background: rgba(24,24,27,.9); color: #fff; text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: transform .15s ease, box-shadow .2s ease;
}
.sw-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.15); }


/* ====== 6) Separators & vertical rhythm ================================== */

.sep{
  border-top: 1px solid rgba(0,0,0,.08);
  margin: 10px 0 12px 0;
}


/* ====== 7) Theme variants: project (dark card) =========================== */

details.porto[data-type="project"]{
  background: #0b0b0c; color: #f5f5f5;
  border-color: rgba(255,255,255,.18);
}
details.porto[data-type="project"] .chip-meta{ color: rgba(255,255,255,.78); }
details.porto[data-type="project"] .porto-body p { color: rgba(255,255,255,.90); }
details.porto[data-type="project"] .tag--micro{
  background: rgba(255,255,255,.12); color:#fff;
}
details.porto[data-type="project"] .sw-btn{
  background:#fff; color:#111; border: 1px solid #fff;
}
details.porto[data-type="project"] .sep{
  border-top-color: rgba(255,255,255,.18);
}


/* ====== 8) Status badge (single source of truth) ========================= */

.badge-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.26rem .55rem; border-radius:999px;
  border:1px solid rgba(0,0,0,.16); background:#fff; color:#111;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
details.porto[data-type="project"] .badge-chip{
  background:#fff; color:#111; border-color:#fff;
}


/* ====== 9) Text tone inside cards ======================================== */

.porto-body p{
  color: rgb(63 63 70);
  font-family: "IBM Plex Sans";
  font-weight: 450;
}

/* 讓 SoundCloud 小播放器（visual=false）在深色頁面看起來沒那麼亮 */
.embed.sc.dark {
  /* 適度降低亮度與對比，保留可讀性 */
  filter: brightness(1) contrast(.95) saturate(.92);
}

/* Project（黑卡）上可再略暗一點，避免白底太跳 */
details.porto[data-type="project"] .embed.sc.dark {
  filter: brightness(.82) contrast(.92) saturate(.9);
}