/* ═══ Article Page — SEO blog posts ═══ */

/* Container */
.wrapper{margin:0 auto;width:90%;max-width:1280px;clear:both}
@media(max-width:768px){.wrapper{width:95%}}

/* Page frame */
.art-page{max-width:1280px;margin:0 auto;padding:0 20px 80px}

/* Hero */
.art-hero{padding:clamp(60px,10vw,90px) 0 clamp(32px,6vw,48px);text-align:center}
.art-hero-bc{font-size:.78rem;color:var(--text-tertiary);margin-bottom:20px}
.art-hero-bc a{color:var(--text-tertiary);text-decoration:none;transition:.2s}
.art-hero-bc a:hover{color:var(--accent)}
.art-hero h1{font-size:clamp(1.6rem,4.5vw,2.3rem);font-weight:800;margin:0 0 16px;letter-spacing:-.03em;color:var(--text-primary);line-height:1.2}
.art-hero-meta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--text-tertiary)}
.art-hero-meta span{display:inline-flex;align-items:center;gap:4px}

/* Cover */
.art-cover{margin:0 0 clamp(32px,6vw,48px);border-radius:16px;overflow:hidden;border:1px solid var(--border);aspect-ratio:21/9;background:var(--bg-tertiary,#f5f5f5);display:flex;align-items:center;justify-content:center}
.art-cover img{width:100%;height:100%;object-fit:cover}
[data-theme="dark"] .art-cover{background:#1a1c20}

/* Body text */
.art-body{color:var(--text-secondary);font-size:clamp(.92rem,2vw,1rem);line-height:1.85}
.art-body h2{font-size:clamp(1.2rem,3vw,1.5rem);font-weight:800;color:var(--text-primary);margin:clamp(32px,6vw,44px) 0 14px;letter-spacing:-.02em;line-height:1.25}
.art-body h3{font-size:clamp(1.05rem,2.5vw,1.2rem);font-weight:700;color:var(--text-primary);margin:28px 0 10px}
.art-body p{margin:0 0 16px}
.art-body strong{color:var(--text-primary)}
.art-body a{text-decoration:none;text-underline-offset:2px}
.art-body a:hover{text-decoration:none}

/* Illustration placeholder (SVG or icon-based) */
.art-illust{margin:24px 0;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--bg-tertiary,#f5f5f5);padding:clamp(24px,5vw,40px) 20px;text-align:center}
.art-illust-icon{font-size:3rem;margin-bottom:12px;display:block}
.art-illust-text{font-size:.85rem;color:var(--text-tertiary);line-height:1.5}
[data-theme="dark"] .art-illust{background:#1a1c20}

/* Numbered steps */
.art-steps{counter-reset:astep;margin:20px 0}
.art-step{counter-increment:astep;position:relative;padding:12px 0 12px 40px;border-left:2px solid var(--border);margin-left:14px;color:var(--text-secondary);font-size:clamp(.9rem,2vw,.95rem);line-height:1.7}
.art-step:last-child{border-left-color:transparent}
.art-step::before{content:counter(astep);position:absolute;left:-14px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.art-step strong{color:var(--text-primary)}
.art-step a{color:var(--accent)}

/* Tip / Note boxes */
.art-tip{padding:16px 20px;border-radius:12px;background:rgba(37,99,235,.06);border-left:3px solid var(--accent);margin:20px 0;font-size:.88rem;line-height:1.7;color:var(--text-secondary)}
.art-tip strong{color:var(--text-primary)}
.art-tip a{color:var(--accent)}
.art-tip-green{background:rgba(16,185,129,.06);border-left-color:#10b981}
.art-tip-warn{background:rgba(245,158,11,.06);border-left-color:#f59e0b}

/* Feature/info grid */
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:20px 0}
.art-grid-item{padding:18px;background:var(--bg-tertiary,#f5f5f5);border-radius:12px}
[data-theme="dark"] .art-grid-item{background:#1a1c20}
.art-grid-item-icon{font-size:1.4rem;margin-bottom:6px;display:block}
.art-grid-item-title{font-weight:700;font-size:.88rem;color:var(--text-primary);margin-bottom:4px}
.art-grid-item-desc{font-size:.78rem;color:var(--text-tertiary);line-height:1.5}

/* Blockquote */
.art-quote{margin:24px 0;padding:20px 24px;border-left:4px solid var(--accent);background:var(--bg-secondary);border-radius:0 12px 12px 0;font-style:italic;font-size:.95rem;color:var(--text-primary);line-height:1.7}

/* CTA block */
.art-cta{margin:48px 0 0;padding:clamp(28px,6vw,40px);background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;text-align:center}
.art-cta h3{font-size:clamp(1.1rem,3vw,1.4rem);font-weight:800;color:var(--text-primary);margin:0 0 10px}
.art-cta p{font-size:.92rem;color:var(--text-secondary);margin:0 0 20px;line-height:1.6}
.art-cta-btn {display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:var(--accent);color:#ffffff;border-radius:12px;text-decoration:none;font-weight:700;font-size:.95rem;transition:.25s;box-shadow:0 4px 14px var(--accent-glow,rgba(37,99,235,.2))}
.art-cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px var(--accent-glow,rgba(37,99,235,.3));color:#ffffff}

/* Tags */
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0;padding-top:24px;border-top:1px solid var(--border)}
.art-tag{padding:5px 14px;border-radius:99px;font-size:.75rem;font-weight:600;background:var(--bg-tertiary,#f0f0f0);color:var(--text-tertiary);text-decoration:none;transition:.2s}
[data-theme="dark"] .art-tag{background:#1a1c20}
.art-tag:hover{background:var(--accent-soft);color:var(--accent)}

/* Related articles */
.art-related{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.art-related h3{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0 0 16px}
.art-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.art-related-card{padding:18px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text-primary);transition:.25s;display:block}
.art-related-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.06);color:var(--text-primary)}
.art-related-card-title{font-weight:700;font-size:.9rem;margin-bottom:4px;color:var(--text-primary)}
.art-related-card-desc{font-size:.78rem;color:var(--text-tertiary);line-height:1.5}

/* Responsive */
@media(max-width:600px){
	.art-hero{padding:48px 0 28px}
	.art-cover{border-radius:12px;aspect-ratio:16/9}
	.art-grid{grid-template-columns:1fr}
	.art-related-grid{grid-template-columns:1fr}
}
@media(hover:none){
	.art-cta-btn:hover,.art-related-card:hover{transform:none}
}