/* post.css — shared styles for blog post detail pages */
.post-hero { padding-top: calc(var(--header-h) + var(--header-top, 0px) + 56px); padding-bottom: 48px; }
.post-hero .ds-container { text-align:center; }
.post-hero .page-hero__breadcrumb { justify-content:center; }
.post-meta { display:flex; gap:14px; align-items:center; justify-content:center; margin-bottom:24px; font-family:var(--font-mono); font-size:13px; color:var(--ds-text-3); flex-wrap:wrap; }
.post-meta .cat { color:var(--ds-text-2); padding:4px 10px; background:var(--ds-brand-soft); border-radius:var(--r-pill); font-weight:600; letter-spacing:.05em; }
.post-title { font-family:var(--font-head); font-size:clamp(34px, 5vw, 56px); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:0 auto 24px; max-width:900px; text-align:center; }
.post-actions { display:flex; gap:12px; align-items:center; padding:16px 0; border-top:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line); margin:32px 0; flex-wrap:wrap; }
.post-actions .author { display:flex; align-items:center; gap:10px; }
.post-actions .avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, #1d4ed8, #7c3aed); }
.post-actions .author-info { font-size:13px; }
.post-actions .author-info b { font-weight:600; color:var(--ds-text); }
.post-actions .author-info span { color:var(--ds-text-3); display:block; font-size:12px; }
.post-actions .share { margin-left:auto; display:flex; gap:8px; }
.post-actions .share button { width:36px; height:36px; border-radius:50%; border:1px solid var(--ds-line); background:transparent; display:grid; place-items:center; cursor:pointer; transition:all var(--t-fast); color:var(--ds-text-2); }
.post-actions .share button:hover { background:var(--ds-bg-subtle); border-color:var(--ds-text); }
.post-cover { aspect-ratio:21/9; border-radius:var(--r-lg); margin:24px 0 64px; position:relative; overflow:hidden; width:100%; height:auto; object-fit:cover; display:block; }
.post-notice { max-width:var(--w-article); margin:0 auto 8px; padding:0 32px; }
.post-body { max-width:var(--w-article); margin:0 auto; padding:0 32px; font-size:18px; line-height:1.8; color:var(--ds-text); }
.post-body p { margin:0 0 24px; }
.post-body .lead { font-size:22px; line-height:1.6; color:var(--ds-text); font-weight:500; padding:24px 0 24px 24px; border-left:3px solid var(--ds-brand); margin:0 0 36px; }
.post-body h2 { font-family:var(--font-head); font-size:28px; line-height:1.3; letter-spacing:-.015em; margin:56px 0 20px; font-weight:700; }
.post-body h2::before { content:'#'; color:var(--ds-brand); margin-right:8px; }
.post-body h3 { font-family:var(--font-head); font-size:20px; line-height:1.35; margin:32px 0 12px; font-weight:700; }
.post-body ul, .post-body ol { margin:0 0 24px; padding-left:24px; }
.post-body li { margin-bottom:8px; }
.post-body blockquote { margin:32px 0; padding:24px 28px; background:var(--ds-bg-subtle); border-radius:var(--r-md); border-left:4px solid var(--ds-text); font-size:18px; line-height:1.7; }
.post-body blockquote cite { display:block; margin-top:12px; font-style:normal; font-size:13px; color:var(--ds-text-3); font-family:var(--font-mono); }
.post-body code { font-family:var(--font-mono); font-size:.9em; padding:2px 6px; background:var(--ds-bg-subtle); border-radius:4px; }
.post-body pre { margin:24px 0; padding:24px; background:#0a0a0a; color:#e8e8e6; border-radius:var(--r-md); font-family:var(--font-mono); font-size:13px; line-height:1.7; overflow-x:auto; }
.post-body pre code { background:transparent; padding:0; color:inherit; }
.post-body img, .post-body .post-image { margin:32px 0; border-radius:var(--r-md); width:100%; }
.post-body .callout { padding:20px 24px; background:var(--ds-brand-soft); border-radius:var(--r-md); margin:24px 0; font-size:15px; line-height:1.7; }
.post-body .callout strong { color:var(--ds-text-2); }
.post-tags { max-width:var(--w-article); margin:48px auto 0; padding:0 32px; display:flex; flex-wrap:wrap; gap:8px; }
.post-end-share { max-width:var(--w-article); margin:32px auto 0; padding:32px; border-top:1px solid var(--ds-line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }