/* ====================================================================
   SAI blog - post page styles
   Loaded only on post pages via default.hbs.
   Previously this lived in an inline <style> block inside post.hbs,
   which meant it was re-downloaded on every article view.
   ==================================================================== */

/* -- BRAND TOKENS ---------------------------------------------------
   All colour and type tokens now live in assets/css/sai-brand.css,
   sourced from SAI Brand Book v1.1. Nothing is redefined here so the
   two files cannot drift apart.
   ------------------------------------------------------------------ */

/* -- READING PROGRESS ------------------------------------------------ */
.sai-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.sai-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sai-orange);
  transition: width .1s linear;
}

/* -- BREADCRUMBS ----------------------------------------------------- */
.sai-breadcrumbs { padding: 12px 0 0; margin-bottom: 8px; }
.sai-breadcrumbs__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; list-style: none; margin: 0; padding: 0;
  font-size: 13px; color: var(--sai-muted);
}
.sai-breadcrumbs__list a { color: var(--sai-muted); text-decoration: none; }
.sai-breadcrumbs__list a:hover { color: var(--sai-orange); text-decoration: underline; opacity: 1; }
.sai-breadcrumbs__sep { color: var(--sai-light); }
.sai-breadcrumbs__list li[aria-current="page"] { color: var(--sai-text); font-weight: 500; }

/* -- BYLINE ----------------------------------------------------------
   Sits inside the content column, under the feature image and directly
   above the first paragraph. Left-aligned to match the body copy.
   ------------------------------------------------------------------ */
.sai-byline {
  background: var(--sai-off-white);
  border: 1px solid var(--sai-border);
  border-radius: var(--sai-radius);
  padding: 12px 18px;
  margin: 0 0 32px;
}

.sai-byline__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sai-muted);
}

/* The avatar slot is always rendered, with a placeholder when an author
   has no photo, so adding author photographs later for E-E-A-T does not
   change the height of this bar or shift the article down. */
.sai-byline__avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--sai-border);
  background: #fff;
}
.sai-byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.sai-byline__avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sai-orange);
  background: var(--sai-orange-light);
}

.sai-byline__text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.sai-byline__item { white-space: nowrap; }
.sai-byline__item time { font-weight: 500; color: var(--sai-text); }

.sai-byline__link {
  color: var(--sai-orange);
  font-weight: 600;
  text-decoration: none;
}
.sai-byline__link:hover { color: var(--sai-orange-dark); text-decoration: underline; opacity: 1; }

.sai-byline__sep { color: var(--sai-light); }

@media (max-width: 600px) {
  .sai-byline { padding: 12px 14px; margin-bottom: 24px; }
  .sai-byline__inner { gap: 12px; font-size: 14px; }
  .sai-byline__avatar { width: 40px; height: 40px; }
  /* Pipes read badly once the row wraps onto three lines. */
  .sai-byline__sep { display: none; }
  .sai-byline__item { white-space: normal; }
  .sai-byline__item:not(:last-child)::after {
    content: "\00b7";
    margin-left: 8px;
    color: var(--sai-light);
  }
}


/* -- ARTICLE HEADER WIDTH -------------------------------------------
   The stock .gh-canvas centres a 720px column inside a 1200px container.
   That left the title stranded in the middle of the page with a large
   dead area to its right, and its left edge not lining up with the
   contents rail below. These blocks now share the post layout's own
   container and left edge, so there is one clean vertical line down the
   page: breadcrumbs, title, contents rail. The title gets a wider
   measure so long headlines wrap to two lines instead of three.
   ------------------------------------------------------------------ */
.sai-breadcrumbs.gh-canvas,
.gh-article-header.gh-canvas,
.sai-author-bio.gh-canvas,
.gh-comments.gh-canvas {
  display: block;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* Header stack is centred: breadcrumbs, tag, title, standfirst, byline
   and share row all sit on the page's centre line. The article body
   below stays left-aligned, which is correct for long-form reading. */
.sai-breadcrumbs.gh-canvas,
.gh-article-header.gh-canvas {
  text-align: center;
}

.sai-breadcrumbs__list { justify-content: center; }

.gh-article-header .gh-article-title {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
}
.gh-article-header .gh-article-excerpt {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Author bio stays left-aligned: it is a card, not part of the header. */
.sai-author-bio__card { max-width: 1020px; }

/* -- THREE-COLUMN LAYOUT --------------------------------------------- */
.sai-post-layout {
  display: grid;
  /* Side columns are the same width so the centre column lines up with the
     centred article header above it. */
  grid-template-columns: 260px minmax(0, 720px) 260px;
  gap: 40px;
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 0 40px;
  align-items: start;
  justify-content: center;
}

/* -- TABLE OF CONTENTS (desktop) ------------------------------------- */
.sai-toc {
  position: sticky;
  /* Clears the sticky header. --sai-nav-h is measured at runtime. */
  top: calc(var(--sai-nav-h, 100px) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--sai-nav-h, 100px) - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--sai-border) transparent;
}
.sai-toc::-webkit-scrollbar { width: 4px; }
.sai-toc::-webkit-scrollbar-track { background: transparent; }
.sai-toc::-webkit-scrollbar-thumb { background: var(--sai-border); border-radius: 4px; }
.sai-toc__title {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sai-muted); margin: 0 0 10px;
}
.sai-toc__nav { display: flex; flex-direction: column; gap: 2px; }
.sai-toc__nav a {
  display: block; font-size: 14px; line-height: 1.4;
  color: var(--sai-body); text-decoration: none;
  padding: 6px 8px 6px 14px;
  border-left: 2px solid var(--sai-border);
  border-radius: 0 4px 4px 0;
  transition: color .15s, border-color .15s, background .15s;
}
.sai-toc__nav a:hover,
.sai-toc__nav a.is-active {
  color: var(--sai-orange-dark); background: var(--sai-orange-light);
  border-left-color: var(--sai-orange); opacity: 1;
}
.sai-toc__nav a.is-active { font-weight: 600; }
.sai-toc__nav a.is-sub { padding-left: 26px; font-size: 13px; color: var(--sai-muted); }
.sai-toc__nav a.is-sub--hidden { display: none; }

/* -- FEATURE IMAGE (inside the content column) ----------------------- */
/* The feature image sits at the top of the content column rather than
   spanning the full canvas, so the TOC and CTA rails run alongside it and
   the article body starts much higher up the page. */
.gh-content > .gh-article-image {
  margin: 0 0 32px;
  border-radius: 10px;
  overflow: hidden;
}
.gh-content > .gh-article-image img {
  width: 100%;
  display: block;
  border-radius: 10px;
}
.gh-content > .gh-article-image figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sai-muted);
  text-align: center;
}

/* -- TABLE OF CONTENTS (tablet / mobile) ----------------------------- */
.sai-toc-mobile {
  display: none;
  border: 1px solid var(--sai-border);
  border-radius: var(--sai-radius);
  background: var(--sai-off-white);
  padding: 4px 16px;
  margin: 0 0 28px;
}
.sai-toc-mobile__summary {
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--sai-text);
  padding: 12px 0; display: flex; align-items: center; justify-content: space-between;
}
.sai-toc-mobile__summary::-webkit-details-marker { display: none; }
.sai-toc-mobile__summary::after {
  content: "+"; font-size: 20px; font-weight: 400; color: var(--sai-muted); line-height: 1;
}
.sai-toc-mobile[open] .sai-toc-mobile__summary::after { content: "\2013"; }
.sai-toc-mobile__nav { display: flex; flex-direction: column; padding: 0 0 12px; }
.sai-toc-mobile__nav a {
  font-size: 14.5px; line-height: 1.45; color: var(--sai-body);
  text-decoration: none; padding: 7px 0;
  border-bottom: 1px solid var(--sai-border);
}
.sai-toc-mobile__nav a:last-child { border-bottom: none; }
.sai-toc-mobile__nav a.is-sub { padding-left: 16px; font-size: 14px; color: var(--sai-muted); }

/* -- SIDEBAR CTA CARD ------------------------------------------------ */
.sai-cta-col { position: sticky; top: calc(var(--sai-nav-h, 100px) + 24px); align-self: start; }
.sai-cta-card {
  background: #fff;
  border: 1px solid var(--sai-border);
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 12px;
}
.sai-cta-card__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sai-orange); margin: 0;
}
.sai-cta-card__heading {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  color: var(--sai-text); margin: 0;
}
.sai-cta-card__body { font-size: 15px; color: var(--sai-body); margin: 0; line-height: 1.55; }

/* -- SHARED BUTTONS -------------------------------------------------- */
.sai-btn {
  display: inline-block; text-decoration: none; text-align: center;
  border-radius: 6px; font-weight: 600; font-size: 15px; padding: 11px 20px;
  transition: background .15s ease, transform .1s ease;
}
.sai-btn--primary { background: var(--sai-orange); color: #fff; }
.sai-btn--primary:hover { background: var(--sai-orange-dark); transform: translateY(-1px); opacity: 1; color: #fff; }
.sai-btn--ghost { background: transparent; color: var(--sai-orange); padding: 6px 0; font-size: 14px; }
.sai-btn--ghost:hover { color: var(--sai-orange-dark); opacity: 1; }

/* -- INLINE (MID-ARTICLE) CTA ---------------------------------------- */
.sai-inline-cta {
  background: linear-gradient(135deg, var(--sai-orange-light) 0%, var(--sai-orange-mid) 100%);
  border: 1px solid var(--sai-orange-mid); border-radius: var(--sai-radius);
  padding: 24px 28px; margin: 36px 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sai-inline-cta__copy { flex: 1; min-width: 220px; }
.sai-inline-cta__copy strong { display: block; font-size: 17px; margin-bottom: 6px; color: var(--sai-text); }
.sai-inline-cta__copy p { font-size: 15px; color: var(--sai-body); margin: 0; line-height: 1.55; }

/* The pre-FAQ CTA is teal so the two in-body CTAs read as different
   moments rather than the same button twice. Secondary Teal is the
   Brand Book's balanced, trustworthy counterpart to Primary Orange. */
.sai-inline-cta--faq {
  background: linear-gradient(135deg, var(--sai-teal-light) 0%, var(--sai-teal-mid) 100%);
  border-color: var(--sai-teal-mid);
}
.sai-inline-cta--faq .sai-btn--primary { background: var(--sai-teal); }
.sai-inline-cta--faq .sai-btn--primary:hover { background: var(--sai-teal-dark); }

/* -- BOTTOM CTA BANNER ----------------------------------------------- */
.sai-bottom-cta {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--sai-orange) 0%, var(--sai-orange-deep) 100%);
  margin-top: 40px;
}
.sai-bottom-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 40px;
}
.sai-bottom-cta__heading { font-size: 27px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.25; }
.sai-bottom-cta__body { font-size: 16px; color: rgba(255,255,255,.9); margin: 0; max-width: 520px; line-height: 1.55; }
.sai-bottom-cta__actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex-shrink: 0; }
.sai-btn--white { background: #fff; color: var(--sai-orange-dark); padding: 14px 28px; font-size: 16px; white-space: nowrap; }
.sai-btn--white:hover { background: var(--sai-orange-light); opacity: 1; transform: translateY(-1px); color: var(--sai-orange-dark); }
.sai-btn--white-ghost { background: transparent; color: rgba(255,255,255,.9); padding: 8px 0; font-size: 14px; }
.sai-btn--white-ghost:hover { color: #fff; opacity: 1; }

/* -- AUTHOR BIO ------------------------------------------------------ */
.sai-author-bio { margin: 32px auto 0; border-top: 1px solid var(--sai-border); padding-top: 28px; padding-bottom: 32px; }
.sai-author-bio__card { display: flex; gap: 20px; align-items: flex-start; }
.sai-author-bio__avatar {
  display: block; width: 72px; height: 72px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--sai-border);
}
.sai-author-bio__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.sai-author-bio__header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sai-author-bio__name { font-size: 17px; font-weight: 700; color: var(--sai-text); text-decoration: none; }
.sai-author-bio__name:hover { color: var(--sai-orange); }
.sai-author-bio__social { color: var(--sai-muted); display: flex; align-items: center; }
.sai-author-bio__social:hover { color: var(--sai-orange); opacity: 1; }
.sai-author-bio__text { font-size: 15px; color: var(--sai-body); line-height: 1.6; margin: 0 0 10px; }
.sai-author-bio__more { font-size: 14px; color: var(--sai-orange); text-decoration: none; font-weight: 500; }
.sai-author-bio__more:hover { text-decoration: underline; }

/* -- CALLOUT BOXES --------------------------------------------------- */
.sai-takeaways {
  background: var(--sai-orange-light); border-left: 4px solid var(--sai-orange);
  border-radius: 0 var(--sai-radius) var(--sai-radius) 0; padding: 20px 24px; margin: 0 0 32px;
}
.sai-takeaways__title {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sai-orange-dark); margin: 0 0 10px;
}
.sai-callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--sai-radius); margin: 24px 0; font-size: 15px; line-height: 1.55; }
.sai-callout--tip  {
  background: var(--sai-teal-light);
  background: color-mix(in srgb, var(--sai-highlight-2) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--sai-highlight-2) 35%, #fff);
}
.sai-callout--def  { background: var(--sai-off-white); border: 1px solid var(--sai-border); }
.sai-callout--stat { background: var(--sai-orange-light); border: 1px solid var(--sai-orange-mid); }

/* -- FAQ ------------------------------------------------------------- */
.sai-faq { border-top: 2px solid var(--sai-border); margin-top: 40px; padding-top: 8px; }
.sai-faq__item { border-bottom: 1px solid var(--sai-border); padding: 20px 0; }
.sai-faq__item:last-child { border-bottom: none; }
.sai-faq__item h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; }
.sai-faq__item p  { font-size: 15px; color: var(--sai-body); margin: 0; line-height: 1.6; }

/* -- RELATED POSTS --------------------------------------------------- */
.sai-related { padding: 56px 0; background: var(--sai-off-white); margin-top: 0; border-top: 1px solid var(--sai-border); }
.sai-related__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sai-related__title { font-size: 22px; font-weight: 700; margin-bottom: 28px; }
.sai-related__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sai-related__feed .gh-card-title { font-size: 17px; line-height: 1.35; }
.sai-related__feed .gh-card-excerpt {
  font-size: 14.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* -- LATEST POSTS SIDEBAR WIDGET ------------------------------------- */
.sai-sidebar-widget {
  background: #fff;
  border: 1px solid var(--sai-border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.sai-sidebar-widget__title {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sai-muted); margin: 0 0 12px;
}
.sai-latest-post {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--sai-border);
  text-decoration: none; color: inherit;
}
.sai-latest-post:first-of-type { padding-top: 0; }
.sai-latest-post:last-of-type { border-bottom: none; padding-bottom: 0; }
.sai-latest-post__thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.sai-latest-post__thumb-placeholder {
  width: 64px; height: 64px; border-radius: 6px; flex-shrink: 0;
  background: var(--sai-orange-light); display: flex;
  align-items: center; justify-content: center;
}
.sai-latest-post__info { flex: 1; min-width: 0; }
.sai-latest-post__title {
  font-size: 14.5px; font-weight: 600;
  color: var(--sai-text); line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sai-latest-post__date { display: block; font-size: 12.5px; color: var(--sai-muted); }
.sai-latest-post:hover .sai-latest-post__title { color: var(--sai-orange); }

/* -- RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1360px) {
  .sai-post-layout { grid-template-columns: 240px minmax(0, 700px) 240px; gap: 32px; padding: 0 28px; }
  .sai-breadcrumbs.gh-canvas,
  .gh-article-header.gh-canvas,
  .sai-author-bio.gh-canvas,
  .gh-comments.gh-canvas { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 1180px) {
  /* Drop the right rail, keep the TOC. The CTA is preserved by the
     auto-injected mid-article CTA and the bottom banner. */
  .sai-post-layout { grid-template-columns: 220px minmax(0, 760px); gap: 32px; }
  .sai-cta-col { display: none; }
}

@media (max-width: 900px) {
  .sai-post-layout { grid-template-columns: 1fr; padding: 0 20px; }
  .sai-breadcrumbs.gh-canvas,
  .gh-article-header.gh-canvas,
  .sai-author-bio.gh-canvas,
  .gh-comments.gh-canvas { padding-left: 20px; padding-right: 20px; }
  .sai-toc { display: none; }
  .sai-toc-mobile { display: block; }
  .sai-bottom-cta__inner { padding: 28px 24px; }
  .sai-bottom-cta__heading { font-size: 23px; }
  .sai-bottom-cta__actions { width: 100%; }
  .sai-btn--white { width: 100%; }
  .sai-related { padding: 40px 0; }
  .sai-related__inner { padding: 0 20px; }
  .sai-related__feed { grid-template-columns: 1fr; gap: 24px; }
  .gh-content > .gh-article-image { margin-bottom: 24px; }
  .sai-inline-cta { padding: 20px; }
  .sai-inline-cta .sai-btn--primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sai-progress__bar, .sai-btn { transition: none; }
}