/* ─────────────────────────────────────────────────────────────
   c2 — «Связь с клиникой»: светло-бирюзовая подложка во всю
   ширину окна, внутри заголовок и белая строка-карточка.
   Эталон: секция 295px, подложка 1440×246 (y = 0…246),
   заголовок на y=41, карточка 1296×120 на y=84 (x = 72…1368).
   ───────────────────────────────────────────────────────────── */
.ccall {
  /* 246 (подложка) + 49 воздуха снизу = 295 — высота секции из карты */
  padding-bottom: 49px;
  background: var(--white);
}

/* ─── Подложка: во всю ширину окна, со скруглением 20px ───
   Градиент из карты: бирюзовый с прозрачностью 5% сверху
   и ~12.5% снизу (замерено по эталону; в токенах такого нет). */
.ccall__panel {
  /* 1 (рамка) + 40 + 34 (заголовок) + 9 + 120 (карточка) + 41 + 1 = 246 */
  padding: 40px 0 41px;
  background-image: linear-gradient(
    rgba(var(--brand-rgb), 0.05) 0%,
    rgba(var(--brand-rgb), 0.125) 100%
  );
  border: 1px solid rgba(var(--brand-rgb), 0.1);
  border-radius: var(--radius);
}

/* Заголовок: Montserrat 28px/33.6px 700 */
.ccall__title {
  font-family: var(--font-ui);
  font-size: 28px;
  line-height: 33.6px;
  font-weight: 700;
  color: var(--ink);
}

/* ─── Белая строка-карточка ───
   Высота ровно 120px, внутренние отступы по 20px + 1px рамки,
   поэтому текст слева начинается на x=93, а телефоны
   заканчиваются на x=1347. */
.ccall__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 120px;
  margin-top: 9px;          /* низ заголовка 75 + 9 → верх карточки y=84 */
  padding: 0 20px;
  background: var(--white);
  border: 1px solid rgba(var(--brand-rgb), 0.1);
  border-radius: var(--radius);
}

/* Левая колонка: надзаголовок + название.
   margin-top сдвигает колонку на 3.5px ниже оптического центра —
   ровно так она стоит в эталоне (надзаголовок на y=123). */
.ccall__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 7px;
  min-width: 0;
}

/* Надзаголовок: Montserrat 13px/16.9px 600, бирюзовый */
.ccall__label {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 16.9px;
  font-weight: 600;
  color: var(--brand);
}

/* Название: Montserrat 20px/26px 700.
   Цвет из карты — основной текст с прозрачностью 86%. */
.ccall__name {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: rgba(var(--ink-rgb), 0.86);
}

/* ─── Правая колонка: телефоны в столбик, прижаты вправо ───
   27 + 22 + 27 = 76px; margin-top опускает блок на 1.5px ниже
   оптического центра — как в эталоне (первый телефон на y=107). */
.ccall__phones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  margin-top: 3px;
  flex: none;
}

/* Телефон: Montserrat 20px/27px 600, бирюзовый.
   Класс btn-liquid подключает общий эффект «волна по тексту». */
.ccall__phone {
  display: block;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 27px;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
  transition: color 0.2s;
}
.ccall__phone:hover {
  color: var(--brand-deep);
}

/* ─────────────────────────────────────────────────────────────
   Планшет: карточка становится двухстрочной, отступы меньше
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .ccall {
    padding-bottom: 36px;
  }
  .ccall__panel {
    padding: 32px 0 32px;
  }
  .ccall__title {
    font-size: 24px;
    line-height: 30px;
  }
  .ccall__card {
    gap: 24px;
    min-height: 0;
    margin-top: 16px;
    padding: 24px 24px 26px;
  }
  .ccall__info {
    margin-top: 0;
  }
  .ccall__name {
    font-size: 18px;
    line-height: 24px;
  }
  .ccall__phones {
    gap: 14px;
    margin-top: 0;   /* оптический сдвиг нужен только на десктопе */
  }
}

/* ─────────────────────────────────────────────────────────────
   Телефон: колонки схлопываются в одну, телефоны слева
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ccall {
    padding-bottom: 24px;
  }
  .ccall__panel {
    padding: 24px 0 24px;
    border-radius: var(--radius-sm);
  }
  .ccall__title {
    font-size: 20px;
    line-height: 26px;
  }
  .ccall__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 14px;
    padding: 20px 18px 22px;
    border-radius: var(--radius-sm);
  }
  .ccall__name {
    font-size: 17px;
    line-height: 23px;
  }
  .ccall__phones {
    align-items: flex-start;
    gap: 10px;
  }
  .ccall__phone {
    font-size: 18px;
    line-height: 25px;
  }
}