/* ============================================================
   Контентные страницы: посадочные (/uslugi/) и статьи (/blog/)
   Общий стиль поверх style.css (те же шрифты/палитра).
   ============================================================ */

/* Прокрутка к якорям при фиксированной шапке */
html { scroll-padding-top: 84px; scroll-behavior: smooth; }

/* --- Крошки + заголовок страницы ---------------------------------- */
.crumbs { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 2rem; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--border-strong); margin: 0 0.35rem; }
.crumbs [aria-current] { color: var(--text); }

.page-head { max-width: var(--max-w); margin: 0 auto 2.5rem; padding: 2.5rem 1.5rem 1rem; }
.page-eyebrow { display:inline-block; font-size:0.85rem; letter-spacing:.02em; color: var(--accent); margin-bottom:1rem; }
.page-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.12; color: var(--text); }
.page-head h1 em { font-style: italic; color: var(--accent); }
.page-head .lead { font-size: 1.15rem; line-height: 1.6; color: var(--text); max-width: 70ch; }
.page-head .meta { color: var(--text-muted); font-size: 0.9rem; margin-top: 1rem; }
.page-head .meta time { font-weight: 600; }

/* --- Тело статьи / посадочной ------------------------------------ */
.post-body { max-width: var(--max-w); margin: 0 auto; padding: 1.5rem; }
.post-body .prose { max-width: 76ch; margin: 0 0 2rem; }
.prose h2 { font-family: var(--font-display); font-weight:600; font-size:1.6rem; margin:2.4rem 0 .8rem; color: var(--text); }
.prose h3 { font-family: var(--font-display); font-weight:600; font-size:1.2rem; margin:1.6rem 0 .5rem; color: var(--text); }
.prose p { line-height: 1.66; margin: 0 0 1rem; color: var(--text); }
.prose strong { color: var(--text); }
.prose em { font-family: var(--font-display); font-style: italic; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; line-height: 1.6; }
.prose li { margin-bottom: .35rem; }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

.prose table { width:100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; background: var(--card); }
.prose th, .prose td { border: 1px solid var(--border); padding: .65rem .8rem; text-align: left; }
.prose th { background: var(--accent-soft); color: var(--text); font-weight:600; }
.prose tr:nth-child(even) td { background: #fbfaf6; }

/* Выделенный блок: цифра/факт/курсорный вывод */
.callout { border: 1px solid var(--border); border-left: 4px solid var(--accent); background:#fff; padding: 1rem 1.2rem; border-radius: 12px; margin: 1.4rem 0; }
.callout strong:first-child { color: var(--accent-dark); }

/* Врезка-цифра для экономики/окупаемости */
.metric-strip { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:1.6rem 0; }
.metric { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.metric .num { display:block; font-family: var(--font-display); font-weight:600; font-size:1.7rem; color: var(--accent-dark); line-height:1.1; }
.metric .lbl { display:block; font-size:.9rem; color: var(--text-muted); line-height:1.4; }

/* Схема/этапы: вертикальная дорожка */
.steps { counter-reset: step; margin: 1.6rem 0; padding-left: 0; }
.steps li { position: relative; padding-left: 2.6rem; margin-bottom: .9rem; list-style:none; line-height:1.6; }
.steps li::before { counter-increment: step; content: counter(step); position:absolute; left:0; top:0; width:1.8rem; height:1.8rem; border-radius:50%; background: var(--accent-soft); color: var(--accent-dark); font-weight:700; display:flex; align-items:center; justify-content:center; font-family: var(--font-body); }

/* Сетка связанных страниц */
.related { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin: 2rem 0; }
.related .card { display:block; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration:none; color: var(--text); transition: border-color .15s; }
.related .card:hover { border-color: var(--accent); }
.related .card h3 { font-family: var(--font-display); font-weight:600; font-size:1.05rem; margin: 0 0 .35rem; color: var(--text); }
.related .card p { font-size:.85rem; color: var(--text-muted); line-height:1.45; margin-bottom:.4rem; }

/* Блок CTA в конце — повторяет форму на главной, но без формы */
.cta-strip { text-align:center; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.2rem 1.5rem; margin: 2.5rem 0; }
.cta-strip h2 { font-family: var(--font-display); font-weight:600; font-size:1.5rem; color: var(--text); margin:0 0 .5rem; }
.cta-strip h2 em { color: var(--accent); font-style: italic; }
.cta-strip p { color: var(--text-muted); margin: 0 0 1.2rem; font-size:1rem; }
.cta-strip .btn { margin: 0 .4rem; }
.cta-strip .note { font-size:.85rem; color: var(--text-muted); opacity:.9; }

/* Оглавление в статье */
.toc { border:1px solid var(--border); background:#fff; border-radius:12px; padding: .9rem 1.1rem; margin: 0 0 1.6rem; }
.toc p { font-weight:600; margin:0 0 .3rem; color: var(--text); font-size:.95rem; }
.toc ol { margin:.2rem 0; padding-left:1.2rem; line-height:1.5; font-size:.92rem; }
.toc a { color: var(--accent); text-decoration:none; }
.toc a:hover { text-decoration:underline; }

/* --- Тайл-листы (хаб) ------------------------------------------- */
.hub { max-width: var(--max-w); margin: 0 auto; padding: 1rem 1.2rem 3rem; }
.hub .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.hub .tile { display:block; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; text-decoration:none; color: var(--text); transition:border-color .15s; }
.hub .tile:hover { border-color: var(--accent); }
.hub .tile .k { font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color: var(--accent); display:block; margin-bottom:.5rem; }
.hub .tile h3 { font-family: var(--font-display); font-weight:600; font-size:1.15rem; margin:0 0 .4rem; }
.hub .tile p { font-size:.88rem; color: var(--text-muted); line-height:1.5; }

@media (max-width: 760px) {
  .page-head h1 { font-size:1.6rem; }
  .metric { padding:.8rem 1rem; }
}