/* ==========================================================================
   layout.css — 容器、区块、标题组、分栏、网格、页脚骨架
   依据：docs/design-system.md、docs/page-spec.md（实测值）
   ========================================================================== */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ---- 区块 ---- */
.section {
    padding: var(--section-py) var(--container-pad);
}

.section--white  { background: var(--bg-page); }
.section--blue   { background: var(--bg-section-blue); }
.section--purple { background: var(--bg-section-purple); }

/* ---- 标题组（eyebrow / title / sub） ---- */
.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--header-gap);
    margin-bottom: var(--header-to-content);
}

.section-header--center { align-items: center; text-align: center; }
.section-header--left   { align-items: flex-start; }

.section-header .t-sub {
    max-width: 760px;
}

/* ---- 内页 Page Hero ---- */
.page-hero {
    padding: 110px var(--container-pad);
    background: var(--bg-section-purple);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
}

/* 底色加深后同步加深文字色，避免与相邻 section--blue 拉开层次时牺牲对比度 */
.page-hero .t-eyebrow { color: var(--color-page-hero-eyebrow); }

.page-hero .t-sub {
    max-width: 720px;
    color: var(--color-page-hero-sub);
}

/* ---- 首页 Hero ---- */
.hero {
    padding: var(--hero-py-top) var(--container-pad) var(--hero-py-bottom);
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.hero__headline {
    max-width: 1040px;
}

.hero__sub {
    max-width: 780px;
    font-size: var(--fs-hero-sub);
    line-height: var(--lh-hero-sub);
    color: var(--color-body);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--bg-badge);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--color-primary);
}

.hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ---- 左右分栏行（GEO 是什么 / 外贸出海 / 公司简介 / 联系表单） ---- */
.content-row {
    display: grid;
    gap: var(--card-gap);
    align-items: stretch;
}

.content-row--geo    { grid-template-columns: 460px 1fr; }
.content-row--split  { grid-template-columns: 1fr 1fr; gap: 24px; }
.content-row--about  { grid-template-columns: 620px 1fr; gap: 64px; align-items: start; }
.content-row--contact{ grid-template-columns: 640px 1fr; gap: 40px; align-items: start; }

/* ---- 顶线编号列（核心价值 / 投喂渠道 / 效果衡量） ---- */
.num-columns {
    display: grid;
    gap: var(--col-gap);
}

.num-columns--5 { grid-template-columns: repeat(5, 1fr); }
.num-columns--4 { grid-template-columns: repeat(4, 1fr); }

.num-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.num-col__bar {
    width: 100%;
    height: 2px;
    background: var(--color-primary);
}

.num-col__num {
    font-family: var(--font-num);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--color-primary);
}

.num-col__num--amber { color: var(--color-accent-amber); }

.num-col__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink);
}

.num-col__text {
    font-size: var(--fs-body);
    line-height: 24px;
    color: var(--color-body);
}

/* ---- 卡片网格 ---- */
.grid {
    display: grid;
    gap: var(--card-gap);
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.grid--wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--card-gap);
}

/* 统计行（4 等分） */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat__num {
    font-family: var(--font-num);
    font-size: var(--fs-stat);
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.1;
}

.stat__label {
    font-size: var(--fs-body-lg);
    color: var(--color-body);
}

/* ---- 统计 + Chip（平台与资源） ---- */
.stats-gap { margin-top: var(--header-to-content); }
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}

/* ---- 最终 CTA ---- */
.cta-final {
    padding: var(--section-cta-py) var(--container-pad);
    background: var(--bg-cta);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
}

.cta-final__title { max-width: 900px; white-space: pre-line; }
.cta-final__sub   { max-width: 720px; font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--color-body); }
.cta-final__btns  { display: flex; gap: 16px; margin-top: 12px; }
.cta-final__note  { font-size: var(--fs-caption); color: var(--color-caption); margin-top: 10px; }

/* ---- 页脚 ---- */
.footer {
    background: var(--bg-footer);
    padding: var(--footer-py-top) var(--container-pad) var(--footer-py-bottom);
    color: var(--color-footer-text);
}

.footer__top {
    display: grid;
    grid-template-columns: 330px 1fr 1fr 1fr 260px;
    gap: 60px;
}

.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand-row { display: flex; align-items: center; gap: 10px; }
.footer__brand-name { font-size: 17px; font-weight: 700; color: #fff; }
.footer__brand-desc { font-size: 14px; line-height: 24px; color: var(--color-footer-text); }

.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col-title { font-size: 14px; font-weight: 600; color: #fff; }
.footer__link { font-size: 14px; color: var(--color-footer-text); }
.footer__link:hover { color: #fff; }
.footer__addr { font-size: 14px; line-height: 22px; }

.footer__hairline {
    border: 0;
    height: 1px;
    background: var(--hairline-footer);
    transform: scaleY(0.5);
    margin: 48px 0 24px;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--color-footer-text);
}

.footer__copyright { line-height: 20px; }

/* 备案号：必须可点击跳转工信部备案管理系统（法规要求） */
.footer__icp {
    color: var(--color-footer-text);
    line-height: 20px;
    transition: color 0.18s ease;
    white-space: nowrap;
}

.footer__icp:hover { color: #fff; }

.footer__icp:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 2px;
}