/* Purpose: Single blog post (article) styles. Ported from AXL axl-blog-detail.html. Loaded on single posts. */

/* Clears the fixed header (replaces inline style="padding-top:120px" from the HTML). */
.section-pad.article-top { padding-top: 120px; }

/* ---- Breadcrumb (centered on articles) ---- */
.crumb { font-size: 13px; color: var(--slate); margin-bottom: 22px; display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: var(--accent); }
.crumb span { opacity: .5; }
.crumb .current { opacity: 1; color: var(--ink); }
.crumb--center { justify-content: center; }

/* ---- Article head ---- */
.art-head { max-width: 840px; margin: 0 auto; text-align: center; }
.art-head .meta { font-size: 13px; color: var(--slate); display: flex; gap: 12px; justify-content: center; align-items: center; margin-bottom: 14px; }
.art-head .meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--slate); opacity: .5; }
.art-head h1 { font-size: clamp(28px, 4.2vw, 50px); line-height: 1.12; }

/* ---- Hero image ---- */
.art-hero { margin: 38px auto; border-radius: var(--r); overflow: hidden; max-width: 1000px; max-height: 480px; }
.art-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Article body ---- */
.article { max-width: 800px; margin: 0 auto; font-size: 17px; line-height: 1.8; color: #2b2933; }
.article h2 { font-size: 25px; color: var(--ink); margin: 34px 0 14px; }
.article h3 { font-size: 21px; color: var(--ink); margin: 30px 0 12px; }
.article p { margin-bottom: 20px; }
.article a { color: var(--accent); text-decoration: underline; }
.article img { max-width: 100%; height: auto; border-radius: var(--r); margin: 20px 0; }
.article ul, .article ol { margin: 0 0 22px 0; padding: 0; list-style: none; }
.article ol { counter-reset: li; }
.article li { margin-bottom: 12px; padding-left: 24px; position: relative; }
.article li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.article li b { color: var(--ink); }

/* ---- Share ---- */
.share { max-width: 800px; margin: 38px auto; display: flex; gap: 12px; align-items: center; padding: 20px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.share span.l { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.share a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; transition: .3s; }
.share a:hover { background: var(--accent); border-color: var(--accent); }
.share a:hover svg { fill: #fff; }
.share a svg { width: 16px; height: 16px; fill: var(--slate); }