.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; border: 1px solid rgba(11, 15, 18, 0.12); border-radius: 18px; overflow: hidden; background: #FFFFFF; margin-bottom: 18px; }
.blog-featured__img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.blog-featured__content { padding: 18px; }
.blog-hero-pro { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; padding:16px; border:1px solid rgba(11, 15, 18, 0.12); border-radius:16px; background:linear-gradient(135deg,#FFFFFF,#FFFFFF); margin-bottom:16px; }
.blog-hero-pro h2 { margin:8px 0; font-size:1.5rem; }
.blog-hero-pro__stats { display:grid; grid-template-columns:1fr; gap:10px; }
.blog-hero-pro__stats div { border:1px solid rgba(11, 15, 18, 0.12); background:#FFFFFF; border-radius:12px; padding:10px; display:flex; justify-content:space-between; align-items:center; }
.blog-hero-pro__stats strong { font-size:1.1rem; }
.blog-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.blog-categories { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-categories .chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #0B0F12; }
.blog-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.blog-tags .chip { font-size:.8rem; }
.blog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.blog-card { background:#FFFFFF; border:1px solid rgba(11, 15, 18, 0.12); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 24px rgba(11,15,18,0.04); transition:transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(11,15,18,0.1); }
.blog-card__media { display:block; aspect-ratio: 16/10; overflow:hidden; }
.blog-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.blog-card:hover .blog-card__media img { transform:scale(1.04); }
.blog-card__body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.blog-card__category { display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:999px; background:#FFFFFF; border:1px solid #FFCC00; font-size:.75rem; font-weight:700; color:#0B0F12; }
.blog-card__title { font-size:1.12rem; line-height:1.35; font-weight:800; margin:0; color:#0B0F12; }
.blog-card__title a { color:inherit; text-decoration:none; }
.blog-card__excerpt { color:#0B0F12; line-height:1.75; margin:0; min-height:58px; }
.blog-card__meta { display:flex; gap:10px; color:#0B0F12; font-size:.82rem; }
.blog-card__tags { display:flex; flex-wrap:wrap; gap:6px; }
.blog-card__tags .chip { font-size:.72rem; padding:3px 8px; }
.article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
.article-content { max-width: 75ch; line-height: 1.9; font-size: 1rem; }
.article-content h2, .article-content h3 { margin: 20px 0 10px; color: #0B0F12; }
.article-content p { margin-bottom: 12px; }
.article-content .info-box { background:#FFFFFF; border-inline-start:4px solid #0B0F12; padding:12px; border-radius:10px; margin:16px 0; }
.article-content .checklist { background:#FFFFFF; border:1px solid rgba(11, 15, 18, 0.12); border-radius:10px; padding:12px 14px; margin:14px 0; }
.article-toc { position: sticky; top: 90px; align-self: start; background: #FFFFFF; border: 1px solid rgba(11, 15, 18, 0.12); border-radius: 12px; padding: 12px; }
.article-toc a { display: block; font-size: .9rem; margin-bottom: 8px; color: #0B0F12; }
.article-inline-cta,.blog-whatsapp-cta,.blog-popular,.blog-suggested-cars,.article-faq { border:1px solid rgba(11, 15, 18, 0.12); border-radius:14px; padding:14px; background:#FFFFFF; }
.blog-popular { margin-top:16px; }
.blog-popular__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.blog-popular__item { border:1px solid rgba(11, 15, 18, 0.12); border-radius:10px; padding:10px; background:#FFFFFF; }
.blog-suggested-cars { margin-top:16px; }
.blog-whatsapp-cta { margin-top:16px; background:linear-gradient(135deg,#FFFFFF,#FFFFFF); }
.reading-progress { position: fixed; inset-inline: 0; top: 0; height: 4px; background: transparent; z-index: 999; }
.reading-progress__bar { width: 0; height: 100%; background: var(--color-primary); transition: width .12s linear; }

@media (max-width: 900px) {
  .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-popular__list { grid-template-columns:1fr 1fr; }
  .blog-hero-pro { grid-template-columns:1fr; }
  .article-shell { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-popular__list { grid-template-columns:1fr; }
  .blog-list { grid-template-columns: 1fr; }
  .blog-card__title { font-size:1.05rem; }
}

/* تخطيط جسم المقال: الفهرس بجوار المحتوى (كان بلا قاعدة فيتكدّس فوق النص ويلتصق عليه) */
.article-layout__body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) {
  .article-layout__body { grid-template-columns: 1fr; }
  .article-toc { position: static; }
}