/* ============================================================
   page.css — 子页面模板公共样式
   适用于：外贸独立站 / SEO全域运营 / SEM广告投放 /
          品牌VI设计 / 工厂拍摄 / 服务体系 / 关于我们
   依赖 all.css（公共基础 + page-hero 基线）
   ─────────────────────────────────────────────────────────
   ① Hero 附加元素（标签胶囊 / CTA 按钮组）
   ② 通用区块（section / sec-head）
   ③ 痛点三卡（pains）
   ④ 方案能力（solutions）
   ⑤ 案例卡（cases）
   ⑥ 子页专属响应式
   ============================================================ */

/* ---------- ① Hero 附加元素 ---------- */
.page-hero .hero-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.page-hero .hero-tags span{font-size:14px;padding:6px 18px;border:1px solid rgba(255,255,255,.2);border-radius:5px;color:var(--text-muted)}
.page-hero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- ② 通用区块 ---------- */
.section{padding:80px 0}
.section.alt{background:var(--bg-white)}
.sec-head{text-align:center;max-width:660px;margin:0 auto 52px}
.sec-head p{color:var(--text-mid);margin-top:14px}

/* ---------- ③ 痛点三卡 ---------- */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pains-2{grid-template-columns:repeat(2,1fr)}
.pain{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px 26px;position:relative;transition:all .3s var(--ease)}
.pain:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.pain-num{font-size:40px;font-weight:800;color:#e8eaee;line-height:1;margin-bottom:14px}
.pain h3{font-size:17px;margin-bottom:10px}
.pain p{font-size:14px;color:var(--text-mid)}

/* ---------- ④ 方案能力 ---------- */
.solutions{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.solutions-3{grid-template-columns:repeat(3,1fr)}
.solution{background:var(--bg-light);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px 28px;transition:all .3s var(--ease)}
.solution:hover{box-shadow:var(--shadow-md);border-color:var(--accent);transform:translateY(-4px)}
.solution-icon{width:52px;height:52px;border-radius:var(--radius-md);background:rgba(0,149,239,.12);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--accent);margin-bottom:16px}
.solution h3{font-size:18px;margin-bottom:10px}
.solution p{font-size:14px;color:var(--text-mid);margin-bottom:12px}
.solution ul{list-style:none}
.solution li{font-size:13px;color:var(--text-mid);padding:4px 0 4px 18px;position:relative}
.solution li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- ⑤ 案例卡（旧文字卡，其他页面用） ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px 24px;transition:all .3s var(--ease)}
.case:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.case .case-thumb{width:100%;height:160px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:16px}
.case .case-tag{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.case h3{font-size:16px;margin-bottom:10px}
.case p{font-size:13px;color:var(--text-mid)}
.case .case-facts{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);display:flex;gap:18px}
.case .fact{font-size:13px}
.case .fact b{display:block;font-size:20px;font-weight:800;color:var(--accent)}

/* ---------- ⑤c 案例纯图片画廊（建站页用，一行三张，原图比例） ---------- */
.case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-gallery img{width:100%;height:auto;border-radius:var(--radius-md);display:block;transition:transform .3s var(--ease)}
.case-gallery img:hover{transform:scale(1.03)}

/* ---------- ⑤d 子页 Hero 背景图（与首页港口图同风格） ---------- */
.page-hero.bg-website{background:var(--bg-dark) url('../images/hero-website.webp') center/cover no-repeat}
.page-hero.bg-seo{background:var(--bg-dark) url('../images/hero-seo.webp') center/cover no-repeat}
.page-hero.bg-ads{background:var(--bg-dark) url('../images/hero-ads.webp') center/cover no-repeat}
.page-hero.bg-brand{background:var(--bg-dark) url('../images/hero-brand.webp') center/cover no-repeat}
.page-hero.bg-shot{background:var(--bg-dark) url('../images/hero-shot.webp') center/cover no-repeat}
.page-hero.bg-service{background:var(--bg-dark) url('../images/hero-service.webp') center/cover no-repeat}
.page-hero.bg-about{background:var(--bg-dark) url('../images/hero-about.webp') center/cover no-repeat}
.page-hero.bg-news{background:var(--bg-dark) url('../images/hero-news.webp') center/cover no-repeat}
.page-hero[class*="bg-"]::before{background:linear-gradient(180deg,rgba(10,13,18,.45) 0%,rgba(10,13,18,.15) 55%,rgba(10,13,18,.08) 100%),radial-gradient(ellipse at 20% 0%,rgba(0,149,239,.12),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(0,149,239,.06),transparent 50%)}

/* ---------- ⑤e FAQ 区 ---------- */
.faq-sec{background:var(--bg-white)}
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:20px 26px 20px 22px;transition:all .3s var(--ease)}
.faq-item:hover{box-shadow:var(--shadow-sm);border-color:var(--accent)}
.faq-item h3{font-size:15px;color:var(--text-dark);margin-bottom:8px;padding-left:20px;position:relative;line-height:1.6}
.faq-item h3::before{content:"Q";position:absolute;left:0;top:0;font-size:12px;font-weight:800;color:var(--accent)}
.faq-item p{font-size:14px;color:var(--text-mid);line-height:1.8;padding-left:20px;position:relative}
.faq-item p::before{content:"A";position:absolute;left:0;top:0;font-size:12px;font-weight:800;color:var(--accent-dark)}

/* ---------- ⑥ 子页专属响应式 ---------- */
@media(max-width:991px){
  .pains,.cases{grid-template-columns:1fr}
  .solutions{grid-template-columns:1fr}
  .case-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  .page-hero{padding:64px 0}
  .page-hero h1{font-size:26px}
  .page-hero .hero-cta{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .section{padding:60px 0}
  .case-gallery{grid-template-columns:1fr}
}