/* 品牌宇宙 · 建材品牌互動展示（brand-showcase.html）
   沿用 property-showcase.css 的劇場、米色編輯區與 CTA；本檔只放換材試玩與首圖 */

/* 沒有 JS 時舞台的首圖：三久動態智能外牆（選擇器比 property-showcase.css 的規則更具體，直式也蓋過） */
.ps-nojs .bs-page .ps-portal { background-image: url('/uploads/brand-showcase/poster/b1-facade.webp?r=1'); }
@media (max-aspect-ratio: 4/5) {
  .ps-nojs .bs-page .ps-portal { background-image: url('/uploads/brand-showcase/poster/b1-facade-p.webp?r=1'); }
}

/* ───────── 換材試玩 ───────── */
.bs-swap { position: relative; padding: clamp(90px, 11vw, 150px) 0; background: linear-gradient(180deg, rgba(11, 10, 9, .92), rgba(11, 10, 9, .55) 70%, rgba(11, 10, 9, 0)); }
.bs-swap .ps-kicker { color: var(--gold); }
.bs-swap h2 {
  margin: 0; font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(28px, 3.6vw, 54px); line-height: 1.3; letter-spacing: .03em;
}
.bs-swap h2 em { font-style: normal; color: var(--gold-2); }
.bs-swap-head p { margin: 22px 0 0; max-width: 560px; font-size: 16px; line-height: 1.9; color: var(--ink-2); }

/* 對照圖限高（整張要留在畫面裡），範例欄緊貼在圖的右邊 */
.bs-swap-stage { display: grid; grid-template-columns: minmax(0, auto) 260px; justify-content: start; gap: 22px; margin-top: clamp(36px, 5vw, 56px); align-items: start; }
.bs-swap-view {
  --x: 50%;
  --list: 282px; /* 範例欄寬＋間距 */
  position: relative; margin: 0; aspect-ratio: 1093 / 820; border-radius: 18px;
  width: min(calc(min(1240px, 100vw - var(--gutter) * 2 - 17px) - var(--list)), calc(72vh * 1093 / 820)); overflow: hidden; background: #14110d;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 1px rgba(236, 211, 162, .22), 0 40px 90px -40px rgba(0, 0, 0, .8);
}
.bs-swap-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* 線的左邊是原始照片、右邊是換材後 */
.bs-swap-after { clip-path: inset(0 0 0 var(--x)); transition: opacity .45s; }
.bs-swap-after.is-loading { opacity: .35; }
.bs-swap-handle {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 44px; margin-left: -22px; cursor: ew-resize; outline: none;
}
.bs-swap-handle::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .45); }
.bs-swap-handle span {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(11, 10, 9, .55); border: 2px solid #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .6);
}
.bs-swap-handle span::before, .bs-swap-handle span::after { /* 左右箭頭 */
  content: ''; position: absolute; top: 50%; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.bs-swap-handle span::before { left: 9px; border-right: 7px solid #fff; }
.bs-swap-handle span::after { right: 9px; border-left: 7px solid #fff; }
.bs-swap-handle:focus-visible span { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.bs-swap-tag {
  position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; pointer-events: none;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: rgba(11, 10, 9, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bs-swap-tag--l { left: 14px; }
.bs-swap-tag--r { right: 14px; }

.bs-swap-list { display: flex; flex-direction: column; gap: 10px; }
.bs-swap-list button {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; width: 100%; padding: 8px 12px 8px 8px;
  border-radius: 12px; cursor: pointer; text-align: left; font-family: var(--serif); font-size: 16px; color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); transition: color .3s, border-color .3s, background .3s;
}
.bs-swap-list button img { grid-row: 1 / 3; width: 64px; height: 48px; border-radius: 8px; object-fit: cover; }
.bs-swap-list button small { font-family: 'Noto Sans TC', sans-serif; font-size: 12px; color: rgba(255, 255, 255, .5); }
.bs-swap-list button:hover { color: #fff; border-color: rgba(236, 211, 162, .4); }
.bs-swap-list button[aria-pressed="true"] { color: #fff; border-color: rgba(236, 211, 162, .7); background: rgba(236, 211, 162, .1); }
.bs-swap-list button:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 2px; }
.bs-swap-more {
  align-self: flex-start; margin-top: 8px; padding-bottom: 5px; font-family: var(--serif); font-weight: 700; font-size: 15px;
  color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .6); transition: color .3s, border-color .3s;
}
.bs-swap-more:hover { color: var(--gold-2); border-color: var(--gold-2); }

/* ───────── RWD ───────── */
@media (max-width: 1100px) {
  .bs-swap-stage { grid-template-columns: minmax(0, auto) 220px; }
  .bs-swap-view { --list: 242px; }
}
@media (max-width: 720px) {
  .bs-swap-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bs-swap-view { width: 100%; border-radius: 14px; }
  .bs-swap-handle span { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .bs-swap-list {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .bs-swap-list::-webkit-scrollbar { display: none; }
  .bs-swap-list button { flex: none; width: auto; grid-template-columns: 44px auto; column-gap: 10px; padding: 6px 14px 6px 6px; font-size: 14.5px; border-radius: 999px; }
  .bs-swap-list button img { width: 44px; height: 44px; border-radius: 50%; }
  .bs-swap-list button small { display: none; }
  .bs-swap-more { flex: none; align-self: center; margin: 0 0 0 6px; white-space: nowrap; }
}