/*
 * Frontend typography layer.
 * Keep page-specific layout CSS in its own files; this file only normalizes
 * readable type sizes for the public site.
 */

:root {
  --type-display: var(--fs-72);
  --type-hero: var(--fs-56);
  --type-h1: var(--fs-48);
  --type-h2: var(--fs-36);
  --type-h3: var(--fs-24);
  --type-body-lg: var(--fs-20);
  --type-body: var(--fs-18);
  --type-body-sm: clamp(13px, 0.78vw, 15px);
  --type-caption: var(--fs-14);
  --type-micro: clamp(10px, 0.62vw, 11px);
  --type-nav: var(--fs-16);
  --type-line-tight: 1.18;
  --type-line-title: 1.28;
  --type-line-body: 1.82;
}

html[data-mobile] {
  --type-display: var(--fs-48);
  --type-hero: var(--fs-48);
  --type-h1: var(--fs-28);
  --type-h2: var(--fs-24);
  --type-h3: var(--fs-20);
  --type-body-lg: var(--fs-22);
  --type-body: var(--fs-14);
  --type-body-sm: var(--m-font-caption, 12px);
  --type-caption: var(--fs-12);
  --type-micro: var(--m-font-micro, 11px);
  --type-nav: var(--fs-14);
  --type-line-body: 1.7;
}

body:is(
  .home-page,
  .about-page,
  .tech-page,
  .solution-page,
  .products-page,
  .news-page,
  .news-list-page,
  .news-detail-page,
  .investor-page,
  .contact-page,
  .article-page,
  .section-page,
  .detail-page,
  .demo-page,
  .photo-wall-page
) {
  text-rendering: optimizeLegibility;
}

.nav-link,
.site-search-submit,
.site-search-quick a {
  font-size: var(--type-nav);
}

html:not([data-mobile]) .ct-foot__col ul li,
html:not([data-mobile]) .ct-foot__phone,
html:not([data-mobile]) .ct-foot__links,
html:not([data-mobile]) .ct-foot__copy,
html:not([data-mobile]) .ct-foot__anbei {
  font-size: var(--type-nav);
}

.site-search-input {
  font-size: var(--type-h3);
}

.site-search-close {
  font-size: var(--fs-32);
}

.ct-foot__col h4,
.ct-foot__cta-sub,
.pdf-toolbar__title {
  font-size: var(--type-h3);
}

.ct-foot__cta-title {
  font-size: var(--type-h2);
  line-height: var(--type-line-title);
}

body.home-page .hero-heading,
body.products-page .group-title .gt-cn {
  font-size: var(--type-display);
  line-height: var(--type-line-tight);
}

body.home-page .hero-subtitle,
body.home-page .main-desc {
  font-size: var(--type-h1);
  line-height: 1.4;
}

body.home-page .main-desc,
body.home-page .vision-title {
  font-size: var(--fs-36);
  line-height: 1.4;
}

body.products-page .gt-en,
body.products-page .hero-desc,
body.products-page .sensor-desc,
body.products-page .module-desc {
  font-size: var(--type-body-lg);
  line-height: var(--type-line-body);
}

body.tech-page .tech-hero__title,
body.solution-page .solution-hero__title,
body.investor-page .inv-hero__title,
body.contact-page .ct-hero-title,
body.section-page .hero-title,
body.detail-page .sub-hero__title,
body.article-page .article-header h1,
body.demo-page .demo-hero h1,
body.photo-wall-page .photo-hero h1,
body.about-page .about-hero__title {
  font-size: var(--type-hero);
  line-height: var(--type-line-tight);
  letter-spacing: 0;
}

body.tech-page .tech-hero__subtitle,
body.solution-page .solution-hero__subtitle,
body.investor-page .inv-hero__caption,
body.contact-page .ct-hero-subtitle,
body.section-page .hero-subtitle,
body.detail-page .sub-hero__subtitle,
body.article-page .article-header p,
body.demo-page .demo-hero p,
body.photo-wall-page .photo-hero p,
body.about-page .about-hero__subtitle {
  font-size: var(--type-body-lg);
  line-height: var(--type-line-body);
}

body:is(.section-page, .detail-page) .section-title,
body:is(.section-page, .detail-page) .sub-section__title,
body:is(.section-page, .detail-page) .section-cms h2,
body:is(.section-page, .detail-page) .sub-cms h2,
body:is(.section-page, .detail-page) .section-next h2,
body:is(.section-page, .detail-page) .detail-next h2,
body.article-page .article-rich-block h2,
body.article-page .article-map__group h2,
body.article-page .article-recommend__head h2,
body.investor-page .inv-section-title,
body.news-list-page .news-list-title,
body.news-detail-page .article-title,
body.demo-page .demo-section h2,
body.photo-wall-page .photo-section h2,
body.about-page .about-section__title {
  font-size: var(--type-h2);
  line-height: var(--type-line-title);
  letter-spacing: 0;
}

body:is(.section-page, .detail-page) :where(.feature-card h3, .job-card h3, .benefit-card h3, .step-card h3, .product-card h3, .case-card-text h3, .sub-card__title),
body.article-page .article-recommend__grid strong,
body.investor-page :where(.inv-file__title, .inv-card__title, .inv-announce__link),
body.news-page :where(.sec-title, .feat-card-title, .sc-title),
body.news-list-page :where(.news-list-card__title),
body.news-detail-page :where(.article h2, .article h3),
body.demo-page .demo-card h3,
body.photo-wall-page .photo-card h3,
body.about-page :where(.about-member-card__name, .about-advantage-card__title) {
  font-size: var(--type-h3);
  line-height: var(--type-line-title);
}

body:is(.section-page, .detail-page) :where(.section-desc, .sub-section__desc, .feature-card p, .job-card p, .benefit-card p, .step-card p, .product-card p, .case-card-text p, .sub-card__desc, .sub-cms p),
body.article-page :where(.article-rich-block p, .article-map__group a),
body.investor-page :where(.inv-file__desc, .inv-card__desc, .inv-announce__summary),
body.news-page :where(.hero-desc, .feat-card-date, .sc-date),
body.news-list-page :where(.news-list-card__summary, .news-list-card__meta),
body.news-detail-page :where(.article, .article p, .article-meta),
body.demo-page :where(.demo-card p, .demo-section p),
body.photo-wall-page :where(.photo-card p, .photo-section p),
body.about-page :where(.about-cms p, .about-member-card__bio, .about-advantage-card__desc, .about-vision__text) {
  font-size: var(--type-body);
  line-height: var(--type-line-body);
}

body.section-page .section-cms p,
body.detail-page .sub-cms p {
  font-size: var(--type-body);
  line-height: var(--type-line-body);
}

body:is(.section-page, .detail-page) :where(.job-tag, .section-next span, .detail-next span),
body.article-page :where(.article-back, .article-meta, .article-recommend__head span, .article-recommend__grid span),
body.investor-page :where(.inv-announce__ym, .inv-announce__more),
body.news-page :where(.hero-date, .news-more),
body.news-list-page :where(.news-list-filter, .news-list-card__date),
body.demo-page :where(.demo-kicker),
body.photo-wall-page :where(.photo-kicker) {
  font-size: var(--type-caption);
  line-height: 1.55;
}

html[data-mobile] .nav-link {
  font-size: var(--type-nav) !important;
}

html[data-mobile] .site-search-quick a {
  font-size: var(--fs-36) !important;
}

html[data-mobile] .site-search-close {
  font-size: var(--fs-56) !important;
}

html[data-mobile] .site-search-input {
  font-size: var(--fs-36) !important;
}

html[data-mobile] body:is(.section-page, .detail-page) :where(.hero-title, .sub-hero__title),
html[data-mobile] body.article-page .article-header h1 {
  font-size: var(--type-hero) !important;
  line-height: 1.12 !important;
}

html[data-mobile] body:is(.section-page, .detail-page) :where(.section-title, .sub-section__title, .section-next h2, .detail-next h2),
html[data-mobile] body:is(.section-page, .detail-page) :where(.section-cms h2, .sub-cms h2),
html[data-mobile] body.article-page :where(.article-rich-block h2, .article-recommend__head h2) {
  font-size: var(--type-h2) !important;
  line-height: var(--m-lh-snug, 1.35) !important;
}

html[data-mobile] body:is(.section-page, .detail-page) :where(.hero-subtitle, .sub-hero__subtitle, .section-desc, .sub-section__desc, .feature-card p, .job-card p, .benefit-card p, .step-card p, .product-card p),
html[data-mobile] body.article-page :where(.article-header p, .article-rich-block p, .article-map__group a, .article-recommend__grid span) {
  font-size: var(--type-body) !important;
  line-height: var(--type-line-body) !important;
}