/* ---- intro ---- */
    .blog-intro { max-width: var(--container-narrow); }

    /* ---- featured post ---- */
    .blog-featured {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: var(--space-6);
      align-items: stretch;
      background: var(--color-bg-soft);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    .blog-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .blog-featured__media { position: relative; min-height: 260px; }
    .blog-featured__media img { width: 100%; height: 100%; object-fit: cover; }
    .blog-featured__body { padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
    .blog-featured__body h2 {
      font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
      line-height: 1.2;
      margin: var(--space-3) 0;
    }
    .blog-featured__body h2 a { color: var(--color-heading); }
    .blog-featured__body h2 a:hover { color: var(--color-primary-dark); }
    .blog-featured__excerpt { color: var(--color-muted); margin-bottom: var(--space-4); line-height: 1.7; }

    /* ---- shared badges / meta ---- */
    .blog-cat {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-primary-darker);
      background: var(--color-primary-soft);
      padding: 0.32rem 0.7rem;
      border-radius: var(--radius-pill);
    }
    .blog-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.82rem;
      color: var(--color-muted);
    }
    .blog-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

    /* ---- author chip ---- */
    .blog-author { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
    .blog-author__avatar {
      width: 30px; height: 30px; border-radius: 50%;
      display: grid; place-items: center;
      font-size: 0.72rem; font-weight: 800; color: #fff;
      background: var(--gradient-primary);
    }

    /* ---- grid ---- */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .blog-card {
      display: flex;
      flex-direction: column;
      background: var(--color-bg);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-xs);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    .blog-card:not(.is-soon):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

    .blog-card__media {
      position: relative;
      display: block;
      aspect-ratio: 16 / 9;
      overflow: hidden;
    }
    .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
    .blog-card:hover .blog-card__media img { transform: scale(1.05); }
    /* gradient placeholder tile (for posts without a photo yet) */
    .blog-card__media--ph { display: grid; place-items: center; background: var(--gradient-liquid); color: #fff; }
    .blog-card__media--ph svg { width: 46px; height: 46px; opacity: 0.9; }
    .blog-card__cat { position: absolute; top: 0.7rem; left: 0.7rem; }

    .blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
    .blog-card__title { font-size: 1.12rem; line-height: 1.35; }
    .blog-card__title a { color: var(--color-heading); }
    .blog-card__title a:hover { color: var(--color-primary-dark); }
    .blog-card__excerpt { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.6; flex: 1; }
    .blog-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
    .blog-card__arrow { font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark); }

    /* coming-soon state */
    .blog-card.is-soon { opacity: 0.85; }
    .blog-card.is-soon .blog-card__title { color: var(--color-heading); }
    .blog-soon-pill {
      font-size: 0.72rem; font-weight: 700; color: var(--color-muted);
      background: var(--color-bg-tint); border: 1px solid var(--color-line);
      padding: 0.28rem 0.6rem; border-radius: var(--radius-pill);
    }

    /* newsletter / help band re-uses .cta-band pattern; add local fallback */
    .blog-help {
      text-align: center;
      background: var(--gradient-primary);
      color: #fff;
      border-radius: var(--radius-xl);
      padding: var(--space-7) var(--space-6);
      box-shadow: var(--shadow-md);
    }
    .blog-help h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-bottom: var(--space-3); }
    .blog-help p { color: rgba(255, 255, 255, 0.9); max-width: 46ch; margin: 0 auto var(--space-5); }
    .blog-help .btn { background: #fff; color: var(--color-primary-darker); }
    .blog-help .btn:hover { background: #f0fdf7; }

    @media (max-width: 860px) {
      .blog-featured { grid-template-columns: 1fr; }
      .blog-featured__media { min-height: 200px; }
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .blog-grid { grid-template-columns: 1fr; }
    }