/* ==========================================================================
   MediaNet Master Blog Stylesheet (Consolidated Production Baseline)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. UNIVERSAL DARK BLUE CANVAS & WHITE READING CARD
   -------------------------------------------------------------------------- */
body.hs-blog-post,
body.blog-post-page,
body.hs-content-type-blog-post,
html body .blog-post-wrapper,
html body article.blog-post-wrapper,
html body.hs-blog-post .body-container-wrapper,
html body.hs-blog-post .content-wrapper,
html body.hs-blog-post .row-fluid-wrapper {
  background-color: #121733 !important; /* Dark Blue Canvas */
}

body.hs-blog-listing,
body.hs-blog-index,
body.hs-blog-listing .body-container-wrapper {
  background-color: #ffffff !important;
}

/* White Reading Card Container */
html body .hs-blog-post article.blog-post,
html body article.blog-post,
html body .body-container-wrapper article,
html body .hs-blog-post .content-wrapper article {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3.5rem 3.5rem !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 3.5rem !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. HERO SPLIT (TITLE LEFT | FEATURED IMAGE RIGHT & AUTHOR BYLINE)
   -------------------------------------------------------------------------- */
html body article.blog-post .blog-post__header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html body .blog-post__header h1,
html body .blog-post__title h1,
html body h1.blog-post_title,
html body article.blog-post h1 {
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  color: #121733 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Author Byline & Date */
html body .blog-post__header .blog-post__author,
html body article.blog-post .blog-post__author,
html body article.blog-post .blog-post__title .blog-post__author,
html body div.blog-post__author {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html body .blog-post__header .blog-post__author a,
html body article.blog-post .blog-post__author a,
html body div.blog-post__author a,
html body .blog-post__author span {
  color: #bf1f2e !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

html body article.blog-post .blog-post__header img {
  max-width: 380px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   2. ARTICLE CONTENT TYPOGRAPHY & RESPONSIVE IMAGE STYLING
   -------------------------------------------------------------------------- */
html body .blog-post__body p,
html body .blog-post__body h1,
html body .blog-post__body h2,
html body .blog-post__body h3,
html body .blog-post__body h4,
html body .blog-post__body h5,
html body .blog-post__body ul:not(.blog-toc-wrapper ul),
html body .blog-post__body ol,
html body .blog-post__body table,
html body .blog-post__body img,
html body .blog-post__body figure,
html body .blog-post__body blockquote {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Body Paragraphs */
html body .blog-post__body p,
html body .blog-post__body p [style*="color"],
html body .blog-post__body span:not(.blog-post__author span),
html body .blog-post__body li,
html body article.blog-post p,
html body article.blog-post li {
  color: #1e293b !important;
  font-family: 'Inter', -apple-system, BlinkMacSystem