/* ── QuickGroww Blog — Shared Styles ── */

:root {
  --white:#ffffff; --off:#f7f6f3; --ink:#0e0e0e; --ink2:#1c1c1c;
  --muted:#6b6b6b; --border:#e2e0db; --green:#00c27a; --green-light:#e8faf3;
  --green-mid:#00a868; --yellow:#f5c842; --red:#ff4d2e;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--ink);font-family:'Instrument Sans',sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--green-mid);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Nav */
.blog-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 5vw;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:100;}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;}
.logo .logo-dot{color:var(--green);}
.back-link{font-size:.85rem;color:var(--muted);font-weight:500;}
.back-link:hover{color:var(--green);}

/* Article Header */
.article-header{max-width:760px;margin:0 auto;padding:3.5rem 1.5rem 2rem;}
.article-tag{display:inline-block;background:var(--green-light);color:var(--green-mid);font-size:.7rem;font-weight:600;padding:.25rem .7rem;border-radius:100px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem;}
.article-header h1{font-family:'Bricolage Grotesque',sans-serif;font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin-bottom:1rem;}
.article-meta{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}

/* Hero Image Placeholder */
.hero-img-placeholder{width:100%;max-width:760px;margin:0 auto;padding:0 1.5rem;}
.hero-img-placeholder div{width:100%;aspect-ratio:16/9;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}

/* Article Body */
.article-body{max-width:760px;margin:0 auto;padding:0 1.5rem 4rem;}
.article-body p{font-size:1.05rem;line-height:1.85;color:var(--ink2);margin-bottom:1.5rem;}
.article-body h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.55rem;font-weight:700;letter-spacing:-.02em;margin:2.5rem 0 1rem;color:var(--ink);}
.article-body h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.2rem;font-weight:600;margin:2rem 0 .75rem;color:var(--ink);}
.article-body ul,.article-body ol{margin:0 0 1.5rem 1.5rem;font-size:1.02rem;line-height:1.85;color:var(--ink2);}
.article-body li{margin-bottom:.5rem;}
.article-body blockquote{border-left:3px solid var(--green);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--green-light);border-radius:0 8px 8px 0;font-size:.97rem;color:var(--ink2);font-style:italic;}
.article-body strong{font-weight:600;color:var(--ink);}

/* Image Placeholders */
.img-placeholder{width:100%;aspect-ratio:16/9;border-radius:10px;margin:2rem 0;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--muted);position:relative;overflow:hidden;}
.img-placeholder.dark{background:linear-gradient(135deg,#111827,#1e293b);}
.img-placeholder.light{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);}
.img-caption{text-align:center;font-size:.78rem;color:var(--muted);margin:-1rem 0 2rem;font-style:italic;}

/* Blog CTA Box */
.blog-cta{background:var(--ink);color:var(--white);border-radius:12px;padding:2.5rem;text-align:center;margin:2.5rem 0;}
.blog-cta h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.4rem;font-weight:700;margin-bottom:.5rem;}
.blog-cta p{color:rgba(255,255,255,.6);font-size:.92rem;margin-bottom:1.25rem;}
.blog-cta a{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:var(--white);padding:.75rem 1.5rem;border-radius:10px;font-weight:600;font-size:.9rem;text-decoration:none;transition:background .2s;}
.blog-cta a:hover{background:var(--green-mid);text-decoration:none;}

/* Related Reading */
.related-reading{margin:3rem 0 1rem;padding:2.5rem 0 0;border-top:1px solid var(--border);}
.related-reading h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:1.25rem;}
.related-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.related-card{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;border:1px solid var(--border);border-radius:10px;text-decoration:none;transition:border-color .2s,box-shadow .2s;overflow:hidden;}
.related-card img{width:100%;height:180px;object-fit:cover;border-radius:8px;}
.related-card:hover{border-color:var(--green);box-shadow:0 2px 12px rgba(0,194,122,.1);text-decoration:none;}
.related-tag{display:inline-block;background:var(--green-light);color:var(--green-mid);font-size:.65rem;font-weight:600;padding:.15rem .5rem;border-radius:100px;text-transform:uppercase;letter-spacing:.07em;width:fit-content;}
.related-title{font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.3;}
.related-desc{font-size:.8rem;color:var(--muted);line-height:1.5;}

/* Footer */
.blog-footer{border-top:1px solid var(--border);padding:2rem 5vw;text-align:center;font-size:.78rem;color:var(--muted);}

@media(max-width:768px){
  .related-cards{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .article-header h1{font-size:1.7rem;}
  .related-cards{grid-template-columns:1fr;}
}