/**
 * Блок обратного звонка — последний экран страницы.
 *
 * Две половины в одной карточке: слева светлая с оттенком основного цвета,
 * с обещаниями и живым телефоном, справа белая, с полями. Разный фон делает
 * работу заголовка: видно, что это одно предложение из двух путей —
 * позвонить самому или оставить номер, — а не два разных блока подряд.
 *
 * Гамма светлая: заливка — самый мягкий оттенок основного цвета, текст
 * обычный тёмный, цветом выделены только знаки, телефон и кнопка. Тёмная
 * плашка во всю половину спорила бы и с белыми карточками товаров сверху,
 * и с тёмным подвалом снизу; светлая читается как продолжение страницы.
 *
 * Все цвета — токены. Меняется набор палитры — меняется и блок, своего
 * прибитого оттенка здесь нет ни одного.
 */

.callback {
  margin-block: var(--space-12);
}

.callback__inner {
  display: grid;
  overflow: hidden;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* 60rem, а не 48: до этой ширины поля и обещания встают в две узкие
   колонки, и телефон переносится по слогам */
@media (min-width: 60rem) {
  .callback__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* ── Половина с обещаниями ───────────────────────────── */

.callback__pitch {
  position: relative;
  overflow: hidden;
  padding: var(--space-8);

  background: linear-gradient(150deg, var(--color-primary-light) 0%, var(--color-surface-subtle) 100%);
  color: var(--color-text);
}

/* Круг в углу — единственное украшение. Он же не даёт большой заливке
   выглядеть плоской заплаткой на белой странице. */
.callback__pitch::after {
  content: '';
  position: absolute;
  right: calc(var(--space-16) * -1);
  bottom: calc(var(--space-16) * -1);

  width: 16rem;
  height: 16rem;
  border: 2rem solid var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0.08;

  pointer-events: none;
}

.callback__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);

  background: var(--color-primary);
  color: var(--color-text-invert);
}

.callback__badge .material-symbols-outlined {
  font-size: var(--fs-2xl);
}

.callback__title {
  position: relative;
  margin: 0 0 var(--space-3);
  max-width: 24ch;

  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.callback__text {
  position: relative;
  margin: 0 0 var(--space-6);
  max-width: 42ch;

  color: var(--color-text-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* ── Три обещания ────────────────────────────────────── */

.callback__points {
  position: relative;
  display: grid;
  gap: var(--space-3);

  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.callback__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);

  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.callback__point-icon {
  flex: none;
  color: var(--color-primary);
  font-size: var(--fs-xl);
}

/* ── Живой телефон ───────────────────────────────────── */

.callback__call {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}

/* Черта над телефоном отделяет «позвоните сами» от обещаний выше */
.callback__call::before {
  content: '';
  width: 100%;
  height: 1px;
  margin-bottom: var(--space-5);
  background: var(--color-border);
}

.callback__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-icon-gap);

  color: var(--color-primary-dark);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-decoration: none;
  white-space: nowrap;
}

.callback__phone:hover {
  text-decoration: underline;
}

.callback__hours {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Мессенджеры здесь те же, что в панели меню: на светлом фоне они работают
   как есть, добавляем отбивку и белую подложку — на цветной заливке
   прозрачные пилюли выглядели вырезанными */
.callback .messengers {
  position: relative;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.callback .messengers__link {
  background: var(--color-surface);
}

/* ── Половина с полями ───────────────────────────────── */

/* Поля по центру половины: обещаний слева всегда больше, и прижатая
   к верху форма оставляла под кнопкой пустую белую четверть */
.callback__form {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: var(--space-8);
  background: var(--color-surface);
}

/* Половины разделены чертой: фоны у них близкие, и без неё карточка
   читается как одна плашка с непонятным пятном слева */
@media (min-width: 60rem) {
  .callback__form {
    border-left: 1px solid var(--color-border);
  }
}

/* ── Телефон и планшет ───────────────────────────────── */

@media (max-width: 59.9375rem) {
  .callback {
    margin-block: var(--space-10);
  }

  .callback__pitch,
  .callback__form {
    padding: var(--space-6);
  }

  .callback__form {
    border-top: 1px solid var(--color-border);
  }

  .callback__title {
    font-size: var(--fs-2xl);
  }

  /* На узком экране круг занимал бы четверть блока — убираем */
  .callback__pitch::after {
    display: none;
  }
}

@media (max-width: 30rem) {
  .callback__phone {
    font-size: var(--fs-xl);
  }
}