/* Blog: index listing + article pages. Loaded only by /blog/ pages. */

/* ---------- Shared: hero meta ---------- */
.post-meta {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.post-meta .dot { color: var(--sandy-beige); }

/* ---------- Blog index ---------- */
.post-list { padding: var(--section-pad) 0; }
.post-card {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid color-mix(in oklab, var(--warm-taupe) 26%, transparent);
}
.post-card:first-child { border-top: none; padding-top: 0; }
.post-card .card-side {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 0.5rem;
  line-height: 1.9;
}
.post-card .card-side .cat { display: block; color: var(--plum); }
.post-card h2 {
  font-size: var(--step-1);
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--plum); }
.post-card p { color: var(--muted); max-width: 60ch; margin: 0 0 1.1rem; }
.post-card .more {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
}
.post-card .more:hover { color: var(--plum-deep); }
.post-card .more .arrow { transition: transform 0.2s ease; display: inline-block; }
.post-card .more:hover .arrow { transform: translateX(3px); }

/* ---------- Article body ---------- */
.post-body { padding: var(--section-pad) 0; }
.post-body .wrap-narrow > * { max-width: 68ch; }
.post-body p {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.35rem;
}
.post-body h2 {
  font-size: var(--step-1);
  line-height: 1.3;
  margin: 2.75rem 0 1rem;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 2rem 0 0.65rem;
}
.post-body ul { margin: 0 0 1.35rem; padding-left: 1.1rem; }
.post-body li {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}
.post-body li::marker { color: var(--mauve); }
.post-body a { color: var(--plum); text-underline-offset: 3px; }
.post-body a:hover { color: var(--plum-deep); }
.post-body strong { font-weight: 600; }
.post-body em { font-style: normal; color: var(--warm-taupe); }

.pull {
  margin: 2.25rem 0;
  padding: 0.3rem 0 0.3rem 1.6rem;
  border-left: 2px solid var(--mauve);
}
.pull p {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.post-note {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.6rem;
  background: var(--bg-cream);
  border-radius: var(--radius);
}
.post-note p { font-size: 0.98rem; line-height: 1.7; color: var(--muted); margin: 0; }
.post-note p + p { margin-top: 0.75rem; }

/* ---------- Article footer ---------- */
.post-cta { padding: var(--section-pad) 0; background: var(--bg-cream); text-align: center; }
.post-cta h2 { margin: 0.75rem auto 1rem; max-width: 20ch; }
.post-cta p { color: var(--muted); margin: 0 auto 2rem; max-width: 46ch; }

.post-more { padding: var(--section-pad) 0; }
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}
.more-item { border-top: 1px solid color-mix(in oklab, var(--warm-taupe) 26%, transparent); padding-top: 1.25rem; }
.more-item .cat {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 0.5rem;
}
.more-item h3 { font-size: 1.16rem; line-height: 1.3; margin: 0; }
.more-item h3 a { color: var(--ink); text-decoration: none; }
.more-item h3 a:hover { color: var(--plum); }

@media (max-width: 860px) {
  .post-card { grid-template-columns: 1fr; gap: 0.9rem; }
  .post-card .card-side { padding-top: 0; }
  .post-card .card-side .cat { display: inline; }
  .more-grid { grid-template-columns: 1fr; }
}


/* ─── Blog imagery + readability pass (Anhad, 26 Aug) ───────────────────── */
.post-hero-img { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 940px; padding: 0 var(--gutter); }
.post-hero-img img { width: 100%; height: clamp(260px, 34vw, 420px); object-fit: cover; display: block;
  border-radius: 200px 200px var(--radius) var(--radius); }

.post-card { align-items: start; }
.post-card { grid-template-columns: 220px 1fr 1.6fr; }
@media (max-width: 860px) { .post-card { grid-template-columns: 1fr; } .card-thumb img { height: 240px; } }
.card-thumb { display: block; overflow: hidden; border-radius: 120px 120px var(--radius) var(--radius); }
.card-thumb img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.card-thumb:hover img { transform: scale(1.04); }

/* Give the body copy more air so a long read stops looking like a wall. */
.post-body p { line-height: 1.85; margin-bottom: 1.35em; }
.post-body h2 { margin-top: 2.6em; }
.post-body > .wrap-narrow > p:first-of-type { font-size: 1.14rem; color: var(--ink); }
.post-body blockquote { border-left: 2px solid var(--mauve); padding-left: 1.4rem; margin: 2.4rem 0;
  font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.55; color: var(--plum-deep); }