/* =========================================================================
   Dragon Maritime — Universal Publication Styles (v1.0)
   Подключается ОДИН раз. Варианты подключения см. PUBLISHING-WORKFLOW.md.
   Все правила скоупятся под .dm-article, чтобы не влиять на остальной сайт.
   Использует брендовые CSS-переменные темы (с фолбэками).
   Иконки — Font Awesome 5 (уже подключён в теме).
   ========================================================================= */
 
.dm-article {
  --dm-primary: #1e3a8a;
  --dm-secondary: #ff3b3b;
  --dm-accent: #f59e0b;
  --dm-ocean: #0ea5e9;
  --dm-ink: #1f2937;
  --dm-muted: #6b7280;
  --dm-line: #e5e7eb;
  --dm-bg-soft: #f8fafc;
  --dm-radius: 12px;
  margin: 0 auto;
  color: var(--dm-ink);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
}
 
/* --- Типографика --- */
.dm-article h2 {
  color: var(--dm-primary);
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 2.2rem 0 0.9rem;
}
.dm-article h3 {
  color: var(--dm-primary);
  font-size: 1.25rem;
  margin: 1.6rem 0 0.6rem;
}
.dm-article p { margin: 0 0 1.1rem; }
.dm-article a { color: var(--dm-ocean); text-decoration: underline; text-underline-offset: 2px; }
.dm-article a:hover { color: var(--dm-primary); }
.dm-article ul, .dm-article ol { margin: 0 0 1.1rem 1.25rem; }
.dm-article li { margin: 0.35rem 0; }
.dm-article img { max-width: 100%; height: auto; border-radius: var(--dm-radius); }
 
/* Лид-абзац (вступление) */
.dm-article .dm-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #334155;
  border-left: 4px solid var(--dm-accent);
  padding-left: 1rem;
}
 
/* --- Callout / блок внимания (info | warning | success | tip) --- */
.dm-callout {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--dm-bg-soft);
  border: 1px solid var(--dm-line);
  border-left: 5px solid var(--dm-ocean);
  border-radius: var(--dm-radius);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.dm-callout__icon { font-size: 1.25rem; line-height: 1.6; color: var(--dm-ocean); flex: 0 0 auto; }
.dm-callout__body { margin: 0; }
.dm-callout__body :last-child { margin-bottom: 0; }
.dm-callout--warning { border-left-color: var(--dm-secondary); background: #fff5f5; }
.dm-callout--warning .dm-callout__icon { color: var(--dm-secondary); }
.dm-callout--success { border-left-color: #16a34a; background: #f0fdf4; }
.dm-callout--success .dm-callout__icon { color: #16a34a; }
.dm-callout--tip { border-left-color: var(--dm-accent); background: #fffbeb; }
.dm-callout--tip .dm-callout__icon { color: var(--dm-accent); }
 
/* --- Key facts / статистика --- */
.dm-key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
}
.dm-key-facts li {
  background: var(--dm-bg-soft);
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  padding: 1rem;
  text-align: center;
  margin: 0;
}
.dm-key-facts .dm-stat { display: block; font-size: 1.8rem; font-weight: 700; color: var(--dm-primary); line-height: 1.1; }
.dm-key-facts .dm-stat-label { display: block; font-size: .9rem; color: var(--dm-muted); margin-top: .3rem; }
 
/* --- FAQ / аккордеон (нативный <details>, без JS) --- */
.dm-faq { margin: 1.6rem 0; }
.dm-faq__item {
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  margin-bottom: .65rem;
  overflow: hidden;
  background: #fff;
}
.dm-faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: .95rem 1.1rem;
  font-weight: 600;
  color: var(--dm-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.dm-faq__item > summary::-webkit-details-marker { display: none; }
.dm-faq__item > summary::after {
  content: "\f078"; /* fa chevron-down */
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: .8rem; color: var(--dm-muted); transition: transform .2s;
}
.dm-faq__item[open] > summary::after { transform: rotate(180deg); }
.dm-faq__item > summary:hover { background: var(--dm-bg-soft); }
.dm-faq__answer { padding: 0 1.1rem 1.05rem; }
.dm-faq__answer :last-child { margin-bottom: 0; }
 
/* --- CTA-блок --- */
.dm-cta {
  background: linear-gradient(135deg, var(--dm-primary), var(--dm-ocean));
  color: #fff;
  border-radius: var(--dm-radius);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
  text-align: center;
}
.dm-cta h3 { color: #fff; margin-top: 0; }
.dm-cta p { color: rgba(255,255,255,.92); }
.dm-cta__btn {
  display: inline-block;
  background: var(--dm-secondary);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  padding: .7rem 1.6rem;
  border-radius: 8px;
  margin-top: .6rem;
}
.dm-cta__btn:hover { filter: brightness(1.08); }
 
/* --- Источники --- */
.dm-sources {
  font-size: .92rem;
  color: var(--dm-muted);
  border-top: 1px solid var(--dm-line);
  margin-top: 2.2rem;
  padding-top: 1rem;
}
.dm-sources h3 { font-size: 1rem; color: var(--dm-ink); margin: 0 0 .4rem; }
.dm-sources ul { margin-left: 1.1rem; }
 
/* =========================================================================
   ТИРЫ ПОДАЧИ — один дизайн, разный тон под интент страницы.
     .dm-article            — база (годится для guide / pillar)
     .dm-article--service   — коммерческая: максимум акцентов и CTA
     .dm-article--news      — редакционная: чисто, сдержанно, под доверие
   Класс-тир ставится на корневой .dm-article (например class="dm-article dm-article--news").
   ========================================================================= */
 
/* Байлайн: автор + дата (новости/блог) */
.dm-byline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  color: var(--dm-muted); font-size: .92rem; margin: -.3rem 0 1.4rem; }
.dm-byline__author { font-weight: 600; color: var(--dm-ink); }
 
/* Связанные услуги: тонкая строка вместо большого CTA (для новостей) */
.dm-related { border-top: 1px solid var(--dm-line); margin-top: 2rem; padding-top: 1rem; font-size: .95rem; }
.dm-related__label { font-weight: 600; color: var(--dm-ink); margin-right: .4rem; }
.dm-related a { display: inline-block; margin: .2rem .6rem .2rem 0; }
 
/* Оглавление (гайды / pillar) */
.dm-toc { background: var(--dm-bg-soft); border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.dm-toc__title { font-weight: 700; color: var(--dm-primary); margin-bottom: .4rem; }
.dm-toc ul { margin: 0 0 0 1.1rem; }
 
/* --- NEWS: сдержанный редакционный тон --- */
.dm-article--news .dm-lead { border-left: none; padding-left: 0; font-size: 1.18rem; color: #475569; }
/* CTA в новости — лёгкая рамка, без градиента */
.dm-article--news .dm-cta { background: var(--dm-bg-soft); color: var(--dm-ink);
  border: 1px solid var(--dm-line); border-left: 4px solid var(--dm-accent); text-align: left; }
.dm-article--news .dm-cta h3 { color: var(--dm-primary); }
.dm-article--news .dm-cta p { color: var(--dm-muted); }
/* key-facts в новости — компактнее, без тяжёлых карточек */
.dm-key-facts li {
    background: var(--dm-bg-soft);
    border: 1px solid var(--dm-line);
    border-radius: var(--dm-radius);
    padding: 1rem;
    text-align: center;
    margin: 0;
}
.dm-article--news .dm-key-facts .dm-stat { font-size: 1.4rem; }
/* в новости — максимум один callout на материал; держим их нейтральнее */
.dm-article--news .dm-callout { background: var(--dm-bg-soft); }
 
/* --- SERVICE: чуть плотнее акценты --- */
.dm-article--service .dm-lead { font-weight: 500; }
 
/* --- Адаптив --- */
@media (max-width: 600px) {
  .dm-article { font-size: 1rem; }
  .dm-article h2 { font-size: 1.35rem; }
  .dm-key-facts .dm-stat { font-size: 1.5rem; }
}

.byline .author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin: 0 8px 0 4px;
  display: inline-block;
}
.byline .author-link { color: inherit; text-decoration: none; }
.byline .author-link:hover .author-name { text-decoration: underline; }
.text-intro{max-width:820px;margin-inline:auto;text-align:left}
.how-we-work-text{max-width:820px;margin-inline:auto}