/* Blog teaser/listing card styles. Loaded by index.njk, blog.njk, and post.njk (related posts). */

  /* ============================================================
     10. BLOG / PURITY GUIDE
  ============================================================ */
  .blog { background: var(--c-cream); }

  .blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 760px) { .blog-grid { grid-template-columns: 1fr 1fr; } }

  .blog-card {
    display: grid;
    grid-template-columns: 112px 1fr; /* aligned 8px baseline (14 * 8px) */
    gap: 24px; /* aligned rhythm gap */
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 24px; /* clean 24px symmetrical padding blocks */
    align-items: center;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  }
  .blog-card:hover { box-shadow: var(--shadow-tight); transform: translateY(-3px); }
  @media (max-width: 480px) {
    .blog-card { grid-template-columns: 1fr; }
  }

  .blog-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .blog-thumb.tone-a { background: linear-gradient(160deg, var(--c-honey-soft), var(--c-sand)); color: var(--c-forest); }
  .blog-thumb.tone-b { background: linear-gradient(160deg, var(--c-moss-light), var(--c-sage)); color: var(--c-olive); }
  .blog-thumb .icon { width: 38px; height: 38px; }

  .blog-content h3 { font-size: 1.12rem; margin-bottom: 8px; line-height: 1.3; min-height: 2.6em; /* = 2 lines at this line-height; em (not rem) so it tracks the h3's own font-size */ }
  .blog-content p { font-size: 0.88rem; margin-bottom: 12px; }
  .blog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-forest);
  }
  .blog-link .icon { width: 14px; height: 14px; transition: transform .2s var(--ease); }
  .blog-link:hover .icon { transform: translateX(3px); }