/**
 * GrapheneInfrared.com — 第二阶段标准化 CSS
 * ============================================
 * SEO影响：零（纯CSS属性值替换）
 * GEO影响：零
 * 注意：此文件依赖 gr-fix-phase1.css 中新定义的 CSS 变量
 */

/* ===========================================================
   #2.1 CSS 变量尺寸系统
   注：如果已有 :root 块，应合并而非重复定义
   =========================================================== */

/* 如果 :root 中尚无间距/圆角/字号变量，添加以下内容 */
:root {
  /* 间距标尺（4px基数，标准比例尺） */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 56px;
  --sp-11: 64px;

  /* 圆角标尺 */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* 字号标尺 */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  40px;
  --fs-display: clamp(36px, 6.5vw, 64px);
}


/* ===========================================================
   #2.2 标准化所有 border-radius
   =========================================================== */

.gr-ncta     { border-radius: var(--r-xs);   }  /* 5px → 4px */
.gr-bp,
.gr-bg       { border-radius: var(--r-sm);   }  /* 6px → 8px */
.gr-badge    { border-radius: var(--r-full); }  /* 20px → 9999px */
.gr-b2b-tag  { border-radius: var(--r-full); }  /* 20px → 9999px */
.gr-tag      { border-radius: var(--r-full); }  /* 20px → 9999px */
.gr-f,
.gr-f:hover  { border-radius: var(--r-lg);   }  /* 14px → 16px */
.gr-tbi      { border-radius: var(--r-md);   }  /* 12px → 12px OK */
.gr-p        { border-radius: var(--r-lg);   }  /* 14px → 16px */
.gr-tscard   { border-radius: var(--r-lg);   }  /* 14px → 16px */
.gr-ib       { border-radius: var(--r-xl);   }  /* 22px → 24px */
.gr-sg       { border-radius: var(--r-lg);   }  /* 14px → 16px */
.gr-timg     { border-radius: var(--r-lg);   }  /* 14px → 16px */
.gr-aimg     { border-radius: var(--r-lg);   }  /* 14px → 16px */
.gr-home-prod-card { border-radius: var(--r-lg); } /* 14px → 16px */
.gr-home-prod-btn-pri,
.gr-home-prod-btn-sec { border-radius: var(--r-sm); } /* 8px → 8px OK */
.gr-ci       { border-radius: var(--r-sm);   }  /* 8px OK */
.gr-ibtn     { border-radius: var(--r-sm);   }  /* 8px OK */
.gr-fi       { border-radius: var(--r-md);   }  /* 10px → 12px */
.gr-abico    { border-radius: var(--r-sm);   }  /* 8px OK */
.gr-abadge   { border-radius: var(--r-md);   }  /* 10px → 12px */
.gr-home-prod-oem-bar { border-radius: var(--r-lg); } /* 16px OK */


/* ===========================================================
   #2.3 标准化所有间距
   =========================================================== */

/* 功能卡网格 */
.gr-fg {
  gap: var(--sp-6);                /* 18px → 24px */
}

/* 功能卡片 */
.gr-f {
  padding: var(--sp-7) var(--sp-6);/* 30px 26px → 32px 24px */
}

/* 功能图标框 */
.gr-fi {
  width: 48px;                     /* 46px → 48px */
  height: 48px;                    /* 46px → 48px */
  margin-bottom: var(--sp-5);      /* 18px → 20px */
}

/* 信任徽章网格 */
.gr-tbg {
  gap: var(--sp-4);                /* 14px → 16px */
}

/* 信任徽章项 */
.gr-tbi {
  padding: var(--sp-6) var(--sp-4);/* 22px 14px → 24px 16px */
}

/* Hero 规格列 */
.gr-sp {
  padding: var(--sp-2) var(--sp-6);/* 10px 28px → 8px 24px */
}

/* 统计卡片 */
.gr-st {
  padding: var(--sp-9) var(--sp-6);/* 44px 28px → 48px 24px */
}

/* 评价卡片 */
.gr-tscard {
  padding: var(--sp-7);            /* 30px → 32px */
}

/* 询盘区块 */
.gr-ib {
  padding: var(--sp-10) var(--sp-9); /* 56px 44px → 56px 48px */
}

/* Hero 按钮 */
.gr-bp,
.gr-bg {
  padding: var(--sp-4) var(--sp-8);  /* 14px 36px → 16px 40px */
}

/* 导航 CTA */
.gr-ncta {
  padding: var(--sp-2) var(--sp-5);  /* 7px 18px → 8px 20px */
}

/* 标签 */
.gr-tag {
  padding: var(--sp-1) var(--sp-4);  /* 5px 14px → 4px 16px */
}

/* B2B 标签 */
.gr-b2b-tag {
  padding: var(--sp-1) var(--sp-4);  /* 5px 14px → 4px 16px */
}

/* 步骤编号 */
.gr-sn {
  width: 36px;                     /* 36px OK */
  height: 36px;                    /* 36px OK */
}

/* About 图标 */
.gr-abico {
  width: var(--sp-7);              /* 34px → 32px */
  height: var(--sp-7);             /* 34px → 32px */
}

/* 步骤容器 */
.gr-step {
  padding: var(--sp-6) 0;          /* 22px 0 → 24px 0 */
}

/* 产品卡片内容 */
.gr-home-prod-body {
  padding: var(--sp-5) var(--sp-6) var(--sp-4); /* 14px 22px 16px → 20px 24px 16px */
}

/* 产品卡片按钮区 */
.gr-home-prod-actions {
  padding: var(--sp-3) var(--sp-6) var(--sp-5); /* 12px 22px 18px → 12px 24px 20px */
}

/* 产品网格 */
.gr-home-prod-grid {
  gap: var(--sp-7);                /* 32px → 32px OK, use var */
}

/* Hero 徽章 */
.gr-badge {
  margin-bottom: var(--sp-6);      /* 28px → 24px */
}

/* 章节标题 */
.gr-sh {
  margin-bottom: var(--sp-11);     /* 60px → 64px */
}

/* About 标签容器 */
.gr-tags {
  margin-top: var(--sp-6);         /* 26px → 24px */
}

/* 联系卡片 */
.gr-ci {
  padding: var(--sp-2) var(--sp-4);/* 10px 16px → 8px 16px */
}

/* 询盘大按钮 */
.gr-ibtn {
  padding: var(--sp-4) var(--sp-9);/* 15px 44px → 16px 48px */
}

/* 导航链接间隙 */
.gr-links {
  gap: var(--sp-1);                /* 0 → 4px */
}


/* ===========================================================
   #2.4 4列功能网格 → 2列
   =========================================================== */

.gr-fg {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);                /* 24px */
}

@media (max-width: 600px) {
  .gr-fg {
    grid-template-columns: 1fr;
  }
}


/* ===========================================================
   #2.6 文字最大宽度限制
   =========================================================== */

.gr-at p,
.gr-step p {
  max-width: 600px;                /* 66字符理想行长 */
}

.gr-sh p,
.gr-hsub {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.gr-tscard blockquote {
  max-width: 520px;
}


/* ===========================================================
   #2.7 行高显式化
   =========================================================== */

body {
  font-size: var(--fs-base);       /* 16px */
  line-height: 1.5;                /* 24px */
}

h1, .gr-hc h1 { line-height: 1.15; }
h2, .gr-sh h2 { line-height: 1.25; }
h3, h4        { line-height: 1.3;  }

.gr-hsub     { line-height: 1.6; }
.gr-at p     { line-height: 1.65; }
.gr-f p      { line-height: 1.6; }
.gr-step p   { line-height: 1.6; }
.gr-tscard blockquote { line-height: 1.65; }


/* ===========================================================
   #2.8 text-wrap: balance 防止孤词
   =========================================================== */

.gr-hc h1,
.gr-sh h2,
.gr-ib h2,
.gr-at h2,
.gr-home-prod-body h3,
.gr-f h3 {
  text-wrap: balance;
}


/* ===========================================================
   #2.9 产品卡片 Hover 上移距离
   =========================================================== */

.gr-f:hover      { transform: translateY(-6px); }  /* -4px → -6px */
.gr-tbi:hover    { transform: translateY(-4px); }  /* -3px → -4px */
.gr-tscard:hover { transform: translateY(-6px); }  /* -4px → -6px */


/* ===========================================================
   #2.10 子页面 Hero 视觉统一（CSS 部分）
   注意：不改动各页面 h1 的 HTML 文字内容
   =========================================================== */

.gr-hero,
.au-hero,
.oem-hero,
.bl-hero {
  min-height: 360px;
  padding: 120px 40px 60px;
}

.gr-hero h1,
.au-hero-h1,
.oem-hero-h1,
.bl-hero-h1 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}


/* ===========================================================
   #2.11 章节标签 class 视觉统一
   注意：不改动 HTML class 名，仅统一 CSS 视觉呈现
   =========================================================== */

.gr-lbl,
.sec-label,
.bl-hero-label,
.au-hero-eyebrow,
.oem-hero-eye,
.gr-home-prod-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 12px;
  display: block;
}

/* ===========================================================
   #2.x border-radius 标准化补漏
   =========================================================== */
.gr-home-prod-desc,
.gr-ctxt,
.gr-pquote,
.gr-stag,
.gr-abl,
.gr-plink,
.gr-sn,
.gr-tbi-ico,
.gr-mclose,
.gr-stars { border-radius: 8px; }       /* 14→8 或 5/6/10/14→8 */

.gr-pspecgrid { border-radius: 12px; }  /* 14/22→12 */

.gr-brand-title { border-radius: 16px; } /* 14→16 */

/* ===========================================================
   #2.y 正文容器最大文本宽度
   =========================================================== */
.gr-home-prod-desc,
.gr-ctxt,
.gr-pquote,
.gr-abl,
.gr-at,
.gr-pftxt { max-width: 600px; }

/* ===========================================================
   #2.z 产品图片固定尺寸（防 CLS）
   =========================================================== */
.gr-home-prod-img,
.gr-home-prod-img img { width: 400px; height: 300px; }

.gr-pc-img,
.gr-pc-img img { width: 400px; height: auto; }

.gr-about-hero-img { width: 600px; height: 400px; }

.gr-dyn-img { width: 400px; height: 300px; object-fit: cover; }