/* =====================================================================
   共用 CTA 卡片 —「讓專業團隊，為您的工程把關！」
   最初為首頁區塊（取代舊版 Voltz 英文訂閱卡片 .cta1-aection-area），
   現為多頁共用：各頁自持一份 markup（標題／說明文字可各自調整），
   卡片樣式、插圖一律共用本檔，勿於各頁另行覆寫。
   使用頁面：首頁、企業沿革。新增頁面時記得在該頁 @section Head 引入本檔。
   class 一律 hcta- 前綴，避免與 Voltz 既有 .cta-* 樣式衝突。
   設計 token（--red / --ink / --paper-2 / --radius-lg）由 tec-shared.css 全站提供。
   ===================================================================== */

/* 外層 section：上下內距 80/40，底色次要紙色；
   底部 40px 內距同時負責與頁尾金屬銘板保持距離
   （舊卡片靠 tec-shared.css 的 .cta1-aection-area margin 處理，新版自理）。 */
.hcta-section {
  padding: 80px 0 40px;
  background: var(--paper-2);
}

/* 紅色圓角卡片：左文字、右圖片（圖片欄較寬） */
.hcta-banner {
  position: relative;
  z-index: 2;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 64px 60px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  align-items: center;
}

/* 裝飾紋理：右上角徑向白光 + 135° 斜紋 */
.hcta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, .18) 0, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 28px, transparent 28px 56px);
  pointer-events: none;
}

.hcta-banner h2 {
  position: relative;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.18;
  margin: 0 0 16px;
  color: #fff;
}

.hcta-banner p {
  position: relative;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  line-height: 1.75;
  max-width: 520px;
  font-family: 'Noto Sans TC', sans-serif;
}

/* 服務專線：定案 40px（避免於此版型換行） */
.hcta-banner p.hcta-hotline {
  font-family: 'Manrope', 'Noto Sans TC', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #fff;
  margin-bottom: 18px;
}

/* 行動列：說明文字 + 黑色按鈕 */
.hcta-action {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hcta-action-text {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 15px;
  color: #fff;
}

.hcta-btn {
  background: var(--ink);
  color: #fff;
  padding: 16px 26px;
  border-radius: 10px;
  font-weight: 700;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background .15s;
}

.hcta-btn:hover {
  background: #000;
  color: #fff;
}

/* 右側去背插圖：保持容器透明讓紅底透出 */
.hcta-figure {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  display: grid;
  place-items: center;
}

.hcta-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 覆寫 Voltz main.css 全域 img { max-height:100% }，否則放大插圖會被壓縮 */
  max-width: 100%;
  max-height: none;
}

/* 響應式：窄螢幕改單欄，圖片置於文字下方 */
@media (max-width: 991.98px) {
  .hcta-banner {
    grid-template-columns: 1fr;
    padding: 48px 32px;
    gap: 28px;
  }
}

/* 服務專線防換行（320–767px 原本會斷成「服務專線 0800-」／「582-898」兩行）。
   文字可用寬度隨 Bootstrap .container 斷點跳動（≤575 滿版、576–767 為 540、≥768 為 720），
   並非隨視窗平滑變化，故分段給值；數值由實測「單行最大字級」退約 7% 安全邊界而來。
   刻意不加 white-space: nowrap —— 日後若專線號碼變長，寧可換行也不要撐出水平捲軸。 */
/* 桌機雙欄版型：左欄僅佔 1fr，992–1199 可用寬只有約 333px、1200–1399 約 410px，
   定稿的 40px 在此二區間同樣會換行（≥1400 才塞得下）。 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hcta-banner p.hcta-hotline { font-size: 26px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hcta-banner p.hcta-hotline { font-size: 32px; }
}
@media (max-width: 767.98px) {
  .hcta-banner p.hcta-hotline { font-size: 36px; }
}
@media (max-width: 575.98px) {
  /* 此區間容器滿版，可用寬 ≈ 視窗寬 - 88px，故改用流體字級跟著縮 */
  .hcta-banner p.hcta-hotline { font-size: min(36px, calc(8.2vw - 8px)); }
}