/* blog.css — MyPodOps blog/resource hub (index + article), scoped under #mk-blog.
   Pairs with site-chrome.css (shared header/footer) + marketing-shell.js. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

#mk-blog { --ink:#1a1030; --ink-soft:#4a4560; --muted:#6b6580; --purple:#6f35d8; --line:#ece8f7; --bg-soft:#faf9ff; }
#mk-blog { color:var(--ink); font-family:Poppins,system-ui,-apple-system,sans-serif; }
#mk-blog a { color:var(--purple); }
#mk-blog .wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

/* ---------- index hero + cards ---------- */
#mk-blog .blog-hero { background:linear-gradient(135deg,#f4f0ff 0%,#eefaff 100%); border-bottom:1px solid var(--line); padding:64px 0 52px; text-align:center; }
#mk-blog .blog-hero h1 { font-size:42px; line-height:1.1; font-weight:800; margin:0 0 12px; color:var(--ink); }
#mk-blog .blog-hero p { font-size:17px; color:var(--muted); max-width:620px; margin:0 auto; }
#mk-blog .blog-search { display:flex; align-items:center; gap:10px; max-width:520px; margin:28px auto 0; background:#fff; border:1px solid var(--line); border-radius:999px; padding:13px 22px; box-shadow:0 10px 30px rgba(40,26,90,.07); }
#mk-blog .blog-search i { color:var(--muted); font-size:15px; }
#mk-blog .blog-search input { flex:1; border:0; outline:0; font:400 15px Poppins,sans-serif; color:var(--ink); background:transparent; }
#mk-blog .blog-noresults { text-align:center; color:var(--muted); padding:8px 0 56px; font-size:15px; }
#mk-blog .post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:56px 0 72px; }
#mk-blog .post-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.2s; text-decoration:none; }
#mk-blog .post-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(40,26,90,.10); border-color:#dccffb; }
#mk-blog .post-card .cat { display:inline-block; align-self:flex-start; margin:20px 22px 0; font:600 11px Poppins,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--purple); background:#f3effe; padding:5px 10px; border-radius:999px; }
#mk-blog .post-card h2 { font-size:19px; line-height:1.3; font-weight:700; color:var(--ink); margin:12px 22px 8px; }
#mk-blog .post-card p { font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 22px 18px; flex:1; }
#mk-blog .post-card .meta { margin:0 22px 20px; font-size:12px; color:var(--muted); }

/* ---------- article header band (full width) ---------- */
#mk-blog .article-head { background:var(--bg-soft); border-bottom:1px solid var(--line); padding:48px 0 38px; }
#mk-blog .article-head .wrap { max-width:1160px; }
#mk-blog .crumb { font-size:13px; color:var(--muted); margin:0 0 16px; }
#mk-blog .crumb a { color:var(--muted); text-decoration:none; }
#mk-blog .crumb a:hover { color:var(--purple); }
#mk-blog .article-head h1 { font-size:38px; line-height:1.15; font-weight:800; color:var(--ink); margin:0 0 16px; max-width:900px; }
#mk-blog .article-head .byline { font-size:14px; color:var(--muted); display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
#mk-blog .article-head .cat { font:600 11px Poppins,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--purple); background:#f3effe; padding:5px 10px; border-radius:999px; }
#mk-blog .article-head .byline .author { font-weight:600; color:var(--ink-soft); }

/* ---------- two-column layout: article (left) + sticky sidebar (right) ---------- */
#mk-blog .article-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start; padding:48px 0 72px; }
#mk-blog .article-body { text-align:left; font-family:'Source Serif 4',Georgia,serif; font-size:19px; line-height:1.75; color:#2b2536; min-width:0; }
#mk-blog .article-body h2 { font-family:Poppins,sans-serif; font-size:26px; line-height:1.25; font-weight:700; color:var(--ink); margin:40px 0 14px; }
#mk-blog .article-body h3 { font-family:Poppins,sans-serif; font-size:20px; font-weight:600; color:var(--ink); margin:30px 0 10px; }
#mk-blog .article-body p { margin:0 0 22px; }
#mk-blog .article-body ul, #mk-blog .article-body ol { margin:0 0 22px; padding-left:24px; }
#mk-blog .article-body li { margin:0 0 10px; }
#mk-blog .article-body a { color:var(--purple); text-decoration:underline; text-underline-offset:2px; }
#mk-blog .article-body strong { color:var(--ink); font-weight:600; }
#mk-blog .article-body blockquote { border-left:3px solid var(--purple); margin:26px 0; padding:4px 0 4px 22px; color:var(--muted); font-style:italic; }

/* ---------- sidebar ---------- */
#mk-blog .article-aside { position:sticky; top:98px; display:flex; flex-direction:column; gap:22px; }
#mk-blog .side-cta { background:linear-gradient(135deg,#2f91ee,#6a2ae3); color:#fff; border-radius:16px; padding:26px 24px; }
#mk-blog .side-cta h4 { font:700 18px Poppins,sans-serif; margin:0 0 8px; color:#fff; }
#mk-blog .side-cta p { font:400 14px/1.55 Poppins,sans-serif; opacity:.92; margin:0 0 18px; }
#mk-blog .side-cta a { display:block; text-align:center; background:#fff; color:#5f2bcf; font:700 14px Poppins,sans-serif; text-decoration:none; padding:12px 18px; border-radius:999px; }
#mk-blog .side-box { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 22px 8px; }
#mk-blog .side-box h4 { font:600 12px Poppins,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
#mk-blog .side-box .s-link { display:block; text-decoration:none; color:var(--ink); font:600 15px/1.4 Poppins,sans-serif; padding:11px 0; border-top:1px solid var(--line); }
#mk-blog .side-box .s-link:first-of-type { border-top:0; }
#mk-blog .side-box .s-link:hover { color:var(--purple); }
#mk-blog .side-box .s-explore { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font:600 14px Poppins,sans-serif; padding:10px 0; border-top:1px solid var(--line); }
#mk-blog .side-box .s-explore:first-of-type { border-top:0; }
#mk-blog .side-box .s-explore i { color:var(--purple); width:18px; text-align:center; }
#mk-blog .side-box .s-explore:hover { color:var(--purple); }

@media (max-width:980px){
  #mk-blog .article-layout { grid-template-columns:1fr; gap:40px; }
  #mk-blog .article-aside { position:static; }
}
@media (max-width:860px){
  #mk-blog .post-grid { grid-template-columns:1fr; }
  #mk-blog .blog-hero h1 { font-size:32px; }
  #mk-blog .article-head h1 { font-size:29px; }
  #mk-blog .article-body { font-size:18px; }
}