/* ============================================
   项目演示页（demo.html）专用样式
   复用 style.css 的色板与 .section-header / .tag-pill / .hw-hero 等基础类
   ============================================ */

/* ---------------- 演示列表页：格子矩阵 ---------------- */
.demo-list-root {
  padding: 8px 0 24px;
}

/* 用 flex 而不是 grid：演示数量不固定，flex + justify-content:center 能让
   「不足一行」的卡片真正居中（1 张居中、2 张并排），
   而 grid 的自动轨道会把 1 张卡压在容器左半边。
   卡片定宽 340px，窄屏自动退化成一列铺满。
   注意卡片外壳必须是 <article> 而不是 <a>：卡内有仓库链接 <a>，
   HTML 不允许 <a> 嵌套 <a>，否则浏览器会提前闭合外层标签、把布局拆散 */
.demo-entry-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1140px;
  margin: 0 auto;
}

.demo-entry-grid > .demo-entry {
  flex: 1 1 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .demo-entry-grid > .demo-entry {
    flex: 0 1 340px;
    max-width: 340px;
  }
}

/* 整张卡片可点：外壳用 <article> + JS 跳转（卡内还有仓库链接，<a> 不能再套 <a>） */
.demo-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--stone-200);
  border-radius: 14px;
  background: var(--white);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: fadeUp 0.4s ease-out forwards;
  opacity: 0;
}

.demo-entry:hover {
  transform: translateY(-4px);
  border-color: var(--stone-300);
  box-shadow: 0 10px 28px rgba(28, 25, 23, 0.08);
}

/* 复用 style.css 的 .card-cover（贴到卡片边缘）；
   封面比例改成 4:3 —— 站点现有的封面图接近正方形（1280×1167），
   用 16:9 会被上下裁掉一大截 */
.demo-entry .card-cover {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

/* 图形类封面（Logo / 示意图）留白更好看，用 contain 完整显示不裁切 */
.demo-entry .card-cover img {
  object-fit: contain;
  padding: 0.75rem;
}

.demo-entry-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.25rem 1.25rem;
}

.demo-entry-body .card-desc {
  flex: 1;
}

.demo-entry-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--stone-100);
}

.demo-entry-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--stm32);
}

.demo-entry-go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.demo-entry:hover .demo-entry-go svg {
  transform: translateX(3px);
}

/* 卡片内的外部仓库链接：不触发整卡跳转 */
.demo-card-link.ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--stone-400);
  transition: color 0.15s;
}

.demo-card-link.ghost:hover {
  color: var(--stone-700);
}

.demo-card-link.ghost svg {
  width: 15px;
  height: 15px;
}

/* ---------------- 详情页面包屑 ---------------- */
.demo-crumb-bar {
  border-bottom: 1px solid var(--stone-100);
  background: var(--stone-50);
}

.demo-crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--stone-500);
  transition: color 0.15s;
}

.demo-crumb-back:hover {
  color: var(--stone-900);
}

.demo-crumb-back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s var(--ease-out);
}

.demo-crumb-back:hover svg {
  transform: translateX(-2px);
}

/* 页内导航的当前区块高亮 */
.demo-nav-inner a.is-current {
  background: var(--stone-100);
  color: var(--stone-900);
}

/* ---------------- 页内导航 ----------------
   顶部 .navbar 里的 .navbar-links 在窄屏（<640px）会折叠成汉堡菜单，
   所以这里额外提供一条任何屏宽都可见的页内锚点导航。 */
.demo-nav {
  position: sticky;
  top: 64px;                     /* 让开顶部主导航的高度 */
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.demo-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 48px;
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox：隐藏滚动条 */
  -ms-overflow-style: none;
}

.demo-nav-inner::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari：隐藏滚动条 */
}

.demo-nav-inner a {
  flex: 0 0 auto;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--stone-500);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.demo-nav-inner a:hover {
  background: var(--stone-100);
  color: var(--stone-900);
}

/* 锚点跳转时给固定头部留出空间，避免标题被盖住 */
.demo-block[id] {
  scroll-margin-top: 124px;       /* 64px 主导航 + 48px 页内导航 + 余量 */
}

/* ---------------- 区块骨架 ---------------- */
.demo-block {
  padding: 44px 0 8px;
}

.demo-block + .demo-block {
  border-top: 1px solid var(--border);
  margin-top: 36px;
}

/* 区块标题右侧加一条与品牌色一致的短线，视觉上和硬件页呼应 */
.demo-block .section-title-group h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.demo-block .section-title-group p {
  margin-top: 4px;
  color: var(--stone-500);
  font-size: 0.95rem;
}

/* ---------------- 栅格 ---------------- */
.demo-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.demo-grid-2 {
  grid-template-columns: 1fr;
}

.demo-grid-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .demo-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .demo-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .demo-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- 卡片 ---------------- */
.demo-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.35rem 1.4rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.demo-card:hover {
  border-color: var(--stone-300);
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.06);
  transform: translateY(-2px);
}

.demo-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--stone-900);
}

.demo-card p {
  font-size: 0.92rem;
  color: var(--stone-600);
  line-height: 1.7;
}

/* 需求卡片的编号 */
.demo-card-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--stone-900);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

/* 亮点卡片 */
.demo-card-hl {
  border-left: 3px solid var(--stm32);
}

.demo-card-hl:nth-child(2) { border-left-color: var(--esp); }
.demo-card-hl:nth-child(3) { border-left-color: var(--gd32); }
.demo-card-hl:nth-child(4) { border-left-color: var(--stone-900); }

.demo-card-foot {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
  font-size: 0.86rem !important;
  color: var(--stone-500) !important;
}

/* ---------------- 固件卡片 ---------------- */
.demo-card-fw {
  display: flex;
  flex-direction: column;
}

.demo-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.demo-card-chip {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--stone-500);
  background: var(--stone-100);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  transition: transform 0.18s var(--ease-pop), background 0.18s, color 0.18s;
}

.demo-card-chip:hover {
  transform: scale(1.08);
  background: var(--stone-200);
  color: var(--stone-800);
}

.demo-card-sub {
  font-size: 0.85rem !important;
  color: var(--stone-500) !important;
  margin-bottom: 0.9rem;
}

/* 参数清单：左标签右内容 */
.demo-spec {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
}

.demo-spec li {
  display: flex;
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-top: 1px solid var(--stone-100);
  color: var(--stone-600);
  line-height: 1.6;
}

.demo-spec li:first-child {
  border-top: none;
}

.demo-spec li > span {
  flex: 0 0 62px;
  color: var(--stone-400);
  font-size: 0.8rem;
}

/* ---------------- 图片 ---------------- */
.demo-figure {
  margin: 1.5rem 0 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  background: var(--stone-50);
  text-align: center;
}

.demo-figure img {
  width: 100%;
  max-width: 980px;
  border-radius: 8px;
  background: var(--white);
}

.demo-figure figcaption {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--stone-500);
}

.demo-figure-error {
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: var(--esp-bg);
  color: var(--esp);
  font-size: 0.85rem;
}

/* ---------------- 说明块 ---------------- */
.demo-note {
  background: var(--stone-50);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
}

.demo-note h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  color: var(--stone-800);
}

.demo-note p {
  font-size: 0.9rem;
  color: var(--stone-600);
  line-height: 1.7;
}

.demo-note ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  color: var(--stone-600);
  line-height: 1.75;
}

.demo-note li + li {
  margin-top: 0.35rem;
}

/* 引脚表 / 命令块 */
.demo-pinout {
  margin: 0.85rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--stone-900);
  color: #e7e5e4;
  border-radius: 10px;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.85;
  overflow-x: auto;
  white-space: pre;
}

/* ---------------- 演示步骤 ---------------- */
.demo-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: step;
}

.demo-step {
  position: relative;
  padding: 1.1rem 1.3rem 1.1rem 1.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--stm32);
  border-radius: 12px;
  background: var(--white);
}

.demo-step + .demo-step {
  margin-top: 0.85rem;
}

.demo-step-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--stone-900);
  margin-bottom: 0.5rem;
}

.demo-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--stm32);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.demo-step-do,
.demo-step-expect {
  font-size: 0.9rem;
  color: var(--stone-600);
  line-height: 1.7;
}

.demo-step-expect {
  margin-top: 0.45rem;
  padding: 0.6rem 0.85rem;
  background: var(--stm32-bg);
  border-radius: 8px;
  color: var(--stone-700);
}

.demo-step-expect b {
  color: var(--stm32);
}

.demo-badge-todo {
  font-size: 0.7rem;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ---------------- 表格 ---------------- */
.demo-table-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  overflow-x: auto;
}

.demo-table-wrap h4 {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  color: var(--stone-800);
}

.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.demo-table th {
  text-align: left;
  padding: 0.55rem 0.7rem;
  background: var(--stone-100);
  color: var(--stone-600);
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
}

.demo-table th:first-child { border-radius: 8px 0 0 8px; }
.demo-table th:last-child { border-radius: 0 8px 8px 0; }

.demo-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--stone-100);
  color: var(--stone-600);
  line-height: 1.6;
  vertical-align: top;
}

.demo-table tr:last-child td {
  border-bottom: none;
}

.demo-table-note {
  color: var(--stone-500) !important;
  font-size: 0.8rem !important;
  background: var(--stone-50);
}

.demo-table-status td:first-child {
  color: var(--stone-700);
}

/* 代码片段 */
.demo-block code,
.demo-note code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.84em;
  background: var(--stone-100);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--stone-800);
}

/* 状态徽标 */
.demo-st {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.demo-st.demo-ok {
  color: var(--gd32);
  background: var(--gd32-bg);
}

.demo-st.demo-wait {
  color: #b45309;
  background: #fef3c7;
}

/* 外部链接 */
.demo-ext {
  color: var(--stm32);
  border-bottom: 1px solid currentColor;
}

/* 移动端微调 */
@media (max-width: 640px) {
  .demo-nav {
    top: 64px;
  }
  .demo-nav-inner {
    height: 42px;
    gap: 0.1rem;
    /* 手机上把 7 个导航项压到一屏内，避免"看起来没有导航" */
    justify-content: space-between;
  }
  .demo-nav-inner a {
    padding: 0.28rem 0.42rem;
    font-size: 0.76rem;
  }
  .demo-block[id] {
    scroll-margin-top: 112px;
  }
  .demo-block { padding: 32px 0 4px; }
  .demo-block .section-title-group h2 { font-size: 1.25rem; }
  .demo-card { padding: 1.1rem 1.15rem; }
  .demo-spec li { flex-direction: column; gap: 0.15rem; }
  .demo-spec li > span { flex: none; }
}

/* 超窄屏（<380px，如 iPhone SE）：再压一档，保证 7 个导航项全部可见 */
@media (max-width: 379px) {
  .demo-nav-inner {
    gap: 0.05rem;
  }
  .demo-nav-inner a {
    padding: 0.24rem 0.3rem;
    font-size: 0.72rem;
  }
}