/*
 * Shared first-screen layout for the 12 product detail pages.
 * Local-only design pass: keep the product theme on one line and use one
 * consistent typographic scale without flattening each page's visual identity.
 */

html,
body {
  overflow-x: clip;
}

.product-theme-title {
  max-width: none !important;
  margin-top: 0 !important;
  font-family:
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-size: 80px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: nowrap !important;
}

/* Stretch the desktop hero composition closer to the viewport edges. */
.page-ai-3d-print .hero-grid {
  max-width: 1480px;
  grid-template-columns: minmax(620px, 0.94fr) minmax(560px, 1.06fr);
  gap: 52px;
}

.page-ai-world .hero {
  width: min(1480px, calc(100% - 64px));
  grid-template-columns: minmax(620px, 0.9fr) minmax(560px, 1.1fr);
}

.page-ai-eco .hero {
  width: min(1480px, calc(100% - 64px));
  grid-template-columns: minmax(600px, 0.9fr) minmax(560px, 1.1fr);
  gap: 52px;
}

.page-ai-film .page-shell {
  width: min(1480px, calc(100% - 64px));
}

.page-ai-film .hero-copy {
  width: min(720px, 50vw);
}

.page-ai-course .hero {
  width: min(1480px, calc(100% - 64px));
  grid-template-columns: minmax(600px, 1fr) minmax(620px, 1fr);
  gap: 48px;
}

.page-ai-space,
.page-ai-agent,
.page-ai-picture-book,
.page-digital-human {
  --max: 1480px;
}

.page-ai-space .hero-content,
.page-ai-agent .hero-copy,
.page-digital-human .hero-content {
  width: min(720px, 50vw);
}

.page-ai-creation .hero {
  padding-inline: max(5vw, 56px);
  grid-template-columns: minmax(620px, 0.94fr) minmax(560px, 1.06fr);
  gap: 5vw;
}

.page-ai-picture-book .hero {
  grid-template-columns: minmax(620px, 0.88fr) minmax(620px, 1.12fr);
}

.page-ai-campus-culture .hero {
  grid-template-columns: minmax(620px, 43%) 1fr;
}

.page-ai-campus-culture .hero-copy {
  padding-left: max(64px, calc((100vw - 1480px) / 2));
  padding-right: 48px;
}

.page-teaching-devices {
  --max: 1480px;
}

.page-teaching-devices .hero-content {
  max-width: 720px;
}

@media (max-width: 1400px) {
  .product-theme-title {
    font-size: 68px !important;
  }

  .page-ai-3d-print .hero-grid,
  .page-ai-world .hero,
  .page-ai-eco .hero,
  .page-ai-course .hero,
  .page-ai-creation .hero,
  .page-ai-picture-book .hero,
  .page-ai-campus-culture .hero {
    grid-template-columns: minmax(460px, 0.92fr) minmax(500px, 1.08fr);
  }
}

@media (max-width: 1050px) {
  .product-theme-title {
    font-size: 52px !important;
  }

  .page-ai-3d-print .hero-grid,
  .page-ai-world .hero,
  .page-ai-eco .hero,
  .page-ai-course .hero,
  .page-ai-creation .hero,
  .page-ai-picture-book .hero,
  .page-ai-campus-culture .hero {
    grid-template-columns: 1fr;
  }

  .page-ai-film .hero-copy,
  .page-ai-space .hero-content,
  .page-ai-agent .hero-copy,
  .page-digital-human .hero-content {
    width: min(100%, 720px);
  }
}

@media (max-width: 760px) {
  .product-theme-title {
    font-size: 40px !important;
    letter-spacing: -0.045em !important;
  }
}