/* CREW — Blog styles (index + article) */

.blog-hero { padding: 70px 0 30px; text-align:center; }
.blog-hero h1 { font-size: clamp(2.2rem,5vw,3.4rem); margin-bottom: 16px; }
.blog-hero p { color: var(--ink-soft); font-size: 1.15rem; max-width: 56ch; margin: 0 auto; }

/* Category filter */
.cats { display:flex; gap: 10px; justify-content:center; flex-wrap:wrap; margin: 30px 0 10px; }
.cat-chip {
  padding: 9px 18px; border-radius: var(--r-pill); font-weight:700; font-size: 14px;
  background:#fff; border:1px solid var(--line); color: var(--ink-soft); box-shadow: var(--sh-sm);
  transition: all .2s;
}
.cat-chip.active, .cat-chip:hover { background: var(--mint); color:#fff; border-color: var(--mint); }

.blog-list { padding: 30px 0 90px; }
.blog-list .blog-grid { grid-template-columns: repeat(3,1fr); }
.empty-note { text-align:center; color: var(--muted); padding: 60px 0; font-weight:600; }

/* ---------- Article ---------- */
.article { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.article-top { padding: 56px 0 26px; }
.crumb { font-size: 14px; font-weight:600; color: var(--muted); margin-bottom: 22px; display:flex; gap:8px; align-items:center; }
.crumb a { color: var(--mint-deep); }
.article .a-tag { display:inline-block; font-size: 12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#fff; padding:6px 13px; border-radius: var(--r-pill); margin-bottom: 18px; }
.article h1 { font-size: clamp(2rem,4.4vw,3rem); line-height:1.08; margin-bottom: 18px; }
.article-meta { display:flex; align-items:center; gap: 14px; color: var(--muted); font-size: 14.5px; font-weight:600; margin-bottom: 30px; }
.article-meta .av { width: 34px; height:34px; border-radius:50%; background:var(--mint); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--font-display); }
.article-cover { height: 5px; border-radius: 99px; margin-bottom: 38px; overflow:hidden; font-size:0; line-height:0; }

.prose { font-size: 1.12rem; line-height: 1.78; color: var(--ink-soft); }
.prose > * { margin-bottom: 1.25em; }
.prose h2 { font-size: 1.7rem; color: var(--ink); margin-top: 1.6em; margin-bottom: .55em; line-height:1.15; }
.prose h3 { font-size: 1.3rem; color: var(--ink); margin-top: 1.3em; margin-bottom: .5em; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--mint-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
  border-left: 4px solid var(--mint); background: var(--bg-mint);
  padding: 18px 24px; border-radius: 0 var(--r-md) var(--r-md) 0; margin: 1.6em 0;
  font-size: 1.18rem; color: var(--ink); font-weight: 500;
}
.prose img { border-radius: var(--r-md); margin: 1.6em 0; box-shadow: var(--sh-sm); }
.prose hr { border:none; border-top:1px solid var(--line); margin: 2em 0; }
.prose code { background:#eef4f2; padding: 2px 7px; border-radius: 6px; font-size: .92em; }

.article-cta {
  margin: 64px auto 0; max-width: 760px; padding: 0 24px;
}
.article-cta .inner {
  background: linear-gradient(135deg, var(--mint), var(--mint-deep)); color:#fff;
  border-radius: var(--r-xl); padding: 44px 40px; text-align:center; box-shadow: var(--sh-md);
}
.article-cta h3 { color:#fff; font-size: 1.7rem; margin-bottom: 12px; }
.article-cta p { color: rgba(255,255,255,.92); margin-bottom: 22px; }
.article-cta .stores { justify-content:center; }

.article-foot { max-width: 760px; margin: 0 auto; padding: 50px 24px 0; }
.back-link { display:inline-flex; align-items:center; gap:8px; font-weight:700; color: var(--mint-deep); }

@media (max-width:760px){
  .blog-list .blog-grid { grid-template-columns: 1fr; }
}