/* 内页 · 整机型号、更多场景、案例详情、图集、代码块、结果页 */

/* 5 列特性格（咨询清单 10 项） */
.feats--5 { --cols: 5; }
@media (max-width: 1100px) { .feats--5 { --cols: 2; } }
@media (max-width: 560px) { .feats--5 { --cols: 1; } }
.feat .link-more { margin-top: var(--s-2); }

/* 整机：按形态分组，左图右型号列表 */
.mgroups { display: grid; gap: var(--s-4); }
.mgroup {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; scroll-margin-top: var(--s-5);
  border-radius: var(--r-card); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
}
.mgroup__media { position: relative; display: grid; place-items: center; min-height: 340px; background: linear-gradient(#fff, var(--paper-2)); }
.mgroup__media img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.mgroup__media--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.mgroup__media .chip { position: absolute; left: var(--s-3); top: var(--s-3); }
.mgroup__body { display: grid; align-content: start; gap: var(--s-2); padding: clamp(24px, 3vw, 44px); }
.mgroup__body h3 { font-size: var(--fs-h3); }
.mgroup__fit { color: var(--ink-mid); }
.models { margin-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.model { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-5); padding: 14px 0; border-bottom: 1px solid var(--line); }
.model > b { font-size: 22px; line-height: 1.2; }
.model__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-mid); }
.model__ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-hi); box-shadow: 0 0 0 3px var(--brand-tint); }
.model .link-more { font-size: 14px; }
@media (max-width: 900px) {
  .mgroup { grid-template-columns: 1fr; }
  .mgroup__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .model { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .model .link-more { grid-column: 1 / -1; }
}

/* 方案总览 · 更多场景简卡 */
.scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.scene {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: var(--r-card); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
}
.scene h3 { font-size: 20px; }
.scene p { font-size: 14px; color: var(--ink-lo); }
.scene .tag { height: 26px; font-size: 12px; padding: 0 10px; }
.scene .link-more { margin-top: auto; padding-top: var(--s-3); align-self: flex-start; font-size: 14px; }
@media (max-width: 1100px) { .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .scenes { grid-template-columns: 1fr; } }

/* 案例详情 · 关键信息条 */
.facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s-5); padding-block: var(--s-5); border-block: 1px solid var(--line-strong); }
.facts dt { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-lo); }
.facts dd { margin-top: 6px; font-size: 15px; color: var(--ink-hi); }
.phero .facts { margin-top: var(--s-6); width: 100%; max-width: 980px; }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 案例详情 · 背景与挑战两栏 */
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) clamp(32px, 6vw, 96px); }
.brief > div { display: grid; align-content: start; gap: var(--s-3); }
.brief h2 { font-size: var(--fs-h3); }
.brief p:not(.eyebrow) { color: var(--ink-mid); }
.section--paper .brief p:not(.eyebrow) { color: var(--ink-2); }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }

/* 图集 */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.gallery figure { display: grid; align-content: start; gap: var(--s-2); }
.gallery__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); background: var(--bg-2); }
.gallery__img img { width: 100%; height: 100%; object-fit: cover; }
.gallery__img .chip { position: absolute; left: var(--s-3); top: var(--s-3); }
.gallery figcaption { font-size: 13px; color: var(--ink-lo); }
.gallery + .note { margin-top: var(--s-4); }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } }

/* 开发者 · 接口卡与代码块 */
.apis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.api {
  display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5);
  border-radius: var(--r-card); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
}
.api b { font: 600 22px/1.2 var(--font-display); }
.api small { font: 500 12px/1 var(--font-display); letter-spacing: 0.14em; color: var(--brand-hi); }
.api p { font-size: 14px; color: var(--ink-lo); }
@media (max-width: 1100px) { .apis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .apis { grid-template-columns: 1fr; } }
.code { overflow: hidden; border-radius: var(--r-card); background: #070b11; box-shadow: inset 0 0 0 1px var(--line-strong); }
.code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 44px; padding: 0 var(--s-2) 0 var(--s-4);
  border-bottom: 1px solid var(--line); font: 500 12px/1 var(--font-display); letter-spacing: 0.1em; color: var(--ink-lo);
}
.code__bar button { height: 30px; padding: 0 12px; border-radius: var(--r-btn); font-size: 13px; color: var(--ink-mid); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.code__bar button:hover { color: var(--ink-hi); background: rgb(255 255 255 / 0.06); }
.code pre { margin: 0; padding: var(--s-5); overflow-x: auto; font: 13.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-mid); tab-size: 2; }
.code .c { color: var(--ink-lo); }
.code .k { color: var(--brand-hi); }
.code .s { color: oklch(0.82 0.09 160); }
.code + .draft, .code + .code { margin-top: var(--s-4); }

/* 结果页：感谢页、404 */
.result {
  display: grid; align-content: center; justify-items: center; gap: var(--s-4); text-align: center;
  min-height: min(100svh, 920px); padding: calc(var(--header-h) + var(--s-8)) var(--gutter) var(--s-8);
  background: radial-gradient(56% 60% at 50% 0%, color-mix(in oklch, var(--brand) 30%, transparent), transparent 72%), var(--bg-0);
}
.result__icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-2); border-radius: 50%;
  color: var(--brand-hi); background: var(--brand-tint); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand-hi) 40%, transparent);
}
.result__icon svg { width: 28px; height: 28px; }
.result__code { font: 600 clamp(88px, 14vw, 180px)/0.9 var(--font-display); letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklch, var(--brand-hi) 50%, transparent); }
.result h1 { font-size: clamp(30px, 3.6vw, 48px); }
.result > p:not([class]) { max-width: 520px; color: var(--ink-mid); font-size: var(--fs-lead); }
.result .links { justify-content: center; margin-top: var(--s-3); }
.result__contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--ink-lo); font-size: 14px; }
.result__contact .num { font-size: 26px; color: var(--ink-hi); }
.result__contact .qr__ph { width: 88px; height: 88px; }
.result__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: 14px; color: var(--ink-lo); }
.result__links a:hover { color: var(--ink-hi); }

/* 表格里的有 / 无 */
.tbl .y { color: var(--brand-hi); font-weight: 600; }
.tbl .n { color: var(--ink-lo); }
.section--paper .tbl .y { color: var(--brand); }
.container > .tbl-wrap + .feats { margin-top: var(--s-6); }

/* 开发者 · 接口典型场景、代码块间距 */
.api .api__use { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-mid); }
.api:has(.api__use) { grid-template-rows: auto auto auto 1fr; }
.code + .code { margin-top: var(--s-4); }
.code + .draft { margin-top: var(--s-4); }
.split > .stack { align-self: center; }