/* Nav styles are centralized in nav-component_v20260304.css to avoid conflicts. */

/* ----------------- */
/* HREO BANNER */
/* ----------------- */

.bg-box {
  width: 100%;
  aspect-ratio: 2560 / 1045;
  background: skyblue;
  position: relative;
  /* 關鍵：作為定位基準 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 防止內容溢出 */
}

.text-box {
  /* 使用百分比寬度，例如佔背景的 20% */
  width: 20.7%;
  /* 計算方式：530 / 2560 ≈ 20.7% */
  max-width: 530px;
  /* 大螢幕上限 */
  min-width: 150px;
  /* 防止小螢幕縮到看不見 */

  position: absolute;
  /* 疊在影片上方 */
  z-index: 10;



  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
  bottom: 2.25rem;
}

.logo-box img {
  width: 100%;
  /* 讓圖片填滿 text-box，隨之縮放 */
  height: auto;
  display: block;
}

.lg-btn {
  margin-bottom: -0.25rem;
  border: #00FFDD 1.2px solid;
  background-color: #00FFDD;
  padding: 1.125rem 2.625rem;
  width: auto;
  color: #000;
  font-weight: 800;
}


.lg-btn:hover {
  color: #00FFDD;
  background: #000;
  border: #00FFDD 1.2px solid;
  box-sizing: border-box;
}

.lg-btn a:hover {
  color: #00FFDD;
}

.video-box {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
background: #000;
}

.video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arrow-down {
  width: 28px;
}

.arrow-down img {
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}



/* ----------------- */
/* New Product */
/* ----------------- */

.product-index {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}
.product-index h2{
  text-transform:uppercase;
  text-align: center;
}



/* ----------------------------- */
/* swiper-card-pagination */
/* ----------------------------- */


/* 2. 將分頁器改為相對定位，並讓它排在 wrapper 下方 */
.swiper-card .swiper-pagination {
  position: relative;
  /* 關鍵：取消絕對定位 */
  bottom: 0;
  /* 重置位置 */
  margin-top: 30px;
  /* 增加與上方卡片的間距 */
  width: 100%;
  /* 確保水平置中 */
}


/* =========================
/* =========================
   State Control (JS 專用)
========================= */
.is-show {
  opacity: 1;
}

.is-hide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* =========================
   Overlay (Pause)
========================= */
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* hover 只在「未被 JS 禁止」時生效 */
.slider-item:hover .video-overlay:not(.is-hide) {
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
}

.video-overlay-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* =========================
   Pause Icon
========================= */
.video-pause-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 32px;
}

.video-pause-icon::before,
.video-pause-icon::after {
  content: '';
  position: absolute;
  top: 0;
  width: 7px;
  height: 100%;
  background: #fff;
  opacity: 0.9;
}

.video-pause-icon::before {
  left: 0;
}

.video-pause-icon::after {
  right: 0;
}


/* ----------------- */
/* Series Product */
/* ----------------- */
.more-product-section,
.series-product-section {
  gap: 24px;
  width: 100%;

}

.more-product-section {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  justify-content: flex-start;
  width: 100%;
}

#home-more-products-pagination {
  display: none;
}

#home-more-products .more-product-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

#home-more-products .card-items {
  aspect-ratio: auto;
  overflow: visible;
  padding: clamp(0.65rem, 1.2vw, 1.25rem);
  display: block;
}

#home-more-products .card-items a {
  display: grid;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
}

#home-more-products .card-media {
  min-height: 1px;
  max-height: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-more-products .card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#home-more-products .card-text {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  min-width: 0;
}

#home-more-products .card-text p {
  max-width: 100%;
  margin: 0;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
  overflow: visible;
}

.series-product-section {
  display: grid;
  /* 定義網格間距 */
  /* 預設：每一格佔滿一排（手機版） */
  grid-template-columns: 1fr;
}

.card img {
  transition: transform 0.3s ease;
}

.btn {
  z-index: 10;
}

.btn:hover .btn-primary {
  background-color: #008888;
}

.card:hover img {
  transform: scale(1.05);
}

.series-product-section .card-body .card-title {
  text-wrap: nowrap;
}

.series-product-section p {
  text-align: center;
  line-height: 1.2;
}


/* 當螢幕寬度足夠時（例如 768px 以上） */
@media (min-width: 768px) {
  .series-product-section {
    /* 設定為 6 欄位，方便分配 2 排與 3 排的比例 */
    grid-template-columns: repeat(6, 1fr);
  }

  /* 上面兩個：各佔 3 欄 (總共 6)，達成 1/2 + 1/2 */
  .series-product-section .card-lg {
    grid-column: span 3;
  }

  /* 下面三個：各佔 2 欄 (總共 6)，達成 1/3 + 1/3 + 1/3 */
  .series-product-section .card-items:not(.card-lg) {
    grid-column: span 2;
  }
}

.series-product-section .card-row .card-img-left {
  flex: 1.2;
  overflow: hidden;
  /* 確保圖片縮放時不會超出範圍 */
  padding-right: 1.5rem;
}

.series-product-section .card-row .card-body-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 文字垂直置中 */
  z-index: 2;
  padding: 0 24px;
}


/* 修正圖片大小 */
.card-img img {
  width: 100%;
  height: auto;
  object-fit: cover;

}

/* =============================================================== */
/*  RWD
/* =============================================================== */
@media (max-width: 1199.98px) {
  body {
    font-size: 14px !important;
  }

  .bg-box {
    aspect-ratio: 9/14;
  }

  .text-box {
    width: 60%;
    gap: 1.75rem;
  }

  .lg-btn {
    padding: 0.125rem 1.625rem;
  }

  .card-overlay .card-media {
    aspect-ratio: 1/1;
  }

  .swiper-card .card-img-top {
    height: auto;
  }

  .swiper-card .card {
    padding: 1rem;
  }

  .swiper-card .card-img-top {
    width: 100%;
  }

  .swiper-card .card-body {
    gap: 0.6rem;
    line-height: 1.2;
    justify-content: center;
  }

  .card-box {
    flex-direction: column;
  }

  .series-product-section p {
    text-align: center;
  }

  .card-row a {
    gap: 1.5rem;
  }

  .card-row .card-text {
    padding: 0;
  }

  .series-product-section .card-items {
    padding: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .more-product-section {
    gap: 12px;
  }

  #home-more-products .more-product-wrapper {
    gap: 12px;
  }
}

@media (max-width: 1080px) {
  #home-more-products.is-swiper {
    gap: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 0;
  }

  #home-more-products.is-swiper .more-product-wrapper {
    gap: 0;
    flex-wrap: nowrap;
    width: max-content;
    background: none;
  }

  #home-more-products.is-swiper .card-items {
    height: auto;
    padding: 0.65rem;
  }


  #home-more-products-pagination {
    display: block;
    width: 100%;
  
    position: relative;
    inset: auto;
  }
  #home-more-products .card-media{
    padding: 8px;
  }
}

@media (max-width: 1199.98px) {

  .more-product-section .card-media {
    max-height: none;
  }
}