/* ==========================================================================
   HCowCC 门户 · 页面专属样式：私有化 AI 智能体一体机
   （product_appliance.html 专用，经 base.html extra_css block 引入）
   --------------------------------------------------------------------------
   只放本页独有组件：
     1. 两档配置卡微调（.appliance-tiers / .tier-features strong）
     2. 对比表语义行头（tbody 首列 th[scope="row"]）
     3. 三层架构栈（.arch-stack / .arch-layer / .arch-layer-chip / .arch-arrow）
     4. 咨询 CTA 联系信息行（.cta-banner-contact）
     5. 屏幕阅读器专用隐藏（.visually-hidden）
   全局组件（hero / card / tier-card / cmp-table / faq / cta-banner 等）
   一律复用 site.css，勿在此重复定义。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 两档配置卡微调
   -------------------------------------------------------------------------- */
/* 配置卡与下方全维度对比表的间距 */
.appliance-tiers {
  margin-bottom: var(--sp-7);
}

/* 配置卡规格项：强调关键数据（GPU / 显存 / 价格带等） */
.tier-features strong {
  font-weight: 600;
  color: var(--c-navy);
}

/* --------------------------------------------------------------------------
   2. 对比表语义行头
   tbody 首列使用 th[scope="row"]（site.css 的 td:first-child 规则不覆盖）
   -------------------------------------------------------------------------- */
.cmp-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--c-navy);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 三层架构栈（应用层 → 模型与平台层 → 硬件层）
   -------------------------------------------------------------------------- */
.arch-stack {
  max-width: 860px;
  margin: 0 auto;
}

.arch-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.arch-layer:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* 各层顶部色条：应用 = 蓝青 / 平台 = 门户蓝 / 硬件 = 深蓝 */
.arch-layer--application { border-top: 4px solid var(--c-accent); }
.arch-layer--platform   { border-top: 4px solid var(--c-primary); }
.arch-layer--hardware   { border-top: 4px solid var(--c-navy); }

.arch-layer-title {
  flex: 0 0 auto;
  min-width: 132px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
}

.arch-layer-items {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.arch-layer-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* 平台层芯片：门户蓝浅底，突出核心层 */
.arch-layer--platform .arch-layer-chip {
  color: var(--c-primary-strong);
  background: var(--c-primary-soft);
  border-color: rgba(26, 95, 180, 0.2);
}

/* 层间连接箭头 */
.arch-arrow {
  display: flex;
  justify-content: center;
  padding: var(--sp-2) 0;
  font-size: 22px;
  line-height: 1;
  color: var(--c-primary);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   4. 咨询 CTA 联系信息行
   -------------------------------------------------------------------------- */
.cta-banner-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-on-navy-muted);
}

.cta-banner-contact span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   5. 屏幕阅读器专用隐藏
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   响应式微调（全局断点之外的页面专属补充）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .arch-layer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .arch-layer-title {
    min-width: 0;
  }

  .cta-banner-contact {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
  }
}