/* =====================================================================
   Zhongkai CMS — frontend overrides (Bootstrap 5.3 base from CDN)
   ===================================================================== */

:root {
  --zk-primary: #0d3b66;
  --zk-accent: #f4a300;
  --zk-ink: #1c2733;
  --zk-muted: #5c6b7a;
  --zk-bg-soft: #f5f7fa;
}

body.zk-front {
  color: var(--zk-ink);
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

/* ---- navbar / footer ---- */
.zk-navbar {
  background: var(--zk-primary);
  box-shadow: 0 2px 10px rgba(13, 59, 102, .25);
}
.zk-navbar .nav-link {
  font-weight: 500;
  letter-spacing: .02em;
}
.zk-navbar .nav-link:hover,
.zk-navbar .nav-link.active {
  color: var(--zk-accent) !important;
}
.zk-lang-switch .btn.active {
  background: var(--zk-accent);
  border-color: var(--zk-accent);
  color: var(--zk-primary);
}

.zk-footer {
  background: #12283d;
  color: #b9c6d3;
}
.zk-footer h5, .zk-footer h6 { color: #fff; }
.zk-footer-links a {
  color: #b9c6d3;
  text-decoration: none;
}
.zk-footer-links a:hover { color: var(--zk-accent); }

/* ---- hero carousel ---- */
.zk-hero {
  position: relative;
  min-height: 460px;
  background: var(--zk-bg-soft);
  overflow: hidden;
}
.zk-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.zk-hero-slide.is-active { opacity: 1; z-index: 1; }
.zk-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13, 59, 102, .78) 0%, rgba(13, 59, 102, .35) 60%, transparent 100%);
}
.zk-hero-copy {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 640px;
}
.zk-hero-copy h1 {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.zk-hero-copy p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  opacity: .92;
}
.zk-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.zk-hero-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .45);
  padding: 0;
}
.zk-hero-dots button.is-active { background: var(--zk-accent); }
.zk-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border: 0;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.zk-hero-arrow:hover { background: rgba(255, 255, 255, .35); }
.zk-hero-prev { left: 16px; }
.zk-hero-next { right: 16px; }

/* ---- cards ---- */
.zk-card {
  border: 0;
  border-radius: .85rem;
  box-shadow: 0 4px 18px rgba(28, 39, 51, .07);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.zk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(28, 39, 51, .13);
}
.zk-card .zk-card-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.zk-biz-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(13, 59, 102, .08);
  color: var(--zk-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

/* ---- section scaffolding ---- */
.zk-section { padding: 4.5rem 0; }
.zk-section-soft { background: var(--zk-bg-soft); }
.zk-section-title { font-weight: 700; color: var(--zk-primary); }
.zk-section-sub { color: var(--zk-muted); }
.zk-cta-band {
  background: linear-gradient(95deg, var(--zk-primary), #1c5b96);
  color: #fff;
  border-radius: 1rem;
}

/* ---- misc ---- */
.zk-badge-cat {
  background: rgba(244, 163, 0, .12);
  color: #8a5d00;
}
.zk-spec-table td:first-child {
  width: 34%;
  color: var(--zk-muted);
}
.zk-faq .accordion-button:not(.collapsed) {
  background: rgba(13, 59, 102, .06);
  color: var(--zk-primary);
  box-shadow: none;
}
.zk-prod-sidebar .list-group-item.active {
  background: var(--zk-primary);
  border-color: var(--zk-primary);
}
.zk-thumbs img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: .5rem;
  cursor: pointer;
  border: 2px solid transparent;
}
.zk-thumbs img.is-active { border-color: var(--zk-accent); }

@media (max-width: 991.98px) {
  .zk-section { padding: 3.5rem 0; }
}

@media (max-width: 767.98px) {
  .zk-hero { min-height: clamp(300px, 62vw, 380px); }
  .zk-hero-arrow { width: 34px; height: 34px; }
  .zk-hero-prev { left: 10px; }
  .zk-hero-next { right: 10px; }
  .zk-hero-copy p { font-size: .95rem; }
  /* ---- Hero 輪播：手機不再把文字疊在圖上，改置於圖下方深色文字帶 ---- */
  #heroCarousel .carousel-caption {
    position: static;
    right: auto; bottom: auto; left: auto;
    padding: .8rem 1rem .95rem;
    background: rgba(13, 59, 102, .94);
    text-align: left;
  }
  #heroCarousel .carousel-caption h2 { font-size: 1.12rem; margin-bottom: .5rem; }
  #heroCarousel .carousel-caption .btn { font-size: .88rem; padding: .3rem .85rem; }
  #heroCarousel .carousel-indicators { display: none; }
  .zk-section { padding: 2.5rem 0; }
  /* CTA 色塊在窄屏改垂直置中 */
  .zk-cta-band { text-align: center; }
  /* 分頁多於一行時允許換行 */
  .pagination { flex-wrap: wrap; gap: .25rem; }
  /* 產品相簿縮圖：橫向滾動 */
  .zk-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; }
  .zk-thumbs img { flex: 0 0 auto; width: 64px; height: 64px; }
  /* 規格表首欄不搶寬 */
  .zk-spec-table td:first-child { width: 42%; }
  /* 面包屑過長時截斷 */
  .breadcrumb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* 觸控設備：取消 hover 位移（避免點完殘留「翹起」） */
@media (hover: none) {
  .zk-card:hover { transform: none; box-shadow: 0 4px 18px rgba(28, 39, 51, .07); }
}