/* ============================================================
   Developer page (pages/developer.html)
   参考 Qualcomm Developer / Hardware 页面布局，内容取自导航
   “开发者”下拉抽屉：硬件(芯片/参考设计/方案架构)、软件(SDK/工具/算法)、
   热门平台(IoT / Windows on Snapdragon / On-Device AI)、开始构建(Workspace/联系/博客)
   ============================================================ */

.dp-page{font-family:var(--font)}

/* —— Hero —— */
.dp-hero{position:relative;overflow:hidden;background:#fff;padding:0 0 36px}
.dp-hero-inner{position:relative;display:grid;grid-template-columns:1fr;gap:32px;align-items:center;min-height:340px;padding:72px 56px;overflow:hidden;background-color:#fff;background-image:url("../assets/img/dp-hero-bg.png");background-position:right center;background-size:contain;background-repeat:no-repeat}
.dp-hero .eyebrow{margin-bottom:16px}
.dp-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.03em;margin:0 0 20px;max-width:18ch}
.dp-hero .dp-lead{font-size:clamp(16px,1.8vw,19px);line-height:1.7;color:var(--muted);max-width:54ch;margin:0 0 30px}
.dp-hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* —— Generic section —— */
.dp-section{padding:72px 0}
.dp-section--soft{background:var(--zone-soft)}
.dp-section--blue{background:var(--zone-blue)}

/* anchored ids must clear the fixed header when jumped to */
.dp-page [id]{scroll-margin-top:96px}

/* —— Sub-section (chips / reference / architecture / sdk / tools / algorithms) —— */
.dp-subsection{padding:34px 0 8px}
.dp-subhead{margin-bottom:22px}
.dp-subhead h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin:0;line-height:1.18}

/* —— Chip feature block —— */
.dp-chip{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.dp-chip-visual{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);background:#fff;position:relative;overflow:hidden}
.dp-chip-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(13,27,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,42,.05) 1px,transparent 1px);background-size:20px 20px;opacity:.5}
.dp-chip-visual svg,.dp-chip-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.dp-chip-body{display:flex;flex-direction:column;gap:10px}
.dp-chip-body h4{font-size:21px;letter-spacing:-.01em;margin:0}
.dp-chip-body p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0}
.dp-spec{list-style:none;padding:0;margin:6px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.dp-spec li{font-size:15px;color:var(--ink);padding:10px 14px;background:var(--zone-soft);border-radius:8px;border:1px solid var(--line)}
.dp-chip-body a{font-size:13px;font-weight:700;color:var(--blue);margin-top:2px}

/* —— Mini feature badges inside chip block —— */
.dp-mini-features{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.dp-mini-feature{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);padding:6px 11px;background:#f6f8ff;border:1px solid var(--blue-100);border-radius:999px;line-height:1}
.dp-mini-feature svg{width:14px;height:14px;color:var(--blue);flex-shrink:0}

/* —— Solution architecture diagram —— */
.dp-arch{display:grid;grid-template-columns:.7fr 1.3fr;gap:34px;align-items:start}
.dp-arch-diagram{display:flex;flex-direction:column;gap:10px;max-width:none}
.dp-arch-layer{padding:14px 18px;border-radius:10px;font-size:14.5px;font-weight:700;color:var(--ink,#0d1b2a);background:var(--card-bg,#fff);border:1px solid var(--line,#e6e8ec);border-left:3px solid var(--blue,#2E6BFF);box-shadow:0 1px 2px rgba(13,27,42,.04);text-align:left}
.dp-arch-layer--1{border-left-color:#2E6BFF}
.dp-arch-layer--2{border-left-color:#5B8CFF}
.dp-arch-layer--3{border-left-color:#1F3A2D}
.dp-arch-layer--4{border-left-color:#3a4f63}
.dp-arch-body{display:flex;flex-direction:column;gap:12px}
.dp-arch-body p{font-size:15px;color:var(--muted);line-height:1.7;margin:0}
.dp-arch-body a{font-size:13px;font-weight:700;color:var(--blue)}

/* —— Wide card for sdk / tools / algorithms —— */
.dp-card--wide{grid-column:auto;max-width:760px}

/* —— Hardware grid —— */
.dp-hw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dp-mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dp-hw-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.dp-hw-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.dp-hw-visual{position:relative;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.dp-hw-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(13,27,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,42,.05) 1px,transparent 1px);background-size:20px 20px;opacity:.5}
.dp-hw-visual svg,.dp-hw-visual img{position:absolute;inset:0;width:100%;height:100%}
.dp-hw-visual img{object-fit:contain;object-position:center;padding:12px 14px;box-sizing:border-box}
.dp-hw-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.dp-hw-tag{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);background:var(--blue-100);padding:4px 9px;border-radius:6px}
.dp-hw-card h4{font-size:17px;line-height:1.3;letter-spacing:-.01em;margin:0}
.dp-hw-card p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1;margin:0}
.dp-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.dp-demo-item{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dp-demo-item img,.dp-demo-item video{display:block;width:100%;height:auto;background:#0d1b2a}
.dp-demo-item img.dp-demo-crop,.dp-demo-item video.dp-demo-crop{aspect-ratio:1400/788;object-fit:cover;object-position:top}
.dp-demo-cap{padding:12px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.dp-hw-card a{font-size:13px;font-weight:700;color:var(--blue);margin-top:2px}

/* —— Partner hardware band —— */
.dp-partner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;padding:28px 32px;border-radius:var(--radius);background:linear-gradient(120deg,var(--blue) 0%,var(--blue-600) 100%);color:#fff;position:relative;overflow:hidden}
.dp-partner::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 200px at 88% 0%,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.dp-partner-text{position:relative}
.dp-partner h3{font-size:22px;margin:0 0 6px}
.dp-partner p{font-size:15px;color:rgba(255,255,255,.86);margin:0;max-width:62ch}
.dp-partner a{position:relative;color:#fff;font-weight:800;white-space:nowrap;border:1.5px solid rgba(255,255,255,.6);padding:11px 20px;border-radius:999px;transition:.2s}
.dp-partner a:hover{background:#fff;color:var(--blue)}

/* —— Generic 3-col cards (software / popular / build) —— */
.dp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dp-grid--4{grid-template-columns:repeat(4,1fr)}
.dp-grid--spaced{margin-top:28px}
.dp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:.3s;display:flex;flex-direction:column;gap:12px}
.dp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-100)}
.dp-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue-400));color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dp-ico svg{width:24px;height:24px}
.dp-card h3{font-size:19px;letter-spacing:-.01em;margin:0}
.dp-card p{font-size:14px;color:var(--muted);line-height:1.65;flex:1;margin:0}
.dp-card a{font-size:13px;font-weight:700;color:var(--blue)}

/* —— 文本链接 hover 动效：下划线滑入 + 颜色加深 —— */
.dp-chip-body a,.dp-arch-body a,.dp-hw-card a,.dp-card a{align-self:flex-start;padding-bottom:2px;background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .28s ease,color .2s ease}
.dp-chip-body a:hover,.dp-arch-body a:hover,.dp-hw-card a:hover,.dp-card a:hover{background-size:100% 2px;color:var(--blue-600)}

/* —— CTA band (reuse global .cta-band) —— */
.dp-cta-wrap{max-width:1080px;margin:0 auto}

/* —— Responsive —— */
@media(max-width:1100px){
  .dp-hw-grid{grid-template-columns:repeat(2,1fr)}
  .dp-mod-grid{grid-template-columns:repeat(2,1fr)}
  .dp-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .dp-hero-inner{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;min-height:0;padding:56px 28px}
  .dp-grid{grid-template-columns:repeat(2,1fr)}
  .dp-section{padding:56px 0}
  .dp-hero{padding:0 0 28px}
  .dp-chip{grid-template-columns:1fr;gap:22px}
  .dp-arch{grid-template-columns:1fr;gap:22px}
  .dp-spec{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dp-hw-grid{grid-template-columns:1fr}
  .dp-mod-grid{grid-template-columns:1fr}
  .dp-demo{grid-template-columns:1fr}
  .dp-grid{grid-template-columns:1fr}
  .dp-partner{flex-direction:column;align-items:flex-start}
}

/* —— 图片加载淡入 + 等待微光 + 失败占位（img-fadein.js v2 给 <html> 加 .img-fx 后生效，无 JS 零回归） —— */
.img-fx .dp-page img,.img-fx .dp-page video{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.img-fx .dp-page img.img-loaded,.img-fx .dp-page video.img-loaded{opacity:1;transform:none}
/* 加载中：视觉区一道微光扫过（“正在加载”提示），JS 标记 .img-done 后移除 */
.img-fx .dp-hw-visual::after,.img-fx .dp-chip-visual::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(24,95,165,.12),transparent);animation:dp-shimmer 1.6s ease infinite;pointer-events:none}
.img-fx .dp-hw-visual.img-done::after,.img-fx .dp-chip-visual.img-done::after{content:none}
/* 重试仍失败：隐藏破图，显示中性占位图标 */
.img-fx .dp-page img.img-error,.img-fx .dp-page video.img-error{opacity:0;transform:none}
.img-fx .dp-hw-visual.img-error::after,.img-fx .dp-chip-visual.img-error::after{content:"";position:absolute;inset:auto;left:50%;top:50%;width:36px;height:36px;transform:translate(-50%,-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;animation:none}
@keyframes dp-shimmer{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .img-fx .dp-page img{transition:none;transform:none}
  .img-fx .dp-hw-visual::after,.img-fx .dp-chip-visual::after{animation:none;display:none}
}

/* —— App CTA (bottom closing band) —— */
.app-cta {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, #FFFFFF 100%),
    radial-gradient(85% 78% at 50% 46%, rgba(46,107,255,.08) 0%, transparent 44%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 14%, #EDF3FF 46%, #F2F7FF 74%, #FFFFFF 100%);
}
.app-cta .container {
  position: relative; z-index: 1;
  padding-top: 76px; padding-bottom: 76px;
  text-align: center;
}
.app-cta h2 {
  font-size: clamp(22px, 3vw, 34px);
  margin: 0 0 12px;
  color: var(--ink);
}
.app-cta p {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  max-width: 560px;
}
.app-cta .btn-row {
  display: flex; gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.app-cta .btn-row .btn { padding: 12px 28px; }
.app-cta .btn-outline { border-color: rgba(46,107,255,.45); }