/* =============================================================================
   柳林生活网 · 企业站模板 —— 扁平化设计令牌层
   配色取自 liulin.cn 主站：#e84545 / #903749 / #53354a / #2b2e4a
   加载顺序：本文件最先加载，其后是 flat-store.css（组件层）。
   本文件已内置基础重置（*、html、body、img、a 等），无需再引 reset.css。
   换肤：只改本文件 :root 内的色值即可，其余样式无需改动。
   ============================================================================= */

:root {
  /* ---------------- 品牌色 ---------------- */
  --c-brand:        #e84545;              /* 主色：按钮、强调、当前态 */
  --c-brand-rgb:    232, 69, 69;          /* 供 rgba() 使用 */
  --c-brand-dark:   #d23030;              /* hover 加深 */
  --c-brand-light:  #ff6b6b;              /* 渐变亮端 */
  --c-brand-soft:   #fdecec;              /* 浅色底：标签、选中背景 */

  --c-rose:         #903749;              /* 玫红：次级强调、图标底 */
  --c-rose-rgb:     144, 55, 73;
  --c-plum:         #53354a;              /* 深紫红：标题栏、页脚 */
  --c-navy:         #2b2e4a;              /* 深蓝：正文标题、深色区块 */
  --c-navy-rgb:     43, 46, 74;

  /* ---------------- 中性色 ---------------- */
  --c-text:         #1f2233;              /* 正文 */
  --c-text-sub:     #5a5f73;              /* 次要文字 */
  --c-text-mute:    #8b90a3;              /* 弱化文字、日期 */
  --c-text-invert:  #ffffff;

  --c-bg:           #f6f7f9;              /* 页面底色（浅灰，衬托白色卡片） */
  --c-surface:      #ffffff;              /* 卡片、面板 */
  --c-surface-2:    #fafbfc;              /* 次级面板、表格斑马纹 */
  --c-border:       #e8eaef;              /* 常规边框 */
  --c-border-soft:  #f0f2f5;              /* 极浅分隔线 */
  --c-border-strong:#d5d9e2;              /* 强边框、分隔符 */

  /* ---------------- 功能色 ---------------- */
  --c-success:      #17a673;
  --c-warning:      #e8a33d;
  --c-danger:       #e84545;
  --c-info:         #3d7de8;

  /* ---------------- 间距刻度（8px 基准） ---------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------------- 圆角（扁平化：克制、统一） ---------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------------- 阴影（扁平化：极浅、仅用于浮起） ---------------- */
  --sh-xs: 0 1px 2px rgba(31, 34, 51, .04);
  --sh-sm: 0 2px 8px rgba(31, 34, 51, .06);
  --sh-md: 0 6px 20px rgba(31, 34, 51, .08);
  --sh-lg: 0 12px 36px rgba(31, 34, 51, .10);
  --sh-brand: 0 6px 18px rgba(var(--c-brand-rgb), .24);

  /* ---------------- 边框宽度 ---------------- */
  --bd-1: 1px;
  --bd-2: 2px;
  --bd-3: 3px;

  /* ---------------- 字体 ---------------- */
  --ff-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ff-num:  "DIN Alternate", "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  46px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  --lh-tight: 1.25;
  --lh-base:  1.6;
  --lh-loose: 1.85;

  /* ---------------- 布局 ---------------- */
  --layout-max:   1280px;   /* 内容最大宽度（全站 1200 -> 1280） */
  --layout-gut:   24px;     /* 左右安全边距 */
  --layout-narrow: 960px;   /* 文章类窄栏（随主宽等比放大） */

  --h-header-top: 88px;     /* 品牌区高度 */
  --h-nav:        56px;     /* 导航条高度 */
  --h-control:    42px;     /* 表单控件高度 */

  /* ---------------- 动效 ---------------- */
  --tr-fast: .15s ease;
  --tr-base: .25s ease;
  --tr-slow: .4s cubic-bezier(.2, .8, .2, 1);

  --z-nav:     100;
  --z-float:   900;
  --z-overlay: 1000;
}

/* =============================================================================
   基础重置（补齐 reset.css 未覆盖部分，保持向后兼容）
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

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

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a   { color: inherit; text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--c-brand); }

/* =============================================================================
   通用原子类（供模板直接调用，避免内联样式）
   ============================================================================= */

.lin-container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gut);
}

.lin-sec        { padding-block: var(--sp-16); }
.lin-sec--tight { padding-block: var(--sp-12); }
.lin-sec--gray  { background: var(--c-bg); }

/* 区块标题：左侧色条 + 主副标题 + 右侧操作 */
.lin-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.lin-sec-head__main { min-width: 0; }
.lin-sec-head__title {
  position: relative;
  margin: 0;
  padding-left: var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-navy);
  letter-spacing: .01em;
}
.lin-sec-head__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--c-brand), var(--c-rose));
}
.lin-sec-head__sub {
  margin: var(--sp-2) 0 0 var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-text-mute);
  line-height: var(--lh-base);
}
.lin-sec-head__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  white-space: nowrap;
}
.lin-sec-head__more:hover { color: var(--c-brand); }
.lin-sec-head__more::after {
  content: '';
  width: 6px; height: 6px;
  border-top: var(--bd-2) solid currentColor;
  border-right: var(--bd-2) solid currentColor;
  transform: rotate(45deg) translateY(1px);
}

/* 卡片 */
.lin-card {
  background: var(--c-surface);
  border: var(--bd-1) solid var(--c-border);
  border-radius: var(--r-lg);
  transition: box-shadow var(--tr-base), border-color var(--tr-base), transform var(--tr-base);
}
.lin-card--hover:hover {
  border-color: rgba(var(--c-brand-rgb), .35);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.lin-card__body { padding: var(--sp-6); }

/* 按钮 */
.lin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-control);
  padding-inline: var(--sp-6);
  border: var(--bd-1) solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tr-fast), border-color var(--tr-fast),
              color var(--tr-fast), box-shadow var(--tr-fast);
}
.lin-btn--primary {
  background: var(--c-brand);
  color: var(--c-text-invert);
  box-shadow: var(--sh-brand);
}
.lin-btn--primary:hover {
  background: var(--c-brand-dark);
  color: var(--c-text-invert);
  box-shadow: 0 8px 22px rgba(var(--c-brand-rgb), .3);
}
.lin-btn--ghost {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-sub);
}
.lin-btn--ghost:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.lin-btn--rose {
  background: var(--c-rose);
  color: var(--c-text-invert);
}
.lin-btn--rose:hover { background: #7d2f3f; color: var(--c-text-invert); }
.lin-btn--lg { height: 50px; padding-inline: var(--sp-8); font-size: var(--fs-md); }
.lin-btn--block { width: 100%; }

/* 网格 */
.lin-grid { display: grid; gap: var(--sp-6); }
.lin-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lin-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lin-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lin-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 标签 */
.lin-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--c-brand-soft);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-brand);
  white-space: nowrap;
}

/* 两行/三行截断 */
.lin-clamp-1,
.lin-clamp-2,
.lin-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lin-clamp-1 { -webkit-line-clamp: 1; }
.lin-clamp-2 { -webkit-line-clamp: 2; }
.lin-clamp-3 { -webkit-line-clamp: 3; }

/* 占位图 */
.lin-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2);
  color: var(--c-text-mute);
  font-size: var(--fs-sm);
}

/* 无障碍：仅供屏幕阅读器 */
.lin-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 浮动客服按钮（footer 内使用） */
.lin-float-btn {
  width: 52px; height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: var(--bd-1) solid var(--c-border);
  box-shadow: var(--sh-sm);
  color: var(--c-text-sub);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.lin-float-btn:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-text-invert);
}

/* =============================================================================
   响应式：平板 / 手机
   ============================================================================= */

@media (max-width: 1180px) {
  :root { --layout-gut: 20px; --layout-max: 100%; }
}

@media (max-width: 900px) {
  :root {
    --fs-3xl:  30px;
    --fs-4xl:  36px;
    --fs-2xl:  24px;
    --sp-16:   48px;
    --sp-20:   56px;
  }
  .lin-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lin-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root {
    --fs-2xl:  21px;
    --fs-3xl:  26px;
    --fs-4xl:  30px;
    --layout-gut: 16px;
  }
  .lin-sec        { padding-block: var(--sp-10); }
  .lin-sec--tight { padding-block: var(--sp-8); }

  .lin-sec-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--sp-6); }
  .lin-grid { gap: var(--sp-4); }
  .lin-grid--2,
  .lin-grid--3,
  .lin-grid--4,
  .lin-grid--auto { grid-template-columns: 1fr; }
  .lin-card__body { padding: var(--sp-4); }
}