/*
  Blog listing + single-post styles. Loaded only on /blog routes.
  Namespaced under .xrt-blog- so nothing here can leak into, or be affected
  by, questionnaire-v6.html, Leaflet, or the header/footer (layout.css).
  Colors/fonts/radii reuse the --xrt-* custom properties defined on .xrt-scope
  in layout.css (same palette as the header/footer/hero) — no new tokens.
*/

.xrt-blog-page {
  font-family: var(--xrt-font-b);
  color: var(--xrt-ink);
}

.xrt-blog-page,
.xrt-blog-page * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------- */
/* Shared: page heading                                                    */
/* ---------------------------------------------------------------------- */

.xrt-blog-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 8px;
}

.xrt-blog-head__eyebrow {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xrt-teal);
  margin: 0 0 10px;
}

.xrt-blog-head__title {
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--xrt-ink);
  margin: 0 0 12px;
}

.xrt-blog-head__sub {
  font-size: 15px;
  color: #5b6b63;
  max-width: 620px;
  margin: 0;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* Card grid (listing page + "recent posts" on single-post page)          */
/* ---------------------------------------------------------------------- */

.xrt-blog-grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 16px;
}

.xrt-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.xrt-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--xrt-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .xrt-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--xrt-shadow-md);
  }
}

.xrt-blog-card:focus-visible {
  outline: 2px solid var(--xrt-teal);
  outline-offset: 2px;
}

.xrt-blog-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--xrt-cream);
  overflow: hidden;
  flex-shrink: 0;
}

.xrt-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xrt-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
  gap: 10px;
}

.xrt-blog-card__badge {
  align-self: flex-start;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xrt-lime-ink);
  background: var(--xrt-lime);
  border-radius: 999px;
  padding: 4px 10px;
}

.xrt-blog-card__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--xrt-ink);
  margin: 0;
  /* Clamp to 2 lines so titles of varying length don't unbalance card height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xrt-blog-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #5b6b63;
  margin: 0;
  flex: 1 1 auto;
  /* Truncate to 3 lines with an ellipsis, regardless of source length. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xrt-blog-card__date {
  font-size: 12.5px;
  color: #8b968f;
  margin: 4px 0 0;
}

/* Compact variant used for the "Recent posts" row on the single-post page. */
.xrt-blog-card--compact .xrt-blog-card__title {
  font-size: 15.5px;
}

.xrt-blog-card--compact .xrt-blog-card__excerpt {
  display: none;
}

.xrt-blog-grid--empty {
  color: #6b7873;
  font-size: 15px;
  grid-column: 1 / -1;
  padding: 24px 0;
}

/* ---------------------------------------------------------------------- */
/* Infinite scroll loading / end-of-list states                           */
/* ---------------------------------------------------------------------- */

.xrt-blog-loadstate {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 0;
  font-size: 14px;
  color: #5b6b63;
}

.xrt-blog-loadstate.is-visible {
  display: flex;
}

.xrt-blog-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--xrt-border);
  border-top-color: var(--xrt-teal);
  animation: xrt-blog-spin 0.7s linear infinite;
}

@keyframes xrt-blog-spin {
  to {
    transform: rotate(360deg);
  }
}

/* No-JS / crawlable pagination fallback links (also shown if JS never kicks in). */
.xrt-blog-pager {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 56px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.xrt-blog-pager__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-sm);
  color: var(--xrt-ink);
  text-decoration: none;
  font-family: var(--xrt-font-h);
  font-weight: 600;
  font-size: 14px;
}

.xrt-blog-pager__link:hover {
  background: var(--xrt-cream);
}

.xrt-blog-pager__spacer {
  flex: 1 1 auto;
}

/* Once JS takes over infinite-scrolling, hide the fallback pager — it stays
   in the markup (and in the DOM for no-JS/crawler visits) either way. */
.xrt-blog-grid[data-xrt-js-active] ~ .xrt-blog-pager {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Single post page                                                        */
/* ---------------------------------------------------------------------- */

.xrt-blog-post {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 0;
}

.xrt-blog-breadcrumb {
  font-size: 13px;
  color: #8b968f;
  margin: 0 0 20px;
}

.xrt-blog-breadcrumb a {
  color: #8b968f;
  text-decoration: none;
}

.xrt-blog-breadcrumb a:hover {
  color: var(--xrt-teal);
}

.xrt-blog-breadcrumb__current {
  color: #5b6b63;
}

.xrt-blog-post__hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--xrt-r-lg);
  overflow: hidden;
  background: var(--xrt-cream);
  margin-bottom: 24px;
}

.xrt-blog-post__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xrt-blog-post__badge {
  display: inline-flex;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xrt-lime-ink);
  background: var(--xrt-lime);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

.xrt-blog-post__title {
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--xrt-ink);
  margin: 0 0 16px;
  max-width: 900px;
}

.xrt-blog-post__byline {
  font-size: 13.5px;
  color: #8b968f;
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xrt-blog-post__byline-sep {
  color: var(--xrt-border);
}

/* Content layout: comfortable reading column + optional TOC sidebar. */
.xrt-blog-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.xrt-blog-post__layout--with-toc {
  grid-template-columns: 240px minmax(0, 760px);
}

.xrt-blog-toc {
  order: -1;
}

.xrt-blog-post__layout--with-toc .xrt-blog-toc {
  position: sticky;
  top: 88px;
  order: 0;
}

.xrt-blog-toc__box {
  border: 1px solid var(--xrt-border);
  border-radius: var(--xrt-r-md);
  background: var(--xrt-cream);
  padding: 16px 18px;
}

.xrt-blog-toc__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--xrt-teal);
  margin: 0 0 10px;
}

.xrt-blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xrt-blog-toc__link {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: #4a564f;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  border-radius: 6px;
  padding: 2px 8px;
}

.xrt-blog-toc__link:hover {
  background: #ffffff;
  color: var(--xrt-teal);
}

.xrt-blog-toc__link--h3 {
  padding-left: 20px;
  font-size: 13px;
  color: #6b7873;
}

/* Collapsible <details> version of the TOC, shown above the content on
   touch/mobile widths instead of the sticky sidebar. */
.xrt-blog-toc--mobile {
  display: none;
}

.xrt-blog-toc__summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xrt-teal);
}

.xrt-blog-toc--mobile .xrt-blog-toc__list {
  margin-top: 8px;
}

.xrt-blog-post__content {
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.75;
  color: #24322c;
}

.xrt-blog-post__content h2 {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--xrt-ink);
  margin: 36px 0 14px;
  scroll-margin-top: 88px;
}

.xrt-blog-post__content h3 {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 20px;
  color: var(--xrt-ink);
  margin: 28px 0 12px;
  scroll-margin-top: 88px;
}

.xrt-blog-post__content p {
  margin: 0 0 18px;
}

.xrt-blog-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--xrt-r-md);
  display: block;
  margin: 20px 0;
}

.xrt-blog-post__content ul,
.xrt-blog-post__content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.xrt-blog-post__content li {
  margin-bottom: 6px;
}

/* "Key takeaways" callout — authors opt in per-post by writing
   <div class="xrt-key-takeaways">...</div> directly in the post HTML. */
.xrt-key-takeaways {
  background: var(--xrt-cream);
  border-left: 4px solid var(--xrt-lime);
  border-radius: 0 var(--xrt-r-md) var(--xrt-r-md) 0;
  padding: 18px 22px;
  margin: 28px 0;
}

.xrt-key-takeaways__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xrt-teal);
  margin: 0 0 10px;
}

.xrt-key-takeaways ul {
  margin: 0;
  padding-left: 20px;
}

.xrt-key-takeaways li {
  margin-bottom: 6px;
}

.xrt-key-takeaways p:last-child {
  margin-bottom: 0;
}

/* CTA box — authors opt in with <div class="xrt-blog-cta">...</div>.
   Buttons visually match .xrt-nav__cta / v6's .cta (not new button styles),
   redeclared here (not reused directly) so header-only responsive rules
   in layout.css can't hide/alter them inside blog content. */
.xrt-blog-cta {
  background: var(--xrt-deep);
  border-radius: var(--xrt-r-lg);
  padding: 28px 26px;
  margin: 32px 0;
  color: var(--xrt-on-deep);
}

.xrt-blog-cta__title {
  font-family: var(--xrt-font-h);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--xrt-on-deep);
}

.xrt-blog-cta__text {
  font-size: 14.5px;
  color: var(--xrt-on-deep-muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.xrt-blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.xrt-blog-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.xrt-blog-cta__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.xrt-blog-cta__btn--primary {
  background: var(--xrt-lime);
  color: var(--xrt-lime-ink);
}

.xrt-blog-cta__btn--secondary {
  background: transparent;
  color: var(--xrt-on-deep);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------------------- */
/* Recent posts (bottom of single-post page)                              */
/* ---------------------------------------------------------------------- */

.xrt-blog-recent {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 40px 24px 64px;
  border-top: 1px solid var(--xrt-border);
}

.xrt-blog-recent__title {
  font-family: var(--xrt-font-h);
  font-weight: 700;
  font-size: 20px;
  color: var(--xrt-ink);
  margin: 0 0 20px;
}

.xrt-blog-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* ---------------------------------------------------------------------- */
/* Breakpoints                                                             */
/* Mobile: <480px  Large mobile: 480-767px  Tablet: 768-1199px  Desktop: 1200px+ */
/* ---------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .xrt-blog-grid,
  .xrt-blog-recent__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xrt-blog-post__layout--with-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sidebar TOC doesn't fit below desktop width — swap to the collapsible
     version above the content instead, per spec (never a floating sidebar
     on tablet/mobile). */
  .xrt-blog-post__layout--with-toc .xrt-blog-toc {
    display: none;
  }

  .xrt-blog-toc--mobile {
    display: block;
    margin-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .xrt-blog-grid,
  .xrt-blog-recent__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xrt-blog-head,
  .xrt-blog-grid-wrap,
  .xrt-blog-post,
  .xrt-blog-pager,
  .xrt-blog-recent {
    padding-left: 16px;
    padding-right: 16px;
  }

  .xrt-blog-cta {
    padding: 22px 18px;
  }

  .xrt-blog-cta__actions {
    flex-direction: column;
  }

  .xrt-blog-cta__btn {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .xrt-blog-head {
    padding-top: 32px;
  }

  .xrt-blog-post__hero {
    aspect-ratio: 4 / 3;
  }
}