/* ==========================================================================
   KIDE 2027 · V8 网站美化层（2026-11-08）
   1. 标题系统：只保留大标题 + 整宽 VI 色带，去掉编号与小标签
   2. 首页核心定位句：整宽 KIDE 蓝色块
   3. 豆腐块：多色渐变色块拼接 + 反白字（鲜亮色 B 方案，带光感与细纹处理）
   4. 参展流程：去编号，改为色点时间线
   ========================================================================== */

:root {
  --ribbon-full: linear-gradient(90deg, var(--blue) 0 30%, var(--lagoon) 30% 52%, var(--lilac) 52% 70%, var(--gold) 70% 86%, var(--orange) 86% 96%, var(--magenta) 96% 100%);
  --ribbon-onblue: linear-gradient(90deg, var(--lagoon) 0 32%, var(--lilac) 32% 58%, var(--gold) 58% 80%, var(--orange) 80% 95%, var(--magenta) 95% 100%);
  --ribbon-h8: 6px;

  /* 色块：每色一对渐变（浅 → 深），按色带顺序轮换 */
  --tile-1a: #1b6fc2; --tile-1b: #0a4c94;   /* KIDE 蓝 */
  --tile-2a: #12a9c2; --tile-2b: #00809e;   /* 湖青 */
  --tile-3a: #ad72c4; --tile-3b: #8549a0;   /* 丁香紫 */
  --tile-4a: #e2ab33; --tile-4b: #c3830f;   /* 金 */
  --tile-5a: #f39a25; --tile-5b: #d86f07;   /* 橙 */
  --tile-6a: #3f63cf; --tile-6b: #2440a4;   /* 宝蓝 */
  --tile-7a: #17ad9e; --tile-7b: #067f75;   /* 青绿 */
  --tile-8a: #c03d98; --tile-8b: #921a74;   /* 品红 */
  --tile-gap: 3px;
}

/* --------------------------------------------------------------------------
   1. 标题系统
   -------------------------------------------------------------------------- */
.sec-head,
.content-heading {
  position: relative;
  margin-bottom: clamp(32px, 3.6vw, 48px);
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom: 0;
  align-items: end;
}
.sec-head::after,
.content-heading::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: var(--ribbon-h8);
  background: var(--ribbon-full);
}
.sec-head__title { gap: 0; }
.sec-head h2,
.content-heading h2,
.categories__copy h2,
.exhibitor-show__copy h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--blue);
}
.content-heading > p,
.sec-head__lead {
  max-width: 560px;
  justify-self: end;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.sec-head .link-arrow,
.categories__copy .link-arrow { font-size: 17px; }

/* 图文分栏、场馆分栏里的标题同样加色带 */
.split-block__copy h2,
.venue-grid h2 {
  margin-top: 0;
  font-size: clamp(30px, 3.2vw, 46px);
  padding-bottom: 20px;
  margin-bottom: 8px;
  background: var(--ribbon-full) left bottom / 100% var(--ribbon-h8) no-repeat;
}

/* 首页展品范围：改为上标题 + 下整宽色块 */
.categories__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.categories__copy {
  position: relative; top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(32px, 3.6vw, 48px);
  padding-bottom: clamp(20px, 2vw, 28px);
}
.categories__copy::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ribbon-h8); background: var(--ribbon-full);
}
.categories__copy > p:not(.eyebrow) { display: none; }

/* 首页展商秀（深蓝底）标题保持白字 */
.exhibitor-show__copy h2 { color: #fff; }

/* 内页首屏：去掉编号标签后的间距 */
.section-photo-band__crumb { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   2. 核心定位句：整宽蓝色色块
   -------------------------------------------------------------------------- */
.home-position {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8vw, 120px) 0 clamp(64px, 7.5vw, 112px);
  border-bottom: 0;
  color: #fff;
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(20, 189, 172, .28), transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(40, 70, 180, .45), transparent 65%),
    linear-gradient(120deg, #0a4a92 0%, var(--blue) 48%, #0b66b0 100%);
}
.home-position::before {
  /* 细斜纹质感 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px);
}
.home-position::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--ribbon-h8); background: var(--ribbon-onblue);
}
.home-position__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 34px); align-items: start; }
.home-position h2 {
  max-width: 1180px;
  color: #fff;
  font-size: clamp(30px, 3.5vw, 56px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(6, 30, 70, .25);
}
.home-position__side { max-width: 960px; padding-left: 22px; border-left: 4px solid var(--lagoon); }
.home-position__lead { color: rgba(255,255,255,.88); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.85; }

/* 规模数字：去掉小标签后对齐 */
.facts__lead p { margin-top: 0; }

/* --------------------------------------------------------------------------
   3. 色块拼接
   -------------------------------------------------------------------------- */
.pillars,
.feature-grid,
.bullet-grid,
.category-grid,
.info-grid {
  display: grid;
  gap: var(--tile-gap);
  border: 0;
  background: transparent;
}
.pillars, .feature-grid { grid-template-columns: repeat(4, 1fr); }
.category-grid { grid-template-columns: repeat(4, 1fr); }
.info-grid { grid-template-columns: repeat(3, 1fr); }

.pillar, .pillar + .pillar,
.feature, .feature + .feature,
.content-section--mist .feature, .content-section--mist .feature + .feature,
.bullet-card,
.content-section--white .bullet-card,
.category,
.info-card,
.content-section--white .info-card {
  --c1: var(--tile-1a); --c2: var(--tile-1b);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 210px;
  margin: 0;
  padding: clamp(26px, 2.4vw, 38px) clamp(22px, 2.2vw, 34px) clamp(28px, 2.6vw, 40px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px),
    linear-gradient(140deg, var(--c1) 0%, var(--c2) 100%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);
}
/* 右下角柔光圆，给色块一点层次 */
.pillar::after, .feature::after, .bullet-card::after, .category::after, .info-card::after {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  top: auto; left: auto; right: -70px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 68%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
/* 去掉原来的 track 色条 */
.pillar::before, .feature::before, .bullet-card::before, .category::before, .info-card::before { display: none !important; }

/* 顺序配色：相邻色块不同色 */
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+2) { --c1: var(--tile-2a); --c2: var(--tile-2b); }
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+3) { --c1: var(--tile-3a); --c2: var(--tile-3b); }
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+4) { --c1: var(--tile-4a); --c2: var(--tile-4b); }
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+5) { --c1: var(--tile-5a); --c2: var(--tile-5b); }
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+6) { --c1: var(--tile-6a); --c2: var(--tile-6b); }
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+7) { --c1: var(--tile-7a); --c2: var(--tile-7b); }
:is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+8) { --c1: var(--tile-8a); --c2: var(--tile-8b); }

/* 文字：全部反白 */
.pillar h3, .feature h3, .bullet-card h3, .category h3, .info-card h3,
.page-visit .bullet-grid .bullet-card h3 {
  margin: 0;
  font-family: var(--font-sans, inherit);
  font-size: clamp(21px, 1.75vw, 28px);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
.pillar p, .feature p, .bullet-card p, .category p, .info-card p,
.page-visit .bullet-grid .bullet-card p {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
/* 只有一句话的色块（东南亚对接），文字加大加粗 */
.bullet-card > p:only-child { margin-top: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; line-height: 1.6; }
/* 观众类型色块：只有标题，较矮 */
.page-visit .bullet-grid .bullet-card { min-height: 150px; justify-content: flex-end; }

/* 悬停：浮起 + 加深 */
.pillar:hover, .feature:hover, .bullet-card:hover, .category:hover, .category:focus-visible, .info-card:hover {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(16, 45, 95, .22);
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px),
    linear-gradient(140deg, var(--c1) 0%, var(--c2) 100%);
}

/* 可点击色块（首页展品范围）：右上角箭头 */
.category { min-height: 220px; justify-content: flex-start; }
.category h3 { margin-top: 0; padding-right: 36px; }
.category__go {
  right: 24px; top: 26px;
  color: #fff; font-size: 22px;
  opacity: .75; transform: none;
}
.category:hover .category__go { opacity: 1; transform: translateX(4px); }

/* 资料中心色块里的状态标签 */
.info-card .status-pill {
  align-self: flex-start;
  margin-top: auto;
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.info-card p { margin-bottom: 22px; }
.info-card a.status-pill:hover { background: #fff; color: var(--blue); }

/* 企业页分类筛选色块：选中状态 */
.product-category-filter { cursor: pointer; }
.product-category-filter[aria-pressed="true"],
.product-category-filter.is-active {
  box-shadow: inset 0 0 0 3px #fff, 0 14px 30px rgba(16,45,95,.22);
}

/* 色块区块之间的留白略收紧，使拼接更整体 */
.feature-grid + .feature-grid,
.bullet-grid + .bullet-grid { margin-top: var(--tile-gap); }

/* --------------------------------------------------------------------------
   4. 参展流程：去编号的色点时间线
   -------------------------------------------------------------------------- */
.timeline { grid-template-columns: repeat(6, 1fr); gap: 0; }
.timeline::before { top: 9px; height: 4px; background: var(--ribbon-full); }
.timeline-step { padding: 0 20px 0 0; }
.timeline-step::before {
  content: "";
  display: block;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(2,85,162,.18);
}
.timeline-step:nth-child(2)::before { background: var(--lagoon); }
.timeline-step:nth-child(3)::before { background: var(--lilac); }
.timeline-step:nth-child(4)::before { background: var(--gold); }
.timeline-step:nth-child(5)::before { background: var(--orange); }
.timeline-step:nth-child(6)::before { background: var(--magenta); }
.timeline-step h3 { margin-top: 26px; font-size: 19px; }
.timeline-step p { font-size: 15px; }

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .pillars, .feature-grid, .category-grid { grid-template-columns: repeat(2, 1fr); }
  .bullet-grid,
  .bullet-grid:has(> :nth-child(6):last-child),
  .bullet-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .timeline::before { display: none; }
}
@media (max-width: 860px) {
  .content-heading { grid-template-columns: minmax(0, 1fr); }
  .content-heading > p { justify-self: start; }
  .categories__copy { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 720px) {
  :root { --tile-gap: 2px; --ribbon-h8: 5px; }
  .sec-head h2, .content-heading h2, .categories__copy h2, .exhibitor-show__copy h2 {
    margin-top: 0; font-size: clamp(27px, 7.6vw, 34px);
  }
  .split-block__copy h2, .venue-grid h2 { font-size: clamp(26px, 7vw, 32px); }
  .sec-head__title { display: block; }
  .home-position { padding: 52px 0 56px; }
  .home-position h2 { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.4; }
  .home-position__side { padding-left: 14px; }

  /* 文字较多的色块：单列；分类类短色块：双列 */
  .pillars, .feature-grid, .info-grid { grid-template-columns: minmax(0, 1fr); }
  .pillar, .pillar + .pillar, .feature, .feature + .feature, .content-section--mist .feature, .content-section--mist .feature + .feature, .info-card, .content-section--white .info-card { min-height: 0; padding: 26px 22px 28px; }
  .category-grid,
  .bullet-grid,
  .bullet-grid:has(> :nth-child(6):last-child),
  .bullet-grid:has(> :nth-child(3):last-child),
  .bullet-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bullet-card, .content-section--white .bullet-card, .category { min-height: 150px; padding: 20px 16px 22px; }
  .category h3, .bullet-card h3, .page-visit .bullet-grid .bullet-card h3 { font-size: 18.5px; padding-right: 0; }
  .category p, .bullet-card p, .page-visit .bullet-grid .bullet-card p { font-size: 14.5px; line-height: 1.7; margin-top: 8px; }
  .bullet-card > p:only-child { font-size: 15.5px; }
  .category__go { display: none; }
  .page-visit .bullet-grid .bullet-card { min-height: 110px; }

  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .timeline-step { display: grid; grid-template-columns: 22px 1fr; column-gap: 16px; padding: 0 0 24px; position: relative; }
  .timeline-step:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 26px; bottom: 2px; width: 4px; background: var(--line); }
  .timeline-step h3 { margin-top: 0; }
}
@media (max-width: 380px) {
  .category-grid, .bullet-grid,
  .bullet-grid:has(> :nth-child(6):last-child),
  .bullet-grid:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pillar, .feature, .bullet-card, .category, .info-card { transition: none; }
  .pillar:hover, .feature:hover, .bullet-card:hover, .category:hover, .info-card:hover { transform: none; }
}

/* 入场动画与悬停浮起共存 */
.js [data-reveal].is-visible:is(.pillar, .feature, .bullet-card, .category, .info-card):hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal].is-visible:is(.pillar, .feature, .bullet-card, .category, .info-card):hover { transform: none; }
}

/* 浅灰底区块的色块从橙色起排，避免相邻区块配色重复 */
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+1) { --c1: var(--tile-5a); --c2: var(--tile-5b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+2) { --c1: var(--tile-6a); --c2: var(--tile-6b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+3) { --c1: var(--tile-7a); --c2: var(--tile-7b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+4) { --c1: var(--tile-8a); --c2: var(--tile-8b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+5) { --c1: var(--tile-1a); --c2: var(--tile-1b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+6) { --c1: var(--tile-2a); --c2: var(--tile-2b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+7) { --c1: var(--tile-3a); --c2: var(--tile-3b); }
.content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+8) { --c1: var(--tile-4a); --c2: var(--tile-4b); }

/* 连续两个浅灰区块：第二个从紫色起排 */
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+1) { --c1: var(--tile-3a); --c2: var(--tile-3b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+2) { --c1: var(--tile-4a); --c2: var(--tile-4b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+3) { --c1: var(--tile-5a); --c2: var(--tile-5b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+4) { --c1: var(--tile-6a); --c2: var(--tile-6b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+5) { --c1: var(--tile-7a); --c2: var(--tile-7b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+6) { --c1: var(--tile-8a); --c2: var(--tile-8b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+7) { --c1: var(--tile-1a); --c2: var(--tile-1b); }
.content-section--mist + .content-section--mist :is(.pillars, .feature-grid, .bullet-grid, .category-grid, .info-grid) > :nth-child(8n+8) { --c1: var(--tile-2a); --c2: var(--tile-2b); }