/* =============================================================
   TechVistaar — Blog listing + single article
============================================================= */

  .blog-hero{ padding:80px 0 44px; }
  .blog-hero h1{ font-size:clamp(34px, 4.6vw, 52px); max-width:680px; }
  .blog-hero p.lead{ margin-top:18px; max-width:520px; font-size:17px; color:var(--slate); }

  /* .search-row / .search-box / .chip-row / .chip are shared across
     Blog and Software pages — defined once in pages/software.css
     (or style.css) rather than duplicated here. */

  
/* ---------- Featured post ---------- */

  .featured{ padding:24px 0 70px; }
  .featured-card{
    display:grid; grid-template-columns:1.1fr 1fr; gap:0;
    background:var(--panel); border:1px solid var(--line); border-radius:20px;
    overflow:hidden;
  }
  @media (max-width:860px){ .featured-card{ grid-template-columns:1fr; } }
  .featured-thumb{
    background:var(--teal-tint); display:flex; align-items:center; justify-content:center;
    min-height:280px; position:relative; overflow:hidden;
  }
  .featured-thumb svg{ width:62%; opacity:.9; }
  .featured-body{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
  .featured-body .post-tag{ margin-bottom:16px; }
  .featured-body h2{ font-size:clamp(22px, 2.6vw, 30px); margin-bottom:14px; }
  .featured-body p{ color:var(--slate); font-size:15.5px; margin-bottom:20px; }

  .post-tag{
    display:inline-block; font-size:11.5px; font-weight:600;
    padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
  }
  .tag-ai{ background:var(--teal-tint); color:var(--teal); }
  .tag-productivity{ background:var(--purple-tint); color:var(--purple); }
  .tag-marketing{ background:var(--blue-tint); color:var(--blue); }
  .tag-crm{ background:var(--amber-tint); color:var(--amber-ink); }
  .tag-case{ background:var(--coral-tint); color:var(--coral); }

  .post-meta{ font-size:13px; color:var(--slate); display:flex; align-items:center; gap:8px; }
  .dot-sep{ opacity:.5; }

  
/* ---------- Blog grid ---------- */

  .blog-grid-section{ padding:0 0 70px; }
  .blog-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  }
  @media (max-width:940px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

  .blog-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
  }
  .blog-card:hover{ border-color:rgba(18,24,43,0.22); transform:translateY(-3px); }
  .blog-card.is-hidden{ display:none; }

  .post-thumb{
    aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .post-thumb svg{ width:46%; opacity:.85; }
  .thumb-ai{ background:var(--teal-tint); }
  .thumb-productivity{ background:var(--purple-tint); }
  .thumb-marketing{ background:var(--blue-tint); }
  .thumb-crm{ background:var(--amber-tint); }
  .thumb-case{ background:var(--coral-tint); }

  .post-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
  .post-body h3{ font-size:18px; line-height:1.28; }
  .post-body h3 a:hover{ color:var(--amber-ink); }
  .post-excerpt{ color:var(--slate); font-size:14px; flex:1; }

  /* .load-more-row and .cta-band are global (style.css) */

  
/* ---------- Newsletter CTA (blog listing footer) ---------- */

  .cta-band{ margin:0 0 90px; }
  .cta-form{
    display:flex; gap:10px; justify-content:center; margin-top:28px; flex-wrap:wrap;
  }
  .cta-form input{
    border:1px solid var(--line); border-radius:999px; padding:13px 20px;
    font-family:'Inter'; font-size:14.5px; min-width:260px; outline:none;
    background:var(--panel); color:var(--ink);
  }
  .cta-form button{
    background:var(--ink); color:var(--paper); font-weight:600; font-size:14.5px;
    padding:13px 24px; border-radius:999px; border:none; cursor:pointer;
    transition:transform .18s ease;
  }
  .cta-form button:hover{ transform:translateY(-2px); }
  .form-note{ font-size:12.5px; color:var(--amber-ink); opacity:.7; margin-top:14px; }

  
/* ---------- Single article ---------- */
/* article-body / article-cover now live in style.css (global) so legal
   pages and any other content page get them without loading blog.css */