/* === CTA 區塊背景 + 垂直排列 === */

/* 讓區塊本身擁有背景圖層 */
.cta-section {
  background: url("../images/frontpage/cta/cta-bg@2px.png") center/cover
    no-repeat;
  color: #fff;
  text-align: center;
  padding: clamp(96px, 10vw, 144px) 0; /* 整個區塊上下留白更寬鬆 */
  position: relative;
}

/* 內層內容區（標題 + 電話 + QRcode） */
.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 5vw, 36px); /* 🆕 控制標題、電話、QRcode之間距離 */
}

/* 背景圖層（霧白遮罩） */
.cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      0deg,
      rgba(44, 41, 90, 0.1),
      rgba(44, 41, 90, 0.1)
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("../images/frontpage/cta/cta-bg@1x.jpg") center center / cover no-repeat;
  z-index: 0;
}
@media (min-width: 768px) {
  .cta-bg {
    background: linear-gradient(
        0deg,
        rgba(44, 41, 90, 0.12),
        rgba(44, 41, 90, 0.12)
      ),
      linear-gradient(0deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
      url("../images/frontpage/cta/cta-bg@tablet.jpg") center center / cover
        no-repeat;
  }
}
@media (min-width: 1200px) {
  .cta-bg {
    background: linear-gradient(
        0deg,
        rgba(44, 41, 90, 0.12),
        rgba(44, 41, 90, 0.12)
      ),
      linear-gradient(0deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
      url("../images/frontpage/cta/cta-bg-large.jpg") center center / cover
        no-repeat;
  }
}

/* 內容置中垂直排列 */
.cta-wrap {
  position: relative;
  z-index: 1; /* 關鍵：壓在背景層之上 */
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* 元件上下間距：標題 ↔ 電話 ↔ 按鈕 ↔ QR */
  gap: clamp(20px, 5vw, 36px);
}

/* 標題文字 */
.cta-title {
  font-weight: 800;
  font-size: clamp(26px, 5.2vw, 34px);
  line-height: 1.45;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 電話 */
.cta-phone {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.5px; /* 🆕 提升高解析度螢幕閱讀性 */
  transition: transform 0.25s ease, color 0.25s ease; /* 🆕 平滑互動效果 */
}

@media (hover: hover) and (pointer: fine) {
  .cta-phone:hover {
    transform: scale(1.05);
    color: var(--bg-light); /* 🆕 品牌輕藍綠，僅桌機 hover 觸發 */
  }
}

/* 外框按鈕 */
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border: 2px solid #fff;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* QR Code */
/* 讓 QR 與下方區塊的距離再多一點（視覺更喘） */
.cta-qr {
  margin-top: clamp(8px, 2.5vw, 16px);
  margin-bottom: clamp(24px, 6vw, 48px); /* 🆕 下方留白 */
}
.cta-qr img {
  display: block;
  width: min(70vw, 240px);
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  background: #fff;
}

/* 桌機：兩欄感（文字在左、QR 靠右對齊），維持同版心 */
@media (min-width: 992px) {
  .cta-section {
    padding: clamp(56px, 8vw, 120px) 0;
  }
  .cta-wrap {
    max-width: 640px;
  }
  .cta-qr img {
    width: 260px;
  }
}

/* 無障礙：鍵盤聚焦 */
.btn-cta-outline:focus-visible,
.cta-phone:focus-visible {
  outline: 3px solid #83c6bf;
  outline-offset: 3px;
}

/* 螢幕閱讀器隱藏文字 */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}