/* ══ Страница «Контакты» (макет 05.10.2026) ═════════════════════════
   Классы ds-kontakty__*. Форма заявки — на самой странице, поля — общие
   ds-field / ds-check из styles.css. */

.ds-kontakty{padding-bottom:88px}
.ds-kontakty .ds-page__title{font-size:clamp(72px,11.67vw,168px)}

/* шапка: слева слова, справа персонаж у почтового ящика */
.ds-kontakty__head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;padding:20px 56px 0;border-bottom:1px solid var(--ds-line)}
.ds-kontakty__head-text{align-self:start;padding-bottom:56px}
.ds-kontakty .ds-kroshki{margin-bottom:18px}
.ds-kontakty__lead{margin:14px 0 0;max-width:580px;color:var(--ds-gray);font:400 19px/1.55 var(--ds-font-text)}
.ds-kontakty__intro{margin:18px 0 0;max-width:590px;color:var(--ds-gray);font:400 16px/1.5 var(--ds-font-text)}
.ds-kontakty__lico{display:block;width:280px;height:auto;margin:0 0 0 24px}

/* тело: форма слева на всю высоту, справа каналы и «Когда отвечаю» */
.ds-kontakty__telo{display:grid;grid-template-columns:700px minmax(0,1fr);
  grid-template-areas:"forma kanaly" "forma kogda";grid-template-rows:auto 1fr;
  column-gap:28px;row-gap:20px;padding:48px 28px 28px}
.ds-kontakty__zag{margin:0;font:600 64px/1 var(--ds-font-display);text-transform:uppercase;letter-spacing:-.005em}

.ds-kontakty__kanaly{grid-area:kanaly;display:flex;flex-direction:column;gap:16px;padding-top:40px}
.ds-kontakty__kanal{display:flex;align-items:center;gap:16px;padding:16px;
  border:1px solid var(--ds-line);border-radius:20px;background:var(--ds-bg);
  transition:border-color .18s ease,transform .18s ease}
.ds-kontakty__kanal:hover{border-color:var(--ds-blue);transform:translateY(-1px)}
.ds-kontakty__kanal-znak{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--ds-tile);color:var(--ds-blue-dark)}
.ds-kontakty__kanal-tekst{display:grid;gap:3px;min-width:0;flex:1}
.ds-kontakty__kanal-nazv{font:600 17px/1.2 var(--ds-font-text)}
.ds-kontakty__kanal-podpis{color:var(--ds-gray);font:400 14px/1.3 var(--ds-font-text);overflow-wrap:anywhere}
.ds-kontakty__kanal-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--ds-tile);color:var(--ds-blue-dark);transition:background .18s ease,color .18s ease}
.ds-kontakty__kanal:hover .ds-kontakty__kanal-go{background:var(--ds-blue);color:#fff}
.ds-kontakty__zvonok{margin:0;color:var(--ds-gray);font:400 15px/1.4 var(--ds-font-text)}

.ds-kontakty__forma{grid-area:forma;padding:40px;border-radius:28px;background:var(--ds-tile)}
.ds-kontakty__form{display:flex;flex-direction:column;gap:16px}
.ds-kontakty__form[hidden]{display:none}
.ds-kontakty__forma-lid{margin:0;color:var(--ds-gray);font:400 16px/1.5 var(--ds-font-text)}
.ds-kontakty__deystvie{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:4px}
.ds-kontakty__forma .ds-check__text{font-size:13px}
.ds-kontakty__forma .ds-field__input--area{resize:none}

.ds-kontakty__kogda{grid-area:kogda;display:flex;flex-direction:column;gap:14px;padding:24px 20px;
  border:1px solid var(--ds-line);border-radius:24px;background:var(--ds-bg)}
.ds-kontakty__kogda-shapka{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ds-kontakty__kogda-zag{margin:0;font:600 28px/1.1 var(--ds-font-display);text-transform:uppercase}
.ds-kontakty__chasy{flex:none;color:var(--ds-blue)}
.ds-kontakty__kogda-tekst{margin:0;font:400 16px/1.5 var(--ds-font-text)}

/* шкала ответа: отрезок с 10:00 до 18:00, подписи стоят под своими отметками */
.ds-shkala{margin-top:auto;display:grid;gap:8px}
.ds-shkala__trek{height:10px;border-radius:100px;background:var(--ds-tile);overflow:hidden}
.ds-shkala__otrezok{display:block;height:100%;margin-left:41.667%;width:33.333%;border-radius:100px;background:var(--ds-blue)}
.ds-shkala__podpisi{position:relative;height:20px;color:var(--ds-gray);font:400 14px/20px var(--ds-font-text)}
.ds-shkala__podpisi span{position:absolute;top:0;left:calc(var(--ds-dolya) * 100%);transform:translateX(-50%);white-space:nowrap}
.ds-shkala__podpisi span:first-child{transform:none}
.ds-shkala__podpisi span:last-child{transform:translateX(-100%)}

/* реквизиты полосой */
/* Три колонки, всё по верхней линии: заголовок, список реквизитов, примечание. */
.ds-kontakty__rekvizity{display:grid;grid-template-columns:300px minmax(0,1.3fr) minmax(0,1fr);align-items:start;
  gap:0 32px;margin:0 28px;padding:32px 40px;
  border:1px solid var(--ds-line);border-radius:24px;background:var(--ds-bg)}
.ds-kontakty__rekv-zag{margin:0;font:600 28px/32px var(--ds-font-display);text-transform:uppercase}
.ds-kontakty__rekv-dannye,.ds-kontakty__rekv-primechanie{min-width:0;margin:0;font:400 17px/26px var(--ds-font-text)}
.ds-kontakty__rekv-dannye{display:grid;gap:4px;padding:0;list-style:none}
.ds-kontakty__rekv-dannye b{font-weight:600}
.ds-kontakty__rekv-primechanie{color:var(--ds-gray);text-wrap:pretty}

/* призыв — только там, где форма уже не на виду рядом (планшет, телефон) */
.ds-kontakty__prizyv{display:none}

/* галочка «готово» встроенной формы (общая для «Контактов» и «Отзывов») */
.ds-forma-gotovo{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:16px 0}
.ds-forma-gotovo[hidden]{display:none}
.ds-forma-gotovo__title{margin:0;font:600 46px/1.05 var(--ds-font-display);text-transform:uppercase}
.ds-forma-gotovo__text{margin:0;max-width:46ch;color:var(--ds-gray);font:400 16px/1.55 var(--ds-font-text)}

@media (max-width:1199px){
  .ds-kontakty{padding-bottom:28px}
  .ds-kontakty .ds-page__title{font-size:72px}
  .ds-kontakty__head{padding:28px 28px 0}
  .ds-kontakty .ds-kroshki{margin-bottom:24px}
  .ds-kontakty__lead{margin-top:18px;font-size:19px;max-width:520px}
  .ds-kontakty__intro{max-width:520px}
  .ds-kontakty__lico{width:190px;margin:0 28px 0 12px}
  .ds-kontakty__telo{grid-template-columns:420px minmax(0,1fr);padding:48px 28px 28px}
  .ds-kontakty__zag{font-size:50px}
  .ds-kontakty__forma{padding:40px}
  .ds-kontakty__kanaly{padding-top:40px}
  .ds-kontakty__rekvizity{grid-template-columns:200px minmax(0,1fr);padding:28px}
  .ds-kontakty__rekv-primechanie{grid-column:2;margin-top:16px}
  .ds-kontakty__rekv-dannye,.ds-kontakty__rekv-primechanie{font-size:15px;line-height:22px}
  .ds-kontakty__prizyv{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 28px 0;
    padding:24px 32px;border-radius:28px;background:var(--ds-tile)}
  .ds-kontakty__prizyv-zag{margin:0 0 16px;font:600 50px/1 var(--ds-font-display);text-transform:uppercase}
  .ds-kontakty__prizyv-tekst p{margin:0 0 20px;max-width:30em;color:var(--ds-gray);font:400 17px/1.5 var(--ds-font-text)}
  /* Одна и та же поза на всех ширинах (почтовый ящик): на планшете она в шапке, на телефоне — в призыве.
     Вместе на одной странице две картинки не стоят. */
  .ds-kontakty__prizyv-lico{display:none}
}

@media (max-width:809px){
  .ds-kontakty .ds-page__title{font-size:52px}
  .ds-kontakty__head{display:block;padding:28px 20px 0}
  .ds-kontakty__head-text{padding-bottom:24px}
  .ds-kontakty .ds-kroshki{margin-bottom:3px}
  .ds-kontakty__lead{margin-top:14px;font-size:16px}
  .ds-kontakty__intro{margin-top:10px;max-width:320px;font-size:15px;line-height:1.4}
  .ds-kontakty__lico{display:none}
  .ds-kontakty__telo{display:flex;flex-direction:column;gap:24px;padding:28px 20px 24px}
  .ds-kontakty__zag{font-size:42px}
  .ds-kontakty__kanaly{gap:12px;padding-top:0}
  .ds-kontakty__forma{padding:28px 20px}
  .ds-kontakty__forma-lid{font-size:15px;line-height:1.4}
  .ds-kontakty__deystvie .ds-btn{width:100%;justify-content:center}
  .ds-kontakty__kogda-zag{font-size:22px}
  .ds-kontakty__kogda-tekst{font-size:15px;line-height:1.4}
  .ds-kontakty__rekvizity{display:block;margin:0 20px;padding:24px 20px}
  .ds-kontakty__rekv-zag{margin-bottom:12px;font-size:22px;line-height:26px}
  .ds-kontakty__rekv-dannye{margin-bottom:12px}
  .ds-kontakty__rekv-primechanie{margin-top:0}
  .ds-kontakty__prizyv{display:block;position:relative;margin:24px 20px 0;padding:24px 20px 0;border-radius:20px}
  .ds-kontakty__prizyv-zag{font-size:34px}
  .ds-kontakty__prizyv-tekst p{font-size:15px;line-height:1.4}
  .ds-kontakty__prizyv-tekst .ds-btn{margin-bottom:8px}
  .ds-kontakty__prizyv-lico{display:block;width:auto;height:230px;margin:0 0 0 auto}
  .ds-forma-gotovo__title{font-size:38px}
}

/* ── тёмная тема: персонаж стоит на белой скруглённой плашке, как на главной ──
   Прозрачная вырезка на тёмно-синем давала белую кайму по краям. Плашка — сам
   рисунок с белым фоном: подписей внутри нет, цвета текста менять не нужно. */
:root[data-theme="dark"] .ds-kontakty__lico{box-sizing:border-box;width:312px;padding:16px 16px 0;background:var(--ds-кадр);border-radius:20px 20px 0 0}
:root[data-theme="dark"] .ds-kontakty__prizyv-lico{box-sizing:border-box;padding:12px;background:var(--ds-кадр);border-radius:20px}
@media (max-width:1199px){
  :root[data-theme="dark"] .ds-kontakty__lico{width:222px;padding:12px 12px 0}
}

.ds-kontakty__form .ds-field__input:not(textarea){text-overflow:ellipsis}