/* ══════════════════════════════════════════════════════════════════════════
   URLdn Blog Design System
   Matches marketing & product design tokens (Space Grotesk, Inter Tight, JetBrains Mono)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Progress Bar ───────────────────────────────────────────────────────── */
#progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 9999;
}

#progress-bar {
  height: 100%;
  background: var(--blue, #0075DE);
  width: 0%;
  transition: width 0.1s ease;
}

/* ── Blog Hero ──────────────────────────────────────────────────────────── */
.blog-hero {
  padding: 64px 0 40px;
  text-align: center;
  background: var(--canvas, #FFFFFF);
}

.blog-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-hero-title {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0 0 16px;
}

.blog-hero-title-muted {
  color: var(--ink-muted, rgb(109, 109, 109));
  font-weight: 500;
}

.blog-hero-subhead {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin: 0 auto;
  max-width: 600px;
}

/* ── Category Filter Pills ──────────────────────────────────────────────── */
.blog-categories-section {
  padding: 0 0 40px;
  background: var(--canvas, #FFFFFF);
}

.blog-categories-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--warm-white, #F7F7F8);
  color: var(--ink-muted, rgb(109, 109, 109));
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  border: none;
}

.blog-cat-pill:hover {
  background: #EAEAEA;
  color: var(--ink, rgb(41, 41, 41));
}

.blog-cat-pill--active {
  background: var(--blue, #0075DE) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.blog-cat-pill--active:hover {
  background: var(--blue-pressed, #005BAB) !important;
}

/* ── Featured Post (Large Card) ─────────────────────────────────────────── */
.blog-featured-section {
  padding: 0 0 48px;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--warm-white, #F7F7F8);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: none;
  transition: transform 0.15s ease;
}

.blog-featured-card:hover {
  transform: translateY(-2px);
}

.blog-featured-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  background: #E5E7EB;
}

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

.blog-featured-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-tag-mono {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue, #0075DE);
  margin-bottom: 12px;
  display: inline-block;
}

.blog-tag-mono--amber {
  color: var(--amber, #F59E0B);
}

.blog-featured-title {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.4px;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0 0 14px;
}

.blog-featured-excerpt {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin: 0 0 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono), monospace;
  font-size: 12px;
  color: var(--ink-subtle, rgb(140, 140, 140));
  margin-top: auto;
}

/* ── Post Grid ──────────────────────────────────────────────────────────── */
.blog-posts-section {
  padding: 0 0 80px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  background: var(--warm-white, #F7F7F8);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: none;
  transition: transform 0.15s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
}

.blog-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #E5E7EB;
  position: relative;
}

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

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-title {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}

.blog-card-excerpt {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
}

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--warm-white, #F7F7F8);
  color: var(--ink, rgb(41, 41, 41));
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  border: none;
}

.blog-page-btn:hover:not(.blog-page-btn--disabled) {
  background: #EAEAEA;
}

.blog-page-btn--active {
  background: var(--blue, #0075DE) !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

.blog-page-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.blog-page-ellipsis {
  font-family: var(--font-mono), monospace;
  color: var(--ink-muted, rgb(109, 109, 109));
  padding: 0 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE / POST SLUG PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.article-section {
  padding: 48px 0 80px;
  background: var(--canvas, #FFFFFF);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: start;
}

.article-layout--full {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin: 0 auto;
}

.article-main-col {
  max-width: 760px;
}

/* Breadcrumb */
.article-breadcrumb {
  font-family: var(--font-mono), monospace;
  font-size: 12.5px;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.article-breadcrumb a {
  color: var(--ink-muted, rgb(109, 109, 109));
  text-decoration: none;
}

.article-breadcrumb a:hover {
  color: var(--blue, #0075DE);
  text-decoration: underline;
}

.article-breadcrumb .sep {
  color: var(--ink-subtle, rgb(140, 140, 140));
}

.article-breadcrumb .current {
  color: var(--ink, rgb(41, 41, 41));
  font-weight: 500;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Article Header */
.article-header {
  margin-bottom: 28px;
}

.article-h1 {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.6px;
  color: var(--ink, rgb(41, 41, 41));
  margin: 12px 0 20px;
}

.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline, #E9E9E7);
  flex-wrap: wrap;
  gap: 16px;
}

.article-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill, 9999px);
  object-fit: cover;
  background: var(--warm-white, #F7F7F8);
}

.article-author-name {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, rgb(41, 41, 41));
  text-decoration: none;
}

.article-author-name:hover {
  color: var(--blue, #0075DE);
}

.article-meta-timing {
  font-family: var(--font-mono), monospace;
  font-size: 12.5px;
  color: var(--ink-muted, rgb(109, 109, 109));
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Featured image in post */
.article-cover {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0 36px;
  background: var(--warm-white, #F7F7F8);
}

.article-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* ── Article Body Prose ─────────────────────────────────────────────────── */
.article-prose {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink, rgb(41, 41, 41));
}

.article-prose p {
  margin-bottom: 22px;
}

.article-prose h2 {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ink, rgb(41, 41, 41));
  margin: 44px 0 16px;
  padding-top: 8px;
}

.article-prose h3 {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, rgb(41, 41, 41));
  margin: 32px 0 12px;
}

.article-prose h4 {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, rgb(41, 41, 41));
  margin: 24px 0 10px;
}

.article-prose a {
  color: var(--blue, #0075DE);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-prose a:hover {
  color: var(--blue-pressed, #005BAB);
}

.article-prose ul,
.article-prose ol {
  margin: 0 0 24px 24px;
  padding: 0;
}

.article-prose li {
  margin-bottom: 8px;
  line-height: 1.65;
}

.article-prose blockquote {
  border-left: 3px solid var(--blue, #0075DE);
  padding-left: 20px;
  margin: 28px 0;
  font-style: italic;
  color: var(--ink-muted, rgb(109, 109, 109));
  font-size: 17px;
  background: transparent;
}

.article-prose pre {
  background: #18181B;
  color: #E4E4E7;
  border-radius: 12px;
  padding: 18px 22px;
  font-family: var(--font-mono), monospace;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 24px 0;
  border: none;
}

.article-prose code {
  font-family: var(--font-mono), monospace;
  font-size: 13.5px;
  background: var(--warm-white, #F7F7F8);
  color: var(--ink, rgb(41, 41, 41));
  padding: 2px 6px;
  border-radius: 4px;
}

.article-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 28px 0;
  display: block;
}

.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14.5px;
}

.article-prose th,
.article-prose td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hairline, #E9E9E7);
}

.article-prose th {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-weight: 700;
  background: var(--warm-white, #F7F7F8);
}

/* Callout Box inside article */
.blog-callout-box {
  background: var(--blue-tint, #F2F9FF);
  border-left: 4px solid var(--blue, #0075DE);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 32px 0;
}

.blog-callout-title {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0 0 6px;
}

.blog-callout-desc {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin: 0;
}

/* ── Share Row ──────────────────────────────────────────────────────────── */
.blog-share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  margin: 36px 0;
  border-top: 1px solid var(--hairline, #E9E9E7);
  border-bottom: 1px solid var(--hairline, #E9E9E7);
  flex-wrap: wrap;
}

.blog-share-label {
  font-family: var(--font-mono), monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin-right: 4px;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--warm-white, #F7F7F8);
  color: var(--ink, rgb(41, 41, 41));
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s ease;
  border: none;
}

.blog-share-btn:hover {
  background: var(--blue, #0075DE);
  color: #FFFFFF;
}

/* ── Author Bio Block ───────────────────────────────────────────────────── */
.blog-author-card {
  background: var(--warm-white, #F7F7F8);
  border-radius: 20px;
  padding: 32px;
  margin: 40px 0;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.blog-author-avatar-wrap {
  flex-shrink: 0;
}

.blog-author-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill, 9999px);
  object-fit: cover;
  background: var(--canvas, #FFFFFF);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.blog-author-card-body {
  flex-grow: 1;
}

.blog-author-card-name {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0 0 6px;
  text-decoration: none;
  display: inline-block;
}

.blog-author-card-name:hover {
  color: var(--blue, #0075DE);
}

.blog-author-card-bio {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted, rgb(109, 109, 109));
  margin: 0 0 12px;
}

.blog-author-card-bio a {
  color: var(--blue, #0075DE);
  text-decoration: underline;
}

/* ── Table of Contents (Sticky Sidebar) ─────────────────────────────────── */
.article-sidebar {
  position: sticky;
  top: 96px;
}

.blog-toc-card {
  background: var(--warm-white, #F7F7F8);
  border-radius: 16px;
  padding: 22px;
  border: 1px solid var(--hairline, #ECECEC);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.blog-toc-title {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline, #E9E9E7);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Heading doubles as the mobile collapse toggle; inert on desktop */
.blog-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  color: inherit;
}

.blog-toc-toggle:disabled {
  cursor: default;
}

.blog-toc-chevron {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .blog-toc-chevron {
    transition: none !important;
  }
}

.blog-toc-card ul,
#toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-toc-card li,
#toc-list li {
  position: relative;
  list-style: none;
}

.blog-toc-card li.toc-item--sub,
#toc-list li.toc-item--sub {
  padding-left: 12px;
}

.blog-toc-card li a,
#toc-list li a {
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-muted, rgb(85, 85, 85));
  text-decoration: none;
  display: block;
  padding: 3px 0 3px 6px;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  word-break: break-word;
}

.blog-toc-card li.toc-item--sub a,
#toc-list li.toc-item--sub a {
  font-size: 12.5px;
  color: var(--ink-subtle, rgb(115, 115, 115));
}

.blog-toc-card li a:hover,
#toc-list li a:hover {
  color: var(--blue, #0075DE);
  border-left-color: rgba(0, 117, 222, 0.4);
}

.blog-toc-card li a.active,
#toc-list li a.active {
  color: var(--blue, #0075DE);
  font-weight: 600;
  border-left-color: var(--blue, #0075DE);
}

.blog-toc-cta {
  display: block;
  text-align: center;
  background: var(--blue, #0075DE);
  color: #FFFFFF !important;
  font-family: var(--font-inter-tight), -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-pill, 9999px);
  text-decoration: none;
  margin-bottom: 18px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.blog-toc-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ── Related Articles Section ───────────────────────────────────────────── */
.blog-related-section {
  padding: 64px 0 80px;
  background: var(--warm-white, #F7F7F8);
}

.blog-related-header {
  margin-bottom: 32px;
}

.blog-related-title {
  font-family: var(--font-space), -apple-system, sans-serif;
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--ink, rgb(41, 41, 41));
  margin: 0;
}

.blog-related-card {
  background: var(--canvas, #FFFFFF);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: none;
  transition: transform 0.15s ease;
}

.blog-related-card:hover {
  transform: translateY(-2px);
}

/* ── Scroll To Top Button ───────────────────────────────────────────────── */
#scrollTopBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--ink, rgb(41, 41, 41));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: none;
}

#scrollTopBtn:hover {
  transform: translateY(-2px);
  background: #000000;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .article-sidebar {
    position: static;
    order: -1;
    margin-bottom: 24px;
  }

  /* TOC becomes a collapsible card above the article body (moved there by slug.js) */
  .article-sidebar.is-empty {
    display: none;
  }

  .blog-toc-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .blog-toc-title {
    margin: 0;
    padding: 0;
    border-bottom: 0;
  }

  .blog-toc-toggle {
    cursor: pointer;
    box-sizing: border-box;
    min-height: 52px;
    padding: 14px 18px;
    border-radius: 16px;
  }

  .blog-toc-toggle:focus-visible {
    outline: 2px solid var(--blue-focus, #097FE8);
    outline-offset: -2px;
  }

  .blog-toc-chevron {
    display: inline-block;
    font-size: 12px;
    color: var(--ink-subtle, rgb(140, 140, 140));
    transition: transform 0.2s ease;
  }

  .blog-toc-card.is-expanded .blog-toc-chevron {
    transform: rotate(180deg);
  }

  .blog-toc-card #toc-list {
    order: 2;
    gap: 0;
    padding: 4px 18px 8px;
    border-top: 1px solid var(--hairline, #E9E9E7);
  }

  .blog-toc-card #toc-list li a {
    padding: 11px 0 11px 8px;
    font-size: 14.5px;
  }

  .blog-toc-card #toc-list li.toc-item--sub a {
    font-size: 13.5px;
  }

  .blog-toc-cta {
    order: 3;
    margin: 8px 18px 18px;
  }

  .blog-toc-card:not(.is-expanded) #toc-list,
  .blog-toc-card:not(.is-expanded) .blog-toc-cta {
    display: none;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-featured-card {
    grid-template-columns: 1fr;
  }

  .blog-featured-media {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-hero {
    padding: 48px 0 28px;
  }

  .blog-featured-body {
    padding: 24px;
  }

  .blog-author-card {
    flex-direction: column;
    padding: 24px;
  }

  .article-meta-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTHOR PAGE — /blog/author/:name
   ══════════════════════════════════════════════════════════════════════════ */

/* Author info section wrapper */
.author-info-section {
  padding: 0 0 40px;
}

.author-info-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Author card reset: remove the margin override that clashes with .blog-author-card */
.author-info-container .blog-author-card {
  margin: 0;
}

/* Social links row inside author card (no top border on author page) */
.author-social-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
}

/* ── Author page responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .author-info-container {
    padding: 0 16px;
  }

  .author-info-container .blog-author-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
  }

  .author-info-container .blog-author-card-name {
    font-size: 17px !important;
  }

  .blog-hero-title {
    font-size: clamp(26px, 7vw, 40px);
  }

  .blog-hero-subhead {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .author-info-section {
    padding: 0 0 28px;
  }

  .author-info-container {
    padding: 0 12px;
  }

  .author-info-container .blog-author-card {
    padding: 16px;
    border-radius: 14px;
  }

  .author-info-container .blog-author-card-avatar {
    width: 52px;
    height: 52px;
  }

  .author-info-container .blog-author-card-bio {
    font-size: 13.5px;
  }

  /* Posts grid — single column on very small screens */
  .blog-posts-section .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card-body {
    padding: 16px;
  }

  .blog-card-title {
    font-size: 17px;
  }

  /* Scroll-to-top button: don't overlap content on small screens */
  #scrollTopBtn {
    bottom: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Rich-text editor output (.post-content)
   Markup produced by the admin Tiptap editor; old posts keep the
   .article-prose rules above. Keep in sync with
   admin-client/src/features/blogs/editor/editor.css
   ══════════════════════════════════════════════════════════════════════════ */
.post-content h1 { font-family: var(--font-space), -apple-system, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; margin: 48px 0 18px; }
.post-content h5 { font-family: var(--font-space), -apple-system, sans-serif; font-size: 15.5px; font-weight: 600; margin: 22px 0 8px; }
.post-content h6 { font-family: var(--font-space), -apple-system, sans-serif; font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-muted, rgb(109, 109, 109)); margin: 20px 0 8px; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4 { scroll-margin-top: 96px; }
.post-content hr { border: 0; border-top: 1px solid var(--hairline, #E9E9E7); margin: 40px 0; }
.post-content mark { background: #FEF08A; color: inherit; padding: 0 2px; border-radius: 3px; }
.post-content sub, .post-content sup { font-size: 0.75em; line-height: 0; }
.post-content li > p { margin: 0 0 6px; }
.post-content [dir="rtl"] { text-align: right; }
.post-content ul[dir="rtl"], .post-content ol[dir="rtl"] { margin: 0 24px 24px 0; }
.post-content blockquote[dir="rtl"] { border-left: 0; border-right: 3px solid var(--blue, #0075DE); padding: 0 20px 0 0; }

/* Task list */
.post-content ul[data-type="taskList"] { list-style: none; margin-left: 0; }
.post-content ul[data-type="taskList"] li { display: flex; gap: 10px; align-items: flex-start; }
.post-content ul[data-type="taskList"] li > label { flex: 0 0 auto; margin-top: 4px; }
.post-content ul[data-type="taskList"] li > div { flex: 1 1 auto; }
.post-content ul[data-type="taskList"] input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue, #0075DE); }
.post-content ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--ink-muted, rgb(109, 109, 109)); text-decoration: line-through; }

/* Image figures */
.post-content .post-figure { margin: 32px auto; max-width: 100%; }
.post-content .post-figure img { width: 100%; margin: 0; }
.post-content .post-figure figcaption { font-size: 13.5px; line-height: 1.5; color: var(--ink-muted, rgb(109, 109, 109)); text-align: center; margin-top: 10px; }
.post-content .post-figure[data-align="left"] { float: left; margin: 8px 28px 20px 0; }
.post-content .post-figure[data-align="right"] { float: right; margin: 8px 0 20px 28px; }
.post-content .post-figure[data-align="full"] { width: 100% !important; }
.post-content::after { content: ""; display: table; clear: both; }

/* Tables: horizontal scroll on small screens */
.post-content .post-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 28px 0; border: 1px solid var(--hairline, #E9E9E7); border-radius: 12px; }
.post-content .post-table-wrap table { margin: 0; min-width: 520px; }
.post-content .post-table-wrap th, .post-content .post-table-wrap td { border-right: 1px solid var(--hairline, #E9E9E7); vertical-align: top; }
.post-content .post-table-wrap th:last-child, .post-content .post-table-wrap td:last-child { border-right: 0; }
.post-content .post-table-wrap tr:last-child td { border-bottom: 0; }
.post-content td p, .post-content th p { margin: 0; }

/* Code highlighting (highlight.js classes, applied server-side) */
.post-content .hljs-comment, .post-content .hljs-quote { color: #8B949E; font-style: italic; }
.post-content .hljs-keyword, .post-content .hljs-selector-tag, .post-content .hljs-literal, .post-content .hljs-type { color: #FF7B72; }
.post-content .hljs-string, .post-content .hljs-regexp, .post-content .hljs-addition { color: #A5D6FF; }
.post-content .hljs-number, .post-content .hljs-symbol, .post-content .hljs-variable, .post-content .hljs-template-variable { color: #79C0FF; }
.post-content .hljs-title, .post-content .hljs-section { color: #D2A8FF; }
.post-content .hljs-attr, .post-content .hljs-attribute, .post-content .hljs-property, .post-content .hljs-built_in, .post-content .hljs-name { color: #FFA657; }
.post-content .hljs-meta, .post-content .hljs-tag { color: #7EE787; }
.post-content .hljs-deletion { color: #FFA198; }

/* Callouts */
.post-content .post-callout { position: relative; border-radius: 12px; padding: 16px 20px 16px 52px; margin: 28px 0; border: 1px solid; }
.post-content .post-callout > :last-child { margin-bottom: 0; }
.post-content .post-callout::before { position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-space), sans-serif; color: #fff; }
.post-content .post-callout--info { background: #F2F9FF; border-color: #CFE5FB; }
.post-content .post-callout--info::before { content: "i"; background: #0075DE; }
.post-content .post-callout--warning { background: #FFF8EB; border-color: #F8DDAA; }
.post-content .post-callout--warning::before { content: "!"; background: #DD8A00; }
.post-content .post-callout--success { background: #EFFAF2; border-color: #BFE8CA; }
.post-content .post-callout--success::before { content: "\2713"; background: #1AAE39; }
.post-content .post-callout--danger { background: #FEF2F2; border-color: #F8CACA; }
.post-content .post-callout--danger::before { content: "\00D7"; background: #E5484D; font-size: 16px; }

/* CTA block */
.post-content .post-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px 28px; margin: 36px 0; padding: 28px; border-radius: 16px; border: 1px solid var(--hairline, #E9E9E7); background: var(--warm-white, #F7F7F8); }
.post-content .post-cta--with-image { grid-template-columns: 120px 1fr auto; }
.post-content .post-cta__image { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; margin: 0; }
.post-content .post-cta__title { font-family: var(--font-space), -apple-system, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.post-content .post-cta__desc { font-size: 15px; line-height: 1.55; color: var(--ink-muted, rgb(109, 109, 109)); margin: 0; }
.post-content a.post-cta__button, .post-content a.post-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; background: var(--blue, #0075DE); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .15s ease; }
.post-content a.post-cta__button:hover, .post-content a.post-button:hover { background: var(--blue-pressed, #005BAB); color: #fff; }
.post-content .post-cta--newsletter { background: var(--blue-tint, #F2F9FF); border-color: #CFE5FB; border-style: dashed; }
.post-content .post-cta--banner { background: #18181B; border-color: #18181B; color: #fff; }
.post-content .post-cta--banner .post-cta__title { color: #fff; }
.post-content .post-cta--banner .post-cta__desc { color: #D4D4D8; }
.post-content .post-cta--banner a.post-cta__button { background: #fff; color: #18181B; }
.post-content .post-cta--banner a.post-cta__button:hover { background: #E4E4E7; color: #18181B; }

/* Button block */
.post-content .post-button-wrap { margin: 28px 0; }
.post-content a.post-button--secondary { background: transparent; color: var(--blue, #0075DE); box-shadow: inset 0 0 0 1.5px currentColor; }
.post-content a.post-button--secondary:hover { background: var(--blue-tint, #F2F9FF); color: var(--blue-pressed, #005BAB); }

/* FAQ / accordion */
.post-content .post-faq { margin: 32px 0; border-top: 1px solid var(--hairline, #E9E9E7); }
.post-content .post-faq details { border-bottom: 1px solid var(--hairline, #E9E9E7); }
.post-content .post-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--font-space), -apple-system, sans-serif; font-weight: 600; font-size: 17px; }
.post-content .post-faq summary::-webkit-details-marker { display: none; }
.post-content .post-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--ink-muted, rgb(109, 109, 109)); transition: transform .2s ease; }
.post-content .post-faq details[open] summary::after { transform: rotate(45deg); }
.post-content .post-faq__answer { padding: 0 0 18px; color: var(--ink-muted, rgb(109, 109, 109)); }
.post-content .post-faq__answer p:last-child { margin-bottom: 0; }

/* Media embeds */
.post-content div[data-youtube-video] { position: relative; aspect-ratio: 16 / 9; margin: 32px 0; border-radius: 12px; overflow: hidden; background: #000; }
.post-content div[data-youtube-video] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-content .post-video { margin: 32px 0; }
.post-content .post-video video { width: 100%; border-radius: 12px; background: #000; display: block; }

/* Table of contents block */
.post-content .post-toc { margin: 28px 0; padding: 20px 24px; border-radius: 12px; background: var(--warm-white, #F7F7F8); border: 1px solid var(--hairline, #E9E9E7); }
.post-content .post-toc__title { font-family: var(--font-space), -apple-system, sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 10px; }
.post-content .post-toc__list { margin: 0 0 0 20px; }
.post-content .post-toc__item { margin-bottom: 6px; }
.post-content .post-toc__item a { font-weight: 500; text-decoration: none; }
.post-content .post-toc__item--h3 { margin-left: 16px; list-style-type: lower-alpha; }
.post-content .post-toc__item--h4 { margin-left: 32px; list-style-type: lower-roman; }

@media (max-width: 640px) {
  .post-content .post-figure[data-align="left"],
  .post-content .post-figure[data-align="right"] { float: none; margin: 28px auto; }
  .post-content .post-figure { width: 100% !important; }
  .post-content .post-cta,
  .post-content .post-cta--with-image { grid-template-columns: 1fr; padding: 22px; }
  .post-content a.post-cta__button { width: 100%; }
}