/* =========================================================
   BLOG ARTICLE — SKIN: CRYPTOCURRENCY (1:1 как TRADING)
   Только тема/краска. Без layout. Без мусора.
   Важно: НЕ отключаем hero overlay (grid + dots) из article-base.css
   ========================================================= */

/* =========================================================
   0) TOKENS / VARIABLES
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"]{
  --article-accent:  #00A3FF; /* hover/active */
  --article-accent2: #857BFF; /* idle */

  /* ✅ ГРАДИЕНТ КАК В MULTIACCOUNTING */
  --hero-grad: linear-gradient(135deg,
    rgba(168,85,247,0.96) 0%,
    rgba(124,58,237,0.92) 55%,
    rgba(59,130,246,0.86) 100%
  );

  /* cards + banners base */
  --card-grad: linear-gradient(135deg,
    rgba(168,85,247,0.22) 0%,
    rgba(124,58,237,0.18) 55%,
    rgba(59,130,246,0.16) 100%
  );

  --title-gap-after-hero: 70px;
  --gap-after-callout: 60px;
  --gap-after-toc: 48px;

  /* dotted (lead / conclusion / dividers) */
  --lead-line-color: rgba(133,123,255,.95);
  --lead-line-width: 2px;
  --lead-line-inset: 22px;

  /* TOC */
  --toc-bg: rgba(133,123,255,.08);
  --toc-item-bg: rgba(255,255,255,.70);
  --toc-item-bg-hover: rgba(255,255,255,.92);
  --toc-radius: 18px;
  --toc-item-radius: 14px;

  --toc-badge-idle:   var(--article-accent2);
  --toc-badge-active: var(--article-accent);

  /* section top line */
  --section-line-color: var(--article-accent2);
  --section-line-width: 2px;

  /* ✅ section spacing (desktop) — 1:1 как trading */
  --basics-gap-top: 50px;      --basics-gap-bottom: 50px;
  --blockchain-gap-top: 50px;  --blockchain-gap-bottom: 50px;
  --coins-gap-top: 50px;       --coins-gap-bottom: 50px;
  --wallets-gap-top: 50px;     --wallets-gap-bottom: 50px;
  --howget-gap-top: 50px;      --howget-gap-bottom: 50px;
  --usecases-gap-top: 50px;    --usecases-gap-bottom: 50px;
  --price-gap-top: 50px;       --price-gap-bottom: 50px;
  --risks-gap-top: 50px;       --risks-gap-bottom: 50px;
  --conclusion-gap-top: 50px;  --conclusion-gap-bottom: 0px;

  /* кнопки (как на сайте) */
  --ml-btn-radius: 8px;
  --ml-btn-pad-y: 10px;
  --ml-btn-pad-x: 16px;
  --ml-btn-idle:  var(--article-accent2);
  --ml-btn-hot:   var(--article-accent);
  --ml-btn-text:  #ffffff;

  /* ML banner tokens */
  --ml-banner-radius: 18px;
  --ml-banner-pad-y: 18px;
  --ml-banner-pad-x: 20px;
  --ml-banner-border: rgba(0,163,255,.22);
  --ml-banner-shadow: 0 14px 30px rgba(0,163,255,.10);
}


/* =========================================================
   1) HERO
   Важно: НЕ трогаем ::before/::after у .post-hero__inner
   (там сетка/точки из article-base.css)
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-hero{
  background: var(--hero-grad) !important;
}

/* HERO H1 — фикс срезания нижних хвостов букв (g/y/p) */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-heroTitle{
  font-size: clamp(26px, 3.2vw, 40px) !important;

  overflow-wrap: normal !important;
  word-break: normal !important;

  max-height: none !important;
  overflow: visible !important;
  line-height: 1.12 !important;
}


/* =========================================================
   2) LINKS
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post a{
  text-decoration-color: rgba(0,163,255,.35);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post a:hover{
  text-decoration-color: rgba(0,163,255,.6);
}


/* =========================================================
   3) POST TITLE (H1)
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-title{
  margin-top: var(--title-gap-after-hero);
  margin-bottom: 18px;

  color: rgba(0,0,0,.92) !important;
  background: none !important;
  text-shadow: none !important;
}


/* =========================================================
   4) LEAD PARAGRAPH (dotted top/bottom)
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-lead{
  font-size: 18px;
  line-height: 1.6;

  margin-bottom: 24px;
  padding-top: calc(var(--lead-line-inset) + 14px);
  padding-bottom: calc(var(--lead-line-inset) + 14px);

  position: relative;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-lead::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--lead-line-inset);
  border-top: var(--lead-line-width) dotted var(--lead-line-color);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-lead::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: var(--lead-line-inset);
  border-bottom: var(--lead-line-width) dotted var(--lead-line-color);
}


/* =========================================================
   5) SECTION HEADERS (H2) — no bars
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section h2{
  padding-left: 0;
  position: static;
}


/* =========================================================
   5.1) SECTION RHYTHM + top line
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section{
  position: relative;
  margin: 0 !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section::after{
  content: none !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > h2{ margin: 0 0 18px 0 !important; }
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > p{  margin: 0 0 16px 0 !important; }
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > ul,
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > ol{ margin: 0 0 18px 0 !important; }
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > .post-grid-2{ margin: 0 0 20px 0 !important; }
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > .callout{    margin: 0 0 20px 0 !important; }
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section > :last-child{ margin-bottom: 0 !important; }

body[data-page="blog-article"][data-article="cryptocurrency"] .post-section::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: var(--section-line-width);
  background: var(--section-line-color);
  opacity: 1;
}


/* =========================================================
   5.2) ✅ SECTION SPACING — ПРАВИЛЬНЫЕ ID ДЛЯ CRYPTO
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#basics{
  padding-top: var(--basics-gap-top); padding-bottom: var(--basics-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#blockchain{
  padding-top: var(--blockchain-gap-top); padding-bottom: var(--blockchain-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#coins-tokens{
  padding-top: var(--coins-gap-top); padding-bottom: var(--coins-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#wallets{
  padding-top: var(--wallets-gap-top); padding-bottom: var(--wallets-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#how-get{
  padding-top: var(--howget-gap-top); padding-bottom: var(--howget-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#usecases{
  padding-top: var(--usecases-gap-top); padding-bottom: var(--usecases-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#price{
  padding-top: var(--price-gap-top); padding-bottom: var(--price-gap-bottom);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#risks{
  padding-top: var(--risks-gap-top); padding-bottom: var(--risks-gap-bottom);
}


/* =========================================================
   ✅ CONCLUSION: dotted borders instead of solid top line
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#conclusion{
  padding-top: calc(var(--lead-line-inset) + 14px) !important;
  padding-bottom: calc(var(--lead-line-inset) + 14px) !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#conclusion::before{
  content: "" !important;
  position: absolute;
  left: 0; right: 0;
  top: var(--lead-line-inset);

  height: 0 !important;
  background: none !important;
  border-top: var(--lead-line-width) dotted var(--lead-line-color);
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section#conclusion::after{
  content: "" !important;
  position: absolute;
  left: 0; right: 0;
  bottom: var(--lead-line-inset);

  border-bottom: var(--lead-line-width) dotted var(--lead-line-color);
}


/* =========================================================
   5.3) INNER DOTTED DIVIDERS
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-divider{
  display: block;
  width: 100%;
  margin: 18px 0 !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-divider--dotted{
  border-top: var(--lead-line-width) dotted var(--lead-line-color);
  height: 0;
}


/* =========================================================
   5.4) CARDS (gradient only)
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card{
  background: var(--card-grad) !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card::before,
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card::after{
  content: none !important;
  display: none !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card h3{
  color: rgba(0,0,0,.92) !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card,
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card p,
body[data-page="blog-article"][data-article="cryptocurrency"] .post-section .card li{
  color: rgba(0,0,0,.86) !important;
}


/* =========================================================
   6) CALLOUTS
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .callout{
  background: rgba(59,130,246,.18) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;

  padding: 18px 20px !important;
  margin-bottom: var(--gap-after-callout) !important;

  color: rgba(10,20,35,.92) !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .callout::before,
body[data-page="blog-article"][data-article="cryptocurrency"] .callout::after{
  content: none !important;
  display: none !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .callout strong{
  color: rgba(0,0,0,.92) !important;
}


/* =========================================================
   7) TOC / NAVIGATION (как multiaccounting)
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc{
  background:
    radial-gradient(520px 220px at 12% 25%, rgba(133,123,255,.12), transparent 58%),
    radial-gradient(520px 220px at 88% 45%, rgba(0,163,255,.10), transparent 60%),
    var(--toc-bg) !important;

  border: none !important;
  box-shadow: none !important;
  border-radius: var(--toc-radius) !important;

  padding: 18px 18px 16px !important;
  margin: 0 0 28px !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc::before,
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc::after{
  content: none !important;
  display: none !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-title{
  margin: 0 0 12px !important;
  font-weight: 800 !important;
  color: rgba(0,0,0,.92) !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  counter-reset: toc-item;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list li{
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list a{
  counter-increment: toc-item;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 12px 14px !important;
  border-radius: var(--toc-item-radius) !important;

  background: var(--toc-item-bg) !important;
  color: rgba(0,0,0,.86) !important;

  text-decoration: none !important;
  transition: none !important;

  min-height: 44px !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list a::before{
  content: counter(toc-item);

  flex: 0 0 28px !important;
  flex-shrink: 0 !important;

  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  font-variant-numeric: tabular-nums;

  color: #fff !important;
  background: var(--toc-badge-idle) !important;

  align-self: center !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list a:hover{
  background: var(--toc-item-bg-hover) !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list a.is-active{
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(0,163,255,.14) inset !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc-list a.is-active::before{
  background: var(--toc-badge-active) !important;
}
body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc + .post-section{
  margin-top: var(--gap-after-toc) !important;
}


/* =========================================================
   ✅ ML BANNER (если используешь в тексте)
   ========================================================= */
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner{
  margin-top: 18px !important;

  border-radius: var(--ml-banner-radius) !important;
  padding: var(--ml-banner-pad-y) var(--ml-banner-pad-x) !important;

  background:
    radial-gradient(520px 220px at 12% 25%, rgba(133,123,255,.16), transparent 60%),
    radial-gradient(520px 220px at 88% 45%, rgba(0,163,255,.14), transparent 62%),
    var(--card-grad) !important;

  border: 1px solid var(--ml-banner-border) !important;
  box-shadow: var(--ml-banner-shadow) !important;

  color: rgba(0,0,0,.86) !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__title{
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: rgba(0,0,0,.92) !important;

  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__text{
  margin: 0 !important;
  line-height: 1.6 !important;
  color: rgba(0,0,0,.84) !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__cta{
  margin-top: 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__ctaText{
  color: rgba(0,0,0,.78) !important;
  font-weight: 600 !important;
  margin-right: auto !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link,
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link--secondary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;

  padding: var(--ml-btn-pad-y) var(--ml-btn-pad-x) !important;
  border-radius: var(--ml-btn-radius) !important;

  font-weight: 850 !important;
  letter-spacing: -0.01em !important;

  color: var(--ml-btn-text) !important;
  text-decoration: none !important;

  background: var(--ml-btn-idle) !important;

  border: none !important;
  box-shadow: none !important;
  transition: none !important;

  min-height: 44px !important;
  white-space: nowrap !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link,
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link--secondary{
  min-width: 300px !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link:hover,
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link:active,
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link--secondary:hover,
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link--secondary:active{
  background: var(--ml-btn-hot) !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link:focus-visible,
body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link--secondary:focus-visible{
  outline: 2px solid rgba(0,163,255,.55) !important;
  outline-offset: 2px !important;
}


/* =========================================================
   8) MOBILE
   ========================================================= */
@media (max-width: 640px){
  body[data-page="blog-article"][data-article="cryptocurrency"]{
    --title-gap-after-hero: 54px;
    --gap-after-callout: 44px;
    --gap-after-toc: 40px;

    --basics-gap-top: 14px;      --basics-gap-bottom: 14px;
    --blockchain-gap-top: 14px;  --blockchain-gap-bottom: 14px;
    --coins-gap-top: 14px;       --coins-gap-bottom: 14px;
    --wallets-gap-top: 14px;     --wallets-gap-bottom: 14px;
    --howget-gap-top: 14px;      --howget-gap-bottom: 14px;
    --usecases-gap-top: 14px;    --usecases-gap-bottom: 14px;
    --price-gap-top: 14px;       --price-gap-bottom: 14px;
    --risks-gap-top: 14px;       --risks-gap-bottom: 14px;
    --conclusion-gap-top: 14px;  --conclusion-gap-bottom: 0px;

    --ml-banner-pad-x: 16px;
    --ml-banner-pad-y: 16px;
    --ml-banner-radius: 16px;
  }

  body[data-page="blog-article"][data-article="cryptocurrency"] .post-toc{
    border-radius: 16px !important;
    padding: 16px !important;
  }

  body[data-page="blog-article"][data-article="cryptocurrency"] .post-divider{
    margin: 14px 0 !important;
  }

  body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__cta{
    align-items: flex-start !important;
  }
  body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__ctaText{
    width: 100% !important;
    margin-right: 0 !important;
  }
  body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link,
  body[data-page="blog-article"][data-article="cryptocurrency"] .ml-banner__link--secondary{
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 14px !important;
  }
}