/* 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; }

  /* Photo variant — featuredImage rendered via the {% image %} AVIF/WebP
     pipeline (<picture><img>) instead of the plain gradient/icon fallback
     above. position:relative here + position:absolute on the img is the
     same fill technique already used for .hero-modal-img /
     .visual-card-bg-img in home.css — deliberately NOT width:100%;
     height:100% on the img, because that depends on the img's height
     percentage resolving against a parent whose OWN height comes from
     aspect-ratio, which doesn't reliably resolve (confirmed in testing:
     the img fell back to its native aspect ratio instead of filling the
     square box). Absolute + inset:0 fills the box regardless of how the
     box's own size was computed. */
  .blog-thumb--photo { position: relative; overflow: hidden; }
  .blog-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Category pill — same pill shape/type treatment as .product-badge
     (catalog.css), honey-soft/forest pairing already used by
     .blog-thumb.tone-a above. Blog-only; unrelated to .product-badge. */
  .blog-category {
    display: inline-block;
    background: var(--c-honey-soft);
    color: var(--c-forest);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
  }

  .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); }