/* ============================================================
   麻豆傳媒映畫 · 版面精修（在打包樣式之後載入，只做增強、不改結構）
   ============================================================ */

:root {
  --ph-gold: #d3ab5e;
  --ph-gold-lt: #f0d089;
  --ph-gold-dk: #b8893a;
  --ph-line: rgba(211, 171, 94, 0.22);
  --ph-line-soft: rgba(211, 171, 94, 0.12);
  --ph-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.014) 100%);
  --ph-radius: 16px;
}

/* ---------- 底色氛圍：更深邃的金色夜空 ---------- */
body {
  background-image:
    radial-gradient(1100px 620px at 10% -10%, rgba(211, 171, 94, 0.17), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(122, 90, 180, 0.13), transparent 64%),
    radial-gradient(1200px 820px at 50% 116%, rgba(211, 171, 94, 0.09), transparent 72%),
    linear-gradient(180deg, #05050a 0%, #06060c 42%, #050509 100%) !important;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 頂欄：加強毛玻璃與金色底線 ---------- */
header.sticky {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
header.sticky > div:first-child {
  border-bottom-color: var(--ph-line) !important;
  background: linear-gradient(180deg, rgba(5, 5, 10, 0.95) 0%, rgba(6, 6, 12, 0.72) 100%);
  box-shadow: 0 20px 44px -34px rgba(211, 171, 94, 0.75);
}

/* ---------- 分區：柔和分隔與更穩的節奏 ---------- */
main > section + section {
  border-top: 1px solid rgba(211, 171, 94, 0.06);
}
main > section {
  scroll-margin-top: 84px;
}
.sec-title {
  background: linear-gradient(100deg, #fffaf0 0%, #f0d089 40%, #d3ab5e 70%, #fff6e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.012em;
  text-shadow: 0 0 40px rgba(211, 171, 94, 0.16);
}

/* ---------- 玻璃卡片：更細的邊、更貴的陰影 ---------- */
.panel {
  border: 1px solid var(--ph-line-soft) !important;
  border-radius: var(--ph-radius);
  background: var(--ph-glass) !important;
  box-shadow: 0 22px 48px -36px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease,
    box-shadow 0.45s ease, background 0.35s ease;
}
.panel:hover {
  transform: translateY(-4px);
  border-color: rgba(211, 171, 94, 0.45) !important;
  box-shadow: 0 34px 66px -34px rgba(0, 0, 0, 1), 0 0 0 1px rgba(211, 171, 94, 0.16),
    0 0 40px -18px rgba(211, 171, 94, 0.45);
}
article.panel {
  position: relative;
}

/* ---------- 人像卡：寫真圖 + 氛圍壓邊 + 預約角標 ---------- */
.ph-wrap {
  background: linear-gradient(140deg, #14121a 0%, #1d1822 52%, #0b0b12 100%);
  /* 寫真圖帶縮放，用 clip + 繪製隔離避免撐出可滾動溢出 */
  overflow: clip !important;
  contain: paint;
}
.ph-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 52%, rgba(5, 5, 10, 0.5) 100%),
    radial-gradient(128% 92% at 50% 28%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
img.photo-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0;
  transform: var(--ph-tf, scale(1.02));
  transition: opacity 0.65s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
  background: linear-gradient(120deg, #17141d, #241c16);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
img.photo-img.ph-in {
  opacity: 1;
}
article.panel:hover img.photo-img,
.panel:hover img.photo-img {
  transform: var(--ph-tf, scale(1.02)) scale(1.05);
}
.ph-cta {
  position: absolute;
  /* 图片区两个上角分别被「熱門/新人」和「★x.x」占着，放到顶部正中两个徽章之间 */
  top: 9px;
  left: 50%;
  right: auto;
  z-index: 3;
  padding: 3px 7px;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #2a1f07;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e2ab 0%, #e0bd72 50%, #c79a45 100%);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
}
.panel:hover .ph-cta {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (hover: none) {
  .ph-cta {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ---------- 標籤 / 藥丸 ---------- */
.chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(211, 171, 94, 0.18) !important;
  color: #d9d3c6;
}
.chip-gold {
  background: linear-gradient(180deg, rgba(240, 208, 137, 0.24) 0%, rgba(211, 171, 94, 0.1) 100%) !important;
  border-color: rgba(211, 171, 94, 0.44) !important;
  color: #f5e5bd !important;
}
.tab {
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.tab:hover {
  transform: translateY(-1px);
  border-color: rgba(211, 171, 94, 0.55) !important;
  background: rgba(211, 171, 94, 0.1);
  color: #f6e7c2;
}

/* ---------- 按鈕：金色流光 ---------- */
.btn-gold {
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -20px rgba(211, 171, 94, 0.9) !important;
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s ease;
  pointer-events: none;
}
.btn-gold:hover::after {
  left: 130%;
}
.btn-outline,
.btn-ghost {
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

/* ---------- 名冊卡的地區說明：窄屏不截斷，換行完整顯示 ---------- */
.truncate {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
}

/* ---------- 頁腳：品牌行撐滿可用寬度 ---------- */
footer .wrap > div > .flex.items-center > div {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- 搜索框 / 表單 ---------- */
.field,
input,
select,
textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(211, 171, 94, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(211, 171, 94, 0.13);
  outline: none;
}

/* ---------- 影片卡：海報壓邊與角標 ---------- */
.aspect-video {
  background: linear-gradient(140deg, #14121a, #0b0b12);
}

/* ---------- 滾動條 / 選字 ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #08080e;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(211, 171, 94, 0.55), rgba(184, 137, 58, 0.35));
  border-radius: 999px;
  border: 2px solid #08080e;
}
::selection {
  background: rgba(211, 171, 94, 0.35);
  color: #fffaf0;
}

/* ---------- 移動端：觸控目標與留白 ---------- */
@media (max-width: 640px) {
  .panel:hover {
    transform: none;
  }
  .ph-cta {
    font-size: 9.5px;
    padding: 3px 7px;
  }
  img.photo-img {
    object-position: 50% 20%;
  }
}

@media (max-width: 360px) {
  .ph-cta {
    display: none;
  }
  /* 极窄屏下图片区按 3:4 算只有 ~181px，装不下「专区条+名字+编号+标签栏」(约183px)，
     内容被顶到顶部压住「熱門/新人」和「★x.x」两枚徽章 → 抬高图片区 */
  .ph-wrap {
    aspect-ratio: auto !important;
    min-height: 226px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  img.photo-img,
  .ph-cta,
  .btn-gold::after {
    transition: none !important;
  }
  .panel:hover {
    transform: none;
  }
}