.blog-single-page {
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(31, 99, 233, 0.08), transparent 70%),
    #ffffff;
  min-height: 60vh;
  padding: 8rem 0 5rem;
}

/* Remove old card styles, make it clean & wide */
.blog-single-article {
  max-width: 100%;
  /* Relies on container (1200px approx) */
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.blog-single-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.blog-single-back:hover {
  color: #1f63e9;
}

.blog-single-header {
  max-width: 900px;
  /* Keep header slightly focused or full width? Let's keep it focused */
  margin-bottom: 3rem;
}

.blog-single-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.blog-single-category {
  color: #1f63e9;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.blog-single-title {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0f172a;
  font-weight: 800;
}

.blog-single-featured-image-wrap {
  margin: 2rem 0 3rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
  /* Subtle float effect */
}

.blog-single-featured-image {
  width: 100%;
  height: auto;
  display: block;
}

.blog-featured-caption {
  padding: 0.75rem 0 0;
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
}

/* --- Layout Grid --- */
.blog-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 4rem;
  align-items: flex-start;
}

.blog-single-content-wrapper {
  min-width: 0;
  /* Prevention flex/grid blowout */
}

/* --- Content Typography --- */
.blog-single-content {
  color: #334155;
  font-size: 1.125rem;
  /* ~18px */
  line-height: 1.85;
}

.blog-single-content p {
  margin-bottom: 24px;
}

.blog-single-content h2,
.blog-single-content h3,
.blog-single-content h4 {
  color: #0f172a;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 3rem 0 1.25rem;
}

.blog-single-content h2 {
  font-size: 1.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  /* Accent line */
  position: relative;
}

.blog-single-content h2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  background: #1f63e9;
  border-radius: 2px;
}

.blog-single-content h3 {
  font-size: 1.5rem;
}

.blog-single-content ul,
.blog-single-content ol {
  margin-bottom: 24px;
  padding-left: 1.5rem;
}

.blog-single-content li {
  margin-bottom: 0.75rem;
}

.blog-single-content a {
  color: #1f63e9;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}

.blog-single-content a:hover {
  color: #164cb9;
  text-decoration-thickness: 2px;
}

.blog-single-content img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.blog-single-content blockquote {
  border-left: 4px solid #1f63e9;
  background: linear-gradient(to right, #f8fafc, #fff);
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
  font-size: 1.25rem;
  font-style: italic;
  color: #475569;
  border-radius: 0 12px 12px 0;
}

/* --- Inline CTA --- */
.blog-inline-cta {
  margin: 3rem 0;
  padding: 2rem;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.blog-inline-cta-text {
  margin: 0 !important;
  color: #1e3a8a;
  font-size: 1.1rem;
}

.blog-inline-cta a {
  flex-shrink: 0;
  background: #1f63e9;
  color: #fff !important;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(31, 99, 233, 0.3);
  transition: transform 0.2s, background 0.2s;
}

.blog-inline-cta a:hover {
  transform: translateY(-2px);
  background: #164cb9;
}

/* --- Sidebar --- */
.blog-single-sidebar {
  /* container for sticky wrapper */
}

.blog-single-toc-wrapper {
  position: sticky;
  top: 100px;
  /* Offset from header */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.blog-single-toc {
  /* Minimal look */
  padding-left: 1rem;
  border-left: 2px solid #e2e8f0;
}

.blog-single-toc-title {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  font-weight: 700;
}

.blog-single-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.blog-single-toc-list a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  display: block;
  transition: color 0.2s;
}

.blog-single-toc-list a:hover {
  color: #1f63e9;
}

/* Sidebar CTA */
.blog-sidebar-cta {
  background: #1e293b;
  color: #fff;
  padding: 1.75rem;
  border-radius: 16px;
  text-align: center;
}

.blog-sidebar-cta h4 {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 1.1rem;
}

.blog-sidebar-cta p {
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.blog-sidebar-cta a {
  display: inline-block;
  background: #3b82f6;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.blog-sidebar-cta a:hover {
  background: #2563eb;
}

/* --- Bottom Help Section --- */
.blog-single-help {
  margin-top: 4rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.blog-single-help-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.blog-single-help h3 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  color: #0f172a;
}

.blog-single-help-text {
  margin: 0;
  color: #475569;
  font-size: 1.05rem;
  max-width: 500px;
}

.blog-single-help-button {
  background: #0f172a;
  color: #fff;
  padding: 1rem 1.75rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}

.blog-single-help-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.2);
}

/* --- Related Posts --- */
.blog-single-related {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid #e2e8f0;
}

.blog-single-related h2 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #0f172a;
}

.blog-single-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-single-related-card {
  display: flex;
  flex-direction: column;
}

.blog-single-related-link {
  text-decoration: none;
  color: inherit;
}

.blog-single-related-thumb-wrap {
  display: block;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f1f5f9;
}

.blog-single-related-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.blog-single-related-link:hover .blog-single-related-thumb {
  transform: scale(1.05);
}

.blog-single-related-card h3 {
  font-size: 1.1rem;
  line-height: 1.4;
  color: #0f172a;
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.blog-single-related-card p {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.6;
}

/* --- Pro Tip Box --- */
.blog-pro-tip {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: #166534;
}

.blog-pro-tip strong {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #15803d;
  margin-bottom: 0.5rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .blog-single-layout {
    grid-template-columns: 1fr;
    /* Stack content */
  }

  .blog-single-toc-wrapper {
    position: static;
    /* No longer sticky on mobile */
    margin-top: 3rem;
    order: 2;
    /* Move to bottom or keep? Let's keep it below content implicitly if we moved markup, but we didn't. 
                 Wait, markup order is Content wrapper THEN Sidebar. So Sidebar will be below on mobile. perfect. */
  }

  .blog-single-toc {
    border-left: none;
    border-top: 2px solid #e2e8f0;
    padding-left: 0;
    padding-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  .blog-single-page {
    padding-top: 6rem;
  }

  .blog-inline-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-single-help {
    grid-template-columns: 1fr;
    padding: 2rem;
    text-align: center;
  }

  .blog-single-help h3,
  .blog-single-help-text {
    margin-left: auto;
    margin-right: auto;
  }

  .blog-single-related-grid {
    grid-template-columns: 1fr;
  }
}