/* ============================================================
   SC/Direction · CTA «Консультація» — полоса как B11, запись в попапе (2026-10-04)
   figma: node-id=318:51
   Поля — Form/Input в теме inverse; состояния как у B11 (b11-consult.css)
   ============================================================ */

.sc-dconsult {
  /* --- Геометрия из макета, которой нет в токенах --- */
  --dconsult-form-w: 456px; /* колонка формы (форма снята 2026-10-04, правила ниже — для отката) */
  --dconsult-parallax: var(--sc-space-20); /* 80: запас кадра сверху и снизу под медленный скролл, как в B11 */

  box-sizing: border-box;
  /* Сборка как B11 (2026-10-06): секция — рамка кадра, сетка внутри (.sc-dconsult__inner).
     Было: секция сама сеткой 473/743 — коммит 55106d6. */
  position: relative;
  isolation: isolate;
  /* Поле внутри полосы — 80, как у плиты Welcome kit (--kit-plate-pad), раз текст
     собран по её образцу (правка 2026-10-06). В Figma 318:51 и в B11 — 160 (--section-padding-y). */
  padding: var(--sc-space-20) var(--sc-pad-x);
  background: var(--background);
  color: var(--foreground);
}

.sc-dconsult__inner {
  display: grid;
  /* Текст в левой колонке 473 из 1216 — колонка B11, справа планета без текста
     (сборка как B07 Welcome kit, 2026-10-06). Пробовали 743: строки тянулись к планете. */
  grid-template-columns: 473fr 743fr;
  gap: var(--sc-space-16);
  align-items: start; /* текст к верхнему краю полосы, как везде в ките (2026-10-06) */
}

/* Фон-кадр под скримом black 20 %: кадр B11 отзеркален — планета у правого края,
   текст слева на тёмном. Кадр выше полосы на --dconsult-parallax сверху и снизу:
   этот запас проезжает при скролле (gsap-animations.js). Без JS стоит по центру. */
.sc-dconsult__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--background);
}

.sc-dconsult__image {
  display: block;
  position: absolute;
  inset-block-start: calc(var(--dconsult-parallax) * -1); /* запас кадра сверху — без translate -50%: GSAP переводил его в px при старте и кадр сползал (2026-11-04) */
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: calc(100% + var(--dconsult-parallax) * 2);
  object-fit: cover;
  object-position: right center;
  will-change: transform;
}

.sc-dconsult__scrim {
  position: absolute;
  inset: 0;
  background: var(--sc-black-alpha-20);
}


.sc-dconsult *,
.sc-dconsult *::before,
.sc-dconsult *::after { box-sizing: border-box; }

.sc-dconsult__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg); /* 20, как в .sc-kit__copy */
  min-inline-size: 0;
}

/* кнопка отбита от заметки сильнее, чем строки друг от друга — как в B07 */
.sc-dconsult__copy > .sc-dconsult__cta { margin-block-start: var(--sc-space-6); }

.sc-dconsult__title { max-inline-size: var(--sc-measure); }

.sc-dconsult__kicker,
.sc-dconsult__title,
.sc-dconsult__text { margin: 0; }

.sc-dconsult__kicker { color: var(--accent-foreground); }

.sc-dconsult__text {
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}


/* ---------- Button/Control · primary — открывает попап записи ----------
   В inverse primary светлый, текст тёмный — как «Записатись» в B11 */
.sc-dconsult__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--control-square);
  padding-inline: var(--control-padding-x);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  transition: background-color var(--sc-dur) var(--sc-ease);
}

@media (hover: hover) and (pointer: fine) {
  .sc-dconsult__cta:hover { background: var(--sc-primary-hover); }
}

.sc-dconsult__cta:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.sc-dconsult__cta:active { background: var(--sc-primary-hover); }

/* ---------- Форма на странице — снята 2026-10-04, стили оставлены для отката ---------- */

.sc-dconsult__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--control-gap); /* 12 */
}

.sc-dconsult__field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-1_5); /* 6 */
  inline-size: 100%;
}

.sc-dconsult__label { color: var(--field-label); }

.sc-dconsult__input {
  block-size: var(--field-height);
  inline-size: 100%;
  padding-inline: var(--field-padding-x);
  border: var(--sc-line) solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--field-text);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
  transition: border-color var(--sc-dur-fast) var(--sc-ease);
}

.sc-dconsult__input::placeholder { color: var(--field-placeholder); }

/* Рамку не утолщаем — по описанию Form/Input layout поедет; берём кольцо */
.sc-dconsult__input:focus-visible {
  outline: var(--sc-field-ring-w) solid var(--field-focus-ring);
  outline-offset: 0;
  border-color: var(--field-border-focus);
}

.sc-dconsult__input[aria-invalid="true"] { border-color: var(--field-border-error); }

.sc-dconsult__input:disabled { opacity: 0.45; }

.sc-dconsult__error {
  margin: 0;
  color: var(--field-text-error);
  font: 400 var(--p-mini-size) / var(--p-mini-lh) var(--font-sans);
}

/* Button/Control · primary */
.sc-dconsult__submit {
  block-size: var(--control-square);
  padding-inline: var(--control-padding-x);
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  text-transform: uppercase;
  white-space: nowrap;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  transition: background-color var(--sc-dur) var(--sc-ease);
}

.sc-dconsult__consent {
  margin: 0;
  color: var(--muted-foreground);
}

/* ---------- Состояния (в Figma их нет — обязательны по CLAUDE.md) ---------- */

@media (hover: hover) and (pointer: fine) {
  .sc-dconsult__submit:hover { background: var(--sc-primary-hover); }
}

.sc-dconsult__submit:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.sc-dconsult__submit:active { background: var(--sc-primary-hover); }

.sc-dconsult__form[data-state="loading"] .sc-dconsult__submit,
.sc-dconsult__submit:disabled {
  opacity: 0.6;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sc-dconsult__cta,
  .sc-dconsult__input,
  .sc-dconsult__submit { transition: none; }
}

/* ---------- Планшет ----------
   Колонка 473/1216 на 768 — 240: заголовок ломался в пять строк. Тексту две трети
   полосы, планета остаётся в правой трети. Строки при этом заходят на край планеты,
   поэтому скрим плотнее — 40 % вместо 20 % (2026-11-09). */

@media (min-width: 641px) and (max-width: 1023px) {
  .sc-dconsult__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .sc-dconsult__scrim { background: var(--sc-black-alpha-40); }
}

/* ---------- Телефон ---------- */

@media (max-width: 640px) {
  .sc-dconsult__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--section-gap);
    align-items: start;
  }
  .sc-dconsult__cta { inline-size: 100%; }
  .sc-dconsult__submit {
    inline-size: 100%;
    margin-block-start: calc(var(--sc-form-cta-gap) - var(--control-gap));
  }
}