/* ============================================
    特色产品样式
    ============================================ */

/* --- Featured Products Section (Infinix Style) --- */
.main-new {
  width: 100%;
  padding: 80px 0;
  background-color: var(--bg-light);
}

.main-new-container {
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 20px);
}

.main-new-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.main-new-title {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-color);
  margin: 0;
  font-family: var(--font-barlow);
}

.main-new-view-all {
  font-size: 16px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-new-view-all:hover {
  color: var(--primary-color);
}

.main-new-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left right-top"
    "left right-bottom";
  align-items: stretch; /* 关键：拉伸对齐 */
}

/* 所有的产品项目样式 - 启用 Flexbox */
.main-new-item {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  display: flex; /* 关键：使图片和内容垂直排列 */
  flex-direction: column;
  height: 100%; /* 确保它充满 Grid cell */
  border-radius: 8px; /* 统一圆角 */
}

.main-new-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* 图片包裹器 (Wrapper) 统一样式 */
.main-new-image-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 8px;
}

/* 图片元素 (Image Div) 统一样式 */
.main-new-image {
  width: 100%;
  position: absolute; /* 绝对定位充满 Wrapper */
  top: 0;
  left: 0;
  height: 100%;

  background: var(--bg-lighter);
  background-size: cover; /* 确保背景图覆盖并居中 */
  background-position: center;
  background-repeat: no-repeat;
  /* 移除这里的 border-radius，让 item 自身处理 */
  transition: transform 0.3s ease;
}

/* --- 左侧大图样式 (占据两行) --- */
.main-new-item:nth-child(1) {
  grid-area: left;
  grid-row: 1 / 3;
}

/* 关键修正：左侧图片 Wrapper 使用 flex: 1 来占据高度 */
.main-new-item:nth-child(1) .main-new-image-wrapper {
  flex: 1; /* 占据 Grid Item 中除去 Content 的所有空间 */
  padding-top: 0; /* 移除 padding-top 避免高度冲突 */
  min-height: 0; /* 允许 Flexbox 压缩和拉伸 */
  position: relative;
}

/* --- 右侧小图样式 (比例高度) --- */
.main-new-item:nth-child(2) {
  grid-area: right-top; /* 右上角 */
}
.main-new-item:nth-child(3) {
  grid-area: right-bottom; /* 右下角 */
}

/* 关键修正：右侧图片 Wrapper 使用 padding-top 确定比例 */
.main-new-item:nth-child(2) .main-new-image-wrapper,
.main-new-item:nth-child(3) .main-new-image-wrapper {
  padding-top: 60%; /* 保持 60% 比例 */
  flex: none; /* 移除 flex 属性，让 padding-top 决定高度 */
  display: block;
  position: relative;
}

.main-new-item:hover .main-new-image {
  transform: scale(1.05);
}

.main-new-content {
  flex-shrink: 0; /* 确保内容区域高度不变 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0; /* 统一 padding，确保高度一致 */
}

.main-new-product-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--text-color);
}

.main-new-learn-more {
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
  display: inline-block;
  transition: color 0.3s ease;
}

.main-new-item:hover .main-new-learn-more {
  color: var(--primary-color);
}

/* 移动端响应式 */
@media (max-width: 900px) {
  .main-new {
    padding: 40px 0;
  }

  .main-new-container {
    padding: 0 15px;
  }

  .main-new-header {
    margin-bottom: 30px;
    padding-bottom: 12px;
  }

  .main-new-title {
    font-size: 24px;
  }

  .main-new-view-all {
    font-size: 14px;
  }

  .main-new-item:nth-child(1) .main-new-image-wrapper {
    height: 780px !important;
  }

  .main-new-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right-top"
      "right-bottom";
    gap: 20px;
  }

  /* 移动端：重置第一个项目的 grid-row，避免重叠 */
  .main-new-item:nth-child(1) {
    grid-row: auto; /* 重置为自动，不再占据两行 */
  }

  /* 移动端：所有项目恢复到 60% 比例 */
  .main-new-item:nth-child(1) .main-new-image-wrapper {
    min-height: 0 !important;
    padding-top: 60% !important; /* 与第二、三张使用相同的比例 */
    flex: none !important;
    position: relative !important;
    display: block !important;
  }

  /* 确保移动端图片绝对定位并充满容器 */
  .main-new-item .main-new-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .main-new-link {
    height: auto;
  }

  .main-new-content {
    padding: 15px;
  }

  .main-new-product-name {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .main-new {
    padding: 30px 0;
  }

  .main-new-item:nth-child(1) .main-new-image-wrapper {
    height: 420px !important;
  }

  .main-new-title {
    font-size: 20px;
  }

  .main-new-view-all {
    font-size: 12px;
  }
}