/* Autoplanet blog — layers on top of /style.css (the static site's stylesheet).
   Every colour here comes from that file's custom properties, so the blog cannot
   drift from the rest of the site. Do not hard-code hex values in this file. */

/* ---------- archive hero ---------- */
.blog-hero{padding:64px 0 44px}
.blog-hero h1{margin-bottom:16px}
.blog-hero .lead{max-width:60ch}

/* ---------- post grid ---------- */
/* min() so the track floor never exceeds the container: a bare minmax(300px,1fr)
   overflowed the viewport on a 320px phone and scrolled the whole page sideways. */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.blog-grid>*{min-width:0}
.blog-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.blog-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.blog-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface2)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-cat{
  align-self:flex-start;background:var(--surface2);border:1px solid var(--border);
  color:var(--gold);font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;padding:5px 12px;border-radius:999px;
}
.blog-card-title{font-size:1.15rem;line-height:1.3;margin:0;font-weight:700;letter-spacing:-.01em}
.blog-card-title a{color:var(--text);text-decoration:none}
.blog-card:hover .blog-card-title a{color:var(--gold)}
.blog-card-excerpt{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0;flex:1}
.blog-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:4px;font-size:.82rem;color:var(--muted);
  padding-top:14px;border-top:1px solid var(--border);
}
.blog-card-link{color:var(--gold);font-weight:700;text-decoration:none;font-size:.88rem}

.blog-empty{
  text-align:center;color:var(--muted);padding:60px 24px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
}

/* ---------- pagination ---------- */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:44px;flex-wrap:wrap}
.blog-page-count{color:var(--muted);font-size:.9rem}

/* ---------- single post ---------- */
.post{padding:40px 0 0}
.post-wrap{max-width:820px}
.post-cat{
  display:inline-block;background:var(--surface2);border:1px solid var(--border);
  color:var(--gold);font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;padding:5px 14px;border-radius:999px;margin-bottom:16px;
}
.post-title{font-size:clamp(2rem,4.4vw,3rem);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 18px;font-weight:800;color:var(--text);text-wrap:balance}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);
  font-size:.9rem;margin-bottom:28px}
.post-hero-img{margin:0 0 32px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border)}
.post-hero-img img{width:100%;height:auto;display:block}

/* TL;DR — the answer-first block, same treatment as the static pages' .ans */
.post-tldr{
  background:var(--surface2);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:24px 28px;margin:0 0 34px;
}
.post-tldr-title{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;
  color:var(--gold);margin:0 0 10px;
}
.post-tldr p{margin:0;color:var(--text);line-height:1.6;font-size:1.02rem}

/* ---------- article typography ---------- */
.post-content{font-size:1.05rem;line-height:1.75;color:var(--muted);max-width:72ch}
.post-content p{margin:0 0 1.2em}
.post-content h2{font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.2;color:var(--text);
  margin:2.2em 0 .6em;font-weight:800;letter-spacing:-.02em}
.post-content h3{font-size:1.2rem;color:var(--text);margin:1.8em 0 .5em;font-weight:700}
.post-content h4{font-size:1.05rem;color:var(--text);margin:1.5em 0 .4em;font-weight:700}
.post-content ul,.post-content ol{margin:0 0 1.2em;padding-left:1.4em}
.post-content li{margin-bottom:.5em}
.post-content a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.post-content img{border-radius:var(--r);margin:1.6em 0;border:1px solid var(--border)}
.post-content blockquote{
  margin:1.6em 0;padding:20px 26px;background:var(--surface);
  border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;color:var(--text);
}
.post-content blockquote p:last-child{margin-bottom:0}
.post-content pre{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 22px;overflow-x:auto;font-size:.9rem;margin:0 0 1.4em;
}
.post-content code{background:var(--surface2);border:1px solid var(--border);
  border-radius:4px;padding:2px 6px;font-size:.9em}
.post-content pre code{background:none;border:none;padding:0}
.post-content hr{border:none;border-top:1px solid var(--border);margin:2.4em 0}

/* ---------- author + tags ---------- */
.post-author{
  display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 28px;margin:40px 0 0;
}
.post-author-name{font-weight:700;color:var(--text);margin:0 0 6px}
.post-author-bio{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.post-tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:32px 0 0}
.post-tags li{
  background:var(--surface2);border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;font-size:.82rem;color:var(--muted);margin:0;
}

/* ---------- post FAQ (reuses the static site's details/summary treatment) ---------- */
.post-faq{margin:44px 0 0}
.post-faq h2{font-size:1.5rem;margin-bottom:8px}

@media (max-width:620px){
  .blog-hero{padding:36px 0 28px}
  .post{padding:28px 0 0}
  .post-tldr{padding:20px 22px}
  .post-author{flex-direction:column;gap:12px;padding:22px}
}