/* ============================================================
   Blog styles — this file (plus the templates in blog-src/_includes)
   is the ONLY place you touch to restyle every post at once.
   Reuses the design tokens from /assets/styles.css (--text, --grad, etc.)
   ============================================================ */

/* ---------- Blog listing (/blog/) ---------- */
.blog-list{ padding-bottom:90px; }

/* Search box */
.blog-search{
  display:flex; align-items:center; gap:12px;
  max-width:520px; margin:0 auto 36px;
  padding:12px 20px;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:99px;
  transition:border-color .25s, box-shadow .25s;
}
.blog-search:focus-within{
  border-color:rgba(148,170,255,.5);
  box-shadow:0 0 0 4px rgba(79,125,255,.12);
}
.blog-search svg{ width:20px; height:20px; color:var(--muted); flex:none; }
.blog-search input{
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:1rem;
}
.blog-search input::placeholder{ color:var(--muted); }
.blog-noresults{ text-align:center; color:var(--muted); padding:36px 0 70px; }
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}
.post-card{
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.post-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 18px 50px -20px rgba(79,125,255,.5);
}
.post-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.post-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; }
/* Top row of a card: category tag on the left, language pill on the right */
.pc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pc-lang{ display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line-2); border-radius:7px; padding:3px 8px; flex-shrink:0; }
.pc-lang .flag-svg{ width:16px; height:11px; border-radius:2px; display:block; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.15); }
.post-card-body h2{ font-size:1.25rem; line-height:1.25; }
.post-card-body p{ color:var(--muted); font-size:.95rem; }
.post-card-meta{ color:var(--muted); font-size:.82rem; margin-top:4px; }
.blog-empty{ color:var(--muted); text-align:center; padding:40px 0 80px; }

/* ---------- Single post ---------- */
.post{
  max-width:768px;
  margin:0 auto;
  padding:120px 24px 70px;
}
/* position:static overrides the global `nav{position:fixed}` rule from styles.css */
.post-crumbs{ position:static; font-size:.84rem; color:var(--muted); margin-bottom:26px; }
.post-crumbs a:hover{ color:var(--text); }
.post-crumbs span{ opacity:.5; margin:0 4px; }

.post-head{ margin-bottom:30px; }
.post-head h1{ font-size:clamp(2rem,4.6vw,3rem); margin:14px 0 16px; }
.post-meta{ color:var(--muted); font-size:.9rem; }
.post-excerpt{ color:var(--text); font-size:1.14rem; opacity:.9; margin-top:18px; line-height:1.6; }

.post-hero{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--line); margin:10px 0 34px;
}

/* ---------- Post body typography ---------- */
.post-body{ font-size:1.06rem; line-height:1.8; color:#dbe2ff; }
.post-body > * + *{ margin-top:22px; }
.post-body h2{ font-size:1.6rem; margin-top:46px; }
.post-body h3{ font-size:1.25rem; margin-top:34px; }
.post-body a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover{ color:var(--text); }
.post-body strong{ color:var(--text); }
.post-body ul,.post-body ol{ padding-left:1.3em; }
.post-body li + li{ margin-top:8px; }
.post-body blockquote{
  border-left:3px solid var(--blue);
  padding:4px 0 4px 20px; color:var(--muted); font-style:italic;
}
.post-body code{
  background:var(--panel-2); border:1px solid var(--line);
  padding:.12em .4em; border-radius:6px; font-size:.9em;
}
.post-body pre{
  background:var(--panel-2); border:1px solid var(--line);
  padding:18px; border-radius:var(--r-md); overflow-x:auto;
}
.post-body pre code{ background:none; border:none; padding:0; }

/* Tables (e.g. pricing comparisons) scroll on small screens */
.post-body table{
  width:100%; border-collapse:collapse;
  display:block; overflow-x:auto; font-size:.96rem;
}
.post-body th,.post-body td{
  border:1px solid var(--line); padding:10px 14px; text-align:left;
}
.post-body th{ background:var(--panel); color:var(--text); font-family:'Sora'; }

/* ---------- End-of-post CTA ---------- */
.post-cta{
  margin-top:56px; padding:34px 30px; text-align:center;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-lg);
}
.post-cta h2{ font-size:1.5rem; margin-bottom:10px; }
.post-cta p{ color:var(--muted); margin-bottom:22px; }

@media(max-width:600px){
  .post{ padding-top:100px; }
  .post-body{ font-size:1.02rem; }
}