/* ==========================================================================
   pages.css - 內頁通用樣式（與 index.html 主題保持一致）
   ========================================================================== */

/* —— 頁面 Hero（緊湊版） —— */
.page-hero {
  position: relative; overflow: hidden;
  padding: 72px 0 56px;
  background: #fbfdff;
  isolation: isolate;
  border-bottom: 1px solid var(--color-border-soft);
}
.page-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 700px; height: 700px; border-radius: 50%;
  top: -340px; right: -200px; filter: blur(80px); opacity: .35;
  background: conic-gradient(from 120deg, #0460BA, #00c2ff, #6ad0ff, #0460BA);
  animation: ph-rotate 22s linear infinite;
}
.page-hero::after {
  /* 剪貼簿「星座」主題 — 與首頁 Hero 視覺統一 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%230460BA' stroke-opacity='0.16' stroke-width='1.2'><g transform='translate(140,170)'><rect x='-60' y='-75' width='120' height='150' rx='8'/><rect x='-14' y='-83' width='28' height='12' rx='2'/><line x1='-46' y1='-50' x2='46' y2='-50'/><line x1='-46' y1='-30' x2='28' y2='-30'/><line x1='-46' y1='-10' x2='38' y2='-10'/></g><g transform='translate(800,300)'><rect x='-78' y='-95' width='156' height='190' rx='10'/><rect x='-18' y='-104' width='36' height='14' rx='2'/><line x1='-62' y1='-70' x2='62' y2='-70'/><line x1='-62' y1='-50' x2='40' y2='-50'/><line x1='-62' y1='-30' x2='55' y2='-30'/><line x1='-62' y1='-10' x2='30' y2='-10'/><line x1='-62' y1='10' x2='48' y2='10'/></g><g transform='translate(1460,170)'><rect x='-60' y='-75' width='120' height='150' rx='8'/><rect x='-14' y='-83' width='28' height='12' rx='2'/><line x1='-46' y1='-50' x2='46' y2='-50'/><line x1='-46' y1='-30' x2='28' y2='-30'/><line x1='-46' y1='-10' x2='38' y2='-10'/></g></g><g fill='none' stroke='%230460BA' stroke-opacity='0.14' stroke-width='1' stroke-dasharray='4 6'><path d='M210 200 Q 460 240 720 250'/><path d='M880 250 Q 1130 240 1390 200'/></g><g fill='%230460BA' fill-opacity='0.35'><circle cx='140' cy='170' r='3'/><circle cx='800' cy='300' r='4'/><circle cx='1460' cy='170' r='3'/></g></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 25%, transparent 80%);
}
@keyframes ph-rotate { to { transform: rotate(360deg); } }

.page-hero-inner { position: relative; text-align: center; max-width: 800px; margin: 0 auto; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--color-primary);
}
.page-eyebrow::before, .page-eyebrow::after {
  content: ""; width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(4,96,186,.5), transparent);
}
.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.15; letter-spacing: -.8px; font-weight: 800;
  margin: 18px 0 14px;
}
.page-hero h1 .accent {
  background: linear-gradient(135deg, #0460BA, #00c2ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero p.lead {
  font-size: 17px; line-height: 1.7; color: var(--color-text-soft);
  max-width: 680px; margin: 0 auto;
}

/* —— 麪包屑 —— */
.breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--color-text-mute); margin-bottom: 12px;
}
.breadcrumb a { color: var(--color-text-mute); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb svg { width: 12px; height: 12px; opacity: .5; }

/* —— 頁面正文容器 —— */
.page-content { padding: 72px 0 96px; }
.page-content .container { max-width: 980px; }

/* —— 卡片 / 區塊通用 —— */
.surface {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px; margin-bottom: 24px;
  transition: all var(--transition);
}
.surface:hover { box-shadow: var(--shadow-md); border-color: rgba(4,96,186,.18); }

.surface h2, .prose h2 {
  font-size: 24px; margin: 0 0 14px; line-height: 1.3;
  display: flex; align-items: center; gap: 12px;
}
.surface h2 .icon, .prose h2 .icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary-50), #fff);
  border: 1px solid rgba(4,96,186,.15);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.surface h2 .icon img, .prose h2 .icon img { width: 20px; height: 20px; }
.surface h3 { font-size: 18px; margin: 24px 0 10px; }

/* —— Prose 正文樣式 —— */
.prose p { font-size: 15.5px; line-height: 1.8; color: var(--color-text-soft); margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; color: var(--color-text-soft); }
.prose li { font-size: 15px; line-height: 1.8; margin-bottom: 6px; }
.prose strong { color: var(--color-text); font-weight: 600; }
.prose code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--color-bg-soft); border: 1px solid var(--color-border-soft);
  padding: 2px 6px; border-radius: 4px; color: var(--color-primary-dark);
}
.prose pre {
  background: #0f1729; color: #d4e6f8; padding: 18px 20px;
  border-radius: var(--radius-md); overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
  margin: 0 0 16px;
}
.prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--color-border-soft); margin: 28px 0; }
.prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(4,96,186,.3); }
.prose a:hover { text-decoration-color: var(--color-primary); }

/* —— 數據徽章（用於 release date / version 等） —— */
.meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  background: var(--color-primary-50); color: var(--color-primary);
  border: 1px solid rgba(4,96,186,.15);
}

/* —— 移動端 —— */
@media (max-width: 720px) {
  .page-hero { padding: 56px 0 40px; }
  .page-content { padding: 48px 0 64px; }
  .surface { padding: 22px; }
  .surface h2 { font-size: 20px; }
}