/**
 * 數位賦能單頁 — 覆寫 front.css 中導致上下錯位的規則
 * 桌面：左文案、右主視覺＋便利貼同一區塊對齊
 */

/* 字級與現場筆記／案例內頁一致（覆寫 front.css 超大標題） */
.peace-digital-page .digital-page-main .digital-hero-soft .digital-hero-copy h1,
.digital-page-main .digital-hero-soft .digital-hero-copy h1 {
  font-size: clamp(24px, 4vw, 36px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.peace-digital-page .digital-page-main .digital-hero-soft .digital-hero-copy p,
.digital-page-main .creative-section .section-text p,
.digital-page-main .digital-feature-card p,
.digital-page-main .digital-audience-block .field-card p,
.digital-page-main .digital-page-metrics-section .band-intro p {
  font-size: 15px !important;
  line-height: 1.72 !important;
  font-weight: 500 !important;
  color: #6f6157 !important;
}

.digital-page-main .digital-feature-card h3,
.digital-page-main .digital-audience-block .field-card h3 {
  font-size: 18px !important;
  line-height: 1.3 !important;
}

.digital-page-main .creative-section .section-text h2,
.digital-page-main .digital-page-metrics-section .band-intro h2 {
  font-size: clamp(20px, 3vw, 28px) !important;
  line-height: 1.25 !important;
}

.digital-page-main .kicker {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

.digital-hero-page.digital-hero-soft {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 520px) !important;
  gap: 48px !important;
  align-items: center !important;
  margin-top: 108px !important;
  padding: 56px 48px 64px !important;
}

.digital-hero-page.digital-hero-soft .digital-hero-copy {
  grid-column: 1;
  align-self: center;
}

.digital-hero-page.digital-hero-soft .digital-hero-visual {
  grid-column: 2;
  align-self: center;
  min-height: 420px;
}

.digital-hero-page.digital-hero-soft .digital-hero-card {
  margin-left: auto;
  margin-right: auto;
}

/* 第二區：標題左、三卡右（同一列） */
.creative-section.digital-feature-block {
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: start !important;
}

.creative-section.digital-feature-block .digital-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.creative-section.digital-feature-block .digital-feature-card {
  padding: 24px 22px !important;
  border-radius: 24px !important;
  background: #fffaf4 !important;
  border: 1px solid #ecd6bc !important;
  box-shadow: 0 14px 36px rgba(100, 60, 30, 0.08) !important;
}

.creative-section.digital-feature-block .digital-feature-card::after {
  display: none !important;
}

/* 服務對象區 */
.creative-section.digital-audience-block {
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: start !important;
}

.creative-section.digital-audience-block .cards-grid.three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* 數據看板：左說明、右四格 */
.digital-page-metrics-section .stats-band.digital-page-live-data-band {
  display: grid !important;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
  padding: 36px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

.digital-page-live-data-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 1100px) {
  .digital-hero-page.digital-hero-soft {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 44px 28px 52px !important;
  }

  .digital-hero-page.digital-hero-soft .digital-hero-copy,
  .digital-hero-page.digital-hero-soft .digital-hero-visual {
    grid-column: 1;
  }

  .digital-hero-page.digital-hero-soft .digital-hero-visual {
    min-height: auto;
    margin-top: 8px;
  }

  .creative-section.digital-feature-block,
  .creative-section.digital-audience-block {
    grid-template-columns: 1fr !important;
  }

  .creative-section.digital-feature-block .digital-feature-grid,
  .creative-section.digital-audience-block .cards-grid.three {
    grid-template-columns: 1fr !important;
  }

  .digital-page-metrics-section .stats-band.digital-page-live-data-band {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .digital-page-live-data-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 底部 CTA（Digital Field System）：保留便利貼裝飾 + 中文標題字級與內頁一致 */
.peace-digital-page .digital-page-main .cta-section .cta,
.digital-page-main .cta-section .cta {
  position: relative !important;
  min-height: 280px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 58px 72px 54px 310px !important;
  overflow: hidden !important;
  border-radius: 34px !important;
}

/* 便利貼（::before）與右下裝飾（::after）沿用 front.css，僅微調數位賦能頁位置 */
.peace-digital-page .digital-page-main .cta-section .cta::before,
.digital-page-main .cta-section .cta::before {
  display: flex !important;
  left: 112px !important;
  top: 78px !important;
}

.peace-digital-page .digital-page-main .cta-section .cta::after,
.digital-page-main .cta-section .cta::after {
  display: block !important;
}

.peace-digital-page .digital-page-main .cta-section .cta .kicker,
.digital-page-main .cta-section .cta .kicker {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 8px !important;
  color: #7157ee !important;
}

.peace-digital-page .digital-page-main .cta-section .cta h2,
.digital-page-main .cta-section .cta h2 {
  font-size: clamp(20px, 3vw, 28px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 900 !important;
  max-width: none !important;
  color: #2c211b !important;
}

.peace-digital-page .digital-page-main .cta-section .cta p,
.digital-page-main .cta-section .cta p {
  font-size: 15px !important;
  line-height: 1.72 !important;
  font-weight: 500 !important;
  margin: 12px 0 0 !important;
  color: #6f6157 !important;
  max-width: 62ch !important;
}

.peace-digital-page .digital-page-main .cta-section .cta .btn,
.digital-page-main .cta-section .cta .btn {
  margin-top: 4px !important;
  justify-self: start !important;
}

@media (max-width: 760px) {
  .peace-digital-page .digital-page-main .cta-section .cta,
  .digital-page-main .cta-section .cta {
    padding: 120px 22px 28px 24px !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .peace-digital-page .digital-page-main .cta-section .cta::before,
  .digital-page-main .cta-section .cta::before {
    left: 20px !important;
    top: 18px !important;
    width: 132px !important;
    height: 82px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .peace-digital-page .digital-page-main .cta-section .cta::after,
  .digital-page-main .cta-section .cta::after {
    width: 140px !important;
    height: 100px !important;
    right: 12px !important;
    bottom: 8px !important;
    opacity: 0.5 !important;
  }

  .peace-digital-page .digital-page-main .cta-section .cta .btn,
  .digital-page-main .cta-section .cta .btn {
    justify-self: stretch !important;
  }
}