/* ============================================================
   SOMA 網站・響應式共用樣式
   桌機（>=1024px）維持原設計不變；此檔案只在較窄的螢幕生效。
   採用「幫需要斷點調整的元素加上 class」的做法（而不是比對
   inline style 的文字內容），這樣就算之後用 Pinegrow 之類的視覺化
   編輯器去調整 inline style 的格式，也不會讓響應式效果悄悄失效——
   class 是獨立的屬性，不會被 style 內容的重新排版影響到。
   ============================================================ */

/* ---------- 導覽列：固定在頂部（sticky），滑動時不會不見 ----------
   2026-08-29：導覽列從原本 Hero 區塊內部移出，變成 page-shell 的第一個
   子元素，這樣才不會被 Hero 的 overflow:hidden 卡住，sticky 才能在整頁
   捲動時持續生效。這裡同時補上左右留白（原本是靠外層 Hero 的 padding
   帶出間距，移出來之後要自己負責），並比照其餘區塊的斷點收斂。 */

html { scroll-behavior: smooth; }

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #15132C;
  padding-left: 80px;
  padding-right: 80px;
}

@media (max-width: 1023px) {
  /* 原本 40px/96px 的上下留白是為了在「導覽列還是 Hero 內容一部分」時，
     跟下方標題拉開距離；現在導覽列變成固定在頂部的獨立列，這麼大的
     上下留白只會讓它佔掉太多畫面（尤其手機螢幕寸土寸金），所以窄螢幕
     時大幅收緊。 */
  .nav-bar { padding-left: 40px !important; padding-right: 40px !important; padding-top: 18px !important; padding-bottom: 18px !important; }
}

@media (max-width: 639px) {
  .nav-bar { padding-left: 20px !important; padding-right: 20px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
}

/* ---------- 手機選單（漢堡） ---------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FAF8F2;
  border-radius: 2px;
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #FAF8F2;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 導覽列連結（桌機）：加上 flex + 間距，避免連結黏在一起 ---------- */
/* 2026-08-29：從 36px 收緊到 26px，搭配 logo 改成雙行文字後導覽列右側整組（連結+按鈕）需要的寬度變多，
   縮小連結間距讓整條導覽列不會太擠。手機版下拉選單用自己的 gap:2px!important，不受這裡影響。 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

@media (max-width: 1023px) {
  .nav-bar { flex-wrap: nowrap; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    background: #171326;
    border-top: 1px solid #2a2745;
    border-bottom: 1px solid #2a2745;
    padding: 10px 8px 16px;
    z-index: 60;
    box-shadow: 0 18px 30px rgba(0,0,0,0.28);
  }
  .nav-links.open { display: flex; }
  .nav-links a.navlink {
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 15.5px;
  }
  .nav-links a.navlink.active { background: rgba(255,212,0,0.08); }
  .nav-actions { gap: 12px !important; }
}

/* ---------- 版心：不論螢幕多寬都置中，桌機超寬時不要整片空白偏一邊 ---------- */

.page-shell {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 桌機以下不要固定 1440px，避免爆版 */
@media (max-width: 1439px) {
  .page-shell {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
  }
}

/* ---------- 區塊左右留白＋直向間距：每個原始 padding 值各自一個 class ----------
   （class 名稱本身就是原始數值，方便對照；每個 class 同時處理左右兩級縮小
   ＋手機版的上下間距收斂，數值跟先前 attribute-selector 版本完全一致） */

.pv-0-80-90, .pv-0-80-100, .pv-0-80-110, .pv-0-80-130, .pv-0-80-140,
.pv-90-80-130,
.pv-100-80, .pv-110-80-40, .pv-120-80-150, .pv-120-80-60, .pv-130-80-60,
.pv-130-80, .pv-140-80-60, .pv-140-80, .pv-150-80-130, .pv-50-80-150,
.pv-56-80-0, .pv-60-80-150, .pv-80-80-40, .pv-80-80 {
  /* 標記用，實際數值在下面各自的斷點規則裡 */
}

@media (max-width: 1023px) {
  .pv-0-80-90, .pv-0-80-100, .pv-0-80-110, .pv-0-80-130, .pv-0-80-140,
  .pv-90-80-130,
  .pv-100-80, .pv-110-80-40, .pv-120-80-150, .pv-120-80-60, .pv-130-80-60,
  .pv-130-80, .pv-140-80-60, .pv-140-80, .pv-150-80-130, .pv-50-80-150,
  .pv-56-80-0, .pv-60-80-150, .pv-80-80-40, .pv-80-80 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .col-pl-34 { padding-left: 22px !important; }
  .col-pr-34 { padding-right: 22px !important; }
  .col-px-34 { padding-left: 22px !important; padding-right: 22px !important; }

  /* 手機選單展開時的下拉選單，是絕對定位在 nav-bar 下方；
     但 nav-bar 的父層（hero 區塊，即這幾個 pv-0-80-* class）本身設了
     overflow:hidden 用來裁切裝飾圖形，垂直方向也一併裁到選單，
     導致選單被吃掉看不到。
     注意：不能只解除 overflow-y、保留 overflow-x:hidden——CSS 規範規定
     兩軸只要有一軸不是 visible，另一軸的 visible 會被瀏覽器強制換算成
     auto（等同還是會裁切＋捲動），所以這裡兩軸一起解除。 */
  .pv-0-80-90, .pv-0-80-100, .pv-0-80-110, .pv-0-80-130, .pv-0-80-140 {
    overflow: visible !important;
  }
}

@media (max-width: 639px) {
  .pv-0-80-90, .pv-0-80-100, .pv-0-80-110, .pv-0-80-130, .pv-0-80-140,
  .pv-90-80-130,
  .pv-100-80, .pv-110-80-40, .pv-120-80-150, .pv-120-80-60, .pv-130-80-60,
  .pv-130-80, .pv-140-80-60, .pv-140-80, .pv-150-80-130, .pv-50-80-150,
  .pv-56-80-0, .pv-60-80-150, .pv-80-80-40, .pv-80-80 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .col-pl-34 { padding-left: 16px !important; }
  .col-pr-34 { padding-right: 16px !important; }
  .col-px-34 { padding-left: 16px !important; padding-right: 16px !important; }

  /* 直向間距也一併收斂，避免手機上滑很久都在滑空白 */
  .pv-0-80-90    { padding-bottom: 44px !important; }
  .pv-0-80-100   { padding-bottom: 48px !important; }
  .pv-0-80-110   { padding-bottom: 52px !important; }
  .pv-0-80-130   { padding-bottom: 60px !important; }
  .pv-0-80-140   { padding-bottom: 64px !important; }
  .pv-90-80-130  { padding-top: 48px !important; padding-bottom: 60px !important; }
  .pv-100-80     { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pv-110-80-40  { padding-top: 52px !important; padding-bottom: 28px !important; }
  .pv-120-80-150 { padding-top: 56px !important; padding-bottom: 64px !important; }
  .pv-120-80-60  { padding-top: 56px !important; padding-bottom: 36px !important; }
  .pv-130-80-60  { padding-top: 60px !important; padding-bottom: 36px !important; }
  .pv-130-80     { padding-top: 60px !important; padding-bottom: 60px !important; }
  .pv-140-80-60  { padding-top: 64px !important; padding-bottom: 36px !important; }
  .pv-140-80     { padding-top: 64px !important; padding-bottom: 64px !important; }
  .pv-150-80-130 { padding-top: 68px !important; padding-bottom: 60px !important; }
  .pv-50-80-150  { padding-top: 28px !important; padding-bottom: 64px !important; }
  .pv-56-80-0    { padding-top: 32px !important; }
  .pv-60-80-150  { padding-top: 36px !important; padding-bottom: 64px !important; }
  .pv-80-80-40   { padding-top: 40px !important; padding-bottom: 28px !important; }
  .pv-80-80      { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ---------- 標題級距：大字級在窄螢幕等比縮小 ---------- */

@media (max-width: 1023px) {
  .fs-96 { font-size: 56px !important; }
  .fs-60 { font-size: 42px !important; }
  .fs-56 { font-size: 40px !important; }
  .fs-52 { font-size: 38px !important; }
  .fs-46 { font-size: 34px !important; }
  .fs-44 { font-size: 33px !important; }
  .fs-42 { font-size: 32px !important; }
  .fs-38 { font-size: 30px !important; }
}

@media (max-width: 639px) {
  .fs-96 { font-size: 38px !important; }
  .fs-60 { font-size: 30px !important; }
  .fs-56 { font-size: 28px !important; }
  .fs-52 { font-size: 27px !important; }
  .fs-46 { font-size: 25px !important; }
  .fs-44 { font-size: 24px !important; }
  .fs-42 { font-size: 23px !important; }
  .fs-38 { font-size: 22px !important; }
  .fs-34 { font-size: 21px !important; }
  .fs-30 { font-size: 20px !important; }
  .fs-28 { font-size: 19px !important; }
}

/* ---------- 多欄網格：欄數隨斷點收斂，避免擠成一條細縫 ---------- */

@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-asym-a, .grid-asym-b { grid-template-columns: 1fr !important; }
}

@media (max-width: 639px) {
  .grid-2, .grid-3, .grid-4, .grid-asym-a, .grid-asym-b {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 兩欄式圖文排版：手機一律改直排 ---------- */

@media (max-width: 639px) {
  .case-block {
    flex-direction: column !important;
    gap: 28px !important;
  }
  /* 2026-08-31：手機版改成「文字在上、圖片在下」，不論桌機版是原本排列
     還是 row-reverse 排列都一致；雙圖案例（CASE01/03/06）的圖片本身維持
     並排，不會因為手機版的直排規則被拆成上下兩張（該處已不再套用
     .grid-2，所以不受 .grid-2 的手機單欄規則影響）。 */
  .case-block > div:first-child { order: 2; }
  .case-block > div:last-child { order: 1; }
  .art-card {
    flex-direction: column !important;
  }
  .art-card .ph-dark,
  .art-card .ph-light {
    width: 100% !important;
    flex-shrink: 1 !important;
  }
  .two-col-row {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .feature-banner {
    flex-direction: column !important;
    text-align: center;
    gap: 20px !important;
  }
}

/* ---------- 表格：手機上用橫向捲動，不要撐破版面 ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .table-scroll .art-table {
    min-width: 640px;
  }
}

/* ---------- CTA／按鈕：手機上維持足夠點按大小，並允許換行 ----------
   （這條用 href 比對，href 是穩定不會被視覺化編輯器改格式的屬性，安全） */

@media (max-width: 639px) {
  a[href="https://lin.ee/Pm14fCS"] {
    white-space: normal !important;
  }
}

/* ---------- 裝飾用固定寬度 SVG（例如收購流程的虛線連接線）：改成跟著容器縮放 ----------
   （這條用 width 比對，是 SVG 的固定屬性，不是 inline style，同樣安全） */

svg[width="1180"] {
  width: 100% !important;
}

/* ---------- 頁尾：窄螢幕下欄距收斂 ---------- */

@media (max-width: 639px) {
  .footer-row { gap: 40px !important; }
}

/* ---------- Hero 裝飾圓形「蒐」字 icon：最小手機尺寸下隱藏，避免跟文字重疊 ---------- */

@media (max-width: 500px) {
  .hero-badge-circle { display: none !important; }
}

/* ---------- 首頁：手機版精簡，只留代表案例／代表文章／前兩則常見問題 ----------
   2026-08-30：使用者反應手機版首頁資訊量太大、容易沒重點。桌機／平板維持原本
   完整內容不變；只在手機（≤639px）把每個區塊裡「次要、純文字」的卡片先隱藏，
   只留視覺最完整、最具代表性的第一則（收購案例留 CASE 01、精品觀點留有封面
   照片的 Article 01、常見問題留前兩則），區塊底部原本就有的「查看完整…」
   連結會變得更明顯，方便真的想看更多的人繼續點進去。這些內容還在 HTML 裡，
   只是手機版先不顯示，不影響搜尋引擎讀到完整內容。 */
@media (max-width: 639px) {
  .mobile-hide-secondary { display: none !important; }

  /* SOMA 怎麼判斷：手機版讓照片排在文字前面，先給視覺再給文字 */
  .two-col-row .appraisal-photo { order: -1; }
}