/* =====================================================================
   MacLab Stores — Blog
   ===================================================================== */
.blog { padding-block: clamp(2rem, 5vw, 3.5rem); }
.blog__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-8); }
.blog__head .spectrum-line { margin: 0 auto var(--sp-5); }
.blog__head h1 { font-size: var(--text-4xl); margin-top: var(--sp-3); }
.blog__head .lead { margin-top: var(--sp-3); }
.blog__layout { display: grid; grid-template-columns: 1fr 300px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

/* Post cards */
.blog-grid { grid-template-columns: repeat(2, 1fr); }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-xs); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__cover { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--grad-ink); overflow: hidden; }
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card__ph { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: rgba(255,255,255,.16); }
.post-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.post-card__meta { font-size: var(--text-2xs); color: var(--graphite-soft); letter-spacing: var(--tracking-wide); }
.post-card__meta a { color: var(--cyan-ink); }
.post-card__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }
.post-card__title a:hover { color: var(--cyan-ink); }
.post-card__body p { font-size: var(--text-sm); color: var(--graphite); }

/* Sidebar */
.blog__side { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 88px; }
.blog-search .input { border-radius: var(--r-pill); }
.side-block h4 { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--graphite); margin-bottom: var(--sp-3); }
.side-block ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.side-block li a { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: var(--text-sm); border-bottom: 1px solid var(--hairline); }
.side-block li a:hover { color: var(--cyan-ink); }
.side-block em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--graphite-soft); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--surface-sunk); font-size: var(--text-xs); color: var(--graphite); font-family: var(--font-mono); transition: background var(--dur-2), color var(--dur-2); }
.tag:hover { background: var(--cyan-wash); color: var(--cyan-ink); }
.recent-list a { flex-direction: column; align-items: flex-start; gap: 2px; }
.recent-list a span { font-size: var(--text-2xs); color: var(--graphite-soft); }

/* ---- Article ---- */
.article { padding-block: clamp(2rem, 5vw, 3.5rem); }
.article__head { max-width: 760px; text-align: center; }
.article__head .crumbs { justify-content: center; }
.article__head h1 { font-size: var(--text-4xl); margin-top: var(--sp-2); }
.article__meta { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--graphite); display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.article__cover { max-width: 900px; margin-top: var(--sp-7); }
.article__cover img { width: 100%; border-radius: var(--r-xl); aspect-ratio: 16/8; object-fit: cover; box-shadow: var(--shadow-lg); }
.article__body { max-width: 720px; margin-top: var(--sp-7); }
.article__lead { font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink-soft); font-family: var(--font-display); font-weight: 500; margin-bottom: var(--sp-6); }

/* Prose (article body) */
.prose { font-size: var(--text-lg); line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--sp-8); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--sp-6); }
.prose p { color: #22252C; }
.prose a { color: var(--cyan-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose li { padding-left: var(--sp-1); }
.prose blockquote { border-left: 3px solid var(--cyan); padding: var(--sp-2) var(--sp-5); color: var(--graphite); font-style: italic; background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; }
.prose img { border-radius: var(--r-lg); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-sunk); padding: 0.1em 0.4em; border-radius: var(--r-xs); }
.prose strong { font-weight: 600; }

.article__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-7); }
.article__share { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.article__share .u-mono { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--graphite); }
.article__share a { font-size: var(--text-sm); color: var(--cyan-ink); font-weight: 500; }
.article__related { margin-top: var(--sp-10); }

@media (max-width: 900px) {
    .blog__layout { grid-template-columns: 1fr; }
    .blog__side { position: static; flex-direction: row; flex-wrap: wrap; }
    .blog__side .blog-search { flex: 1 1 100%; }
    .side-block { flex: 1; min-width: 180px; }
    .blog-grid { grid-template-columns: 1fr; }
}