/* Contact page extends the brand editorial layer on the original site grid. */

/* Карточка WhatsApp раньше стояла в правой колонке героя. Герой
   переехал на типографическую обложку, и карточка вынесена отдельной
   полосой сразу под ним: это главное действие страницы, в половине
   колонки ей было тесно.

   На всю ширину вертикальная раскладка карточки не годится – номер
   в 64px и одна строка текста под ним оставляли полполосы пустыми.
   Здесь она разворачивается в строку: слева метка и номер, справа
   пояснение. Ниже 900px возвращается вертикальный порядок. */
/* Полоса упиралась в герой без зазора – casually выглядело как обрез.
   Сверху даём воздух, снизу оставляем ноль: дальше идёт секция со
   своим отступом. */
.ed-contact-band {
  padding-block: clamp(32px, 4vw, 56px) 0 !important;
  background: transparent;
}
.ed-contact-band .ed-contact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  padding: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 64px);
  border-radius: 4px 4px 64px 4px;
}
.ed-contact-band .ed-label { grid-column: 1; margin: 0 0 12px; }
.ed-contact-band .ed-contact-number {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: clamp(34px, 3.6vw, 56px);
}
.ed-contact-band > .ala-container > .ed-contact-card > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 34ch;
  margin: 0;
}
@media (max-width: 900px) {
  .ed-contact-band .ed-contact-card { grid-template-columns: 1fr; gap: 20px; }
  .ed-contact-band .ed-contact-number { grid-column: 1; grid-row: auto; }
  .ed-contact-band > .ala-container > .ed-contact-card > p:last-child {
    grid-column: 1; grid-row: auto;
  }
}

.ed-contact-card { position:relative; isolation:isolate; overflow:hidden; background:var(--ed-blue); padding:48px; border-radius:72px 4px 4px 4px; }
.ed-contact-number { display:block; font-size:clamp(36px,4vw,64px); line-height:1.1; letter-spacing:-.03em; font-weight:700; text-decoration:none; margin-block:48px 28px; }
.ed-contact-number span { font-weight:400; }
.ed-contact-card > p:last-child { max-width:32ch; color:#d6e2e7; font-size:18px; }
.ed-contact-request { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px,6vw,104px); }
.ed-contact-request .ed-lead { margin-top:28px; }
/* Верхняя полоса и отступ убраны: форма стоит в своей колонке рядом с
   заголовком, и лишняя линия только отодвигала первое поле вниз. */
.ala-request-form { border-top:0; padding-top:0; }
.ala-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.ala-request-form label { display:flex; flex-direction:column; gap:10px; font-size:16px; font-weight:700; }

/* Select выглядел чужим среди input: браузер рисовал ему собственную
   рамку, высоту и стрелку. Сбрасываем оформление и добавляем свою
   стрелку фоном – поле садится в один ряд с остальными. */
.ala-request-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2300405a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.ala-request-form label > span { display:contents; }
.ala-request-form input,.ala-request-form select,.ala-request-form textarea { width:100%; min-width:0; padding:14px 16px; font:400 16px/1.5 Gilroy,sans-serif; border:1px solid var(--ed-line); border-radius:4px; background:#fff; color:var(--ed-ink); }
.ala-request-form textarea { resize:vertical; }
.ala-form-wide { grid-column:1 / -1; }
.ala-request-note { color:#3d5864; font-size:16px; line-height:1.5; margin-block:24px; max-width:48ch; }

/* Кнопка и сноска стоят в одной строке: кнопка слева, пояснение
   справа от неё. Раньше сноска шла отдельным абзацем над кнопкой и
   растягивала низ формы на две лишние строки. */
.ala-form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}
/* Сноска занимает остаток строки и переносится внутри себя, а не
   уезжает под кнопку: flex:1 с min-width:0 держит её рядом, пока
   остаётся хотя бы 150px. Колонка формы бывает узкой – на 1280 под
   неё всего ~440px. */
.ala-form-submit .ala-request-note {
  flex: 1 1 150px;
  min-width: 0;
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.45;
}
.ala-request-form input:focus-visible,.ala-request-form select:focus-visible,.ala-request-form textarea:focus-visible { outline:3px solid var(--ed-steel); outline-offset:3px; }
.ala-request-form button:disabled { opacity:.55; cursor:not-allowed; }
/* Отметки согласия: своя галочка вместо системной, текст обычным начертанием.
   Общие правила формы (label в колонку, input на всю ширину) здесь отменены. */
.ala-form-consent { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.ala-request-form label.ala-check { position:relative; flex-direction:row; align-items:flex-start; gap:12px; font-size:14px; font-weight:500; line-height:1.55; color:#3d5864; cursor:pointer; }
/* общее правило «label > span { display:contents }» для отметок не годится: текст и галочка – отдельные блоки */
.ala-request-form label.ala-check > span { display:block; }
.ala-request-form .ala-check input { position:absolute; width:22px; height:22px; margin:0; padding:0; opacity:0; cursor:pointer; }
.ala-check__box { flex:0 0 22px; height:22px; margin-top:1px; border:1.5px solid #b9cbd2; border-radius:4px; background:#fff center / 14px 14px no-repeat; transition:background-color .16s ease, border-color .16s ease; }
.ala-check input:checked + .ala-check__box { border-color:var(--ala-brand-core); background-color:var(--ala-brand-core); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ala-check input:focus-visible + .ala-check__box { outline:3px solid var(--ed-steel); outline-offset:3px; }
.ala-check__text a { color:var(--ala-brand-core); text-decoration:underline; text-underline-offset:2px; }
.ala-check__text strong { font-weight:700; color:var(--ed-ink); }
.ala-request-messenger { margin:18px 0 0; font-size:13px; line-height:1.5; max-width:none; }
.ala-request-messenger a { color:var(--ala-brand-core); white-space:nowrap; }
#channels .ed-terms p { margin-top:16px; color:#d6e2e7; }
#channels .ed-terms .ed-button { margin-top:24px; }
@media(max-width:767px) {
 .ed-contact-request { grid-template-columns:1fr; }
 .ed-contact-card { padding:32px; }
 .ed-contact-number { margin-top:32px; }
 .ala-form-grid { grid-template-columns:1fr; }
 .ala-request-form button { width:100%; }
 .ala-form-submit { flex-direction:column; align-items:stretch; }
 /* в столбик flex-basis 150px сноски становится её высотой – две строки занимали 150px */
 .ala-form-submit .ala-request-note { flex:none; }
}