/* Grid for blog cards; if you have a grid utility already, replace this with it */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6, 2rem);
}

/* Controls row (search + tag) */
.blog-controls {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-4, 1rem);
  margin-block: var(--space-4, 1rem);
}

/* Card parts (align with your card component) */
.card.blog-card .card__media { width: 100%; height: auto; display: block; border-radius: 6px; }
.card.blog-card .card__content { padding: var(--space-4, 1rem); }
.card.blog-card .card__title { margin: .5rem 0 .25rem; }
.card.blog-card .card__meta { color: var(--muted, #666); font-size: .9rem; }
.card.blog-card .card__excerpt { margin: .5rem 0 0; }
.card.blog-card .card__tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.tag { border: 1px solid var(--line, #e8e8e8); padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; }

/* Post layout */
.blog-post { max-width: 760px; margin: var(--space-7, 3rem) auto; }
.blog-post .post__media { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line, #e8e8e8); }
.blog-post .post__title { margin: .8rem 0 .4rem; line-height: 1.2; }
.blog-post .post__meta { color: var(--muted, #666); margin-bottom: 1rem; }

/* Markdown content */
.blog-post .content img { max-width: 100%; height: auto; }
.blog-post .content pre { overflow: auto; background: #0d1117; color: #c9d1d9; padding: 1rem; border-radius: 10px; }
.blog-post .content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Pagination */
.blog-pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 1.25rem 0 2rem; }
.pagination__info { padding: .6rem .4rem; }

/* --- Post layout like Medium --- */
.blog-post {
  max-width: 720px;
  margin: 3rem auto;
  padding: 0 1rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #1a1a1a;
}

.blog-post .post__media {
  width: 100%;
  border-radius: 12px;
  margin: 0 auto 2rem;
  display: block;
  object-fit: cover;
}

.blog-post .post__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  margin-bottom: .75rem;
}

.blog-post .post__meta {
  font-size: .95rem;
  color: #6b7280;
  margin-bottom: 2rem;
  text-align: left;
}

/* Body typography */
.blog-post .content h2,
.blog-post .content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}
.blog-post .content p {
  margin: 1rem 0;
}
.blog-post .content ul, 
.blog-post .content ol {
  margin: 1rem 0 1.5rem 1.5rem;
}
.blog-post .content li {
  margin: .4rem 0;
}
.blog-post .content blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1rem;
  font-style: italic;
  color: #555;
  margin: 1.5rem 0;
}
.blog-post .content img {
  display: block;
  max-width: 100%;
  margin: 2rem auto;
  border-radius: 12px;
}

.blog-post .content p:first-of-type::first-letter {
  font-size: 2.5rem;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: .2rem;
}

/* Sticky blog header */
.blog-header {
  position: sticky;
  top: 0; /* sticks under your site nav */
  z-index: 50; /* keep above blog cards */
  background: #fff; /* match site background */
  border-bottom: 1px solid var(--line, #e8e8e8);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Optional: subtle shadow when scrolling */
.blog-header.is-stuck {
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}