@import url("./home-cta-canonical.css?v=20260903-cta-2");

/* Keep adjacent homepage sections visually connected.
 * GSAP moves inner content only; these rules remove the large static black gaps
 * around the carousel footer and stats row. */
body.project-home #cases.featured-cases {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

body.project-home #overview.project-stats {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.project-home #overview .project-stats-grid {
  min-height: 0 !important;
  padding-block: clamp(30px, 3.6vw, 46px) !important;
}

/* Capability card copy must size to its content instead of being forced into
 * fixed 20px rows. This keeps Chinese names and longer workflow descriptions
 * from being clipped inside the portrait cards. */
body.project-home #capabilities .capability-grid p {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

body.project-home #capabilities .capability-grid p > span {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body.project-home #capabilities .capability-grid p > span:first-child {
  color: #fff !important;
  font-weight: 650 !important;
}

body.project-home #capabilities .capability-grid p > span:nth-child(2) {
  color: rgba(255, 255, 255, .84) !important;
}

/* Restore the tactile 3D surface language from the earlier four-card treatment,
 * without restoring any of the retired workflow layouts. */
@media (hover: hover) and (pointer: fine) {
  body.project-home #capabilities .capability-grid {
    perspective: 1400px;
    perspective-origin: 50% 45%;
  }

  body.project-home #capabilities .capability-grid > a {
    --workflow-x: 50%;
    --workflow-y: 50%;
    --workflow-glow: 0;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transition: border-color .35s ease, box-shadow .45s ease;
  }

  body.project-home #capabilities .capability-grid > a:hover,
  body.project-home #capabilities .capability-grid > a.workflow-card-active {
    --workflow-glow: .92;
  }

  body.project-home #capabilities .capability-grid > a::before {
    position: absolute;
    z-index: 6;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at var(--workflow-x) var(--workflow-y), rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 17%, transparent 43%),
      radial-gradient(circle at var(--workflow-x) var(--workflow-y), rgba(115,242,167,.22) 0%, transparent 50%);
    content: "";
    opacity: var(--workflow-glow);
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity .24s ease;
  }

  body.project-home #capabilities .capability-grid > a::after {
    position: absolute;
    z-index: 7;
    inset: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 30% 70%, rgba(115,242,167,.08));
    content: "";
    opacity: .55;
    pointer-events: none;
    transition: opacity .3s ease, border-color .3s ease;
  }

  body.project-home #capabilities .capability-grid > a:hover::after,
  body.project-home #capabilities .capability-grid > a.workflow-card-active::after {
    border-color: rgba(255,255,255,.48);
    opacity: 1;
  }

  body.project-home #capabilities .capability-grid > a > img {
    transform: translate3d(0, 0, 18px) scale(1.001);
    transform-origin: center;
    transition: filter .35s ease;
    will-change: transform;
  }

  body.project-home #capabilities .capability-grid > a:hover > img,
  body.project-home #capabilities .capability-grid > a.workflow-card-active > img {
    filter: saturate(1.08) contrast(1.025);
  }

  body.project-home #capabilities .capability-grid > a > small,
  body.project-home #capabilities .capability-grid > a > div {
    transform: translateZ(34px);
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  body.project-home #capabilities .capability-grid > a,
  body.project-home #capabilities .capability-grid > a > img {
    will-change: auto;
  }

  body.project-home #capabilities .capability-grid > a::before {
    display: none;
  }
}

/* Pull the final CTA closer to the design-system explainer.
 * Both sections are dark, so the old bottom padding plus CTA min-height looked
 * like one oversized empty band between the illustration and the headline. */
body.project-home #design-system-live.design-system-explainer {
  padding-bottom: clamp(38px, 4vw, 58px) !important;
}

html body.project-home main > .project-cta {
  min-height: min(500px, 56vh) !important;
  padding: clamp(54px, 6vh, 72px) 24px clamp(68px, 7vh, 88px) !important;
}

@media (max-width: 760px) {
  body.project-home #cases.featured-cases {
    padding-bottom: 6px !important;
  }

  body.project-home #overview .project-stats-grid {
    padding-block: 26px !important;
  }

  body.project-home #design-system-live.design-system-explainer {
    padding-bottom: 34px !important;
  }

  html body.project-home main > .project-cta {
    min-height: auto !important;
    padding: 52px 18px 68px !important;
  }
}

/* Canonical Chinese homepage section-title typography.
 * Match Ant Design's restrained system/CJK sans-serif rhythm: use the same
 * family, medium title weight, neutral tracking and comfortable CJK leading on
 * every homepage H2. Section layout and light/dark colors stay locally owned. */
html[lang="zh-CN"] body.project-home main h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  font-size: clamp(40px, 4.2vw, 60px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.24 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

/* Discovery title was still being forced to 56–82px by an older high-specificity
 * desktop rule. Keep it on a restrained Ant-like section-heading scale instead. */
html[lang="zh-CN"] body.project-home main #templates .template-gallery-heading h2 {
  color: rgba(0, 0, 0, .88) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  font-size: clamp(36px, 3vw, 42px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

@media (max-width: 760px) {
  html[lang="zh-CN"] body.project-home main h2 {
    font-size: clamp(32px, 9vw, 42px) !important;
    letter-spacing: 0 !important;
    line-height: 1.28 !important;
  }

  html[lang="zh-CN"] body.project-home main #templates .template-gallery-heading h2 {
    font-size: 32px !important;
    line-height: 1.35 !important;
  }
}