/* ─────────────────────────────────────────────────────────────
   c5 — полоса соцсетей на странице «Контакты».
   Эталон: высота секции 110px.
   Слева текстовая колонка от x=72 шириной 648px (половина контейнера),
   справа две кнопки: 270px на x=767 и 311px на x=1057,
   правый край второй кнопки совпадает с краем контейнера (1368).
   ───────────────────────────────────────────────────────────── */
.cnet {
  background: var(--white);
}

/* 7px воздуха сверху и 1px снизу: 7 + 102 (текстовая колонка) + 1 = 110 */
.cnet { padding-bottom: 51px; }   /* воздух до подвала, как на боевом */

.cnet__inner {
  display: flex;
  align-items: flex-start;
  padding: 7px 0 1px;
}

/* ─── Левая колонка: ровно половина контейнера (1296 / 2 = 648) ─── */
.cnet__intro {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Надзаголовок, y = 7…24 */
.cnet__eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 16.9px;
  font-weight: 600;
  color: var(--brand);
}

/* Заголовок: низ надзаголовка 24 + 3 → y = 27…61 */
.cnet__title {
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 28px;
  line-height: 33.6px;
  font-weight: 700;
  color: var(--ink);
}

/* Абзац в две строки: низ заголовка 61 + 9 → y = 70…109 */
.cnet__text {
  margin-top: 9px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 19.5px;
  font-weight: 500;
  color: var(--muted);
}

/* ─── Правая колонка: кнопки прижаты к правому краю контейнера ─── */
.cnet__actions {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;     /* на узком ноутбуке вторая кнопка уходит на строку ниже */
  justify-content: flex-end;
  gap: 20px;           /* зазор между кнопками из эталона */
  margin-top: 21px;    /* 7 (паддинг секции) + 21 → кнопки на y=28 */
}

/* Кнопка-пилюля: высота 53, паддинги по 20, скругление 10.
   Ширину задаёт содержимое: 20 + текст + 8 + 14 + 20 (270 и 311). */
.cnet__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 53px;
  padding: 0 20px;
  border-radius: var(--radius-btn);  /* в эталоне 10px — общий --radius здесь не подходит */
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 27px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.cnet__btn:hover {
  background: var(--brand-deep);
}

/* Стрелка после надписи (в том числе её копия-«призрак» от скрипта) */
.cnet__btn svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────────
   Планшет: кнопки переезжают под текст
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .cnet { padding-bottom: 51px; }   /* воздух до подвала, как на боевом */

.cnet__inner {
    flex-direction: column;
    padding: 40px 0;
  }
  .cnet__intro {
    flex: none;
    max-width: 100%;
  }
  .cnet__actions {
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Телефон: кнопки в столбик на всю ширину
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .cnet { padding-bottom: 51px; }   /* воздух до подвала, как на боевом */

.cnet__inner {
    padding: 30px 0;
  }
  .cnet__title {
    font-size: 24px;
    line-height: 30px;
  }
  .cnet__actions {
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
    margin-top: 20px;
  }
  .cnet__btn {
    justify-content: center;
    height: 50px;
    padding: 0 16px;
    white-space: normal;
    text-align: center;
  }
}