/* ============================================================
   FRONT PAGE — 三大核心优势 (全新独立样式)
   ============================================================ */

.oh-advantage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.oh-adv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 内容强制沉底 */
  min-height: 500px; /* 控制卡片高度，模仿截图的长宽比 */
  border-radius: 16px; /* 截图的圆角 */
  overflow: hidden;
  text-decoration: none;
  background-color: #0B2A21; /* 兜底颜色 */
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.oh-adv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(11, 42, 33, 0.25);
}

/* 背景图绝对定位铺满 */
.oh-adv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.8s ease;
}

.oh-adv-card:hover .oh-adv-bg {
  transform: scale(1.06);
}

/* 深色渐变遮罩：底部深黑绿，顶部透明 */
.oh-adv-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(7, 28, 22, 0.95) 10%, rgba(11, 42, 33, 0.6) 50%, rgba(11, 42, 33, 0) 100%);
  z-index: 2;
}

/* 文字内容层 */
.oh-adv-content {
  position: relative;
  z-index: 3;
  padding: 32px 28px;
  color: #fff;
}

.oh-adv-sub {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A227; /* 主题金色 */
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.oh-adv-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #fff;
  font-weight: 500;
}

/* 多行文字截断，只显示3行 */
.oh-adv-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Learn More 链接 */
.oh-adv-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.oh-adv-link::after {
  content: "→";
  margin-left: 8px;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.oh-adv-card:hover .oh-adv-link {
  color: #C9A227;
}

.oh-adv-card:hover .oh-adv-link::after {
  transform: translateX(5px); /* 悬停时箭头右移 */
}



/* ============================================================
   FRONT PAGE — 产品线卡片 (一行 5 列，纯白文字)
   ============================================================ */

.oh-product-grid {
  display: grid;
  /* 强制在一行内均分 5 列 */
  grid-template-columns: repeat(5, 1fr) !important; 
  gap: 16px; /* 间距稍微缩小一点，防止 5 个卡片挤不下 */
  margin-top: 40px;
}

.oh-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  min-height: 320px; /* 卡片高度 */
  border-radius: 8px; 
  overflow: hidden;
  text-decoration: none;
  background-color: #2A4232;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.oh-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* 背景图层 */
.oh-product-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.oh-product-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.oh-product-card:hover .oh-product-bg img {
  transform: scale(1.05); 
}

/* 渐变遮罩：加深下半部分，确保白字清晰可见 */
.oh-product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%; 
  background: linear-gradient(to top, rgba(11, 42, 33, 0.85) 0%, rgba(11, 42, 33, 0.2) 50%, transparent 100%);

  z-index: 2;
}

/* 文字内容层 */
.oh-product-body {
  position: relative;
  z-index: 3;
  padding: 20px 16px;
}

/* 强制标题为纯白色 */
.oh-product-body h3 {
  font-family: var(--font-display, serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: #ffffff !important; /* 强制白色 */
  margin: 0 0 10px 0;
  line-height: 1.3;
}

/* 强制描述文字为浅白色 */
.oh-product-body p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85) !important; /* 强制半透明白色 */
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制最多 3 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   响应式适配 (防止手机端 5 列挤成一团)
   ============================================================ */
@media (max-width: 1200px) {
  .oh-product-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 平板 3 列 */
  }
}

@media (max-width: 768px) {
  .oh-product-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 小屏 2 列 */
  }
}

@media (max-width: 480px) {
  .oh-product-grid {
    grid-template-columns: 1fr !important; /* 手机 1 列 */
  }
}