/* Blog extensions on top of templates.css */

.blog-card__img{aspect-ratio:400/300}
.blog-card__date{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}

.blog-hero__cover{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--lav-2);width:400px;max-width:100%;justify-self:end}
.blog-cover-img{width:400px;height:300px;max-width:100%;display:block;object-fit:cover}
.blog-cover-placeholder{width:400px;height:300px;max-width:100%}

.blog-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted);font-weight:600}

.blog-prose{font-size:16px;line-height:1.7;color:var(--ink-2)}
.blog-prose h2,.blog-prose h3{color:var(--ink);margin:1.4em 0 .6em;font-weight:800}
.blog-prose p{margin:0 0 1em}
.blog-prose ul,.blog-prose ol{margin:0 0 1em;padding-left:1.4em}
.blog-prose a{color:var(--indigo)}
.blog-prose img{max-width:100%;border-radius:var(--r);margin:1em 0}
.blog-prose pre{background:var(--lav-2);padding:14px 16px;border-radius:var(--r);overflow:auto;font-size:13px}
.blog-prose code{font-size:.92em}

/* Markdown tables */
.blog-prose table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  margin:0 0 1.35em;
  font-size:14px;
  line-height:1.45;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.blog-prose thead th{
  font-weight:700;
  color:var(--ink);
  background:var(--lav-2);
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.blog-prose tbody td,
.blog-prose tbody th{
  text-align:left;
  vertical-align:top;
  padding:10px 14px;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.blog-prose tbody tr:last-child td,
.blog-prose tbody tr:last-child th{border-bottom:0}
.blog-prose tbody tr:nth-child(even) td{background:rgba(7,17,43,.03)}
.blog-prose tbody tr:hover td{background:var(--lav-2)}

/* Horizontal scroll on narrow screens without breaking table layout */
.blog-prose{overflow-wrap:break-word}
@media (max-width:640px){
  .blog-prose table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


.blog-body{margin-top:40px}

/* Homepage blog section */
.home-blog-section{padding:72px 0 40px}
.home-blog-grid{margin-top:28px}
.home-blog-more{display:flex;justify-content:center;margin-top:32px}