/* ============================================
   首頁
   數值來源：D:\figma-export\home\desktop（1920×2229）
   ============================================ */

/* ── 通用：外框裝飾標題 ──
   設計稿的框線是純幾何：上下橫線在 6.5 / 56.5，左右直線在寬度的
   6.01% / 94.47%。310 與 618 兩種尺寸比例完全相同，所以用 CSS 重現
   一次即可，且能隨字級自由縮放（比固定尺寸 SVG 更適合 RWD）。 */
.framed-heading {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  /* 設計稿 310 寬、文字 144 → 左右各 83；--wide 版 618 寬、文字 518 → 各 50。
     兩個框是手繪的，比例不一致，所以分開給值。
     最小值不能太小 —— 框線的直線在寬度的 6% / 94.5%，內距一縮文字就貼上去。 */
  padding: 17px clamp(var(--space-8), 6vw, 83px);
  font-size: var(--fs-xl);           /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
  text-wrap: balance;                /* 真的要換行時讓兩行長度平均，不會斷成「…最新／熱門方案總攬」 */
}
.framed-heading::before {            /* 上下兩條橫線 */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 6.5px; bottom: 7.5px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  pointer-events: none;
}
.framed-heading::after {             /* 左右兩條直線 */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 6.01%; right: 5.53%;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  pointer-events: none;
}
/* 長標題（南桃園｜北視｜吉元｜信和，最新熱門方案總攬！）約 24 字。
   桌機維持設計稿的 24px 單行；視窗變窄時先縮字級撐住單行，
   撐不住才換行，並保留足夠的左右內距不貼到框線。 */
.framed-heading--wide {
  /* 直線畫在「框寬的 6.01%」，框寬 = 文字寬 + 2×內距，所以內距必須跟著文字寬走。
     用 vw 給內距的話，窄視窗會出現內距 < 6.01% 而讓文字壓到線上。
     em 讓內距隨字級縮放，各尺寸下文字與直線的間隙都穩定在 12px 左右。 */
  padding-inline: calc(1.5em + 14px);
  font-size: clamp(0.9375rem, 0.35rem + 1.75vw, 1.5rem);   /* 15 → 24px */
}
.framed-heading__text { position: relative; }

/* ── 通用：外框 CTA 按鈕 ──
   設計稿是兩層矩形：外層 196×58 只有 1px 紅框，內層 186×46 紅色實心，
   內縮 5px（左右）／6px（上下）。用 ::before 疊出內層。 */
.btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  /* 設計稿兩顆都是固定 196×58（Rectangle 9），內容再長也不會把框撐開。
     原本寫 min-width + 40px 左右內距，較長的「哪個適合你？問我！」會撐成 260。 */
  width: 196px;
  max-width: 100%;
  min-height: 58px;
  align-self: center;              /* flex 容器裡不要被拉伸 */
  /* 17+17+22+2(框線) = 58。左右留 10 —— 較長那顆的內容（文字＋間距＋箭頭）
     在 Noto Sans TC 下約 171，內距 13 只剩 168 會剛好擠成兩行。 */
  padding: 17px 10px;
  border: 1px solid var(--color-brand);
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-base);
  line-height: 1.375;            /* 16px → 22px，加上下內距 18 剛好 58 */
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 6px 5px;
  background: var(--color-brand);
  transition: background var(--ease-base);
}
.btn-ghost:hover::before { background: var(--color-brand-hover); }
.btn-ghost:hover { color: #fff; }
.btn-ghost__label,
.btn-ghost__arrow { position: relative; }
.btn-ghost__label { white-space: nowrap; }

/* 設計稿 Frame 24：18×18 的正圓（cornerRadius 9 = 半徑），白底，
   內含 7×8 的紅色三角形 Polygon 1。原本寫 21×21／圓角 9 會變成圓角方塊。 */
.btn-ghost__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: var(--radius-full);
}
.btn-ghost__arrow img { width: 7px; height: 8px; }

/* ============================================
   1. 主視覺
   ============================================ */
.hero {
  position: relative;
  isolation: isolate;
  /* 設計稿情境照 1920×700，最上緣 60px 被 header 蓋住，可視高度 640。 */
  /* 同 .hub-hero：不寫 width 的話，min-height 會透過比例反推出 960 的寬度。 */
  width: 100%;
  aspect-ratio: 1920 / 640;
  min-height: 320px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
/* 設計稿在照片上疊了兩層漸層（Rectangle 3 / 7）讓白色標題讀得清楚。
   兩層都是「黑 → #666 透明」，且 fillOpacity 皆為 0.2 —— 是很淡的一層，
   照著 Figma 的原值寫，過重會把情境照整個蓋掉。 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(189deg, rgba(0, 0, 0, .2) 0%, rgba(102, 102, 102, 0) 100%),
    linear-gradient(89deg, rgba(0, 0, 0, .2) 0%, rgba(102, 102, 102, 0) 100%);
}

/* 內容用百分比定位，等比縮放時位置完全跟著設計稿走 */
.hero__inner {
  position: relative;
  z-index: 2;                    /* 疊在照片與遮罩之上 */
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin-inline: auto;
}
.hero__wifi {
  position: absolute;
  /* 素材 201×187，圖形本體 182×166 內縮 9px（陰影外擴）。
     依設計稿 PNG 實測圖形位於 @283,162 → 素材框左上角 @274,153。
     旋轉已烘進 SVG，CSS 不可再轉。 */
  left: 14.27%;                  /* 274 / 1920 */
  top: 23.91%;                   /* 153 / 640 */
  width: 10.47%;                 /* 201 / 1920 */
  height: auto;
  /* DROP_SHADOW 0/2/9 與 INNER_SHADOW 0/2/2 都已烘進 hero-wifi.svg 的
     filter0_di（兩個 feGaussianBlur），這裡再套 drop-shadow 會變成雙重陰影。 */
}

/* 設計稿「、」12×14 @1241,330（旋轉已烘進 hero-dot.svg） */
.hero__dot {
  position: absolute;
  left: 64.64%;                  /* 1241 / 1920 */
  top: 51.56%;                   /* 330 / 640 */
  width: 0.625%;                 /* 12 / 1920 */
  height: auto;
}
.hero__title {
  position: absolute;
  left: 23.958%;                 /* 460 / 1920 */
  top: 30.31%;                   /* 194 / 640 */
  /* 素材 1008 寬（比設計稿節點 1000 多出陰影外擴的 4px×2） */
  width: 52.5%;                  /* 1008 / 1920 */
  margin: 0;
  font-size: 0;                  /* 標題為外框美術字，文案寫在 alt */
  line-height: 0;
}
.hero__title > img:first-child {
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--shadow-title));
}

/* 底線是 .hero__title 的子元素，百分比要以「標題框 1000×205」換算，
   不是以整個 hero 1920 換算 —— 原本寬度寫 294/1920 只有應有尺寸的一半。
   設計稿：標題 @460,194（1000×205）、底線 @940,281（素材 294×38）。 */
.hero__underline {
  position: absolute;
  left: 48%;                     /* (940 − 460) / 1000 */
  top: 42.4%;                    /* (281 − 194) / 205 */
  width: 29.4%;                  /* 294 / 1000 */
  height: auto;
}

/* ============================================
   2. 導言
   ============================================ */
.intro {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 487px;
  padding-block: var(--space-16);
  overflow: hidden;
}
.intro__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;                   /* 設計稿節點 opacity，匯出的 CSS 沒帶出來 */
  z-index: 0;
}
.intro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* max-width 要含左右內距，否則實際內容寬會少掉 2×--container-pad。
     設計稿是 738 —— 那個寬度本來就是照標題單行寬框出來的，但本站中文用
     Noto Sans TC，同樣 28px 下比 Figma 的量測寬 18px（2.4%），
     沿用 738 會讓標題在桌機被迫斷成兩行。放寬到 760 以維持設計稿的單行呈現。 */
  max-width: calc(760px + var(--container-pad) * 2);
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;                     /* 設計稿文字區與按鈕的間距 */
  text-align: center;
}
.intro__title {
  margin: 0;
  /* 桌機維持設計稿 28px；手機下修到 20px，讓不可拆的尾句在 320px 視窗仍放得下 */
  font-size: clamp(1.25rem, 0.7rem + 1.6vw, 1.75rem);   /* 20 → 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-text);
}

.intro__lede {
  margin: -2px 0 0;
  font-size: var(--fs-base);
  line-height: 1.2;
  color: var(--color-text);
}

/* ============================================
   3. 服務範圍一覽
   ============================================ */
.coverage { padding-block: var(--space-12) var(--space-16); }
.coverage__inner {
  width: 100%;
  max-width: calc(1228px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.coverage__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.coverage-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);           /* 8px：標題→分隔線 */
  /* Figma 回報的 padding 是 45/24，但從子元素實際座標算出來是上下 20、左右 30。
     左右收到 14 —— 卡片 280 寬扣掉 1px 紅框，內容剩 250，剛好放得下設計稿那排
     5 顆標籤（43×5 + 8×4 = 247）。多 1px 就會掉成每列 4 顆，最後一列只剩一顆。 */
  padding: 20px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 12px;
}
.coverage-card__title {
  margin: 0;
  font-size: var(--fs-lg);       /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand);
  text-align: center;
}
/* 業者名的點擊區只有 20px 高；用內距撐到 44，外距抵銷所以版面完全不變。 */
.coverage-card__title a {
  display: block;
  padding-block: 12px;
  margin-block: -12px;
  color: inherit;
  text-decoration: none;
}
.coverage-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 設計稿是手動排成每列 4～5 個；改成單一串列讓 flex-wrap 自己換行，
   地區增減時不必回頭改每一列要放幾個。列距 7、字距 8 都是設計稿實測值。 */
.coverage-card__places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  row-gap: 7px;
  column-gap: 8px;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-accent);   /* 設計稿的橘色分隔線 */
  list-style: none;
}
/* 設計稿 Frame 927：43×28、圓角 4、底色 #fff0c0，
   內文是 16px（節點高 19 → 行高 1.1875），不是 12px。
   上下內距 (28−19)/2 = 4.5，左右 (43−32)/2 = 5.5。
   43 只當下限 —— 三個字的「苗栗市」要能撐開，不是縮成 12px 硬塞進 43。 */
.coverage-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 43px;
  min-height: 28px;
  padding: 4.5px 5.5px;
  background: #fff0c0;
  border-radius: 4px;
  font-size: var(--fs-base);     /* 16px */
  line-height: 1.1875;           /* 16 → 19 */
  text-align: center;
  white-space: nowrap;
}

/* ============================================
   4. 最新熱門方案總攬
   ============================================ */
.plans {
  position: relative;
  /* 設計稿 Rectangle 14 是 opacity .1 的紅色漸層（100%→0），呈現為淡粉底 */
  background: linear-gradient(180deg, rgba(230, 67, 62, .10) 0%, rgba(230, 67, 62, 0) 100%);
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
}
.plans__inner {
  position: relative;
  width: 100%;
  max-width: calc(1248px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plans__router {
  position: absolute;
  right: calc(-1 * min(80px, max(0px, (100vw - 1248px) / 2 - 20px)));
  bottom: -102px;
  width: 200px;
  height: auto;
  pointer-events: none;
}
.plans .btn-ghost { margin-top: var(--space-10); }

/* ============================================
   RWD
   ============================================ */
@media (max-width: 1024px) {
  .coverage__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .plans__grid { gap: var(--space-8); }
  .plans__router { width: clamp(140px, 15vw, 200px); }
}

@media (max-width: 768px) {
  /* 手機沒有設計稿：主視覺改直向堆疊，否則 3:1 的比例會縮成一條細帶。
     上下 64 的內距 ＋ 80 高的 wifi 圖示會把主視覺推到 308 高，
     第一屏幾乎只剩它；內距與圖示一起收，標題維持原尺寸不動。 */
  .hero {
    aspect-ratio: auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: clamp(var(--space-8), 8vw, var(--space-12)) var(--container-pad);
  }
  .hero__inner {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    height: auto;
  }
  /* 圖示是陪襯，不該跟標題搶份量：原本 22vw（390 寬時 86）縮到 15vw（59） */
  .hero__wifi { position: static; width: clamp(52px, 15vw, 88px); }
  .hero__title { position: static; width: 100%; max-width: 460px; }
  .hero__underline { display: none; }   /* 手繪底線對齊的是桌機字寬，縮小後會錯位 */

  /* .plans__grid 收單欄的規則已移到 5-components.css，最新優惠頁才會一起生效。 */

  /* 手機：路由器縮小，掛在方案卡「外面」的右下角往下探出。
     只與卡片重疊 12px，其餘都在白色容器之外。
     方案組補一段 margin-bottom 讓出探出的高度，否則會壓到下方的 CTA 按鈕。 */
  .plans {
    --router-w: clamp(96px, 26vw, 130px);
    --router-h: calc(var(--router-w) * 0.6266);   /* 241:151 原始比例 */
  }
  .plans__router {
    left: auto;
    right: -8px;
    bottom: calc(-1 * (var(--router-h) - 12px));
    width: var(--router-w);
  }
  .plan-group--accent { margin-bottom: var(--router-h); }
  .intro { min-height: 0; padding-block: var(--space-12); }
}

@media (max-width: 640px) {
  .coverage__list { grid-template-columns: 1fr; }
  .coverage-card { padding: var(--space-8) var(--space-5); }
  .plans .btn-ghost,
  .intro .btn-ghost { width: 100%; }
}