/* AlphaPDF Journal: blog index and article pages */
:root {
  --blog-accent: #4f36c9;
  --blog-accent-dark: #39249c;
  --blog-accent-soft: #ede9fe;
  --blog-ink: #0f172a;
  --blog-muted: #526071;
  --blog-line: #e2e8f0;
  --blog-cover: #f7f3ec;
}

/* Hero band shared by the index and article headers */
.blog-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  background:
    radial-gradient(60% 120% at 88% 0%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(50% 90% at 0% 100%, rgba(37,99,235,.12), transparent 65%),
    linear-gradient(180deg, #f5f3ff 0%, #f6f8fb 100%);
  border-bottom: 1px solid var(--blog-line);
}
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(79,54,201,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,54,201,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}
.blog-hero > * { position: relative; }
.blog-heading h1 {
  max-width: 18ch;
  margin: 18px 0 16px;
  color: var(--blog-ink);
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.blog-heading h1 span {
  background: linear-gradient(100deg, #4f36c9 10%, #2563eb 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.blog-heading > p { max-width: 60ch; margin: 0; color: var(--blog-muted); font-size: 1.15rem; line-height: 1.6; }
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #d8cff6;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: var(--blog-accent-dark);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blog-accent); box-shadow: 0 0 0 4px rgba(79,54,201,.15); }

/* Index */
.blog-shell { padding-block: 32px 88px; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.blog-filters a {
  padding: 9px 16px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: #fff;
  color: var(--blog-ink);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.blog-filters a:hover { border-color: #b9acef; color: var(--blog-accent-dark); }
.blog-filters [aria-current] { border-color: var(--blog-accent); background: var(--blog-accent); color: #fff; }
.blog-filters [aria-current]:hover { color: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--blog-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow-wrap: anywhere;
}
.blog-card:hover, .blog-card:focus-within { transform: translateY(-4px); border-color: #cfc6f3; box-shadow: 0 22px 48px rgba(49,32,128,.12); }
.blog-cover { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blog-cover); }
/* Covers often have text baked in and come in mixed ratios (1200x630, 3:2, 16:10), so show the whole image on the tinted panel instead of cropping it. */
.blog-cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.blog-card:hover .blog-cover img { transform: scale(1.04); }
.blog-cover-empty { background: linear-gradient(135deg, var(--blog-accent-soft), #dbeafe); color: var(--blog-accent); font-size: 44px; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 26px 26px; }
.blog-card h2, .blog-card h3 { margin: 0; color: var(--blog-ink); font-size: 1.3rem; line-height: 1.3; letter-spacing: -.015em; }
.blog-card h2 a, .blog-card h3 a { color: inherit; text-decoration: none; }
/* The title link covers the whole card so the image and excerpt are clickable too. */
.blog-card h2 a::after, .blog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.blog-card:hover h2 a, .blog-card:hover h3 a { color: var(--blog-accent-dark); }
.blog-card-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--blog-muted);
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.blog-card .blog-meta { margin-top: auto; padding-top: 6px; }
.blog-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blog-accent-soft);
  color: var(--blog-accent-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}
a.blog-chip:hover { background: #ddd6fe; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--blog-muted); font-size: .88rem; }

.blog-card-lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom: 28px; }
.blog-card-lead .blog-cover { aspect-ratio: auto; min-height: 340px; }
.blog-card-lead .blog-card-body { justify-content: center; gap: 16px; padding: 44px; }
.blog-card-lead h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.03em; }
.blog-card-lead .blog-card-excerpt { font-size: 1.08rem; -webkit-line-clamp: 4; }
.blog-card-lead .blog-meta { margin-top: 8px; }
.blog-card-lead .blog-card-body::before {
  content: "Latest";
  color: var(--blog-accent);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.blog-empty { padding: 48px 0; color: var(--blog-muted); text-align: center; }
.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; color: var(--blog-muted); }
.blog-pagination a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: #fff;
  color: var(--blog-ink);
  font-weight: 650;
  text-decoration: none;
}
.blog-pagination a:hover { border-color: var(--blog-accent); color: var(--blog-accent-dark); }

/* Article */
.blog-reading { width: min(760px, calc(100% - 48px)); }
.blog-article-hero { padding: 40px 0 64px; }
.blog-article-hero.has-featured { padding-bottom: 150px; }
.blog-breadcrumb a { display: inline-flex; align-items: center; gap: 8px; color: var(--blog-muted); font-size: .95rem; font-weight: 600; text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--blog-accent-dark); }
.blog-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.blog-article-hero h1 { max-width: none; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.1; }
.blog-excerpt { color: var(--blog-muted); font-size: 1.22rem; line-height: 1.6; }
.blog-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.blog-byline p { display: grid; gap: 2px; margin: 0; }
.blog-byline strong { color: var(--blog-ink); }
.blog-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f36c9, #2563eb);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(79,54,201,.25);
}

.blog-featured-wrap { width: min(1040px, calc(100% - 48px)); margin-top: -110px; position: relative; }
.blog-featured { display: block; width: 100%; height: auto; border: 1px solid var(--blog-line); border-radius: 24px; background: var(--blog-cover); box-shadow: 0 30px 70px rgba(15,23,42,.14); }

.blog-prose { margin-top: 56px; color: #1e293b; font-size: 1.125rem; line-height: 1.85; overflow-wrap: anywhere; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose > p:first-child { color: var(--blog-ink); font-size: 1.25rem; line-height: 1.75; }
.blog-prose h2, .blog-prose h3 { color: var(--blog-ink); line-height: 1.25; letter-spacing: -.02em; scroll-margin-top: 24px; }
.blog-prose h2 { position: relative; margin: 2.4em 0 .7em; padding-top: 22px; font-size: 1.75rem; }
.blog-prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #4f36c9, #2563eb); }
.blog-prose h3 { margin: 1.8em 0 .5em; font-size: 1.3rem; }
.blog-prose strong { color: var(--blog-ink); }
.blog-prose a, .blog-resources a { color: var(--blog-accent-dark); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(79,54,201,.35); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blog-prose a:hover { text-decoration-color: currentColor; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.blog-prose ul { padding-left: 0; list-style: none; }
.blog-prose ul > li { position: relative; margin: 10px 0; padding-left: 30px; }
.blog-prose ul > li::before { content: ""; position: absolute; top: .72em; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blog-accent); box-shadow: 0 0 0 4px var(--blog-accent-soft); }
.blog-prose ol { padding-left: 0; list-style: none; counter-reset: blog-step; }
.blog-prose ol > li { position: relative; margin: 16px 0; padding-left: 50px; counter-increment: blog-step; }
.blog-prose ol > li::before {
  content: counter(blog-step);
  position: absolute;
  top: .1em;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blog-accent-soft);
  color: var(--blog-accent-dark);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
}
.blog-prose table { display: table; width: 100%; max-width: 100%; margin: 28px 0; overflow-x: auto; border: 1px solid var(--blog-line); border-radius: 14px; border-collapse: separate; border-spacing: 0; background: #fff; font-size: 1rem; line-height: 1.55; }
.blog-prose th, .blog-prose td { padding: 12px 16px; border-bottom: 1px solid var(--blog-line); text-align: left; vertical-align: top; }
.blog-prose th { background: #f5f3ff; color: var(--blog-ink); font-weight: 700; white-space: nowrap; }
.blog-prose tr:last-child td { border-bottom: 0; }
.blog-prose tbody tr:nth-child(even) td { background: #fafbfd; }
.blog-prose blockquote { margin: 32px 0; padding: 20px 24px; border-left: 4px solid var(--blog-accent); border-radius: 0 14px 14px 0; background: #f5f3ff; color: var(--blog-ink); }
.blog-prose blockquote > :first-child { margin-top: 0; }
.blog-prose blockquote > :last-child { margin-bottom: 0; }
.blog-prose code { padding: 2px 6px; border-radius: 6px; background: #eef2f6; font-size: .9em; }
.blog-prose pre { padding: 20px; overflow-x: auto; border-radius: 14px; background: #0f172a; color: #e2e8f0; font-size: .95rem; }
.blog-prose pre code { padding: 0; background: none; }
.blog-prose hr { margin: 48px 0; border: 0; border-top: 1px solid var(--blog-line); }

.blog-resources { margin-top: 48px; padding: 24px 28px; border: 1px solid var(--blog-line); border-radius: 18px; background: #fff; }
.blog-resources h2 { margin: 0 0 12px; font-size: 1.15rem; }
.blog-resources ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.blog-resources a { display: inline-flex; align-items: center; gap: 10px; }

.blog-author { display: flex; gap: 18px; margin-top: 48px; padding: 28px; border: 1px solid #ddd6fe; border-radius: 20px; background: linear-gradient(135deg, #f5f3ff, #eff6ff); }
.blog-author .blog-avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.blog-author strong { color: var(--blog-ink); font-size: 1.05rem; }
.blog-author p { margin: 6px 0 0; color: var(--blog-muted); line-height: 1.65; }

.blog-related { margin-top: 80px; padding: 64px 0 72px; border-block: 1px solid var(--blog-line); background: linear-gradient(180deg, #f5f3ff, #f6f8fb); }
.blog-related h2 { margin: 0 0 28px; color: var(--blog-ink); font-size: 1.9rem; letter-spacing: -.03em; }

.blog-comments { margin: 72px auto 96px; padding: 36px; border: 1px solid var(--blog-line); border-radius: 22px; background: #fff; }
.blog-comments h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.blog-comments h3 { margin: 32px 0 0; font-size: 1.2rem; }
.blog-comments-note, .blog-comments-empty { color: var(--blog-muted); }
.blog-comment { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--blog-line); overflow-wrap: anywhere; }
.blog-comment .blog-avatar { width: 40px; height: 40px; background: #e2e8f0; color: var(--blog-ink); box-shadow: none; }
.blog-comment p { margin: 4px 0 0; line-height: 1.65; }
.blog-form label { display: block; margin-bottom: 8px; font-weight: 650; }
.blog-form input, .blog-form textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; font: inherit; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.blog-form input:focus, .blog-form textarea:focus { border-color: var(--blog-accent); background: #fff; box-shadow: 0 0 0 4px rgba(79,54,201,.12); outline: none; }
.blog-form textarea { min-height: 140px; }
.blog-form .errorlist { color: #9c2424; }
.blog-form p { margin-block: 20px; }
.blog-form .button { min-height: 46px; padding-inline: 22px; border-radius: 12px; }

.blog-hero a:focus-visible, .blog-shell a:focus-visible, .blog-article a:focus-visible, .blog-related a:focus-visible, .blog-form :focus-visible { outline: 3px solid #4f36c9; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-cover img { transition: none; }
  .blog-card:hover, .blog-card:focus-within { transform: none; }
  .blog-card:hover .blog-cover img { transform: none; }
}
@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card-lead { grid-template-columns: 1fr; }
  .blog-card-lead .blog-cover { min-height: 0; aspect-ratio: 16 / 10; }
  .blog-card-lead .blog-card-body { padding: 28px; }
}
@media (max-width: 640px) {
  .blog-hero { padding: 44px 0 36px; }
  .blog-article-hero { padding: 24px 0 40px; }
  .blog-article-hero.has-featured { padding-bottom: 80px; }
  .blog-featured-wrap { width: calc(100% - 32px); margin-top: -56px; }
  .blog-featured { border-radius: 16px; }
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-shell { padding-block: 24px 56px; }
  .blog-reading { width: calc(100% - 40px); }
  .blog-card-body { padding: 20px; }
  .blog-prose { margin-top: 36px; font-size: 1.06rem; }
  .blog-prose h2 { font-size: 1.45rem; }
  .blog-prose table { display: block; width: auto; }
  .blog-related { margin-top: 56px; padding: 44px 0 52px; }
  .blog-comments { margin-block: 48px 64px; padding: 24px 20px; }
  .blog-author { flex-direction: column; padding: 22px; }
}