/* =========================================================================
   Хаб «Настройка и ведение Яндекс Директа» (K01): блоки страницы
   Общие токены и компоненты — в site.css. Здесь только то, чего там нет.
   Схема первого экрана — разметка и CSS, без скриптов: без JS и при
   «уменьшить движение» видна целиком, точки на линиях просто не бегут.
   ========================================================================= */

/* ---------- первый экран: «ситуация → услуга» */
.dh-stage { min-height: 0; height: auto; display: grid; align-items: center; }
.dh-route { width: 100%; max-width: 520px; margin-left: auto; display: grid; gap: 10px; padding: clamp(16px, 2.4vw, 26px); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24, 38, 74, 0.72), rgba(17, 28, 51, 0.92)); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.dh-route-head, .dh-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(28px, 6vw, 64px) minmax(0, 1fr); gap: 10px; align-items: center; }
.dh-route-head { padding: 0 4px 4px; color: var(--fog-dim); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dh-route-head span:last-child { grid-column: 3; }
.dh-from { padding: 12px 14px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); color: var(--fog); font-size: 0.93rem; line-height: 1.3; }
.dh-to { position: relative; display: grid; gap: 2px; padding: 11px 14px; border-radius: 14px; background: var(--night-3); border: 1px solid rgba(142, 171, 255, 0.4); }
.dh-to b { color: #eef2fb; font-weight: 650; font-size: 0.97rem; line-height: 1.25; }
.dh-to small { color: var(--signal); font-size: 0.8rem; font-weight: 600; }
/* провод: пунктир и точка, которая бежит от ситуации к услуге */
.dh-wire { position: relative; display: block; height: 14px; overflow: hidden; }
.dh-wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(142, 171, 255, 0.45); }
.dh-wire::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--flow-light); border-top: 2px solid var(--flow-light); transform: rotate(45deg); }
.dh-wire i { position: absolute; inset: 0; transform: translateX(-100%); opacity: 0; background: radial-gradient(circle at calc(100% - 6px) 50%, var(--signal) 0 4px, transparent 5px); }
.dh-goal { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 176, 32, 0.12); border: 1px solid rgba(255, 176, 32, 0.55); }
.dh-goal > span:last-child { display: grid; gap: 2px; }
.dh-goal b { color: var(--signal); font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; line-height: 1.25; }
.dh-goal small { color: var(--fog); font-size: 0.82rem; }
.dh-goal-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(255, 176, 32, 0.2); }
.dh-cap { margin: 4px 0 0; color: var(--fog-dim); font-size: 0.82rem; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .dh-wire i { animation: dh-run 3.2s var(--ease-out) infinite; }
  html:not(.motion-off) .dh-row:nth-of-type(3) .dh-wire i { animation-delay: 0.8s; }
  html:not(.motion-off) .dh-row:nth-of-type(4) .dh-wire i { animation-delay: 1.6s; }
  html:not(.motion-off) .dh-row:nth-of-type(5) .dh-wire i { animation-delay: 2.4s; }
  html:not(.motion-off) .dh-goal-dot { animation: dh-pulse 3.2s ease-in-out infinite; }
}
@keyframes dh-run { 0% { transform: translateX(-100%); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes dh-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 176, 32, 0.2); } 50% { box-shadow: 0 0 0 10px rgba(255, 176, 32, 0.05); } }

/* ---------- выбор по задаче: четыре карточки */
.dh-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dh-card { align-content: stretch; grid-template-rows: auto auto 1fr auto auto; }
.dh-card-k { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--signal-soft); color: #8a5200; font-size: 0.8rem; font-weight: 700; }
.dh-card .when { line-height: 1.5; }
.dh-card li span:first-child { color: var(--fg-soft); }
.dh-card li span:last-child { color: var(--fg); font-weight: 600; }

/* ---------- типы кампаний */
.dh-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dh-type { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.dh-type svg { width: 36px; height: 36px; fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dh-type h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.25; }
.dh-type p { margin: 0; color: var(--fg-soft); }
.dh-types-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--fg-soft); }
.dh-types-note p { margin: 0; }
.dh-types-note b { color: var(--fg); font-weight: 600; }

/* ---------- как работаю */
.dh-rules { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; counter-reset: dh; }
.dh-rules li { counter-increment: dh; display: grid; gap: 8px; align-content: start; padding: clamp(22px, 2.6vw, 30px); background: var(--bg); }
.dh-rules li::before { content: counter(dh, decimal-leading-zero); color: var(--flow-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.dh-rules b { font-size: var(--step-1); font-weight: 650; line-height: 1.3; }
.dh-rules span { color: var(--fg-soft); }

/* Статьи о Директе внизу страницы — общий блок материалов (.related-* в site.css, блок seosite/related) */

/* ---------- адаптив */
@media (max-width: 1080px) {
  .dh-route { margin: 0 auto; }
  .dh-types { grid-template-columns: minmax(0, 1fr); }
  .dh-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .dh-pick, .dh-types-note { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dh-rules { grid-template-columns: minmax(0, 1fr); }
  .dh-route-head, .dh-row { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px; }
  .dh-from, .dh-to { padding: 10px; }
  .dh-from { font-size: 0.86rem; }
  .dh-to b { font-size: 0.9rem; }
}