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

.blog-hero__title { max-width: 13ch; }
.blog-filters { margin-bottom: var(--space-7); }

/* Featured card (cream, two columns): sits on the white page below the chips */
.featured {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
  padding: var(--space-8);
  color: var(--color-text);
  text-decoration: none;
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
}
.featured[hidden] { display: none; }
.featured__body { display: grid; gap: var(--space-4); align-content: start; }
.featured__kicker { font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.featured__title { font-family: var(--font-display); font-size: var(--text-heading); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--color-text); text-wrap: balance; }
.featured__text { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-secondary); max-width: 32em; }
.featured__go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-weight: 700; color: var(--color-text); }
.featured__go .icon { transition: transform var(--dur-hover) var(--ease-out); }
.featured:hover .featured__go .icon { transform: translateX(4px); }
.featured__names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-content: center;
}
.featured__names span {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-surface);
  border-radius: var(--radius-pill);
}
@media (min-width: 64em) {
  .featured { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
}

/* Post grid: ruled cells */
.posts {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--stroke);
  border-left: var(--stroke);
}
.posts > li { display: flex; border-right: var(--stroke); border-bottom: var(--stroke); }
.posts > li[hidden] { display: none; }
.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-6);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease-out);
}
.post-card__meta, .post-card__line { transition: color var(--dur-hover) var(--ease-out); }
a.post-card:hover { background-color: var(--black); }
a.post-card:hover .post-card__title,
a.post-card:hover .post-card__meta,
a.post-card:hover .post-card__meta span:last-child,
a.post-card:hover .post-card__line { color: var(--neutral-0); }
a.post-card:active { background-color: var(--black-2); }
a.post-card:focus-visible { outline-offset: -4px; }
.post-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.post-card__meta span:last-child { color: var(--color-text-secondary); }
.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 500;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-text);
  transition: color var(--dur-hover) var(--ease-out);
}
.post-card__line { color: var(--color-text-secondary); }
.post-card--app { background-color: var(--color-highlight); }
.post-card--app .btn { align-self: flex-start; margin-top: auto; }
.posts__empty { padding-block: var(--space-7); color: var(--color-text-secondary); }
.posts__empty button { font: inherit; }
@media (min-width: 48em) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }