/* CELLMIND local reference rebuild — generated from website/cellmind-rebuild/src/styles. Do not edit output. */
/* ---- pages/blog.css ---- */
/* Blog index + the numbered post cards it shares with the article template
   (blog-post.css @imports this file for its "Keep reading" grid).
   Values: resolved reference styles (evidence/wsB/computed-blog.txt, computed-post.txt) and the
   reference rules they come from (research-ux2 / site-ux2 / parity-ux2). */

/* ---- page frame (reference ux2 page: 15px / 1.6 / 450, #151515; 80px → 56px bottom space) ---- */
.blog-index,
.article-page {
  padding-bottom: 80px;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--t-text-ink-soft);
}

/* ---- intro: eyebrow, H1 with italic accent, lead ---- */
.blog-intro { padding: 44px 0 16px; }
.blog-intro__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--t-text-gold-dark);
}
.blog-intro__title {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--t-text-ink);
}
.blog-intro__title em { font-style: italic; font-weight: 400; color: var(--t-text-gold-dark); }
/* The lead fades up once on load (0.4s delay, 0.8s), like the reference. */
.blog-intro__lead {
  max-width: 52ch;
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--t-text-ink-2);
  opacity: 0;
  animation: blog-fade-up 0.8s 0.4s forwards;
}
@keyframes blog-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- numbered post cards ---- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.blog-index__grid { margin-top: 8px; }
.post-grid__item { display: flex; min-width: 0; }
.post-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px 20px 18px;
  background: var(--t-bg-white);
  border: 1px solid var(--t-border-line);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 22px rgba(var(--t-shadow-ink-rgb), 0.06);
  color: var(--t-text-ink);
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t);
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(var(--t-shadow-ink-rgb), 0.10); }
.post-card__num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t-text-gold-dark);
}
/* Category pill (cards and the article header). */
.tag-pill {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--pill);
  background: var(--t-bg-gold-light);
  color: var(--t-text-gold-dark);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--t-text-ink);
}
.post-card__meta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t-text-ink-5);
}

@media (max-width: 1023px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Reference quirk reproduced: up to 768px the intro stacks as a column whose items align to the
   END, so when the text block is narrower than the column (≈430–768px) it sits right-aligned. */
@media (max-width: 768px) {
  .blog-intro { display: flex; flex-direction: column; align-items: flex-end; }
  .blog-intro__text { max-width: 100%; }
}
@media (max-width: 767px) {
  .blog-index,
  .article-page { padding-bottom: 56px; }
  .blog-intro { padding: 28px 0 8px; }
  .blog-intro__title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .post-grid { grid-template-columns: 1fr; gap: 10px; }
  .post-card { padding: 16px 16px 14px; }
  .post-card__title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-intro__lead { opacity: 1; animation: none; }
  .post-card:hover { transform: none; }
}