/* ============================================================
   通用 Banner 样式
   适用于页面顶部横幅：.banner、.banner-overlay、.banner-content、.breadcrumb
   页面只需通过内联 style 或页面专属 class 指定 background-image。
   ============================================================ */

.banner {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0;
  overflow: hidden;
  background-color: #edf6f8;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(246, 250, 248, 0.98) 0%,
    rgba(246, 250, 248, 0.86) 35%,
    rgba(246, 250, 248, 0.20) 58%,
    rgba(246, 250, 248, 0) 100%
  );
}

.banner-content {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - 48px));
  margin-left: max(var(--content-pad), calc((100vw - var(--content-max)) / 2 + var(--content-pad)));
  padding: 54px 0 48px;
  text-align: left;
}

.banner-content .breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--text-light);
}

.banner-content .breadcrumb a {
  color: var(--text-light);
  transition: color 0.25s ease;
}

.banner-content .breadcrumb a:hover {
  color: var(--green-main);
}

.banner-content .breadcrumb .sep {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.banner-content .breadcrumb .sep svg {
  width: 14px;
  height: 14px;
}

.banner-content .breadcrumb .current {
  color: var(--green-main);
  font-weight: 600;
}

.banner-content h1 {
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.banner-subtitle {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  color: #1a5c35;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.banner-desc {
  max-width: 520px;
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .banner-content h1 {
    font-size: 38px;
  }
}

@media (max-width: 900px) {
  .banner {
    min-height: 360px;
    background-position: center right;
  }

  .banner-content {
    width: calc(100% - 48px);
    margin-left: 24px;
    padding: 48px 0;
  }

  .banner-desc br {
    display: none;
  }
}

@media (max-width: 768px) {
  .banner {
    min-height: 300px;
  }

  .banner-content h1 {
    font-size: 32px;
  }

  .banner-subtitle {
    font-size: 18px;
  }

  .banner-desc {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .banner {
    min-height: 340px;
  }

  .banner-overlay {
    background: linear-gradient(
      90deg,
      rgba(246, 250, 248, 0.98) 0%,
      rgba(246, 250, 248, 0.90) 64%,
      rgba(246, 250, 248, 0.58) 100%
    );
  }

  .banner-content .breadcrumb {
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
}

@media (max-width: 480px) {
  .banner-content {
    padding: 40px 16px;
  }

  .banner-content h1 {
    font-size: 26px;
  }

  .banner-subtitle {
    font-size: 16px;
  }

  .banner-desc {
    font-size: 13px;
  }
}

/* ============================================================
   冲突修复：以 banner.css 为主，覆盖 first_category.css 中的干扰规则
   first_category.css 加载顺序在前，以下规则通过更高特异性确保 banner 区块
   的布局、间距、字色等完全以本文件定义为准。
   ============================================================ */

/* 修复 first_category.css 中 .header-inner 设置 height:96px 导致导航栏过高 */
.header .header-inner {
  height: var(--header-h, 68px) !important;
  max-width: var(--content-max, 1440px) !important;
  padding-left: var(--content-pad, clamp(24px, 4vw, 80px)) !important;
  padding-right: var(--content-pad, clamp(24px, 4vw, 80px)) !important;
}

/* 确保 .banner 区块不受 first_category.css 中 .hero 的 grid 布局干扰 */
.banner {
  display: flex !important;
  grid-template-columns: unset !important;
  border-bottom: none !important;
}

/* 确保 .banner-overlay 样式正确 */
.banner .banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 确保 .banner-content 不受 .hero-copy 的 margin-left:auto 和 animation 干扰 */
.banner .banner-content {
  position: relative !important;
  z-index: 2 !important;
  margin-right: unset !important;
  animation: none !important;
  max-width: unset !important;
}

/* 确保 banner 内 breadcrumb 样式以 banner.css 为主，覆盖 first_category.css 的 .breadcrumb */
.banner .banner-content .breadcrumb {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  font-size: 14px !important;
  color: var(--color-text-light, #888888) !important;
  font-weight: 400 !important;
}

.banner .banner-content .breadcrumb a {
  color: var(--color-text-light, #888888) !important;
  font-weight: 400 !important;
}

.banner .banner-content .breadcrumb .current {
  color: var(--color-primary, #1a5c3a) !important;
  font-weight: 600 !important;
}

/* 确保 banner 内 h1 不受 .hero h1 的 margin:0 和 font-size:42px 干扰 */
.banner .banner-content h1 {
  font-size: clamp(38px, 4.2vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-bottom: 14px !important;
  letter-spacing: 2px !important;
  color: var(--color-text, #222222) !important;
}

@media (max-width: 1024px) {
  .banner .banner-content h1 {
    font-size: 38px !important;
  }
}

@media (max-width: 900px) {
  .header .header-inner {
    height: var(--header-h, 60px) !important;
  }
  .banner .banner-content {
    width: calc(100% - 48px) !important;
    margin-left: 24px !important;
    padding: 48px 0 !important;
  }
}

@media (max-width: 480px) {
  .banner .banner-content {
    padding: 40px 16px !important;
  }
  .banner .banner-content h1 {
    font-size: 26px !important;
  }
}

/* factory-banner 不需要淡化效果 */
.banner.factory-banner .banner-overlay {
  background: transparent;
}