/* ==========================================================================
   Answer HQ — blog.css
   Styles for the blog index (/blog) and post pages (/blog/<slug>/).
   Loaded after site.css, which supplies the design tokens (colors, fonts).

   Blog pages have two layout breakpoints (like the Framer original):
   desktop >=1200px and mobile <=1199px; type also steps down at <=809px.
   ========================================================================== */

/* Blog link preset: gray, no underline, orange on hover (all blog links). */
.article-back a,
.article-body a,
.article-pagenav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-color);
}
.article-back a:hover,
.article-body a:hover,
.article-pagenav a:hover {
  color: var(--accent);
}

/* ============================== Blog index ============================== */

.blog-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
}

.blog-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-align: center;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Whole row is one link */
.post-row {
  display: flex;
  gap: 30px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 22px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.25, 0.6, 0.3, 1);
}
/* Verified against the Framer hydration module (card component framer-21K61,
   hover variant): backgroundColor rgba(0, 0, 0, 0.2), spring ~0.4s. */
.post-row:hover .post-card { background: rgba(0, 0, 0, 0.2); }

.post-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.post-author {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #71717a;
}
.post-date {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #a1a1aa;
}

.post-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.post-thumb {
  width: 150px;
  height: 150px;
  aspect-ratio: 1;
  max-width: 100%;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  object-fit: cover;
}
.post-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.post-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.post-excerpt {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #52525b;
}

/* ============================== Post page =============================== */

.article-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.post-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1000px;
  margin: 160px auto;
  padding: 10px;
}

/* Back nav ("< Blog") and bottom prev/next share the same narrow rail */
.article-back,
.article-pagenav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
}
.article-back p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
}

.article-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}
.article-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.article-avatar {
  width: 40px;
  height: 40px;
  border-radius: 24px;
  object-fit: cover;
}
.article-author,
.article-date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #999999;
  text-align: center;
}
/* Fixed-width date container keeps the centered author/date group symmetric */
.article-date {
  width: 248px;
  max-width: 600px;
}

.article-hero {
  width: 100%;
  aspect-ratio: 1.95;
  border-radius: 24px;
  object-fit: cover;
}

/* ---------------------------- Article body ----------------------------- */

.article-body {
  width: 100%;
  /* ~70-75 characters per line at 16px — the readable "measure" (45-90 is
     the accepted range, ~66 ideal). Scales with the body font size below;
     if you change the font size, adjust this to keep the line length.
     Images/title above stay wider. */
  max-width: 600px;
}
/* Block rhythm (Framer paragraph-spacing resolved per element):
   20px before p/blockquote, 40px before headings, 32px before everything
   without a type preset (lists, figures, images, embeds, code blocks);
   20px between list items. Unchanged at every breakpoint. */
.article-body > * { margin: 0; }
.article-body > * + * { margin-top: 32px; }
.article-body > * + p,
.article-body > * + blockquote { margin-top: 20px; }
.article-body > * + h2,
.article-body > * + h3,
.article-body > * + h4,
.article-body > * + h5 { margin-top: 40px; }
.article-body li + li { margin-top: 20px; }

.article-body p,
.article-body li {
  /* Inter for readable body text (headings/titles stay Urbanist).
     16px / 1.6, normal letter- and word-spacing — standard web body copy. */
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
}
.article-body strong { font-weight: 700; }

.article-body h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.article-body h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.article-body h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* Lists: flush with the text column, marker hanging inside a 2ch indent */
.article-body ul,
.article-body ol {
  list-style: none;
  padding: 0;
  counter-reset: list-item-counter;
}
.article-body li {
  position: relative;
  padding-inline-start: 2ch;
}
.article-body li p { margin: 0; }
.article-body ul > li::before {
  content: "\2022";
  position: absolute;
  inset-inline-start: 0;
}
.article-body ol > li {
  counter-increment: list-item-counter;
}
.article-body ol > li::before {
  content: counter(list-item-counter) ".";
  position: absolute;
  inset-inline-start: 0;
  font-variant-numeric: tabular-nums;
}

/* Inline images keep their natural (retina-halved) size, capped at 100% */
.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

.article-body blockquote {
  position: relative;
  padding-left: 22px;
}
.article-body blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: #dddddd;
}
.article-body blockquote p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1.8;
  color: #999999;
}
.article-body blockquote p + p { margin-top: 20px; }

/* Code (rare) */
.article-body pre {
  overflow-x: auto;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f2f4f8;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-primary);
}

/* --------------------------- Prev / next nav ---------------------------- */

.article-pagenav a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 80px;
  letter-spacing: -3px;
  line-height: 1;
}
/* keep "next" on the right when there is no newer post */
.article-pagenav .pagenav-older { margin-left: auto; }

/* ============================ Tablet: 810-1199 =========================== */

@media (max-width: 1199px) {
  .article-title { font-size: 42px; }
  .article-pagenav a { font-size: 64px; }

  /* Mobile/tablet layout: hero moves above the title, column narrows.
     Root gap 160 -> 20 (margin), content gap 60 -> 20, column 1000 -> 500. */
  .post-article {
    max-width: 500px;
    margin: 20px auto;
    gap: 20px;
  }
  .article-back    { order: 0; }
  .article-hero    { order: 1; } /* keeps aspect-ratio 1.95 (190px was only a no-aspect-ratio fallback) */
  .article-titles  { order: 2; }
  .article-body    { order: 3; }
  .article-pagenav { order: 4; }

  /* Metadata stacks as TWO rows: [avatar + author] above [date], gap 10px.
     The date wraps to its own line; avatar+author stay a horizontal pair. */
  .article-meta { flex-wrap: wrap; }
  .article-date { flex-basis: 100%; }
}

/* ============================= Mobile: <=809 ============================= */

@media (max-width: 809px) {
  .blog-heading { font-size: 30px; }
  .post-author { font-size: 14px; }
  .post-date { font-size: 14px; }
  .post-title { font-size: 22px; }
  .post-excerpt { font-size: 15px; }

  .article-title { font-size: 30px; }
  .article-back p { font-size: 16px; }
  .article-author,
  .article-date { font-size: 16px; }
  .article-body p,
  .article-body li { font-size: 16px; }
  .article-body h2 { font-size: 27px; }
  .article-body h3 { font-size: 22px; }
  .article-body h4 { font-size: 19px; }
  .article-pagenav a { font-size: 48px; }
}