/* ============================================
   區塊 Hub（大大寬頻／第四台／南桃園／北視／吉元／信和）
   數值來源：D:\figma-export\<slug>\desktop
   ============================================ */

/* ── 主視覺帶 ──
   設計稿 Frame 131：1920×490，上緣 60px 被 header 蓋住 → 可視 430。
   六個 hub 完全相同，只有底圖不一樣。 */
.hub-hero {
  position: relative;
  isolation: isolate;
  /* width 必須明寫 100%：只給 aspect-ratio ＋ min-height 的話，窄視窗下
     由高度反推寬度（260 × 1920/430 = 1161），整個區段會比視窗寬而讓全頁橫向捲動。
     寫死 width 之後比例只作用在高度，min-height 單純把它撐高。 */
  width: 100%;
  aspect-ratio: 1920 / 430;
  min-height: 260px;
  display: grid;
  /* 必須明寫 minmax(0, 1fr)：預設的 auto 軌道會被說明藥丸的 max-content
     （單行約 1080）撐開，整個區段在 ~1024 視窗會變成 1161 寬而讓整頁橫向捲動。
     六個 hub 頁都會發生。 */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
}

.hub-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* 更換後的底圖本身已經壓暗過（標題區白字對比 5.9～15.9，全部通過 AA），
   原本的 0.35 遮罩會變成雙重壓暗、把照片細節蓋掉，因此只留很淡的一層保險。 */
.hub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.04) 100%
  );
}

.hub-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 設計稿 xinhe 的說明藥丸是 1080 寬單行；本站中文字型較寬，六個 hub 裡最長的
     南桃園說明約需 1182，因此容器放寬到 1200 讓六頁都能維持單行。 */
  max-width: calc(1200px + var(--container-pad) * 2);
  padding-inline: var(--container-pad);
  /* 設計稿內容中心（y=185.5）比版面中心（y=215）高約 30px，用下內距推上去 */
  padding-bottom: clamp(var(--space-6), 4vw, 59px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px; /* 設計稿 frame-1195 */
  text-align: center;
}

.hub-hero__title {
  filter: drop-shadow(
    var(--shadow-title)
  ); /* 設計稿 Frame 128 的 DROP_SHADOW */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px; /* 設計稿 frame-128 */
  margin: 0;
  color: #fff;
}
.hub-hero__name {
  font-size: var(--fs-3xl); /* 48px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
/* 設計稿 24px。主標維持原級，其餘 hero 文字整體收一階。 */
.hub-hero__tagline {
  font-size: var(--fs-lg); /* → 18px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

/* 白色圓角藥丸內的紅字說明 */
.hub-hero__lede {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 12px clamp(var(--space-4), 2.2vw, 28px);
  background: var(--color-bg);
  border-radius: 36.5px;
  font-size: var(--fs-base); /* 設計稿 20px → 收一階 15px */
  line-height: 1.2;
  color: var(--color-brand);
}

/* ── RWD ── */
@media (max-width: 768px) {
  /* 3.5:1 的比例在手機會變成一條細帶，改成自動高度堆疊 */
  .hub-hero {
    aspect-ratio: auto;
    min-height: 0;
    padding-block: var(--space-12);
  }
  .hub-hero__inner {
    padding-bottom: 0;
    gap: var(--space-6);
  }
  .hub-hero__lede {
    border-radius: var(--radius-lg);
  }
}

/* ============================================
   內容區塊（各 hub 共用的排版原型）
   ============================================ */

/* ── 橫向區塊：文字 + 圖 ──
   設計稿 Frame 934：1405 寬、文字 690、圖 614、間距 101。 */
.hub-block {
  padding-block: clamp(var(--space-10), 6vw, 85px);
}

.hub-block__inner {
  width: 100%;
  max-width: calc(1405px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 690fr 614fr;
  align-items: center;
  gap: clamp(var(--space-8), 7vw, 101px);
}

.hub-block__body {
  display: flex;
  flex-direction: column;
  gap: 31px; /* 設計稿 frame-926 */
}
.hub-block__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-text);
}
.hub-block__media {
  width: 100%;
  height: auto;
  /* 設計稿 Rectangle 169／194 的 cornerRadius = 0，不加圓角 */
}

/* 紅框說明盒（設計稿 frame-925：白底、1px 紅框、圓角 14、內距 35/48） */
.hub-callout {
  margin: 0;
  padding: 35px clamp(var(--space-5), 3vw, 48px);
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 14px;
  box-shadow: var(--shadow-card); /* 設計稿 Frame 925 的 DROP_SHADOW */
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
  color: var(--color-text);
}

/* ── 紅底橫幅：圖 + 白色面板 ──
   設計稿 Frame 938：1405 寬、圖 690、面板 715，兩者緊貼；
   底下墊一整幅紅色 Rectangle 15。 */
.hub-band {
  /* 設計稿 Rectangle 15 是「節點 opacity 0.2 + 紅色由不透明漸層到全透明」，
     實際呈現是很淡的粉紅，不是純紅。匯出的 CSS 把它寫成
     linear-gradient(0deg,#e6433e 0%,#e6433e 100%) 並丟掉節點 opacity，
     只讀那份會做成實色紅底。 */
  background: linear-gradient(
    180deg,
    rgba(230, 67, 62, 0.2) 0%,
    rgba(230, 67, 62, 0) 100%
  );
  padding-block: clamp(var(--space-10), 6vw, 92px);
}
.hub-band__inner {
  width: 100%;
  max-width: calc(1405px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 690fr 715fr;
  align-items: stretch;
}
.hub-band__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 設計稿 Rectangle 171 的 cornerRadius = 0；只有右側白色面板 Frame 937
     是 0/8/8/0，圖本身是直角。 */
}

.hub-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px; /* 設計稿 frame-936 */
  padding: clamp(var(--space-10), 8vw, 134px) clamp(var(--space-6), 4vw, 86px);
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 0 8px 8px 0;
}
.hub-panel__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px; /* 設計稿 frame-935 */
}
.hub-panel__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-brand);
  text-align: center;
}
.hub-panel__rule {
  width: 114px; /* 設計稿 Rectangle 170 */
  height: 4px;
  background: var(--color-border);
}
.hub-panel__body {
  margin: 0;
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
  color: var(--color-text);
}

/* ── RWD ── */
@media (max-width: 1024px) {
  .hub-block__inner,
  .hub-band__inner {
    grid-template-columns: 1fr;
  }

  /* 單欄之後照 DOM 順序：標題與說明在上、情境圖在下。
     原本用 order 把圖推到最上面，手機一捲進這一段看到的全是圖，
     要再往下才知道在講什麼。 */
  .hub-band__media {
    height: auto;
  }
  .hub-panel {
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 640px) {
  .hub-callout {
    padding: var(--space-5);
  }
  .hub-panel {
    padding: var(--space-8) var(--space-5);
  }
}

/* ============================================
   第四台：散置卡片區塊
   ============================================ */

/* 淡黃色螢光底（設計稿 Rectangle 182：114×12 #fffca8，壓在文字後方） */
.hub-mark {
  position: relative;
  color: var(--color-brand);
}
.hub-mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 12px;
  background: var(--color-accent-soft);
  z-index: -1;
}
.hub-mark-bar {
  display: block;
  width: 114px;
  height: 12px;
  margin-inline: auto;
  background: var(--color-accent-soft);
}

.hub-scatter {
  padding-block: clamp(var(--space-10), 6vw, 90px);
}
.hub-scatter__inner {
  width: 100%;
  max-width: calc(1184px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 320fr 790fr;
  align-items: center;
  gap: clamp(var(--space-8), 5vw, 74px);
}
.hub-scatter__body {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 設計稿 frame-1058 */
  isolation: isolate; /* 讓 .hub-mark 的 z-index:-1 只作用在本區塊內 */
}
.hub-scatter__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.hub-scatter__lede {
  margin: 0;
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
}

/* 舞台：790×440，底圖與四張卡片都用百分比定位，等比縮放。
   宣告成 container 之後，卡片的字級與圓標可以用 cqw 跟著舞台一起縮 ——
   原本卡片縮、字級與圓標卻是固定 px，窄畫面就會變成「圓標蓋住字、長標籤爆出卡片」。 */
.hub-scatter__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 790 / 440;
}
.hub-scatter__bg {
  position: absolute;
  left: 13.29%; /* 105 / 790 */
  top: 7.27%; /* 32 / 440 */
  width: 76.58%; /* 605 / 790 */
  height: auto;
  /* 設計稿 Rectangle 181 cornerRadius = 0 */
}
.hub-scatter__list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 卡片 160×76：白底、1px 紅框、圓角 12。
   設計稿疊了兩層陰影 —— 深色 4/4/24 黑 25% 再加一層白色 4/4/20 光暈，
   讓卡片在底圖上浮起來。 */
.hub-chip {
  position: absolute;
  left: var(--chip-left);
  top: var(--chip-top);
  /* 設計稿 160×76、字 20、內距 20/26 —— 全部換算成舞台寬度的百分比，
     整組才會等比縮放，文字與卡片的比例固定，長標籤永遠放得下。 */
  width: 20.25cqw;              /* 160 / 790 */
  min-height: 9.62cqw;          /*  76 / 790 */
  display: flex;
  flex-direction: column;       /* 標籤在上、說明接在下方 */
  align-items: center;
  justify-content: center;
  padding: 3.29cqw 2.4cqw;
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 12px;
  box-shadow:
    4px 4px 24px rgba(0, 0, 0, 0.25),
    4px 4px 20px #fff;
  font-size: 2.53cqw;           /*  20 / 790 */
  font-weight: var(--fw-medium);
  color: var(--color-brand);
  text-align: center;
}
.hub-chip__label { white-space: nowrap; }

/* 說明：預設收起，滑過卡片才展開。
   用 grid-template-rows 0fr → 1fr 過渡，才能在「高度未知」的情況下做出收合動畫
   （max-height 要猜一個數字，猜太小會切掉、猜太大會讓動畫看起來延遲）。 */
.hub-chip__desc {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  font-size: 1.9cqw;            /* 15 / 790 */
  font-weight: var(--fw-normal);
  line-height: 1.4;
  color: var(--color-text);
  opacity: 0;
  transition: grid-template-rows 260ms ease, opacity 200ms ease, margin-top 260ms ease;
}
.hub-chip__desc > span { overflow: hidden; }
.hub-chip:hover .hub-chip__desc,
.hub-chip:focus-within .hub-chip__desc {
  grid-template-rows: 1fr;
  margin-top: 0.8cqw;
  opacity: 1;
}
/* 滑過時停下漂浮並抬到最上層，說明展開後才不會被旁邊的卡片壓住。 */
.hub-chip:hover,
.hub-chip:focus-within {
  z-index: 2;
  animation-play-state: paused;
}
/* 四張卡片緩慢上下漂浮。週期拉長到 9～11 秒，是「幾乎察覺不到在動」的速度，
   四顆的週期與起始相位都錯開，才不會整齊劃一地一起浮。
   用 translate（獨立屬性）而不是 transform，避免和其他 transform 打架。 */
@keyframes hub-chip-float {
  0%,
  100% { translate: 0 0; }
  50%  { translate: 0 -9px; }
}
@media (min-width: 641px) {
  .hub-chip {
    animation: hub-chip-float 9.4s ease-in-out infinite;
    will-change: translate;
  }
  .hub-chip:nth-child(2) { animation-duration: 11.2s; animation-delay: -2.6s; }
  .hub-chip:nth-child(3) { animation-duration: 10.1s; animation-delay: -5.3s; }
  .hub-chip:nth-child(4) { animation-duration: 12.0s; animation-delay: -7.8s; }
}
/* 使用者要求減少動態時完全停用 */
@media (prefers-reduced-motion: reduce) {
  .hub-chip { animation: none; }
}

/* 紅色編號圓標 23×23，跨在卡片上緣（設計稿 +69 / −12，約一半在外面）。
   尺寸同樣用 cqw，才不會在窄畫面變得相對巨大而蓋住文字。 */
.hub-chip__no {
  position: absolute;
  left: 43.1%;                  /* 69 / 160 */
  top: 0;
  translate: 0 -52%;            /* −12 / 23 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.91cqw;               /* 23 / 790 */
  height: 2.91cqw;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  font-size: 1.94cqw;           /* 15.33 / 790 */
  font-weight: var(--fw-medium);
  line-height: 1;
  color: #fff;
}

/* ≤640：舞台只剩 ~350 寬，照設計稿的散佈位置等比縮放會把字縮到 9px。
   而且觸控裝置沒有 hover，說明展不開 —— 乾脆讓說明直接展開，
   卡片就不可能再疊在照片上（會整張蓋掉），改成照片在上、卡片在下。 */
@media (max-width: 640px) {
  .hub-scatter__stage {
    aspect-ratio: auto;
    container-type: normal;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .hub-scatter__bg {
    position: static;
    width: 100%;
    border-radius: 8px;
  }
  .hub-scatter__list {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* 傾斜後左右會多探出一點，留一點餘裕 */
    padding-inline: 2px;
  }

  .hub-chip {
    position: static;
    min-width: 0;
    min-height: 0;
    /* 編號一欄、文字一欄；說明接在標籤下方並與標籤切齊 */
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    font-size: var(--fs-base);
    text-align: left;
  }
  .hub-chip__no {
    position: static;
    translate: none;
    width: 22px;
    height: 22px;
    font-size: var(--fs-xs);
  }
  .hub-chip__label {
    grid-column: 2;
    white-space: normal;
  }
  /* 說明常駐展開（桌機才是 hover 收合） */
  .hub-chip__desc {
    grid-column: 2;
    grid-template-rows: 1fr;
    margin-top: 0;
    font-size: var(--fs-sm);
    opacity: 1;
    transition: none;
  }

  /* 隨興一點：四張卡片左右錯開、寬度不一、各自輕微傾斜，
     不要排成一條對齊的直線。角度控制在 1.5 度內，看得出手感但不至於歪掉。 */
  .hub-chip:nth-child(1) { width: 93%; margin-right: auto; rotate: -1.1deg; }
  .hub-chip:nth-child(2) { width: 88%; margin-left: auto;  rotate:  1.3deg; }
  .hub-chip:nth-child(3) { width: 96%; margin-right: auto; rotate:  0.7deg; }
  .hub-chip:nth-child(4) { width: 86%; margin-left: auto;  rotate: -1.5deg; }
}
/* 減少動態時連傾斜也拿掉 */
@media (prefers-reduced-motion: reduce) {
  .hub-chip { rotate: none; }
}

/* ── 串流痛點區塊 ── */
.hub-pains {
  padding-block: clamp(var(--space-8), 4vw, 60px)
    clamp(var(--space-12), 7vw, 100px);
}
.hub-pains__inner {
  width: 100%;
  /* 設計稿 Frame 1066 是 604 寬、標題單行（604×34）。本站中文字型較寬，
     同樣 28px 下這 22 個字約需 620，沿用 604 會被迫斷成兩行。
     放寬到 660 維持設計稿的單行呈現；三個項目本來就置中，不受影響。 */
  max-width: calc(660px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px; /* 設計稿 frame-1066 */
  text-align: center;
}
.hub-pains__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* 設計稿 frame-1060 */
}
.hub-pains__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-brand);
}
.hub-pains__lede {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.hub-pains__head .hub-mark-bar {
  margin-top: -12px;
} /* 設計稿 frame-1065 的 12px 間距 */

.hub-pains__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 45px; /* 設計稿 frame-1064 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-pain {
  display: flex;
  align-items: center;
  gap: 12px; /* 設計稿 frame-1061 */
  font-size: var(--fs-lg);
  line-height: 1.2;
  white-space: nowrap;
}

/* ── RWD ── */
@media (max-width: 1024px) {
  .hub-scatter__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}
@media (max-width: 640px) {
  /* .hub-chip / .hub-chip__no 的手機樣式已集中在上方「疊在照片上」那一段，
     這裡原本殘留的舊宣告在檔案後面，會把字級蓋回 12px。 */
  /* 三項排成一列：原本會折成 2＋1，最後一項單獨落在第二列很突兀。
     字級與圖示一起收，360 寬也放得下。
     右邊再留一段：這一列剛好落在右下浮動聯絡鈕的高度上，
     不留的話「複雜的介面使用」最後一個字會被電話鈕蓋住（實測壓到 11px）。 */
  .hub-pains__list {
    flex-wrap: nowrap;
    gap: 6px;
    padding-right: var(--space-6);
  }
  .hub-pain {
    gap: 4px;
    font-size: var(--fs-sm);
  }
  .hub-pain img { width: 18px; height: 18px; }
}
/* ≤380：浮動聯絡鈕離版心更近，同一列要再往左讓一段。
   這條必須放在上面那個 ≤640 區塊「之後」—— 兩者權重相同，
   寫在前面會被 ≤640 的 padding-right 蓋掉。 */
@media (max-width: 380px) {
  .hub-pains__list { padding-right: var(--space-12); }
  .hub-pain { gap: 3px; }
  .hub-pain img { width: 16px; height: 16px; }
}

/* ── 共用：紅框膠囊小標（設計稿 Frame 1196：圓角 60、1px 紅框、內距 10） ── */
.hub-pill {
  align-self: flex-start;
  margin: 0;
  padding: 10px var(--space-6);
  border: 1px solid var(--color-brand);
  border-radius: 60px;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand);
}

/* ============================================
   南桃園
   ============================================ */
/* 裝飾底圖直接掛在區塊上（不用 <img>、也不用偽元素），靠左下對齊。
   素材本身已經淡化過，所以不再另外壓 opacity。
   註：原素材 79% 面積是半透明，帶 alpha 壓不下來（1.2 MB）。因為本區塊背後就是
   白底，已把它壓平到白底再壓縮（1207 KB → 39 KB）。代價是這張圖不能再放到
   非白色的背景上，否則會看到一塊白色矩形。 */
.st-intro {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--space-10), 5vw, 78px)
    clamp(var(--space-12), 8vw, 130px);
  background: url("../../images/hub/south-taoyuan-bg.webp?v=1789373969") left bottom / 71.6% auto no-repeat;
  overflow: hidden;
}
.st-intro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1051px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  /* 設計稿 Frame 1199：文字欄 444 ＋ gap 60 ＋ 情境圖 547 = 1051。
     原本寫 1fr 451fr —— fr 是比例不是像素，文字欄只分到 1/452，
     整欄被壓成 74px、標題變成一個字一行。 */
  grid-template-columns: 444fr 547fr;
  align-items: center;
  gap: 60px;
}
/* 設計稿 Frame 1198（gap 48）內含 Frame 1197（gap 16）：
   膠囊 →16→ 標題 →48→ 說明。原本標題另加了 32 的上邊距，等於把兩個間距對調。 */
.st-intro__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.st-intro__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.st-intro__lede {
  margin-top: 32px; /* 16（flex gap）＋ 32 = 設計稿的 48 */
  margin-bottom: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}
/* 設計稿 Rectangle 185（547×547）cornerRadius = 0 */
.st-intro__photo {
  width: 100%;
  max-width: 547px;
  height: auto;
  justify-self: end;
}

/* 白底卡片（設計稿 Frame 1006：1055×165、圓角 20、陰影 4/4/20） */
.st-card {
  position: relative;
  z-index: 1;
  /* 父層沒有版心內距，只寫 width: 100% 的話，視窗小於 1055 時整張卡會貼齊左右邊緣。 */
  width: calc(100% - var(--container-pad) * 2);
  max-width: 1055px;
  margin: clamp(var(--space-10), 5vw, 78px) auto 0;
  /* 設計稿 1055×165、內容 845×79 → 上下內距 43、左右 105。
     那行說明在設計稿裡是 844 寬的單行，剛好塞滿 845，所以文案不能加字。 */
  padding: 43px clamp(var(--space-5), 5.5vw, 105px);
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
/* 設計稿 Frame 997：845×40 滿寬紅條、圓角 50（不是包住文字的膠囊） */
.st-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0 0 20px; /* 設計稿 Frame 1002 的 gap */
  padding: var(--space-2) var(--space-8);
  background: var(--color-brand);
  border-radius: 50px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: #fff;
}
.st-card__body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

/* ============================================
   北視
   ============================================ */
.ps-block {
  padding-block: clamp(var(--space-10), 6vw, 100px);
}
.ps-block__inner {
  width: 100%;
  max-width: calc(1406px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 660fr 668fr;
  align-items: center;
  gap: 78px;
}
/* 設計稿 Frame 1208：圖釘 →42→ 標題 →24→ 說明卡（Frame 1207 自己的間距是 24）。 */
.ps-block__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.ps-block__pin {
  width: clamp(120px, 12.2vw, 233px);  /* 設計稿 233×274 */
  height: auto;
  margin-bottom: 18px;                 /* 24 + 18 = 42 */
}
.ps-block__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
/* 設計稿 Frame 1052：660×68、圓角 8、陰影 4/4/30，內文 640 寬單行置中。
   內距寫 12，但子層是 640（660−20），所以左右各留 10 才排得下一行。 */
.ps-block__note {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  margin: 0;
  padding: var(--space-2) 10px;
  background: var(--color-bg);
  border-radius: 8px;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-base);
  line-height: 1.2;
}

/* 設計稿 Frame 1219：668×536、內距上下 64 左右 48，卡內 Frame 1218（572 寬）與結語間距 20。 */
.ps-needs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: clamp(var(--space-8), 3.3vw, 64px) clamp(var(--space-5), 2.5vw, 48px);
  background: var(--color-bg);
  border-radius: 8px;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25);
}
/* 標題區與需求列之間是 48（Frame 1218 的 itemSpacing）。 */
.ps-needs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 530px;              /* 設計稿 Frame 1217 */
  margin-bottom: 28px;           /* 20 + 28 = 48 */
}
.ps-needs__heading {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
}
/* 設計稿 Rectangle 189 是 530×8 的整條淡紅底線，不是短的裝飾線。 */
.ps-needs__rule {
  width: 100%;
  height: 8px;
  background: var(--color-brand-soft-2);
}
/* 設計稿 Frame 1214／1215：五項排成「上 3 下 2」、下排置中，每項 172 寬、gap 28。 */
.ps-needs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-need {
  /* 每列固定 3 個：用百分比當 flex-basis，卡片寬度不足時整排一起縮，
     不會因為少幾像素就掉成 2＋2＋1。上限維持設計稿的 172。 */
  flex: 0 1 calc((100% - 56px) / 3);
  max-width: 172px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* 設計稿 Rectangle 187（172×64）cornerRadius = 0 */
.ps-need img {
  width: 100%;
  height: auto;
}
/* 設計稿 Frame 1210：與上方圖同寬（172）、1px 黑框、內距 4，文字置中。 */
.ps-need__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 29px;
  padding: 4px var(--space-2);
  border: 1px solid var(--color-text);
  font-size: var(--fs-base);
  line-height: 1.2;
  text-align: center;
}
/* 設計稿卡片最後一行結語（480 寬、16/400）。 */
.ps-needs__foot {
  width: 100%;
  max-width: 480px;
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-align: center;
}

/* ============================================
   吉元
   ============================================ */
.cy-block {
  padding-block: clamp(var(--space-10), 8.4vw, 162px) clamp(var(--space-12), 9.1vw, 175px);
  /* 傾斜 8.19° 的粉紅底在窄畫面會比卡片寬出一截（390 時整頁多 9px 可捲動）。
     用 clip 裁掉溢出的角，讓它變成貼齊邊緣的裝飾；
     clip 不會像 hidden 一樣建立捲動容器，也不會影響 sticky。 */
  overflow-x: clip;
}
/* 設計稿 Frame 1261：左欄 476（文字 ＋ 情境圖）、右欄 594（粉紅面板），間距 116。 */
.cy-block__inner {
  width: 100%;
  max-width: calc(1186px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  /* 476fr / 594fr 是比例：扣掉 116 的間距後剛好還原設計稿的 476 與 594。 */
  grid-template-columns: minmax(0, 476fr) minmax(0, 594fr);
  align-items: center;
  gap: clamp(var(--space-8), 6vw, 116px);
}
/* 設計稿 Frame 1256：文字區 →48→ 情境圖 */
.cy-block__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-6), 2.5vw, 48px);
}
/* 設計稿 Frame 1255：標題 →24→ 說明 */
.cy-block__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
/* 設計稿的文字欄是 436，但標題整行需要 448（16 字 × 28），在 Figma 裡是溢出的。
   標題放寬到 476（左欄寬）才能維持設計稿的單行；說明維持 436。 */
.cy-block__heading {
  max-width: 476px;
  margin: 0;
  font-size: var(--fs-2xl);      /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  text-wrap: wrap;               /* 3-base.css 的 balance 會改變斷點 */
}
/* 設計稿的說明是靠左的，不跟著標題置中。 */
.cy-block__lede {
  max-width: 436px;
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}
/* 設計稿 Rectangle 194（476×305）cornerRadius = 0 */
.cy-block__photo {
  width: 100%;
  max-width: 476px;
  height: auto;
}

/* 設計稿 Group 563：一塊傾斜的 #efb9b9 墊在後面，上面疊 520×556 的 #ffe5e5 卡片。
   粉紅塊是純色矩形、沒有匯出成素材，所以旋轉必須寫進 CSS（跟有素材的裝飾不同）。
   本體尺寸與角度是量 design.png 的四個角得到的：519×548、順時針 8.19°
   —— meta.json 的 594×624 是旋轉後的外框，不是矩形本身。 */
.cy-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 100%;
  max-width: 480px;              /* 設計稿 520，實機偏大，收一階 */
}
.cy-panel::before {
  content: "";
  position: absolute;
  /* 設計稿 519×548 與卡片 520×556 幾乎同尺寸，只靠旋轉露出四個角。
     直接跟著卡片走，卡片改大小時不用兩邊同步調。 */
  width: 100%;
  height: 100%;
  background: #efb9b9;
  /* 設計稿的粉紅塊中心比卡片高 5px */
  translate: 0 -5px;
  rotate: 8.19deg;
  z-index: -1;
}
.cy-panel__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 設計稿 Frame 1259：標題 →44→ 下半段；下半段（Frame 1258）內部一律 27。
     設計稿的上下內距是 129（框高 556、內容 298），留白偏多，收到 88。 */
  gap: 0;
  padding: clamp(var(--space-8), 4.6vw, 88px) var(--space-6);
  background: #ffe5e5;
  text-align: center;
}
.cy-panel__heading {
  margin: 0;
  font-size: var(--fs-xl);        /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.cy-panel__list {
  display: flex;
  flex-direction: column;
  gap: 27px;
  width: 100%;
  max-width: 290px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
/* 設計稿 Frame 1110：290×32、白底、左右內距 40、圓圈與文字間距 10 */
.cy-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 32px;
  /* 設計稿內距寫 5，但 5+24+5 = 34 > 框高 32，在 Figma 裡是溢出的；收成 4 維持 32。 */
  padding: 4px var(--space-5);
  background: var(--color-bg);
}
/* 設計稿 Frame 1257：24×24 的紅圓，白色數字 20/500 */
.cy-item__no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: #fff;
}
.cy-item__label {
  font-size: var(--fs-lg);        /* 20px */
  line-height: 1.2;
  white-space: nowrap;
}
/* 設計稿的結語是 20px，不是 16px；寬 280、排兩行。
   它與上方三個項目同屬 Frame 1258，間距是 27 而不是卡片的 44。 */
.cy-panel__foot {
  max-width: 280px;
  margin: 27px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .cy-panel { max-width: 100%; }
}
@media (max-width: 640px) {
  .cy-item { padding: 5px var(--space-4); }

  /* 後面那塊粉紅底是「卡片同尺寸再轉 8.19 度」，轉完的外框寬度是
     W·cos8.19 ＋ H·sin8.19。卡片吃滿版心（358）時外框會變成 404，
     兩側各溢出 23 被螢幕切掉。把卡片收窄，讓轉完的外框塞得進版心。 */
  .cy-panel { max-width: 300px; }
  .cy-panel__card { padding: var(--space-8) var(--space-5); }
  .cy-panel__list { max-width: 100%; margin-top: var(--space-8); }
  .cy-panel__foot { max-width: 100%; margin-top: var(--space-5); font-size: var(--fs-base); }
}

/* ============================================
   信和
   ============================================ */
.xh-block {
  position: relative;
  padding-block: clamp(var(--space-10), 6vw, 94px)
    clamp(var(--space-8), 4vw, 60px);
}
/* 設計稿 mo_img03：節點是 354×279，但匯出的素材是 871×721（＝435.5×360.5 @2x）——
   多出來的 81.5px 是那兩層陰影（4/4/10 與 0/4/41）外擴後烘進圖檔的留白。
   所以 CSS 不能再套一次 drop-shadow，定位也要把每邊 40.75 的留白扣掉：
   節點 x=1303 → 元素右緣距頁面右側 222；節點 y=290（在 hero 帶內）→ top = −181。 */
.xh-block__float {
  position: absolute;
  right: clamp(var(--space-4), 11.2vw, 215px);
  top: clamp(-181px, -9.4vw, -60px);
  width: clamp(180px, 22.7vw, 436px);
  height: auto;
}
.xh-block__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(725px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);          /* 設計稿 Frame 1284：標題 →24→ 說明 */
  text-align: center;
}
.xh-block__heading {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.xh-block__lede {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}
/* 設計稿 image 2（725×450）cornerRadius = 0；文字區到照片是 36（Frame 1287）。 */
.xh-block__photo {
  width: 100%;
  height: auto;
  margin-top: 12px;             /* 24 + 12 = 36 */
}

.xh-needs {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--space-10), 3.4vw, 66px)
    clamp(var(--space-12), 10.3vw, 197px);
  /* 同 .st-intro：裝飾底圖直接掛區塊背景、靠左下，素材已淡化不另壓 opacity。 */
  /* 左下角的數據機裝飾。素材本身已經淡化過（使用者提供的版本），
     CSS 不再壓 opacity，否則會淡到幾乎看不見。
     寬度取 61.3%：新素材右側有約 26% 的空白，換算後機身寬度才會跟設計稿的 868 一致
     （設計稿素材幾乎滿版、節點 870 寬；新素材本體只佔 73.8%）。 */
  background: url("../../images/hub/xinhe-bg.webp?v=1789380657") left bottom / 61.3% auto no-repeat;
}
.xh-needs__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(911px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.xh-needs__heading {
  margin: 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.xh-needs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 設計稿：236×58 的色塊，左側疊一顆 58×36 的白色圓角編號 */
.xh-need {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 236px;
  min-height: 58px;
  margin-left: 25px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}
.xh-need--pink {
  background: var(--color-brand-soft-2);
}
.xh-need--yellow {
  background: var(--color-accent-soft);
}
.xh-need__no {
  position: absolute;
  left: -25px;
  top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 36px;
  background: var(--color-bg);
  border-radius: 36px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}
.xh-needs__foot {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

/* ── RWD ── */
@media (max-width: 1024px) {
  .st-intro__inner,
  .ps-block__inner,
  .cy-block__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .ps-need {
    flex-basis: calc((100% - 28px) / 2);
  }
  /* 機上盒維持「浮在 hero 與本區塊交界」的做法，不要掉回正常流 ——
     掉回去就只是一張擺在標題上方的圖，設計上的重疊感沒了。
     位置跟桌機一樣靠右；上下用同一個 --float-w 換算，
     圖大約一半探進 hero、一半壓在本區塊上，而且區塊的上內距會跟著讓開。 */
  .xh-block {
    --float-w: clamp(150px, 30vw, 300px);
    /* 上內距要讓開的是圖的「視覺」下緣，不是素材下緣 ——
       素材底下還有 9.4% 的透明陰影留白，照素材算會多空一截。
       0.41 − 0.094 = 0.316 才是機上盒本體壓進來的高度。 */
    padding-top: calc(var(--float-w) * 0.316 + var(--space-5));
  }
  .xh-block__float {
    position: absolute;
    left: auto;
    translate: none;
    /* 素材四邊各有約 9.4% 的陰影留白（陰影外擴後烘進圖檔）。
       上下位移抓 0.42 才會視覺上對半；靠右也要把那段留白扣掉，
       否則圖看起來會比版心再內縮 14px 左右。 */
    top: calc(var(--float-w) * -0.42);
    right: calc(var(--container-pad) - var(--float-w) * 0.094);
    width: var(--float-w);
    height: auto;
    margin: 0;
    z-index: 2;
  }
}
@media (max-width: 640px) {
  .ps-needs__list {
    gap: var(--space-4);
  }
  .ps-need {
    flex-basis: calc(50% - var(--space-2));
  }
  .xh-needs__list {
    gap: var(--space-8);
  }
  .xh-need {
    width: 100%;
    max-width: 236px;
  }
  .cy-item {
    padding: 5px var(--space-4);
  }

  /* 紅條標題在手機會折成兩行，塞在 40 高的紅條裡（行高 19.2×2＝38.4）非常擠。
     字級收到與說明同級、左右內距從 32 收到 16，讓它回到單行。
     桌機維持設計稿的 --fs-lg／105 內距，不動。 */
  .st-card__title {
    padding-inline: var(--space-4);
    font-size: var(--fs-base);
  }
}