/* ============================================
   首页样式 - 秦和食品（统一 CSS Grid 布局）
   ============================================ */

/* ====== 轮播区域（纯图片 · 响应式） ====== */
.hero-slider {
  margin-top: 0;
  padding: 0 !important;
  --hero-height: clamp(280px, 27vw, 520px);
}

.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item,
.hero-slide--banner {
  height: var(--hero-height);
}

.hero-slide--banner {
  position: relative;
  overflow: hidden;
  background: var(--qinhe-red-dark);
}

.hero-slide__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 指示器：横条样式 */
.hero-slider .carousel-indicators {
  margin-bottom: 1rem;
  gap: 0.5rem;
  z-index: 3;
}

.hero-slider .carousel-indicators [data-bs-target] {
  width: 2rem;
  height: 3px;
  border: none;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transition: background-color 0.3s ease, width 0.3s ease;
}

.hero-slider .carousel-indicators .active {
  width: 2.5rem;
  background-color: #fff;
}

/* 左右箭头 */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {
  width: 8%;
  opacity: 0.85;
  z-index: 3;
}

/* 轮播淡入 */
.carousel-fade .carousel-item {
  transition: opacity 0.6s ease-in-out;
}

.carousel-fade .carousel-item:not(.active) {
  opacity: 0;
  z-index: 0;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
  z-index: 1;
}

/* 平板 */
@media (max-width: 991.98px) {
  .hero-slider {
    --hero-height: clamp(260px, 44vw, 420px);
  }
}

/* 手机 */
@media (max-width: 767.98px) {
  .hero-slider {
    --hero-height: clamp(240px, 52vw, 360px);
  }

  .hero-slider .carousel-indicators [data-bs-target] {
    width: 1.5rem;
  }

  .hero-slider .carousel-indicators .active {
    width: 2rem;
  }

  .hero-slider .carousel-control-prev-icon,
  .hero-slider .carousel-control-next-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* 小屏手机 */
@media (max-width: 479.98px) {
  .hero-slider {
    --hero-height: clamp(220px, 58vw, 320px);
  }

  .hero-slider .carousel-control-prev,
  .hero-slider .carousel-control-next {
    width: 12%;
    opacity: 0.65;
  }
}

/* 横屏手机：避免过高 */
@media (max-width: 991.98px) and (orientation: landscape) {
  .hero-slider {
    --hero-height: clamp(200px, 72vh, 320px);
  }
}

/* ====== 各区块统一间距（桌面端） ====== */
main > section {
  padding: var(--section-padding-y) 0 !important;
}

/* ====== 统一网格布局容器 ====== */
.card-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

/* 精选产品：4 列 */
.card-grid--products {
  grid-template-columns: repeat(4, 1fr);
}

/* 新闻：4 列 */
.card-grid--news {
  grid-template-columns: repeat(4, 1fr);
}

/* 官方店铺：按数量均分列宽（2/3/4 拉满一行，超过 4 个按 4 列换行） */
.card-grid--platforms {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.card-grid--platforms-c1 { grid-template-columns: 1fr; }
.card-grid--platforms-c2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--platforms-c3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--platforms-c4 { grid-template-columns: repeat(4, 1fr); }

.card-grid--platforms > .platform-card-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-grid--platforms .platform-card {
  width: 100%;
  flex: 1;
}

/* ====== 响应式网格 ====== */
@media (max-width: 1199.98px) {
  /* 热销产品：4 → 3列 */
  .card-grid--products {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 门店/新闻：4 → 3列 */
  .card-grid--news {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--platforms-c4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 平板端 */
@media (max-width: 991.98px) {
  /* 产品/新闻：3 → 2列 */
  .card-grid--products,
  .card-grid--news {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--platforms-c3,
  .card-grid--platforms-c4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ====== 手机端 ====== */
@media (max-width: 767.98px) {
  /* 各区块统一间距 */
  main > section {
    padding: var(--section-padding-y-sm) 0 !important;
  }

  /* 首页网格：产品 */
  .card-grid--products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .card-grid--platforms {
    gap: 1rem;
  }

  .card-grid--platforms-c2,
  .card-grid--platforms-c3,
  .card-grid--platforms-c4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 新闻区使用 news-list--home，不受 card-grid 影响 */
}

/* 小手机：精选产品保持 2 列并排 */
@media (max-width: 479.98px) {
  .card-grid--products {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .card-grid--products > * {
    min-width: 0;
  }

  .card-grid--platforms-c1,
  .card-grid--platforms-c2,
  .card-grid--platforms-c3,
  .card-grid--platforms-c4 {
    grid-template-columns: 1fr;
  }
}