/* ============================================================
   site.css — 三丰东星全站统一全局样式
   参照 trident-medical.com.cn 设计系统
   加载顺序：site.css → swiper → style.css
   ============================================================ */
@font-face {
    font-family: "SourceHanSansCN";
    src: url(../fonts/SourceHanSansCN.otf) format("opentype");
    font-alias:SourceHanSansCN-Light
}

/* ===== CSS 变量（全站设计令牌） ===== */
:root {
    /* 主色系 */
    --c-primary: #409eff;
    --c-primary-hover: #337ecc;
    --c-primary-light: #ecf5ff;

    /* 文字色 */
    --c-text-dark: #222;
    --c-text-base: #333;
    --c-text-secondary: #555;
    --c-text-muted: #666;
    --c-text-light: #888;
    --c-text-lighter: #999;

    /* 背景 / 边框 */
    --c-bg-page: #fff;
    --c-bg-gray: #f5f5f5;
    --c-bg-gray-light: #fafafa;
    --c-border: #eaeaea;
    --c-border-light: #ebebeb;
    --c-border-input: #ddd;

    /* 字体 */
    --font-body: SourceHanSansCN, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;

    /* 字号（rem 基准 16px） */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.8125rem;  /* 13px */
    --fs-base: 0.875rem; /* 14px */
    --fs-md: 1rem;       /* 16px */
    --fs-lg: 1.125rem;   /* 18px */
    --fs-xl: 1.25rem;    /* 20px */
    --fs-2xl: 1.5rem;    /* 24px */
    --fs-3xl: 1.75rem;   /* 28px */
    --fs-4xl: 2.125rem;  /* 34px */

    /* 行高 */
    --lh-body: 1.714;  /* 14px body → 24px 行高 */
    --lh-heading: 1.2;
    --lh-dense: 1.4;
    --lh-normal: 1.5;
    --lh-relaxed: 1.8;

    /* 间距 */
    --sp-xs: 0.5rem;
    --sp-sm: 0.75rem;
    --sp-md: 1rem;
    --sp-lg: 1.25rem;
    --sp-xl: 1.875rem;
    --sp-2xl: 2.5rem;

    /* 圆角 */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 20px;

    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, .08);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, .1);

    /* 过渡 */
    --t-fast: .15s;
    --t-normal: .3s;
    --t-slow: .5s;
}

/* ============================================================
   Reset & Base
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
}

body {
    background: var(--c-bg-page);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--c-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 标题层级 (参照参考站 Bootstrap 标题比例) ===== */
h1, .h1 { font-size: 2.5rem;   line-height: var(--lh-heading); color: var(--c-text-dark); }
h2, .h2 { font-size: 2rem;     line-height: var(--lh-heading); color: var(--c-text-dark); }
h3, .h3 { font-size: 1.75rem;  line-height: var(--lh-heading); color: var(--c-text-dark); }
h4, .h4 { font-size: 1.5rem;   line-height: var(--lh-heading); color: var(--c-text-dark); }
h5, .h5 { font-size: 1.25rem;  line-height: var(--lh-heading); color: var(--c-text-dark); }
h6, .h6 { font-size: 1rem;     line-height: var(--lh-heading); color: var(--c-text-dark); }

/* ===== 链接 ===== */
a {
    color: var(--c-text-base);
    text-decoration: none;
    transition: all var(--t-normal);
    -webkit-tap-highlight-color: transparent;
}

a:hover {
    color: var(--c-primary);
}

/* ===== 图片 ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

/* ===== 列表 ===== */
ul, ol {
    list-style: none;
}

/* ===== 段落 ===== */
p {
    margin-bottom: 0;
}

/* ===== 表单基础 ===== */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   字号工具类（参照参考站 font14/font16… 命名）
   ============================================================ */

.font12 { font-size: var(--fs-xs) !important; }
.font13 { font-size: var(--fs-sm) !important; }
.font14 { font-size: var(--fs-base) !important; }
.font16 { font-size: var(--fs-md) !important; }
.font18 { font-size: var(--fs-lg) !important; }
.font20 { font-size: var(--fs-xl) !important; }
.font24 { font-size: var(--fs-2xl) !important; }
.font28 { font-size: var(--fs-3xl) !important; }
.font32 { font-size: 2rem !important; }

/* ============================================================
   文本工具类
   ============================================================ */

.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

.text-dark    { color: var(--c-text-dark) !important; }
.text-base    { color: var(--c-text-base) !important; }
.text-muted   { color: var(--c-text-muted) !important; }
.text-light   { color: var(--c-text-light) !important; }
.text-primary { color: var(--c-primary) !important; }
.text-white   { color: #fff !important; }

/* ============================================================
   间距工具类
   ============================================================ */

.mt-0  { margin-top: 0 !important; }
.mt-sm { margin-top: var(--sp-sm) !important; }
.mt-md { margin-top: var(--sp-md) !important; }
.mt-lg { margin-top: var(--sp-lg) !important; }
.mt-xl { margin-top: var(--sp-xl) !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: var(--sp-sm) !important; }
.mb-md { margin-bottom: var(--sp-md) !important; }
.mb-lg { margin-bottom: var(--sp-lg) !important; }
.mb-xl { margin-bottom: var(--sp-xl) !important; }

.pt-xl { padding-top: var(--sp-2xl) !important; }
.pb-xl { padding-bottom: var(--sp-2xl) !important; }

/* ============================================================
   容器
   ============================================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   按钮组件
   ============================================================ */

/* 实心主色按钮 */
.btn-primary {
    display: inline-block;
    padding: 8px 24px;
    background: var(--c-primary);
    color: #fff;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all var(--t-normal);
}

.btn-primary:hover {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: #fff;
}

/* 描边主色按钮 */
.btn-outline {
    display: inline-block;
    padding: 8px 24px;
    background: transparent;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all var(--t-normal);
}

.btn-outline:hover {
    background: var(--c-primary);
    color: #fff;
}

/* ============================================================
   分页组件
   ============================================================ */

.pagination {
    text-align: center;
    margin-top: var(--sp-2xl);
    margin-bottom: var(--sp-2xl);
}

.pagination a,
.pagination span.page-status {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 3px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    color: var(--c-text-light);
    transition: all var(--t-normal);
}

.pagination a:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

.pagination .page-num-current,
.pagination .current {
    background: #222a35;
    color: #fff;
    border-color: #222a35;
    cursor: default;
}

.pagination .page-num-current:hover,
.pagination .current:hover {
    background: #474b52;
    color: #fff;
}

/* ============================================================
   响应式
   ============================================================ */

@media screen and (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .container {
        padding: 0 15px;
    }

    .pagination a,
    .pagination span {
        padding: 6px 12px;
        margin: 0 2px;
        font-size: var(--fs-sm);
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .pagination a,
    .pagination span {
        padding: 5px 10px;
        font-size: var(--fs-xs);
    }
}