/* ============================================================
   SerpUp Blog — self-contained stylesheet.
   This ships inside /blog/assets/ specifically so the blog looks
   and works correctly even if it's uploaded on its own, without
   the site's root assets/css/style.css being refreshed at the
   same time. It re-declares the handful of design tokens it needs
   (safe — identical values, no conflict with the root stylesheet)
   and then fully, explicitly styles every blog-specific component.
   ============================================================ */

:root{
  --blog-ink: #16181B;
  --blog-ink-soft: #565B61;
  --blog-line: #D4D7DA;
  --blog-surface: #FAFAFB;
  --blog-accent: #2D4CE0;
  --blog-accent-tint: #E7EAFC;
  --blog-radius: 16px;
  --blog-metal: linear-gradient(135deg, #FFFFFF 0%, #EAEBED 28%, #D7DADD 52%, #EDEEF0 76%, #FFFFFF 100%);
  --blog-shadow: 0 1px 2px rgba(20,22,25,.05), 0 20px 44px -20px rgba(20,22,25,.22);
}

/* ---------- Category filter chips ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.chip{
  display:flex; align-items:center; gap:8px; padding:13px 20px; border:1px solid var(--blog-line);
  border-radius:999px; background:var(--blog-metal); font-size:14.5px; font-weight:700; color:var(--blog-ink);
  text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.chip:hover{ border-color:var(--blog-accent); transform:translateY(-2px); box-shadow:var(--blog-shadow); }
.chip .sub{ color:var(--blog-ink-soft); font-size:12.5px; font-weight:500; }

/* ---------- Post grid ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.blog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--blog-surface);
  border:1px solid var(--blog-line);
  border-radius:var(--blog-radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--blog-shadow); }

.blog-thumb{
  position:relative;
  display:block;
  width:100%;
  height:170px;
  flex:none;
  overflow:hidden;
  background:var(--blog-metal);
  border-bottom:1px solid var(--blog-line);
}
.blog-thumb img{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  margin:0;
  padding:0;
  border:0;
}

.blog-body{
  position:relative;
  display:block;
  padding:22px 22px 24px;
  background:var(--blog-surface);
}
.blog-date{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--blog-accent);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:10px;
}
.blog-card h3{
  font-family:'Archivo', sans-serif;
  font-size:17.5px;
  font-weight:800;
  line-height:1.3;
  margin:0;
  color:var(--blog-ink);
}
.blog-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--blog-ink-soft);
  margin:10px 0 0;
}

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

/* ---------- Pagination ---------- */
.pager{ display:flex; justify-content:center; gap:10px; margin-top:44px; flex-wrap:wrap; }
.pager a, .pager span{
  padding:10px 16px; border-radius:10px; border:1px solid var(--blog-line);
  font-size:14px; font-weight:700; text-decoration:none; color:var(--blog-ink);
}
.pager a:hover{ border-color:var(--blog-accent); color:var(--blog-accent); }
.pager .current{ background:var(--blog-ink); color:#fff; border-color:var(--blog-ink); }

/* ---------- Single post article body ---------- */
.prose{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  font-size:17px;
  line-height:1.7;
  color:var(--blog-ink-soft);
}
.prose h2{ font-family:'Archivo',sans-serif; font-weight:800; font-size:26px; color:var(--blog-ink); margin:40px 0 14px; }
.prose h3{ font-family:'Archivo',sans-serif; font-weight:800; font-size:20px; color:var(--blog-ink); margin:30px 0 10px; }
.prose p{ margin:0 0 18px; }
.prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--blog-accent); text-decoration:underline; }
.prose img{ max-width:100%; height:auto; border-radius:12px; margin:20px 0; }
.prose blockquote{ border-left:4px solid var(--blog-accent); padding:4px 0 4px 20px; margin:24px 0; font-style:italic; color:var(--blog-ink); }
.prose strong{ color:var(--blog-ink); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:13.5px; color:var(--blog-ink-soft); margin-bottom:18px; }
.breadcrumb a{ color:var(--blog-ink-soft); text-decoration:none; }
.breadcrumb a:hover{ color:var(--blog-accent); }