/* =============================================================
   DIRECTION PAGES
   /exchange-FROM-to-TO/ and the /napravleniya/ hub. Built on the
   landing's tokens; only the layout that is unique to these pages
   lives here.

   Class names are prefixed on purpose: styles.css already owns `.dir`
   (the ticker chip, radius 999px) and `.cur` (the form's currency
   button). Reusing either turned the whole <main> into a giant pill.
   ============================================================= */

/* Шапка sticky и уже занимает место в потоке, поэтому отступ на её высоту
   здесь был вторым таким же: содержимое всех подстраниц уезжало вниз на
   целую шапку, а герой не мог встать по центру видимой части. */
.dirpage { padding-bottom: clamp(56px,7vw,100px); }

/* ---------- breadcrumbs ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: clamp(20px,3vw,34px) 0 0;
  font-size: 13px; color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); transition: color .18s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .45; }

/* ---------- hero ---------- */
.dhero { padding: clamp(26px,4vw,48px) 0 clamp(30px,4vw,52px); }
.dhero__h1 {
  font-size: clamp(1.9rem,4.6vw,3.4rem); font-weight: 600;
  letter-spacing: -.045em; line-height: 1.04;
}
.dhero__lead { margin-top: 20px; max-width: 62ch; font-size: clamp(1rem,1.35vw,1.1rem); line-height: 1.65; color: var(--ink-2); }

.dhero__rate {
  margin-top: 32px; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  background: var(--bg-1); border-radius: 28px; padding: clamp(22px,3vw,30px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dhero__rate .k { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.dhero__rate .v {
  margin-top: 8px; font-family: var(--ff);
  font-size: clamp(2rem,4vw,2.9rem); font-weight: 600; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dhero__rate .dcur { color: var(--ink-3); }
.dhero__rate .s { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.dhero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.dtags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dtags li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border-radius: var(--r-pill);
  background: var(--bg-2); font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.dtags .i { color: var(--accent); font-size: 15px; }

/* ---------- sections ---------- */
.dsec { padding-top: clamp(38px,5vw,64px); }
.dsec .h2 { margin-bottom: clamp(20px,2.6vw,30px); }
.dsec--split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(24px,4vw,52px); }

.dsteps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.dsteps li { background: var(--bg-1); border-radius: 24px; padding: 26px; box-shadow: inset 0 0 0 1px var(--line); }
.dstep__n { font-family: var(--fm); font-size: 12px; font-weight: 600; color: var(--accent); }
.dsteps h3 { margin-top: 14px; font-size: 1.1rem; font-weight: 600; letter-spacing: -.03em; }
.dsteps p { margin-top: 10px; font-size: .88rem; line-height: 1.6; color: var(--ink-3); }

.dspec { background: var(--bg-1); border-radius: 24px; padding: 8px 24px; box-shadow: inset 0 0 0 1px var(--line); }
.dspec > div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.dspec > div:first-child { border-top: 0; }
.dspec dt { font-size: .9rem; color: var(--ink-3); }
.dspec dd { font-size: .95rem; font-weight: 600; text-align: right; }

.dcities { display: flex; flex-wrap: wrap; gap: 9px; }
.dcities li {
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--bg-2); font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.dnote { margin-top: 16px; font-size: .86rem; line-height: 1.6; color: var(--ink-3); max-width: 46ch; }

/* блок вопросов живёт в styles.css (.faq) — тот же, что на главной */

/* ---------- cross links ---------- */
.dirchips { display: flex; flex-wrap: wrap; gap: 10px; }
.dirchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--ink-2);
  font-size: 13px; font-weight: 500;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.dirchip:hover { background: var(--bg-3); color: var(--ink); transform: translateY(-2px); }
.dirchip--all { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* ---------- hub ---------- */
.hubrows { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.hubrow {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: var(--bg-1); border-radius: 22px; padding: 20px 24px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.hubrow:hover { background: var(--bg-2); transform: translateY(-2px); }
.hubrow__pair { display: inline-flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 600; letter-spacing: -.015em; }
.hubrow__pair .i { color: var(--accent); font-size: 15px; }
.hubrow__net { font-family: var(--fm); font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* марка актива: слева в строке хаба и над заголовком страницы направления.
   Базовый .bmark живёт в styles.css, цвет — в контурах; здесь размер. */
.hubrow__mark { display: flex; align-items: center; flex: none; --bh: 22px; }
.hubrow > .hubrow__pair { margin-right: auto; }

.dasset {
  display: flex; align-items: center; gap: 11px; margin-bottom: 14px; min-height: 28px;
  --bh: 24px;
}
.dasset span {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 900px) {
  .dsec--split, .hubrows { grid-template-columns: minmax(0,1fr); }
  .dsteps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .dsteps { grid-template-columns: minmax(0,1fr); }
  .dhero__rate { flex-direction: column; align-items: flex-start; }
  .dhero__cta { width: 100%; }
  .dhero__cta .btn { flex: 1; }
}
@media (pointer: coarse) {
  .dirchip, .dcities li, .dtags li { min-height: 44px; }
  .dfaq summary { padding-block: 22px; }
}