/* ══════════════════════════════════════════════════════════════════
   SEO-ТЗ v1.0 — pilot template additions (Stage 1, 1 test article only).
   Loaded ONLY by templates/blog_article_v2.html, AFTER /css/article.css.
   Every rule below is scoped under .article-v2 (or ids only it renders),
   so nothing here can affect article.css or any other page/article that
   still uses the original blog_article.html template.
   Reuses the color tokens already defined in article.css's :root —
   no new colors, no new fonts, per the site's existing design language.
   ══════════════════════════════════════════════════════════════════ */

.article-v2.article-wrap {
  max-width: 1180px;
  overflow-wrap: break-word;
  /* light-orange chip pair, reused by .category-chip and .related-chip
     (Leonid asked for orange chips instead of the blue-tint ones) */
  --chip-bg: #FDEFDC;
  --chip-text: #A65E00;
}

/* ── category chip, above H1 ── */
.article-v2 .category-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

/* ── hero: title/meta left, fixed-size image right ── */
.article-v2 .hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 28px;
}
.article-v2 .hero-grid > * { min-width: 0; } /* same grid-blowout guard as .body-grid */
.article-v2 .hero-grid.no-image { grid-template-columns: 1fr; }
.article-v2 .hero-intro .article-h1 { margin-bottom: 14px; }
.article-v2 .hero-image {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-page);
  height: 260px;
}
.article-v2 .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-v2 .meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-gray);
}
.article-v2 .meta-row .article-date { margin-bottom: 0; }
.article-v2 .meta-sep { color: var(--text-light); }
.article-v2 .reading-time { color: var(--text-gray); }
.article-v2 .hero-lead { margin-top: 14px; margin-bottom: 0; color: var(--text-gray); font-size: 15.5px; line-height: 1.6; }

/* ── TL;DR ("Коротко") ── */
.article-v2 .tldr {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 32px;
}
.article-v2 .tldr-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* was var(--orange): 2.08:1 on white, fails WCAG AA — see acceptance report */
  color: var(--blue-dark-nm);
  margin-bottom: 8px;
}
.article-v2 .tldr p { margin: 0; color: var(--text-dark); font-size: 15.5px; line-height: 1.65; }
.article-v2 .tldr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.article-v2 .tldr li { position: relative; padding-left: 20px; color: var(--text-dark); font-size: 15.5px; line-height: 1.5; }
.article-v2 .tldr li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); }

/* ── mobile collapsible "Содержание" (section 6.2 — no permanent sticky
   block on mobile; hidden entirely on desktop, where the sticky sidebar
   already covers this). ── */
.article-v2 .toc-mobile {
  display: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 18px;
  margin-bottom: 24px;
}
.article-v2 .toc-mobile summary {
  padding: 12px 0;
  font-weight: 700;
  color: var(--blue-dark-nm);
  cursor: pointer;
  list-style: none;
}
.article-v2 .toc-mobile summary::-webkit-details-marker { display: none; }
.article-v2 .toc-mobile[open] summary { border-bottom: 1px solid var(--border); }
.article-v2 .toc-mobile .toc-nav { padding: 8px 0 12px; }
.article-v2 .toc-mobile .toc-link { padding: 8px 0; font-size: 14.5px; }

/* ── two-column body: sticky TOC + messengers | article text ── */
.article-v2 .body-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: start;
}
.article-v2 .body-grid > * {
  /* Grid items default to min-width:auto, which floors their size at their
     content's min-content width — a table with an explicit min-width (see
     .cmp-table below) then refuses to shrink the whole grid track and blows
     the page out sideways at narrow viewports. This is the actual root
     cause of the horizontal-scroll bug found during QA (see acceptance
     report); .cmp-table's own overflow-x:auto is what should own the
     overflow, not the grid track. */
  min-width: 0;
}
.article-v2 .toc-sidebar { position: relative; }
.article-v2 .toc-sticky {
  position: sticky;
  top: 90px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.article-v2 .toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}
.article-v2 .toc-nav { display: flex; flex-direction: column; }
.article-v2 .toc-link {
  display: block;
  padding: 7px 0 7px 12px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-dark);
  border-left: 2px solid transparent;
}
.article-v2 .toc-link:hover { color: var(--blue-nm); border-left-color: var(--orange); text-decoration: none; }
.article-v2 .toc-contact {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.article-v2 .toc-contact-label { font-size: 12px; color: var(--text-gray); margin-bottom: 8px; }
.article-v2 .toc-contact-buttons { display: flex; flex-direction: column; gap: 6px; }
.article-v2 .toc-msg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none !important;
  background: #27A7E5;
}
.article-v2 .toc-msg-btn:hover { background: #1d97d4; }

/* article-body keeps its card look from article.css untouched; only the
   grid column width changes because it now sits next to the TOC. */

/* ── stat cards ── */
.article-v2 .article-body .stat-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0 24px;
}
.article-v2 .article-body .stat-card {
  border: 1px solid var(--border);
  background: var(--bg-page);
  border-radius: 10px;
  padding: 16px 18px;
}
.article-v2 .article-body .stat-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--blue-dark-nm);
  line-height: 1.25;
  margin-bottom: 4px;
  /* defense-in-depth: a long unbroken phrase (or an accidental   chain,
     as happened once during the pilot content edit — see acceptance report)
     must wrap here instead of forcing the whole page to scroll sideways. */
  overflow-wrap: break-word;
}
.article-v2 .article-body .stat-label {
  font-size: 12px;
  color: var(--text-gray);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── comparison table ── */
.article-v2 .article-body .cmp-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Always a horizontal-scroll boundary of its own (not just under a
     breakpoint) — a table whose natural content width exceeds the column
     scrolls INSIDE this box; the page itself never gains a scrollbar.
     This is what actually caused the tablet/mobile overflow bug found
     during QA (documented in the acceptance report) — a width-scoped rule
     left a gap between breakpoints where nothing contained the table. */
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 24px;
}
.article-v2 .article-body .cmp-table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14.5px; }
.article-v2 .article-body .cmp-table th {
  background: var(--blue-dark-nm);
  color: #fff;
  text-align: left;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.article-v2 .article-body .cmp-table td { padding: 11px 14px; border-top: 1px solid var(--border); color: var(--text-dark); vertical-align: top; }
.article-v2 .article-body .cmp-table tr:nth-child(even) td { background: var(--bg-page); }
.article-v2 .article-body .cmp-table td:first-child { font-weight: 700; color: var(--blue-dark-nm); white-space: nowrap; }

/* ── mid-article CTA (lighter than the end-of-article .cta-block) ── */
.article-v2 .article-body .mid-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.article-v2 .article-body .mid-cta p { margin: 0; font-weight: 600; color: var(--text-dark); font-size: 15px; }
.article-v2 .article-body .mid-cta-btn {
  display: inline-block;
  /* Leonid asked for the orange brand CTA color here (matches every other
     CTA button on the site, incl. .btn-orange and .cta-block .btn-cta —
     same 2.06:1 contrast those already have; a pre-existing sitewide trait,
     not something new introduced by this pilot). */
  background: var(--cta);
  color: #fff !important;
  padding: 0px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none !important;
  white-space: nowrap;
  line-height:65px
}
.article-v2 .article-body .mid-cta-btn:hover { background: #C06A3E; }
.article-v2 .article-body .mid-cta-btn-ghost {
  background: transparent;
  color: var(--blue-dark-nm) !important;
  border: 1.5px solid var(--blue-dark-nm);
}
.article-v2 .article-body .mid-cta-btn-ghost:hover { background: var(--white); }
.article-v2 .article-body .mid-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Second mid-article CTA (9.2) — centered layout, distinct from the first
   CTA's left-text/right-button row, per Leonid's request. */
.article-v2 .article-body .mid-cta-2 {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.article-v2 .article-body .mid-cta-2 .mid-cta-actions { justify-content: center; }
.article-v2 .article-body .mid-cta-2 .mid-cta-btn-ghost { display: inline-flex; align-items: center; gap: 7px; }
.article-v2 .article-body .mid-cta-2 .mid-cta-btn-ghost::before {
  content: "\260E"; /* phone glyph, no icon font/library needed */
  font-size: 14px;
}

/* ── FAQ ── */
.article-v2 .article-body section.faq { margin-top: 8px; }
.article-v2 .article-body section.faq h2 { margin-top: 0; }
.article-v2 .article-body section.faq details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
}
.article-v2 .article-body section.faq details[open] { background: var(--bg-page); }
.article-v2 .article-body section.faq summary {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--blue-dark-nm);
  cursor: pointer;
  list-style: none;
  padding-right: 26px;
  position: relative;
}
.article-v2 .article-body section.faq summary::-webkit-details-marker { display: none; }
.article-v2 .article-body section.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -3px;
  font-size: 22px;
  font-weight: 400;
  color: var(--blue-nm);
}
.article-v2 .article-body section.faq details[open] summary::after { content: "\2212"; }
.article-v2 .article-body section.faq details p { margin: 10px 0 0; color: var(--text-gray); font-size: 14.5px; }

/* ── "Читайте также" ── */
.article-v2 .article-body .related-wrap { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.article-v2 .article-body .related-wrap h2 { margin-top: 0; }
.article-v2 .article-body .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.article-v2 .article-body .related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 0 14px;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color .15s, transform .15s;
}
.article-v2 .article-body .related-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.article-v2 .article-body .related-thumb {
  width: 100%;
  height: 120px;
  background: var(--bg-page);
  overflow: hidden;
}
.article-v2 .article-body .related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-v2 .article-body .related-card .related-chip,
.article-v2 .article-body .related-card .related-title { margin-left: 16px; margin-right: 16px; }
.article-v2 .article-body .related-chip {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--chip-text);
  background: var(--chip-bg);
  border-radius: 20px;
  padding: 3px 9px;
}
.article-v2 .article-body .related-title { font-size: 14.5px; font-weight: 600; color: var(--text-dark); line-height: 1.4; }

/* ── responsive ── */
@media (max-width: 900px) {
  .article-v2 .body-grid { grid-template-columns: 1fr; }
  .article-v2 .toc-sidebar { display: none; }
  .article-v2 .toc-mobile { display: block; }
  .article-v2 .article-body .stat-grid-3 { grid-template-columns: 1fr; }
  .article-v2 .article-body .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Same breakpoint as .body-grid on purpose — avoids a 767-900px no-man's
     land where the TOC sidebar had already collapsed but the hero grid
     hadn't, which is what left the hero column too narrow and contributed
     to the tablet overflow bug found during QA. */
  .article-v2 .hero-grid { grid-template-columns: 1fr; }
  /* Hero stays AFTER title/meta/lead in mobile stacking order (section 3.3
     of the brief) — natural DOM order, no `order` override here on purpose. */
  .article-v2 .hero-image { height: 200px; }
}
@media (max-width: 639px) {
  .article-v2 .article-body .mid-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── final CTA plate — scoped override, article.css's shared .cta-block
   rule (used by every other article) is untouched. Leonid asked for a
   different blue (not the near-black navy) and a size closer to the white
   "Главное" card rather than the original's larger slab padding; text and
   button stay centered exactly as before (text-align:center is inherited
   from article.css and wasn't touched). ── */
.article-v2 .cta-block {
  background: var(--blue-mid);
  padding: 18px 24px; /* same padding as .tldr ("Главное") — literally equal size */
}