/* Blog: articles imported from the Docs Library.
 *
 * Loaded only on /blog pages. Unlike /learn, whose articles are structured
 * data rendered by a template that knows their shape, these arrive as a block
 * of publisher HTML — so the body rules below have to cover whatever tags the
 * article happens to contain rather than a layout this site chose.
 */

.blog-index{max-width:900px;margin:0 auto;
  padding:clamp(40px,7vw,80px) clamp(16px,4vw,24px) clamp(64px,10vw,110px)}
.blog-index-head{border-bottom:1px solid var(--ink);
  padding-bottom:clamp(22px,4vw,32px);margin-bottom:clamp(28px,5vw,44px)}
.blog-index-head h1{font:700 clamp(30px,6.4vw,52px)/1.05 var(--sans);
  letter-spacing:-.04em;margin:12px 0 14px;text-wrap:balance}
.blog-index-head p{font-size:clamp(15px,3.6vw,17px);line-height:1.6;
  color:var(--muted);margin:0;max-width:60ch}

.blog-list{display:grid;gap:clamp(18px,3vw,26px)}
.blog-card{display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:clamp(16px,3vw,26px);align-items:start;border-bottom:1px solid var(--rule);
  padding-bottom:clamp(18px,3vw,26px)}
.blog-card:last-child{border-bottom:0}
.blog-card-image{display:block;aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper)}
.blog-card-image img{width:100%;height:100%;object-fit:cover}
.blog-card time{font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.blog-card h2{font:700 clamp(19px,4.4vw,25px)/1.2 var(--sans);letter-spacing:-.03em;
  margin:8px 0 10px;text-wrap:balance}
.blog-card h2 a{color:inherit}
.blog-card h2 a:hover{border-bottom:2px solid currentColor}
.blog-card p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 12px;max-width:62ch}
@media(max-width:640px){.blog-card{grid-template-columns:1fr}}

/* An empty blog is a real state on a new deployment; a heading with nothing
   under it reads as broken, so it points at what does exist. */
.blog-empty{border:1px dashed var(--rule);background:var(--paper);
  padding:clamp(26px,5vw,44px);text-align:center}
.blog-empty h2{font:700 clamp(20px,4.6vw,26px) var(--sans);letter-spacing:-.03em;margin:0 0 10px}
.blog-empty p{color:var(--muted);margin:0}

.blog-post{max-width:760px;margin:0 auto;
  padding:clamp(36px,6vw,72px) clamp(16px,4vw,24px) clamp(64px,10vw,110px)}
.blog-crumb{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.blog-post-head h1{font:700 clamp(30px,7vw,52px)/1.05 var(--sans);
  letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance}
.blog-standfirst{font:clamp(16px,4vw,20px)/1.55 var(--sans);color:#4f4d48;margin:0 0 18px;max-width:56ch}
.blog-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font:9px var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(24px,4vw,34px);padding-bottom:18px;border-bottom:1px solid var(--ink)}

/* The ratio is fixed here because the importer cannot know the image's real
   dimensions, and an image with no reserved space is the largest single source
   of layout shift on a page like this. */
.blog-cover{margin:0 0 clamp(26px,5vw,40px);aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule)}
.blog-cover img{width:100%;height:100%;object-fit:cover;display:block}

.blog-body{font:clamp(16px,4vw,18px)/1.75 Georgia,serif;color:#26241f}
.blog-body>*+*{margin-top:1.15em}
.blog-body h2{font:700 clamp(22px,5vw,30px)/1.2 var(--sans);letter-spacing:-.03em;margin-top:1.9em}
.blog-body h3{font:700 clamp(18px,4.2vw,22px)/1.3 var(--sans);letter-spacing:-.02em;margin-top:1.6em}
.blog-body h4{font:700 16px var(--sans);margin-top:1.4em}
.blog-body a{border-bottom:1px solid currentColor}
.blog-body ul,.blog-body ol{padding-left:1.3em}
.blog-body li+li{margin-top:.45em}
.blog-body blockquote{border-left:4px solid var(--lime);margin-left:0;padding:4px 0 4px 20px;color:#4f4d48}
.blog-body img{max-width:100%;height:auto;display:block}
.blog-body pre{overflow-x:auto;background:#171717;color:#f2f2f2;padding:16px;font:13px/1.6 var(--mono)}
.blog-body code{font:.88em var(--mono);background:#efece4;padding:1px 5px}
.blog-body pre code{background:none;padding:0;color:inherit}
.blog-body figure{margin-left:0;margin-right:0}
.blog-body figcaption{font:12px var(--sans);color:var(--muted);margin-top:8px}
/* A wide table scrolls inside itself rather than widening the whole page. */
.blog-body table{width:100%;border-collapse:collapse;font:14px var(--sans);display:block;overflow-x:auto}
.blog-body th,.blog-body td{border:1px solid var(--rule);padding:9px 11px;text-align:left}

.blog-cta{margin-top:clamp(40px,7vw,64px);border:1px solid var(--ink);
  background:var(--lime);padding:clamp(22px,5vw,34px)}
.blog-cta h2{font:700 clamp(21px,5vw,30px)/1.12 var(--sans);letter-spacing:-.03em;
  margin:0 0 12px;text-wrap:balance}
.blog-cta p{font-size:clamp(14.5px,3.7vw,15.5px);line-height:1.65;margin:0 0 20px;max-width:52ch}
.blog-cta-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.blog-cta .button-dark{background:var(--ink);color:#fff;border-color:var(--ink);min-height:48px}
@media(max-width:520px){
  .blog-cta-actions{flex-direction:column;align-items:stretch}
  .blog-cta-actions .button-dark{justify-content:center}
  .blog-cta-actions .text-link{text-align:center}
}