/* ==========================================================================
   NOSTAL CARS PUB — assets/css/blog.css
   Styles partagés par les pages blog.php et blog-article.php
   S'appuie sur les variables et composants définis dans style.css
   (les cartes d'articles réutilisent .nc-blog-card, déjà défini globalement)
   ========================================================================== */

/* ============================================================================
   BLOG.PHP — préfixe "blg-"
   ============================================================================ */

/* ---- Pastilles de catégorie ---- */
.blg-pills{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom: 2.6rem; }
.blg-pill{
  padding: .55rem 1.2rem; border-radius:22px; border: 1.5px solid var(--nc-gray-300);
  font-size: var(--nc-fs-sm); font-weight:700; color: var(--nc-gray-700);
  background:#fff; transition: all var(--nc-transition); cursor:pointer;
}
.blg-pill:hover{ border-color: var(--nc-blue); color: var(--nc-blue); }
.blg-pill.is-active{ background: var(--nc-blue); border-color: var(--nc-blue); color:#fff; }

/* ---- Article à la une ---- */
.blg-featured{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:0;
  background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius-lg);
  overflow:hidden; margin-bottom: 3rem;
}
.blg-featured-media{ position:relative; min-height:320px; }
.blg-featured-media .nc-placeholder{ height:100%; border-radius:0; min-height:320px; }
.blg-featured-body{ padding: 2.4rem; display:flex; flex-direction:column; justify-content:center; }
.blg-featured-body .nc-blog-cat{ margin-bottom:.8rem; }
@media(max-width:767px){
  .blg-featured{ grid-template-columns:1fr; }
  .blg-featured-media{ min-height:220px; }
}

/* ============================================================================
   BLOG-ARTICLE.PHP — préfixe "blg-article-"
   ============================================================================ */

.blg-article-cover{ border-radius: var(--nc-radius-lg); overflow:hidden; min-height:360px; margin-bottom: 2rem; }
.blg-article-cover img{ width:100%; height:100%; object-fit:cover; }
.blg-article-cover .nc-placeholder{ min-height:360px; border-radius:0; }

.blg-article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; color: var(--nc-gray-500); font-size: var(--nc-fs-sm); margin-bottom:2rem; padding-bottom:1.6rem; border-bottom:1px solid var(--nc-gray-300); }
.blg-article-meta span{ display:flex; align-items:center; gap:.5rem; }
.blg-article-meta i{ color: var(--nc-blue); }

.blg-article-body{ font-size: var(--nc-fs-md); line-height:1.85; color: var(--nc-gray-700); max-width:760px; }
.blg-article-body p{ margin-bottom: 1.4rem; color: var(--nc-gray-700); }
.blg-article-body h2{ margin-top:2.2rem; font-size: var(--nc-fs-xl); }

.blg-share{ display:flex; align-items:center; gap:.8rem; margin: 2.4rem 0; padding-top:1.8rem; border-top:1px solid var(--nc-gray-300); max-width:760px; }
.blg-share span{ font-size: var(--nc-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.6px; color: var(--nc-gray-500); margin-right:.4rem; }
.blg-share a{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--nc-gray-300);
  display:flex; align-items:center; justify-content:center; color: var(--nc-gray-700);
  transition: all var(--nc-transition);
}
.blg-share a:hover{ background: var(--nc-blue); border-color: var(--nc-blue); color:#fff; }

.blg-author-box{
  display:flex; gap:1.2rem; align-items:center; background: var(--nc-gray-100);
  border-radius: var(--nc-radius); padding: 1.6rem; max-width:760px; margin-bottom:3rem;
}
.blg-author-box .avatar{
  width:56px; height:56px; border-radius:50%; background: var(--nc-blue-light); color: var(--nc-blue);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.2rem; flex-shrink:0;
}
.blg-author-box h6{ margin-bottom:.2rem; }
.blg-author-box p{ margin-bottom:0; font-size: var(--nc-fs-sm); color: var(--nc-gray-500); }

.blg-related-title{ margin-bottom:1.8rem; }