/* ===== Hero 基本尺寸與排版===== */

/* 避免 hero/輪播把下拉裁掉：把 overflow 設為可見 */
#heroCarousel,
  #heroCarousel .carousel,      /* 若有此層級 */
  #heroCarousel .carousel-inner {
  overflow: visible; /* 很重要：避免裁切 dropdown */
}
#heroCarousel .hero-item {
  min-height: 50vh; /* 桌機/平板：縮短但仍具氣勢 */
  height: 65vh;
  position: relative;
  z-index: 1;
}

/* Hero黑色漸層暗層：提高文字對比 */
#heroCarousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

/* 內距：考量安全區 */
#heroCarousel .container {
  position: relative;
  z-index: 1;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

/* ===== 文字尺寸（RWD）===== */
#heroCarousel h1 {
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(28px, 3.4vw + 0.6rem, 56px);
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}

#heroCarousel .lead {
  margin-bottom: 1.5rem;
  font-size: clamp(16px, 1.2vw + 0.4rem, 22px);
  opacity: 0.95;
}

/* ===== CTA 按鈕（（桌機才 hover 動效）===== */
#heroCarousel .btn.btn-light {
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  border: 0;
}
/* 手機 ≤576px：最小 */
@media (max-width: 576px) {
  #heroCarousel .btn.btn-light {
    padding: 0.8rem 1rem;
    font-size: 14px;
  }
}

/* 平板 768–991px：中等 */
@media (min-width: 768px) and (max-width: 991.98px) {
  #heroCarousel .btn.btn-light {
    padding: 0.65rem 1.3rem;
    font-size: 15px;
  }
}

@media (hover: hover) and (pointer: fine) {
  #heroCarousel .btn.btn-light:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
  }
}

/* ===== 指示點（底部三個點）===== */
#heroCarousel .carousel-indicators {
  gap: 0.5rem;
  margin-bottom: 2rem;
}
#heroCarousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: transform 0.25s ease, background-color 0.25s ease,
    box-shadow 0.25s ease;
}
#heroCarousel .carousel-indicators .active {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15) inset;
}

/* 指示點主題色（依 data-theme 變色） */
#heroCarousel:has(.carousel-item.active[data-theme="blue"])
  .carousel-indicators
  .active {
  background-color: #365a6d;
}
#heroCarousel:has(.carousel-item.active[data-theme="teal"])
  .carousel-indicators
  .active {
  background-color: #83c6bf;
}
#heroCarousel:has(.carousel-item.active[data-theme="sand"])
  .carousel-indicators
  .active {
  background-color: #ebbd68;
}
#heroCarousel:not(:has(.carousel-item.active[data-theme]))
  .carousel-indicators
  .active {
  background-color: #ffffff;
}

/* 小尺寸優化：手機高度更短 + iOS 友善 */
@media (max-width: 576px) {
  #heroCarousel .hero-item {
    min-height: 32dvh; /* 使用 dvh 避免網址列干擾 */
    height: 42dvh;
  }
  #heroCarousel .lead {
    margin-bottom: 1.25rem;
  }
  #heroCarousel .carousel-indicators {
    margin-bottom: 1.25rem;
  }
}

/* 無動效偏好 */
@media (prefers-reduced-motion: reduce) {
  #heroCarousel .carousel-indicators [data-bs-target] {
    transition: none;
  }
}