/* =====================================================================
   Checklist Front — blog
   Loads after house.css, checklist-front.css and the shared /css/blog.css.
   The article layout picks up this product's tokens on its own; only the
   CTA panel hardcodes Email Inbox's navy, so it gets this product's dark
   band here, the same as the closing CTA on the product page.
   ===================================================================== */

.article-cta {
  background: linear-gradient(135deg, var(--band-1) 0%, var(--band-2) 58%, var(--band-3) 100%);
  color: var(--band-soft);
}
.article-cta p { color: var(--band-soft); opacity: 0.85; }
.article-cta .fine { color: var(--band-muted); opacity: 1; }
.article-cta .btn-primary { background: #fff; color: var(--primary-ink); }

/* Index: one post so far. A lone card in a two- or three-column grid reads
   as a gap, so it takes the whole row, and from tablet width up the board
   drawing from the home page sits beside the text. */
.blog-wide > .post-grid { grid-template-columns: 1fr; }
.blog-wide > .post-grid .post-card.featured { grid-column: auto; }
@media (min-width: 900px) {
  .blog-wide > .post-grid .post-card.featured {
    position: relative;
    min-height: 280px;
    padding: 36px calc(44% + 32px) 32px 36px;
    justify-content: center;
  }
  .blog-wide > .post-grid .post-card.featured h2 { font-size: 28px; }
  .blog-wide > .post-grid .post-card.featured p { font-size: 16.5px; }
  .blog-wide > .post-grid .post-card.featured::after {
    content: "";
    position: absolute;
    top: 20px; right: 20px; bottom: 20px;
    width: 44%;
    border-radius: var(--r-md);
    background: var(--surface-2) url("/images/cards/checklist-front.svg") center / cover no-repeat;
  }
}