/* =============================================================
   blog.css — Shared styles for all WANPU blog articles
   ============================================================= */

/* ── ARTICLE HERO ── */
.article-hero,
.post-hero,
.blog-hero,
.hero-blog {
  background: linear-gradient(135deg, #080e1e 0%, #0d1a3a 100%);
  padding: 10rem 0 4rem;
}

.breadcrumb { display:flex; align-items:center; gap:0.5rem; margin-bottom:1.5rem; }
.breadcrumb a { color:rgba(255,255,255,0.5); font-size:0.88rem; text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { color:rgba(255,255,255,0.3); font-size:0.88rem; }
.breadcrumb .current { color:rgba(255,255,255,0.75); font-size:0.88rem; }

.article-tag {
  display:inline-block; background:rgba(215,9,47,0.15); border:1px solid rgba(215,9,47,0.4);
  color:#ff5577; font-size:0.78rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; padding:0.3rem 0.9rem; border-radius:50px; margin-bottom:1.25rem;
}

.article-hero h1,
.post-hero h1 {
  font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; color:#fff;
  line-height:1.15; letter-spacing:-0.03em; margin-bottom:1.25rem; max-width:860px;
}

.article-meta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.article-meta span { color:rgba(255,255,255,0.5); font-size:0.9rem; display:flex; align-items:center; gap:0.4rem; }

/* Post-hero variant */
.post-eyebrow {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(215,9,47,0.15); border:1px solid rgba(215,9,47,0.4);
  color:#f87b7b; font-size:0.8rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; padding:0.4rem 1.1rem; border-radius:50px;
  margin-bottom:1.5rem;
}
.post-meta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.post-meta span { font-size:0.92rem; color:rgba(255,255,255,0.55); display:flex; align-items:center; gap:0.45rem; }

/* ── ARTICLE BODY ── */
.article-body {
  max-width:780px; margin:0 auto; padding:4rem 2rem;
  font-size:1.05rem; line-height:1.85; color:#2d3748;
}
.article-body h2 { font-size:1.6rem; font-weight:800; color:#2D53A3; margin-top:2.5rem; margin-bottom:1rem; letter-spacing:-0.02em; }
.article-body h3 { font-size:1.2rem; font-weight:700; color:#0f1729; margin-top:1.75rem; margin-bottom:0.75rem; }
.article-body p { margin-bottom:1.25rem; }
.article-body ul, .article-body ol { margin-bottom:1.25rem; padding-left:1.5rem; }
.article-body li { margin-bottom:0.5rem; }
.article-body strong { color:#0f1729; }
.article-body a { color:#2D53A3; text-decoration:underline; }
.article-body a:hover { color:#1a3478; }

/* Post-content variant (middle-east style) */
.post-body { background:#fff; }
.post-content { max-width:780px; margin:0 auto; padding:4rem 2rem 3rem; }
.post-content h2 { font-size:1.65rem; font-weight:800; color:#0f1729; margin:2.75rem 0 1.1rem; letter-spacing:-0.025em; border-left:4px solid #2D53A3; padding-left:1rem; }
.post-content h3 { font-size:1.2rem; font-weight:700; color:#1a2a4a; margin:2rem 0 0.75rem; }
.post-content p { font-size:1.05rem; line-height:1.82; color:#334460; margin-bottom:1.4rem; }
.post-content ul, .post-content ol { margin:0 0 1.4rem 1.5rem; }
.post-content li { font-size:1.05rem; line-height:1.75; color:#334460; margin-bottom:0.45rem; }
.post-content a { color:#2D53A3; text-decoration:underline; font-weight:600; }
.post-content a:hover { color:#D7092F; }
.post-content strong { color:#0f1729; font-weight:700; }

/* Generic container article layout */
.container { max-width:1100px; margin:0 auto; padding:0 2rem; }

/* ── CALLOUT BOXES ── */
.callout-box {
  background:#f0f4ff; border-left:4px solid #2D53A3; border-radius:0 8px 8px 0;
  padding:1.25rem 1.5rem; margin:1.75rem 0;
}
.callout-box p { margin:0; color:#1a3478; font-weight:500; }

.warning-box {
  background:#fff5f5; border-left:4px solid #D7092F; border-radius:0 8px 8px 0;
  padding:1.25rem 1.5rem; margin:1.75rem 0;
}
.warning-box p { margin:0; color:#7b1020; font-weight:500; }

.success-box {
  background:#f0fff4; border-left:4px solid #38a169; border-radius:0 8px 8px 0;
  padding:1.25rem 1.5rem; margin:1.75rem 0;
}
.success-box p { margin:0; color:#1a5c33; font-weight:500; }

/* Middle-east style callout/warning */
.callout { background:linear-gradient(135deg,#eef3ff,#f0f7ff); border:1px solid #c5d5f5; border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0; }
.callout-title { font-size:0.85rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#2D53A3; margin-bottom:0.6rem; }
.callout p { font-size:0.97rem; color:#2a3a5a; margin:0; line-height:1.72; }

.warning { background:linear-gradient(135deg,#fff8f0,#fff3ea); border:1px solid #f5c89a; border-radius:12px; padding:1.5rem 1.75rem; margin:2rem 0; }
.warning-title { font-size:0.85rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:#c07030; margin-bottom:0.6rem; }
.warning p { font-size:0.97rem; color:#4a3010; margin:0; line-height:1.72; }

/* ── TABLES ── */
.tariff-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.95rem; border-radius:10px; overflow:hidden; }
.tariff-table th { background:#0f1729; color:#fff; font-weight:700; padding:0.85rem 1.1rem; text-align:left; }
.tariff-table td { padding:0.7rem 1.1rem; border-bottom:1px solid #e2e8f0; }
.tariff-table tr:last-child td { border-bottom:none; }
.tariff-table tr:nth-child(even) td { background:#f7f9fc; }
.rate-high { color:#D7092F; font-weight:700; }
.rate-low { color:#38a169; font-weight:700; }
.rate-mid { color:#d97706; font-weight:700; }

.post-table-wrap { overflow-x:auto; margin:2rem 0; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.post-table { width:100%; border-collapse:collapse; font-size:0.93rem; }
.post-table thead { background:linear-gradient(135deg,#1a2a5a,#0d1a3a); color:#fff; }
.post-table thead th { padding:1rem 1.25rem; text-align:left; font-weight:700; letter-spacing:0.04em; font-size:0.85rem; text-transform:uppercase; }
.post-table tbody tr:nth-child(even) { background:#f4f7ff; }
.post-table tbody tr:hover { background:#e8effe; }
.post-table tbody td { padding:0.85rem 1.25rem; color:#334460; border-bottom:1px solid #e8edf5; vertical-align:top; }
.post-table tbody td:first-child { font-weight:700; color:#0f1729; }

.product-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.95rem; }
.product-table th { background:#0f1729; color:#fff; padding:0.8rem 1rem; text-align:left; font-weight:700; }
.product-table td { padding:0.7rem 1rem; border-bottom:1px solid #e2e8f0; }
.product-table tr:nth-child(even) td { background:#f7f9fc; }

.table-wrap { overflow-x:auto; margin:1.5rem 0; }

/* ── STRATEGY GRID ── */
.strategy-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin:1.75rem 0; }
@media(max-width:640px){ .strategy-grid { grid-template-columns:1fr; } }
.strategy-card {
  background:#fff; border:2px solid #e2e8f0; border-radius:12px; padding:1.4rem;
  transition:border-color 0.2s, transform 0.2s;
}
.strategy-card:hover { border-color:#2D53A3; transform:translateY(-2px); }
.strategy-num { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; background:#2D53A3; color:#fff;
  font-size:0.9rem; font-weight:800; margin-bottom:0.75rem; }
.strategy-card h3 { font-size:1rem; font-weight:800; color:#0f1729; margin-bottom:0.5rem; }
.strategy-card p { font-size:0.9rem; color:#5a6b8a; margin:0; line-height:1.6; }

/* ── HS CODE BOX ── */
.hs-box {
  background:#f7f9fc; border:1px solid #e2e8f0; border-radius:10px;
  padding:1.5rem; margin:1.75rem 0;
}
.hs-box h3 { font-size:1rem; font-weight:800; color:#0f1729; margin-bottom:1rem; }
.hs-row { display:flex; justify-content:space-between; align-items:center;
  padding:0.6rem 0; border-bottom:1px solid #e2e8f0; gap:1rem; flex-wrap:wrap; }
.hs-row:last-child { border-bottom:none; }
.hs-code { font-family:monospace; font-size:0.92rem; font-weight:700; color:#2D53A3; min-width:90px; }
.hs-desc { font-size:0.9rem; color:#4a5568; flex:1; }
.hs-note { font-size:0.82rem; color:#718096; text-align:right; min-width:120px; }

/* ── AUTHOR BOX ── */
.author-box {
  display:flex; align-items:center; gap:1.25rem;
  background:#f7f9fc; border-radius:12px; padding:1.5rem;
  margin-top:3rem; border:1px solid #e2e8f0;
}
.author-avatar {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, #2D53A3, #1a3478);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; flex-shrink:0;
}
.author-name { font-weight:800; color:#0f1729; font-size:1rem; }
.author-title { color:#5a6b8a; font-size:0.88rem; margin-top:0.2rem; }

/* ── FAQ ── */
.faq-section { background:#f4f7ff; padding:4rem 0; }
.faq-item { background:#fff; border-radius:12px; padding:1.75rem; margin-bottom:1rem; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.faq-q { font-size:1.05rem; font-weight:800; color:#0f1729; margin-bottom:0.75rem; display:flex; gap:0.75rem; }
.faq-question { font-size:1.05rem; font-weight:800; color:#0f1729; margin-bottom:0.75rem; }
.faq-q::before { content:'Q'; background:#2D53A3; color:#fff; font-size:0.75rem; font-weight:900; width:1.6rem; height:1.6rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.1rem; }
.faq-a, .faq-answer { font-size:0.97rem; color:#4a5a78; line-height:1.78; padding-left:2.35rem; }

/* ── RELATED PRODUCTS ── */
.related-products { padding:3rem 0 4rem; background:#f7f9fc; }
.related-products h3 { text-align:center; font-size:1.6rem; font-weight:900; color:#0f1729; margin-bottom:2rem; letter-spacing:-0.02em; }
.product-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; max-width:780px; margin:0 auto; padding:0 2rem; }
@media(max-width:600px) { .product-cards { grid-template-columns:1fr; } }
.product-card {
  background:#fff; border-radius:12px; padding:1.5rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.07);
  border:1px solid #e2e8f0;
  transition:transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.12); }
.product-card-label { font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#2D53A3; margin-bottom:0.5rem; }
.product-card h4 { font-size:1.1rem; font-weight:800; color:#0f1729; margin-bottom:0.6rem; letter-spacing:-0.01em; }
.product-card p { font-size:0.9rem; color:#5a6b8a; line-height:1.6; margin-bottom:1rem; }
.cert-tags { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.cert-tag { background:#f0f4ff; color:#2D53A3; font-size:0.72rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:4px; }
.product-card-link {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:#2D53A3; color:#fff; font-weight:700; font-size:0.88rem;
  padding:0.55rem 1.25rem; border-radius:7px; text-decoration:none;
  transition:background 0.2s;
}
.product-card-link:hover { background:#1a3478; color:#fff; }

/* Related section (dark background variant) */
.related-section { background:#0f1729; padding:4.5rem 0; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
@media(max-width:700px) { .related-grid { grid-template-columns:1fr; } }
.related-card { background:#1a2540; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:2rem; transition:border-color 0.2s; }
.related-card:hover { border-color:rgba(73,169,224,0.5); }
.related-model { font-size:0.8rem; font-weight:700; color:#49A9E0; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.5rem; }
.related-title { font-size:1.05rem; font-weight:800; color:#fff; margin-bottom:0.7rem; line-height:1.35; }
.related-desc { font-size:0.9rem; color:#7a8da8; line-height:1.65; margin-bottom:1.25rem; }
.related-link { display:inline-flex; align-items:center; gap:0.4rem; color:#49A9E0; font-size:0.88rem; font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.06em; transition:gap 0.2s; }
.related-link:hover { gap:0.7rem; }

/* ── CTA SECTION ── */
.cta-section { background:linear-gradient(135deg,#0d1a3a,#1a0d00); padding:5rem 0; text-align:center; }
.cta-section h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; color:#fff; margin-bottom:1rem; letter-spacing:-0.025em; }
.cta-section p { font-size:1.1rem; color:rgba(255,255,255,0.65); max-width:560px; margin:0 auto 2.5rem; line-height:1.7; }
.btn-cta-primary, .cta-btn {
  display:inline-flex; align-items:center; gap:0.6rem; background:#D7092F;
  color:#fff; font-weight:700; font-size:1.05rem; padding:0.9rem 2.25rem;
  border-radius:8px; text-decoration:none; transition:background 0.2s, transform 0.2s;
}
.btn-cta-primary:hover, .cta-btn:hover { background:#b80621; transform:translateY(-2px); }

/* Older cta variant */
section.cta { background:linear-gradient(135deg,#0d1a3a,#08101f); padding:4rem 2rem; text-align:center; }
section.cta h2 { font-size:1.8rem; font-weight:900; color:#fff; margin-bottom:1rem; }
section.cta p { color:rgba(255,255,255,0.7); max-width:520px; margin:0 auto 2rem; line-height:1.7; }
.btn { display:inline-flex; align-items:center; gap:0.5rem; background:#D7092F; color:#fff; font-weight:700; padding:0.85rem 2rem; border-radius:8px; text-decoration:none; transition:background 0.2s; }
.btn:hover { background:#b80621; }

/* ── MISC CONTENT COMPONENTS ── */
.note, .info-box {
  background:#f0f4ff; border:1px solid #c5d5f5; border-radius:8px;
  padding:1.1rem 1.4rem; margin:1.5rem 0; font-size:0.95rem; color:#2a3a5a;
}

.highlight-box {
  background:linear-gradient(135deg,#f0f4ff,#fff); border:2px solid #2D53A3;
  border-radius:12px; padding:1.5rem; margin:1.75rem 0;
}

.answer { background:#f7f9fc; border-radius:10px; padding:1.25rem 1.5rem; margin:1.5rem 0; font-size:1rem; color:#334460; line-height:1.8; }

.source-list { list-style:none; padding:0; margin:0 0 1.5rem 0; }
.source-list li { padding:0.6rem 0; border-bottom:1px solid #e2e8f0; font-size:0.95rem; }
.source-list li:last-child { border-bottom:none; }
.source-list a { color:#2D53A3; text-decoration:underline; }

/* ── HERO VARIANTS (generic) ── */
.hero {
  background: linear-gradient(135deg, #080e1e 0%, #0d1a3a 100%);
  padding: 8rem 2rem 4rem;
  text-align: center;
}
.hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:1rem; }
.hero p, .hero .meta { color:rgba(255,255,255,0.65); font-size:1rem; }
.tag, .hero-eyebrow, .blog-hero-eyebrow, .post-hero-eyebrow {
  display:inline-block; background:rgba(215,9,47,0.15); border:1px solid rgba(215,9,47,0.4);
  color:#ff5577; font-size:0.78rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; padding:0.3rem 0.9rem; border-radius:50px; margin-bottom:1.25rem;
}

/* Hero banner variant */
.hero-banner {
  background: linear-gradient(135deg, #080e1e 0%, #1a0d20 100%);
  padding: 9rem 2rem 4rem;
}

/* Blog hero inner */
.blog-hero-inner { max-width:780px; margin:0 auto; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .article-hero, .post-hero, .blog-hero, .hero-blog {
    padding: 8rem 0 3rem;
  }
  .article-body, .post-content {
    padding: 2.5rem 1.25rem;
  }
  .product-cards { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .strategy-grid { grid-template-columns:1fr; }
  .post-table-wrap { font-size:0.85rem; }
}

@media (max-width:480px) {
  .article-hero h1, .post-hero h1 { font-size:1.75rem; }
  .article-meta, .post-meta { gap:0.75rem; }
}

/* ── BLOG-* CLASS ALIASES (旧模板兼容层) ── */
.blog-main {
  background: #fff;
}
.blog-article {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #2d3748;
}
.blog-header {
  background: linear-gradient(135deg, #080e1e 0%, #0d1a3a 100%);
  padding: 8rem 2rem 3rem;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.blog-category {
  display: inline-block;
  background: rgba(215,9,47,0.15);
  border: 1px solid rgba(215,9,47,0.4);
  color: #ff5577;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
}
.blog-date {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}
.blog-read-time {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}
.blog-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.blog-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  max-width: 700px;
}
.blog-intro {
  margin-bottom: 2rem;
}
.blog-intro p {
  margin-bottom: 1.25rem;
  color: #334460;
}
.blog-section {
  margin-bottom: 2rem;
}
.blog-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2D53A3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.blog-section h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f1729;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.blog-section p {
  margin-bottom: 1.25rem;
  color: #334460;
}
.blog-section ul,
.blog-section ol,
.blog-intro ul,
.blog-intro ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.blog-section li,
.blog-intro li {
  margin-bottom: 0.5rem;
  color: #334460;
  line-height: 1.7;
}
.blog-section strong {
  color: #0f1729;
}
.blog-cta {
  background: linear-gradient(135deg, #0d1a3a, #1a0d1a);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  margin: 3rem 0;
}
.blog-faq {
  margin: 2.5rem 0;
}
.blog-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2D53A3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.blog-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f1729;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.blog-body p {
  margin-bottom: 1.25rem;
  color: #334460;
  line-height: 1.85;
}
.blog-body ul, .blog-body ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.blog-body li {
  margin-bottom: 0.5rem;
  color: #334460;
}

/* ── 通用h2/h3 fallback（没有wrapper class的旧文章） ── */
main > article h2,
main > section h2,
.blog-article h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2D53A3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
main > article h3,
main > section h3,
.blog-article h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f1729;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
main > article p,
main > section p,
.blog-article p {
  margin-bottom: 1.25rem;
  color: #334460;
  line-height: 1.85;
  font-size: 1.05rem;
}
main > article ul,
main > article ol,
.blog-article ul,
.blog-article ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
main > article li,
.blog-article li {
  margin-bottom: 0.5rem;
  color: #334460;
  line-height: 1.75;
}