/* ==========================================================================
   内页通用样式:page hero、面包屑、文章排版。
   配合 home-v8.css(全局设计系统)使用;页面专属组件仍放页面目录下的 css。
   ========================================================================== */

/* ===== PAGE HERO(内页顶部横幅) ===== */
.page-hero{position:relative;padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,88px);background:var(--dark);color:#fff;overflow:hidden}
.page-hero .container{position:relative;z-index:1}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,16,.25),rgba(12,14,16,.78))}
.page-hero-tag{display:block;margin-bottom:14px;color:#ff8953;font-size:12px;font-weight:800;letter-spacing:1.8px;line-height:1.2;text-transform:uppercase}
.page-hero h1{max-width:840px;margin-bottom:18px;font-size:clamp(34px,3.6vw,56px);font-weight:750;line-height:1.08;letter-spacing:-1.5px}
.page-hero h1 em{font-style:normal;color:#ff8953}
.page-hero p{max-width:720px;color:rgba(255,255,255,.82);font-size:17px;line-height:1.72}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;color:rgba(255,255,255,.6);font-size:13px}
.breadcrumb a{color:rgba(255,255,255,.82);transition:color .18s ease}
.breadcrumb a:hover{color:#fff}
.breadcrumb span[aria-hidden]{opacity:.5}
.breadcrumb [aria-current]{color:#fff;font-weight:600}

/* ===== PROSE(博客文章排版) ===== */
.prose-section{padding:clamp(56px,6vw,88px) 0}
.prose{max-width:780px;margin-inline:auto}
.prose>h2{margin:52px 0 18px;font-size:clamp(26px,2.4vw,34px);font-weight:750;line-height:1.15;letter-spacing:-.8px}
.prose>h3{margin:38px 0 14px;font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.25}
.prose>p{margin-bottom:18px;color:var(--ink-2);font-size:16.5px;line-height:1.8}
.prose>ul,.prose>ol{margin:0 0 20px;padding-left:22px}
.prose>ul{list-style:disc}
.prose>ol{list-style:decimal}
.prose li{margin-bottom:10px;color:var(--ink-2);line-height:1.75}
.prose li::marker{color:var(--orange)}
.prose figure{margin:34px 0}
.prose figure img{border-radius:var(--radius);box-shadow:var(--shadow)}
.prose figcaption{margin-top:10px;color:var(--muted);font-size:13.5px;text-align:center}
.prose blockquote{margin:30px 0;padding:20px 26px;border-left:4px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0;background:var(--orange-soft);color:var(--ink-2);font-size:16.5px;line-height:1.7}
.prose strong{color:var(--ink)}
.prose a{color:var(--orange-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--orange)}

/* ===== ARTICLE META ===== */
.article-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:22px;color:rgba(255,255,255,.6);font-size:13.5px}

/* ===== CONTACT METHOD CARDS(联系页三卡片) ===== */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{display:flex;flex-direction:column;gap:12px;padding:30px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.contact-card:hover{border-color:var(--orange);box-shadow:var(--shadow);transform:translateY(-3px)}
.contact-card svg{width:26px;height:26px;color:var(--orange)}
.contact-card h3{font-size:18px}
.contact-card p{color:var(--muted);font-size:14.5px;line-height:1.6}
.contact-card a.card-link{margin-top:auto;color:var(--orange-dark);font-weight:700;font-size:14.5px}
.contact-card a.card-link:hover{color:var(--orange)}

@media (max-width:900px){
  .contact-cards{grid-template-columns:1fr}
}