/* ---------------------------------------------------------------------------
   Blog
   ---------------------------------------------------------------------------
   Uses the site's namespaced tokens rather than the generic names, so a
   third-party script declaring --primary-color cannot recolour the blog the way
   the chat widget once recoloured the header.
   --------------------------------------------------------------------------- */

.blog-index,
.post {
  max-width: 1120px;
  /* The site header is position:fixed. Every other page clears it with
     `.section-container { margin-top: 132px }`; without the equivalent here the
     blog's h1 sat underneath it. */
  margin: 132px auto 0;
  padding: 8px 24px 72px;
}

/* ---------- index ---------- */

.blog-index__header {
  max-width: 680px;
  margin-bottom: 44px;
}

.blog-index__eyebrow,
.post__eyebrow,
.card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--siprtc-accent, #FD7E14);
  margin: 0 0 10px;
}

.blog-index h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--siprtc-primary, #070626);
  margin: 0 0 14px;
  text-wrap: balance;
}

.blog-index__lede {
  font-size: 18px;
  line-height: 1.6;
  color: #686868;
  margin: 0 0 16px;
  text-wrap: pretty;
}

.blog-index__feeds { font-size: 14px; color: #9A9AAB; margin: 0; }
.blog-index__feeds a { color: var(--siprtc-primary, #070626); font-weight: 600; text-decoration: none; border-bottom: 1px solid #D8D8E4; }
.blog-index__feeds a:hover { color: var(--siprtc-accent, #FD7E14); border-bottom-color: var(--siprtc-accent, #FD7E14); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.card {
  border: 1px solid #E4E4EC;
  border-radius: 14px;
  padding: 26px 24px 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card:hover {
  border-color: #D2D2E0;
  box-shadow: 0 10px 30px rgba(7, 6, 38, .07);
  transform: translateY(-2px);
}

.card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
  text-wrap: balance;
}

.card__title a { color: var(--siprtc-primary, #070626); text-decoration: none; }
.card__title a:hover { color: var(--siprtc-accent, #FD7E14); }

/* The whole card is clickable without nesting interactive elements. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

.card__excerpt {
  font-size: 15px;
  line-height: 1.62;
  color: #686868;
  margin: 0 0 18px;
  flex: 1;
}

.card__meta,
.post__meta {
  font-size: 13px;
  color: #9A9AAB;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- post ---------- */

.post__inner { max-width: 720px; margin: 0 auto; }

.crumbs {
  font-size: 13px;
  color: #9A9AAB;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.crumbs a { color: #686868; text-decoration: none; }
.crumbs a:hover { color: var(--siprtc-accent, #FD7E14); }

.post__header { margin-bottom: 32px; }

.post__header h1 {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--siprtc-primary, #070626);
  margin: 0 0 16px;
  text-wrap: balance;
}

.post__standfirst {
  font-size: 19px;
  line-height: 1.58;
  color: #4F4F5F;
  margin: 0 0 18px;
  text-wrap: pretty;
}

/* ---------- contents ---------- */

.toc {
  /* common.css carries a bare `nav { display: flex }`, which applies to every
     <nav> on the site. Left alone it puts the "On this page" label beside the
     list instead of above it. .crumbs wants flex and gets it from the same rule;
     this one does not. */
  display: block;
  border: 1px solid #E4E4EC;
  border-left: 3px solid var(--siprtc-accent, #FD7E14);
  border-radius: 0 10px 10px 0;
  background: #FAFAFC;
  padding: 18px 22px;
  margin: 0 0 36px;
}

.toc__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9A9AAB;
  margin: 0 0 10px;
}

.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.toc a { font-size: 14.5px; color: var(--siprtc-primary, #070626); text-decoration: none; }
.toc a:hover { color: var(--siprtc-accent, #FD7E14); text-decoration: underline; }

/* ---------- body copy ---------- */

.post__body {
  font-size: 17px;
  line-height: 1.72;
  color: #33333F;
}

.post__body p { margin: 0 0 20px; text-wrap: pretty; }

.post__body h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--siprtc-primary, #070626);
  margin: 44px 0 14px;
  scroll-margin-top: 110px;      /* clears the fixed header when jumping */
  text-wrap: balance;
}

.post__body h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--siprtc-primary, #070626);
  margin: 32px 0 10px;
  scroll-margin-top: 110px;
}

.post__body ul,
.post__body ol { margin: 0 0 22px; padding-left: 22px; }
.post__body li { margin-bottom: 9px; }

.post__body a {
  color: var(--siprtc-primary, #070626);
  text-decoration: none;
  border-bottom: 1px solid #C9C9D8;
}
.post__body a:hover { color: var(--siprtc-accent, #FD7E14); border-bottom-color: var(--siprtc-accent, #FD7E14); }

.post__body strong { font-weight: 700; color: var(--siprtc-primary, #070626); }

.post__body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em;
  background: #F1F1F7;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--siprtc-primary, #070626);
}

.post__body pre {
  background: #14132E;
  color: #D8D6EC;
  padding: 18px 20px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 22px;
}
.post__body pre code { background: none; color: inherit; padding: 0; font-size: 13.5px; }

.post__body blockquote {
  border-left: 3px solid #E0E0EA;
  margin: 0 0 22px;
  padding: 2px 0 2px 20px;
  color: #5F5F70;
}
.post__body blockquote p { margin: 0; }

.post__body hr { border: 0; border-top: 1px solid #E4E4EC; margin: 36px 0 24px; }

.post__body em { color: #4F4F5F; }

/* ---------- tags & CTA ---------- */

.post__tags {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post__tags li {
  font-size: 12.5px;
  font-weight: 600;
  color: #6E6E80;
  background: #F1F1F7;
  border-radius: 999px;
  padding: 5px 13px;
}

.post__cta {
  margin-top: 44px;
  padding: 30px 28px;
  border-radius: 14px;
  background: var(--siprtc-primary, #070626);
  color: #fff;
  text-align: center;
}

.post__cta h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.post__cta p { font-size: 15.5px; color: #B9B8CC; margin: 0 0 20px; }

.btn-post-cta {
  background: #fff;
  color: var(--siprtc-primary, #070626);
  border-radius: 999px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.btn-post-cta:hover { background: var(--siprtc-accent, #FD7E14); color: #fff; }

/* ---------- responsive ---------- */

@media (max-width: 767.98px) {
  .blog-index, .post { margin-top: 104px; padding: 8px 18px 52px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .post__body { font-size: 16.5px; }
  .post__body h2 { font-size: 22px; margin-top: 36px; }
  .post__cta { padding: 26px 20px; }
  .btn-post-cta { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Byline
   ---------------------------------------------------------------------------
   A named author with a role and a LinkedIn profile is worth more than a
   company name: it gives the Person entity on the About page something to
   attach to, which is what search engines use to judge whether a technical
   claim comes from someone who would know.
   --------------------------------------------------------------------------- */

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #EDECF4;
}

.byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px #E6E6EE;
}

.byline__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.byline__name a { color: var(--siprtc-primary, #070626); text-decoration: none; }
.byline__name a:hover { color: var(--siprtc-accent, #FD7E14); }
.byline__role { margin: 0; font-size: 13px; color: #9A9AAB; line-height: 1.4; }


/* ---------- card footer ---------- */

.card__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #EDECF4;
}

.card__author {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--siprtc-primary, #070626);
}

.card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px #E6E6EE;
}