/* ==========================================================================
   DC Article Redesign — single post template
   Enqueued from functions.php (daily_coin__styles), single posts only.
   Sections: 1 category pill · 2 title/dek · 3 header bar · 4 share buttons ·
   5 share rail + mobile bar · 6 TOC · 7 takeaways · 8 typography ·
   9 sentiment card · 10 tags · 11 related grid · 12 sticky sidebar
   ========================================================================== */

/* --- 1. Category pill -------------------------------------------------- */

.dc-cat-row {
  margin: 0 0 12px;
}

.dc-cat-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.dc-cat-pill:hover { opacity: 0.85; }

.dc-cat-pill--bitcoin        { background: #f7931a; }
.dc-cat-pill--altcoins       { background: #655997; }
.dc-cat-pill--defi           { background: #0e9f6e; }
.dc-cat-pill--regulations,
.dc-cat-pill--regulation     { background: #1c64f2; }
.dc-cat-pill--markets        { background: #b43403; }
.dc-cat-pill--crypto-news    { background: #f7be23; color: #1a1a1a !important; }
.dc-cat-pill--press-release,
.dc-cat-pill--sponsored      { background: #6b7280; }

/* --- 2. Title + dek (excerpt under H1) --------------------------------- */
/* One font family across the whole article. The theme mixes Roboto (body)
   with Open Sans 14px (global p rule from style_dynamic.css) — the dek and
   the body text ended up in different fonts, sizes, and colors. */

.single-post .mkd-blog-single h1.mkd-post-title,
.mkd-blog-single h1.mkd-post-title {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #111;
  margin: 0 0 14px;
}

/* The dek = the_excerpt() printed right after the H1 */
.single-post .mkd-blog-single h1.mkd-post-title + p,
.mkd-blog-single h1.mkd-post-title + p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 20px !important;
  line-height: 1.55 !important;
  font-weight: 400;
  color: #52525b !important;
  margin: 0 0 18px !important;
}

@media (max-width: 680px) {
  .single-post .mkd-blog-single h1.mkd-post-title,
  .mkd-blog-single h1.mkd-post-title { font-size: 29px; }

  .single-post .mkd-blog-single h1.mkd-post-title + p,
  .mkd-blog-single h1.mkd-post-title + p { font-size: 17px !important; }
}

/* --- 3. Header bar ------------------------------------------------------ */

.dc-article-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 14px 0;
  margin: 4px 0 20px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

/* Byline: avatar + stacked text */
.dc-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dc-byline__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.dc-byline__avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: block;
}

.dc-byline__avatar .pp-multiple-authors-boxes-wrapper { margin: 0 !important; }
.dc-byline__avatar ul.pp-multiple-authors-boxes-ul { display: flex; margin: 0; padding: 0; list-style: none; }
.dc-byline__avatar ul.pp-multiple-authors-boxes-ul li { margin: 0 0 0 -8px; }
.dc-byline__avatar ul.pp-multiple-authors-boxes-ul li:first-child { margin-left: 0; }

.dc-byline__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dc-byline__author {
  font-size: 15px;
  line-height: 1.35;
  color: #1a1a1a;
}

.dc-byline__label {
  color: #767676;
  font-weight: 400;
  margin-right: 2px;
}

.dc-byline__author a,
.dc-byline__author .pp-multiple-authors-boxes-li a {
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
}

.dc-byline__author a:hover,
.dc-byline__author .pp-multiple-authors-boxes-li a:hover { color: #d99e00; }

/* Editor credits appended by the names layout */
.dc-byline__author .ppma-editor,
.dc-byline__author .ppma-copyeditor {
  color: #767676;
  font-weight: 400;
}

.dc-byline__dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #767676;
}

.dc-byline__dates time { color: inherit; }

.dc-read-time,
.dc-updated { white-space: nowrap; }

.dc-updated { color: #0e9f6e; font-weight: 600; }

.dc-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c4c4c4;
  flex: 0 0 auto;
}

/* Right side: Google News chip + share */
.dc-article-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.dc-gnews-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border: none;
  border-radius: 999px;
  background: #1a73e8;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.dc-gnews-chip:hover {
  background: #1557b0;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35);
}

.dc-gnews-chip__g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}

.dc-gnews-chip__txt {
  font-size: 12.5px;
  line-height: 1.2;
  color: #fff !important;
  white-space: nowrap;
}

.dc-gnews-chip__txt strong { font-weight: 700; }

/* --- 4. Share buttons (shared by bar, rail, mobile) --------------------- */

.dc-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dc-share__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #767676;
  margin-right: 2px;
}

.dc-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  color: #333 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
  line-height: 0;
}

.dc-share__btn:hover {
  background: #f7be23;
  color: #111 !important;
}

.dc-share__btn svg { display: block; }

.dc-share__copy { position: relative; }

.dc-share__copy.is-copied::after {
  content: "Copied!";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* --- 5. Mobile bottom share bar ------------------------------------------ */

.dc-share-mobile { display: none; }

@media (max-width: 680px) {
  .dc-share-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* lower any anchor-ad z-index conflict deliberately */
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e6e6e6;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    backdrop-filter: blur(4px);
  }

  .dc-share-mobile .dc-share__btn { width: 34px; height: 34px; }

  /* header bar tweaks */
  .dc-article-header { padding: 10px 0; gap: 10px 12px; }
  .dc-article-header__actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .dc-article-header .dc-share__label { display: none; }
  .dc-byline__dates .dc-updated { display: none; }
}

/* --- 6. "In this article" TOC (built by article-redesign.js) ------------ */

.dc-toc {
  border: 1px solid #e6e6e6;
  border-left: 3px solid #f7be23;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 28px 0;
  background: #fafafa;
}

.dc-toc__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
}

.dc-toc__toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #767676;
  border-bottom: 2px solid #767676;
  transform: rotate(45deg);
  margin-left: auto;
  transition: transform 0.2s ease;
}

.dc-toc.is-collapsed .dc-toc__toggle::after { transform: rotate(-45deg); }

.dc-toc__list {
  margin: 12px 0 0;
  padding: 0 0 0 2px;
  list-style: none;
  counter-reset: dc-toc;
}

.dc-toc.is-collapsed .dc-toc__list { display: none; }

.dc-toc__list li {
  counter-increment: dc-toc;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
}

.dc-toc__list li::before {
  content: counter(dc-toc) ".";
  color: #d99e00;
  font-weight: 700;
  margin-right: 8px;
}

.dc-toc__list a {
  color: #333;
  text-decoration: none;
}

.dc-toc__list a:hover { color: #d99e00; text-decoration: underline; }

html { scroll-behavior: smooth; }

/* --- 7. Key takeaways box ------------------------------------------------ */

.dc-takeaways {
  border: 1px solid #f0dfa8;
  border-radius: 8px;
  background: #fdf8e9;
  padding: 18px 22px;
  margin: 0 0 28px;
}

.dc-takeaways__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6d00;
  margin-bottom: 10px;
}

.dc-takeaways ul {
  margin: 0;
  padding: 0 0 0 20px;
}

.dc-takeaways li {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 6px;
  color: #333;
}

.dc-takeaways li:last-child { margin-bottom: 0; }

/* --- 8. Body typography -------------------------------------------------- */
/* Unified reading experience. Overrides blog.css (p line-height: 20px — far
   too tight for 18px text) and style_dynamic.css (p = Open Sans 14px). */

.mkd-blog-single .mkd-post-text-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Body paragraphs — 18px with a proper ~1.75 line-height
   (newsletter CTA excluded — it has its own typography) */
.single-post .mkd-post-content .mkd-post-text p:not(.dc-newsletter-cta p),
.mkd-blog-single .mkd-post-text-inner p:not(.dc-newsletter-cta p) {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.75 !important;
  font-weight: 400;
  color: #26262b !important;
  margin: 0 0 24px !important;
}

/* Breathing room between the featured image and whatever starts the article */
.mkd-blog-single .mkd-post-image-area {
  margin-bottom: 28px;
}

/* Lists match paragraphs */
.single-post .mkd-post-content .mkd-post-text ul,
.single-post .mkd-post-content .mkd-post-text ol {
  margin: 28px 0 !important;
  padding-left: 26px;
}

/* Intro bullet list (wp-block-list right after the featured image) —
   roomier rows so the gold-arrow bullets can breathe */
.mkd-blog-single .mkd-post-text-inner > ul.wp-block-list:first-child {
  margin: 32px 0 !important;
  padding: 2px 0 2px 4px;
}

.mkd-blog-single .mkd-post-text-inner ul.wp-block-list li {
  margin-bottom: 12px;
  padding-left: 4px;
}

.mkd-blog-single .mkd-post-text-inner ul.wp-block-list li:last-child {
  margin-bottom: 0;
}

.single-post .mkd-post-content .mkd-post-text li {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #26262b;
  margin-bottom: 8px;
}

/* In-content links: inherit size, clear affordance, brand hover */
.single-post .mkd-post-content .mkd-post-text p a,
.single-post .mkd-post-content .mkd-post-text li a {
  font-size: inherit !important;
  line-height: inherit !important;
  color: #1e6fd9;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.single-post .mkd-post-content .mkd-post-text p a:hover,
.single-post .mkd-post-content .mkd-post-text li a:hover {
  color: #d99e00 !important;
}

/* Headings — same family, clear hierarchy, generous space above */
.single-post .mkd-post-content .mkd-post-text h2,
.mkd-blog-single .mkd-post-text-inner h2.wp-block-heading {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 28px !important;
  line-height: 1.3 !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
  padding-top: 0;
  margin: 44px 0 16px !important;
}

.single-post .mkd-post-content .mkd-post-text h3,
.mkd-blog-single .mkd-post-text-inner h3.wp-block-heading {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 22px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  color: #111;
  margin: 36px 0 14px !important;
}

.single-post .mkd-post-content .mkd-post-text h4 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 700;
  color: #111;
  margin: 30px 0 12px;
}

/* First element after a heading shouldn't add extra top margin */
.single-post .mkd-post-content .mkd-post-text h2 + p,
.single-post .mkd-post-content .mkd-post-text h3 + p { margin-top: 0 !important; }

.mkd-blog-single .mkd-post-text-inner blockquote {
  border-left: 3px solid #f7be23;
  margin: 30px 0;
  padding: 6px 0 6px 22px;
  font-size: 19px;
  line-height: 1.65;
  font-style: italic;
  color: #444;
}

.mkd-blog-single .mkd-post-text-inner blockquote p {
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: #444 !important;
  margin-bottom: 0 !important;
}

/* Bold text slightly darker for scannability */
.single-post .mkd-post-content .mkd-post-text p strong { color: #111; }

/* Center + cap X/Twitter embeds */
.mkd-blog-single .mkd-post-text-inner figure.wp-block-embed-x,
.mkd-blog-single .mkd-post-text-inner figure.wp-block-embed-twitter {
  margin: 32px auto;
  max-width: 550px;
}

.mkd-blog-single .mkd-post-text-inner figure.wp-block-embed-x .twitter-tweet,
.mkd-blog-single .mkd-post-text-inner figure.wp-block-embed-twitter .twitter-tweet {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* In-content images + captions */
.mkd-blog-single .mkd-post-text-inner figure.wp-block-image {
  margin: 32px 0;
}

.mkd-blog-single .mkd-post-text-inner figure.wp-block-image img {
  border-radius: 6px;
}

.mkd-blog-single .mkd-post-text-inner figcaption,
.mkd-blog-single .mkd-post-image-area figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: #767676;
  text-align: center;
  margin-top: 8px;
}

.mkd-blog-single .mkd-post-image-area img { border-radius: 6px; }

/* --- 9. Sentiment "Vibe Check" — scroll-triggered popup ------------------- */

/* Hidden inline; article-redesign.js reveals it as a popup at ~70% scroll */
.dc-vibe-check {
  display: none;
}

.dc-vibe-check.is-visible {
  display: block;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 400px;
  max-width: calc(100vw - 32px);
  z-index: 950;
  background: #17171c;
  border-top: 4px solid #f7be23;
  border-radius: 14px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: dc-vibe-in 0.35s ease both;
}

@keyframes dc-vibe-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dc-vibe-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #b5b5bd;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.dc-vibe-close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

@media (max-width: 680px) {
  .dc-vibe-check.is-visible {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 62px; /* sits above the mobile share bar */
  }
}

.dc-vibe-check .user-sentiment-vote {
  position: relative;
  border: none;
  background: transparent;
  padding: 20px 40px 16px 24px;
  margin: 0;
}

.dc-vibe-check .user-sentiment-vote .sentiment-intro-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.dc-vibe-check .user-sentiment-vote .sentiment-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dc-vibe-check .user-sentiment-vote .vote-btn {
  flex: 1 1 0;
  min-width: 90px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: #f0f0f0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  text-align: center!important;
}

.dc-vibe-check .user-sentiment-vote .vote-btn[data-sentiment="bullish"]:hover { border-color: #23c78e; color: #17171c; background: #23c78e; }
.dc-vibe-check .user-sentiment-vote .vote-btn[data-sentiment="bearish"]:hover { border-color: #f06565; color: #17171c; background: #f06565; }
.dc-vibe-check .user-sentiment-vote .vote-btn[data-sentiment="neutral"]:hover { border-color: #c4c4c4; color: #17171c; background: #c4c4c4; }

.dc-vibe-check .vote-results {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 14px 24px 18px;
  margin: 0;
}

.dc-vibe-check .vote-results .sentiment-intro-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a94;
  margin-bottom: 10px;
}

.dc-vibe-check .sentiment-meter {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.dc-vibe-check .sentiment-bar.sentiment-bullish { background: #23c78e; }
.dc-vibe-check .sentiment-bar.sentiment-neutral { background: #8a8a94; }
.dc-vibe-check .sentiment-bar.sentiment-bearish { background: #f06565; }

.dc-vibe-check .sentiment-result-text {
  font-size: 14px;
  font-weight: 700;
  color: #f7be23;
  margin-top: 8px;
}

/* --- 9b. Newsletter CTA ---------------------------------------------------- */

.dc-newsletter-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #17171c 0%, #26262e 100%);
  padding: 26px 30px;
  margin: 36px 0 8px;
  overflow: hidden;
}

/* soft gold glow in the corner */
.dc-newsletter-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 190, 35, 0.22) 0%, rgba(247, 190, 35, 0) 70%);
  pointer-events: none;
}

.dc-newsletter-cta__icon {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  background: #f7be23;
  color: #17171c;
  box-shadow: 0 0 0 6px rgba(247, 190, 35, 0.15);
}

.dc-newsletter-cta__text { flex: 1 1 auto; min-width: 0; position: relative; }

.dc-newsletter-cta__title {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

/* High-specificity variants so this always outranks the body-text rules,
   even in an !important-vs-!important tie */
.dc-newsletter-cta__text p,
body .dc-newsletter-cta .dc-newsletter-cta__text p,
.single-post .mkd-post-content .mkd-post-text .dc-newsletter-cta .dc-newsletter-cta__text p,
.mkd-blog-single .mkd-post-text-inner .dc-newsletter-cta .dc-newsletter-cta__text p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #fff !important;
  margin: 0 !important;
}

.dc-newsletter-cta__btn {
  position: relative;
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: #f7be23;
  color: #17171c;
  font-size: 15px;
  font-weight: 800;
  padding: 13px 30px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.dc-newsletter-cta__btn:hover {
  background: #ffd15c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(247, 190, 35, 0.4);
}

@media (max-width: 680px) {
  .dc-newsletter-cta { flex-direction: column; text-align: center; gap: 12px; padding: 22px 20px; }
  .dc-newsletter-cta__btn { width: 100%; }
  .dc-newsletter-cta .dc-newsletter-cta__text {
    text-align: center;
  }
}

/* --- 10. Tags as pills ---------------------------------------------------- */

.mkd-blog-single .mkd-single-tags-holder .mkd-single-tags-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #767676;
  margin-bottom: 10px;
}

.mkd-blog-single .mkd-tags a {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border-radius: 999px;
  background: #f0f0f0;
  color: #333 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mkd-blog-single .mkd-tags a:hover {
  background: #f7be23;
  color: #111 !important;
}

/* --- 11. Related articles grid -------------------------------------------- */

.dc-related {
  margin: 40px 0 32px;
  padding-top: 28px;
  border-top: 1px solid #e6e6e6;
}

.dc-related .mkd-related-posts-holder {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dc-related .mkd-title-line-head {
  font-size: 22px;
  margin: 0 0 20px;
}

.dc-related .columns-holder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}

.dc-related .mkd-post-item {
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  height: 100%;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dc-related .mkd-pt-image-link {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  flex: 0 0 auto;
}

.dc-related .mkd-pt-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.dc-related .mkd-pt-image-link:hover .mkd-pt-image { transform: scale(1.04); }

.dc-related h3 {
  font-size: 17px;
  line-height: 1.4;
  margin: 12px 0 6px;
}

.dc-related h3 a { color: #1a1a1a; text-decoration: none; }
.dc-related h3 a:hover { color: #d99e00; }

@media (max-width: 680px) {
  .dc-related .columns-holder { grid-template-columns: 1fr; }
}

/* --- 11b. Sidebar cards (trending / newsletter / follow) ------------------ */

.dc-sb-card {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  padding: 24px;
  margin-bottom: 28px;
}

.dc-sb-card__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1a1a1a;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid #f7be23;
}

/* Trending: compact rows, rank badge on thumbnail */
.dc-trend-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dc-trend-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0;
}

.dc-trend-item:first-child { padding-top: 0 !important; }
.dc-trend-item:last-child { border-bottom: none; padding-bottom: 0 !important; }

.dc-trend-thumb {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 104px;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}

.dc-trend-thumb img {
  width: 104px !important;
  height: 72px !important;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.25s ease;
}

.dc-trend-item:hover .dc-trend-thumb img { transform: scale(1.05); }

.dc-trend-rank {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7be23;
  color: #17171c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  border-radius: 8px 0 8px 0;
}

.dc-trend-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  font-weight: 600;
  color: #1a1a1a !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-trend-title:hover { color: #d99e00 !important; }

/* Newsletter card */
.dc-sb-newsletter {
  background: linear-gradient(135deg, #17171c 0%, #26262e 100%);
  border: none;
}

.dc-sb-newsletter .dc-sb-card__title { color: #fff; }

.dc-sb-newsletter p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #fff !important;
  margin: 0 0 16px !important;
}

.dc-sb-newsletter .dc-newsletter-cta__btn {
  width: 100%;
  display: block;
}

/* --- 12. Column layout: fixed gutter + sticky sidebar ---------------------- */
/* The theme floats a 75%/25% split with asymmetric inner paddings, then centers
   the 970px article block inside the 75% column and pushes the sidebar down
   73px — so both the horizontal and vertical gaps shift with viewport width.
   Replaced with a centered flex layout and one fixed gutter. */

@media (min-width: 1025px) {
  .single-post .mkd-two-columns-75-25.mkd-content-has-sidebar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 48px;
  }

  .single-post .mkd-two-columns-75-25.mkd-content-has-sidebar > .mkd-column1 {
    float: none;
    width: auto;
    flex: 0 1 970px;
    min-width: 0;
  }

  .single-post .mkd-two-columns-75-25.mkd-content-has-sidebar > .mkd-column1 > .mkd-column-inner {
    padding: 0;
  }

  .single-post .mkd-two-columns-75-25.mkd-content-has-sidebar > .mkd-column2 {
    float: none;
    width: auto;
    flex: 0 0 348px;
  }

  /* kill the theme's arbitrary 73px offset — align both columns to the top */
  .single-post .mkd-content-left-from-sidebar + .mkd-column2 {
    margin-top: 0;
  }

  .single-post .mkd-two-columns-75-25.mkd-content-has-sidebar > .mkd-column2 > .mkd-column-inner {
    padding: 0;
    position: sticky;
    top: 110px;
  }
}