/* Product detail + product listing layout fixes */

/*
 * Hero: keep image + copy side-by-side from tablet up.
 * Root font-size is 17px, so rem-based Tailwind widths (w-96 / lg:w-108)
 * plus md:w-1/2 + md:ml-14 overflow the row around 1024–1100px and
 * flex-wrap stacks them too early. Use flexible sizing + nowrap instead.
 */
.product-hero-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
}

.product-hero-row > img {
  flex: 0 1 auto;
  width: min(28rem, 40%) !important;
  max-width: 28rem;
  height: auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
  cursor: pointer;
  transition: transform 0.5s ease;
}

/* Match homepage / product cards: group-hover:scale-105 + cursor-pointer */
.product-hero-row > img:hover {
  transform: scale(1.05);
}

.product-hero-row > .w-full {
  flex: 1 1 0;
  width: auto !important;
  max-width: none;
  min-width: 0;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Phone only: stack image above copy */
@media (max-width: 767.98px) {
  .product-hero-row {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }

  .product-hero-row > img {
    width: min(24rem, 88%) !important;
    max-width: 24rem;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .product-hero-row > .w-full {
    width: 100% !important;
    max-width: 36rem;
    margin-top: 1.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Hero CTAs: keep aligned; no orphan indent when wrapping */
.product-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
}

.product-cta-row > a {
  display: inline-block;
  padding: 1.25rem 2.5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.75rem;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, #0066ff 0%, #00b8ff 100%);
  white-space: nowrap;
}

@media (max-width: 1023.98px) {
  .product-cta-row > a {
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
  }
}

.product-cta-row > a:hover {
  opacity: 0.92;
}

/* Product intro / feature sections: keep readable side padding */
section.content-section > .container {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  section.content-section > .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  section.content-section > .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/*
 * Related products / product grids:
 * never 3+1 — related: 2 cols, 4 on xl (always 4 items).
 * listing: always 2 cols so odd counts don't become 4+1.
 */
/* B4: 产品中心「应用场景」三卡等宽 */
.products-scenario-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .products-scenario-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
}

.products-scenario-grid > .screen-item,
.products-scenario-grid > .products-scenario-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
  cursor: default !important;
}

.products-scenario-grid > .screen-item:hover,
.products-scenario-grid > .products-scenario-card:hover {
  transform: none !important;
}

/* B3: 软件能力卡 / 定制卡不可点 */
.soft-item,
.customization-item {
  cursor: default !important;
}
.soft-item:hover,
.customization-item:hover {
  transform: none !important;
}
.soft-btn--static,
.soft-btn.soft-btn--static {
  cursor: default !important;
  pointer-events: none;
}
.soft-btn--static:hover {
  transform: none !important;
}

/* 核心软件平台深色介绍块：加高、居中、字号加大；按钮已从 HTML 移除 */
.soft-intro {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center !important;
  min-height: 18rem;
  padding: 3.5rem 2rem !important;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .soft-intro {
    min-height: 22rem;
    padding: 4.5rem 3.5rem !important;
  }
}

.soft-intro > h2 {
  text-align: center !important;
  font-size: 2.25rem !important;
  line-height: 1.35 !important;
  width: 100%;
  max-width: 48rem;
}

@media (min-width: 768px) {
  .soft-intro > h2 {
    font-size: 2.75rem !important;
  }
}

.soft-intro > div.max-w-180 {
  text-align: center !important;
  font-size: 1.15rem !important;
  line-height: 1.9 !important;
  max-width: 46rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px) {
  .soft-intro > div.max-w-180 {
    font-size: 1.3rem !important;
  }
}

/* Product listing cards → detail pages */
a.products-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.products-card-link:hover .products-card-item {
  border-color: #3b82f6;
}

.related-products-grid,
.products-card-grid {
  display: grid !important;
  gap: 1.25rem;
  justify-items: stretch;
  align-items: stretch;
}

.products-card-grid {
  grid-template-columns: 1fr !important;
}

/* 相关产品：手机两列，平板及以上固定四列（避免中等宽度单列过大） */
.related-products-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem;
}

@media (min-width: 768px) {
  .related-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem;
  }

  /* 产品中心：≥768px 三列（带 !important，避免被其它样式盖回两列） */
  .products-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .products-card-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 22rem) !important;
  }

  .products-card-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 恰好 4 个（软件能力卡）→ 两排两列 */
  .products-card-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.related-products-grid > div,
.related-products-grid > a,
.products-card-grid > div,
.products-card-grid > a {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.products-card-grid > a.products-card-link > .products-card-item {
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  box-sizing: border-box;
}

.related-products-grid img,
.products-card-grid img {
  max-width: 100%;
  height: auto;
}

/*
 * 产品中心机型卡：全屏时图过大、字过小。
 * 同时缩小 product-img、放大名称/系列/说明。
 */
.products-card-grid img.product-img {
  display: block;
  width: min(88%, 22rem) !important;
  max-width: 22rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.25rem !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.products-card-grid .products-card-item > div.pt-7 {
  padding-top: 1.25rem !important;
}

.products-card-grid .products-card-item > div.pt-7 > p:first-child {
  font-size: 1.2rem !important;
  line-height: 1.45;
}

.products-card-grid .products-card-item > div.pt-7 > h3 {
  font-size: 1.65rem !important;
  margin-top: 0.85rem !important;
  margin-bottom: 0.85rem !important;
}

.products-card-grid .products-card-item > div.pt-7 > p.text-base {
  font-size: 1.05rem !important;
  line-height: 1.7;
}

.products-card-grid .products-card-item > div.pt-7 > div.mt-6 {
  font-size: 0.98rem !important;
  line-height: 1.65;
}

.products-card-grid .products-card-item > div.pt-7 > div.mt-8 {
  font-size: 1.1rem !important;
}

@media (min-width: 1280px) {
  .products-card-grid img.product-img {
    width: min(86%, 20rem) !important;
    max-width: 20rem !important;
    margin-top: 1.5rem !important;
  }

  .products-card-grid .products-card-item > div.pt-7 > p:first-child {
    font-size: 1.35rem !important;
  }

  .products-card-grid .products-card-item > div.pt-7 > h3 {
    font-size: 1.85rem !important;
  }

  .products-card-grid .products-card-item > div.pt-7 > p.text-base {
    font-size: 1.15rem !important;
  }

  .products-card-grid .products-card-item > div.pt-7 > div.mt-6 {
    font-size: 1.05rem !important;
  }

  .products-card-grid .products-card-item > div.pt-7 > div.mt-8 {
    font-size: 1.2rem !important;
  }
}

/* 功能特性：PC 一排两个 */
.product-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .product-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
}

.product-feature-grid > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* FAQ：整块问答悬停 — 背景变浅 + 轻微上浮（一题为单位） */
.product-faq-item {
  padding: 1rem 1.25rem;
  margin: 0.35rem 0;
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    transform 0.28s ease,
    background-color 0.28s ease,
    box-shadow 0.28s ease;
}

.product-faq-item:hover {
  transform: translateY(-4px);
  background-color: #f0f7fc;
  box-shadow: 0 8px 22px rgba(2, 126, 209, 0.1);
}