/* Scoped Blog Detail styles */
#blog-detail-content {
  background: #F8FAFC;
  /* No large horizontal padding here — .container handles centering */
  padding: 56px 0;
  overflow: visible; /* must NOT be hidden/auto — would break position:sticky */
}
#blog-detail-content .container {
  max-width: 1400px;
  width: calc(100% - 3rem); /* 1.5rem margin each side */
  margin: 0 auto;
  /* overflow must NOT be set — would break position:sticky */
}

/* ── Two-column grid: article (large) + sidebar (small) ─────── */
.blog-detail-grid {
  display: grid;
  grid-template-columns: 1fr;   /* single col on mobile */
  gap: 2rem;
  align-items: start;           /* critical for bounded sticky */
}
@media (min-width: 1024px) {
  .blog-detail-grid {
    /* Left ~70%, Right ~30%, sidebar capped 280-360px */
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 360px);
    gap: 2.5rem;
  }
}

/* Article column — must have min-width:0 to prevent grid blowout */
.blog-article {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ── Bounded sticky sidebar ──────────────────────────────────── */
.sidebar {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* NO overflow set — any overflow value breaks position:sticky */
}
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: 6rem;   /* clears fixed navbar + breathing room */
  }
}

/* Sidebar cards */
.sidebar .sidebar-card {
  background: #fff;
  border-radius: 1.5rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  color: #475569;
  font-size: 0.875rem;
  font-weight: 600;
}
.sidebar .logo { height: 2rem; object-fit: contain; margin-bottom: 1rem; display: block; }
.sidebar .primary-cta,
.sidebar .wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-weight: 900;
  text-decoration: none;
  font-size: 0.8125rem;
}
.sidebar .primary-cta { background: #DC2626; color: #fff; }
.sidebar .wa-btn       { background: #10B981; color: #fff; }
.sidebar .primary-cta:hover { background: #B91C1C; }
.sidebar .wa-btn:hover       { background: #059669; }

/* Related topics pills */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill  { background: #F8FAFC; border: 1px solid rgba(226,232,240,1); color: #475569; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.625rem; font-weight: 600; }

/* ── Cover image ─────────────────────────────────────────────── */
.cover-image {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  background: #1E293B;
  cursor: zoom-in;
  position: relative;
  width: 100%;
  /* aspect-ratio gives a stable height without collapsing */
  aspect-ratio: 16/ 9;
}
.cover-image .cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fills the 16/9 area — no side gaps */
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}
.cover-image:hover .cover-img { transform: scale(1.02); }

/* Content card */
.content-card { background:#fff;border-radius:1.5rem;border:1px solid rgba(226,232,240,0.8);padding:1.75rem;box-shadow:0 6px 18px rgba(0,0,0,0.04);color:#475569;line-height:1.85;font-weight:500; }
.content-card .content-body { white-space: pre-line; }
.content-card ul { margin:0.5rem 0 0;padding-left:1.25rem; }
.content-card li { margin-bottom:0.5rem; }

/* Why Choose card */
.why-choose { background:#fff;border-radius:1.5rem;border:1px solid rgba(226,232,240,0.8);padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,0.03); }
.why-choose h2 { display:flex;align-items:center;gap:0.5rem;font-size:1.1rem;font-weight:900;color:#1E293B;margin-bottom:1rem;font-family:'Outfit',sans-serif; }
.why-choose ul { display:flex;flex-direction:column;gap:0.75rem;padding:0;margin:0;list-style:none; }
.why-choose li { display:flex;align-items:flex-start;gap:0.75rem; }
.why-choose .badge { width:1.25rem;height:1.25rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:#ECFDF5;color:#059669;font-weight:900;font-size:0.625rem;flex-shrink:0;margin-top:0.125rem; }

/* Use cases */
.use-cases { background:#F8FAFC;border-radius:1.5rem;border:1px solid rgba(226,232,240,0.8);padding:1.5rem; }
.use-cases h2 { display:flex;align-items:center;gap:0.5rem;font-size:1.1rem;font-weight:900;color:#1E293B;margin-bottom:1rem;font-family:'Outfit',sans-serif; }
.use-cases .grid { display:grid;grid-template-columns:1fr 1fr;gap:0.75rem; }
.use-cases .badge { display:flex;align-items:center;gap:0.5rem;background:#fff;border-radius:0.75rem;padding:0.75rem 1rem;border:1px solid rgba(226,232,240,1);font-size:0.75rem;font-weight:600;color:#475569; }

/* CTA banner */
.cta-banner { background:linear-gradient(to right,#DC2626,#EF4444);border-radius:1.5rem;padding:2rem;text-align:center;box-shadow:0 6px 24px rgba(220,38,38,0.12); }
.cta-banner h3 { font-size:1.25rem;font-weight:900;color:#fff;margin-bottom:0.5rem;font-family:'Outfit',sans-serif; }
.cta-banner p { color:rgba(254,202,202,1);font-size:0.875rem;margin:0; }
.cta-banner .cta-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem;margin-top:1rem; }
.cta-banner .btn { display:inline-flex;align-items:center;gap:0.5rem;padding:0.875rem 2rem;border-radius:0.75rem;font-weight:900;text-decoration:none;font-size:0.875rem; }
.cta-banner .btn.call { background:#fff;color:#DC2626;box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.cta-banner .btn.wa   { background:#10B981;color:#fff;box-shadow:0 4px 14px rgba(16,185,129,0.12); }

/* More from blog (related) */
.more-blogs { margin-top: 1rem; }
.more-blogs h3 { font-size:0.75rem;font-weight:900;color:#1E293B;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem; }
.more-blogs .grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
@media (max-width:1023px) { .more-blogs .grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px)  { .more-blogs .grid { grid-template-columns:1fr; } }
.more-blogs .card { background:#fff;border-radius:0.75rem;border:1px solid rgba(226,232,240,0.8);overflow:hidden;text-decoration:none;transition:box-shadow 0.2s;display:flex;flex-direction:column; }
.more-blogs .card:hover { box-shadow:0 4px 18px rgba(0,0,0,0.07); }
.more-blogs .thumb { aspect-ratio:16/9;background:#F8FAFC;overflow:hidden; }
.more-blogs img   { width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s; }
.more-blogs .card:hover img { transform:scale(1.04); }
.more-blogs .title { padding:0.75rem;font-size:0.8125rem;font-weight:900;color:#334155;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* Typography */
#blog-detail-content h1,
#blog-detail-content h2,
#blog-detail-content h3 { font-family:'Outfit',sans-serif;color:#1E293B; }

/* Tablet: two-column if wide enough, otherwise stack */
@media (min-width: 768px) and (max-width: 1023px) {
  #blog-detail-content .container { width: calc(100% - 2rem); }
}

/* Mobile: single column, no sticky */
@media (max-width: 767px) {
  #blog-detail-content { padding: 32px 0 56px; }
  #blog-detail-content .container { width: calc(100% - 2rem); }
  .blog-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .cover-image { aspect-ratio: unset; }
  .sidebar { position: static !important; top: auto !important; }
}