/*
 * Подгонка макета под живые данные.
 *
 * gold.css — файл дизайна как есть, его обновляют копированием. Здесь то,
 * чего в макете не было: значения из базы длиннее макетных («Персональный»,
 * «17 часов назад», «Написать в поддержку») на узком экране. 320 px — это не
 * только старые телефоны, но и любой iPhone с «Увеличенным» видом экрана.
 * На обычной ширине страница выглядит ровно как макет.
 */

/* Тариф и срок. В макете ячейки сжимаются уже самого длинного слова и рвут
   его где попало — «Standar / d». Здесь слово остаётся целым, длинный срок
   («17 часов назад») переносится по пробелу, а на узком экране у ячеек
   меньше поля. Худший случай («Персональный» и «Закончилась 3 дня назад»
   на 320 px) заходит в поле карточки, но остаётся в стекле. */
.facts > div {
  min-width: auto;
}

.facts dd {
  overflow-wrap: break-word;
}

@media (max-width: 389px) {
  .facts > div {
    padding: 2px 12px;
  }
}

/* Подпись главной кнопки. .roll держит её в одну строку ради прокрутки при
   наведении мышью, и длинная подпись на узком экране обрезалась:
   «Написать в поддержку» — до «Написать в». Здесь она просто переносится,
   кнопка вмещает две строки. */
@media (max-width: 359px) {
  .roll {
    height: auto;
  }

  .roll > span + span {
    display: none;
  }

  .btn-gold:hover .roll > span {
    transform: none;
  }
}