/* Разговорник валентинки: три колонки по адресату. Макет: voLxb (1440)
   и QWsRW (390, те же три колонки одна под другой).

   Цвет метки колонки - часть дизайна колонки (друг/семья/учителя), а не
   контента, поэтому задаётся классом --friend/--family/--all, а не
   полем. Три новых цвета (мятный и жёлтый фон открыток в соседнем блоке
   не при чём; здесь малиновый уже есть, добавлен только --violet для
   метки "УЧИТЕЛЮ И ВСЕМ") - токены в tokens.css, блок valentines. */

.vl-phrases {
  /* В макете вертикальный паддинг секции 110px, а не общие 116. */
  padding-block: 110px;
}

.vl-phrases__in {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.vl-phrases__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vl-phrases__lead {
  max-width: 820px;
  line-height: 31px;   /* 17 x 1.8 = 30.6, в макете строка целая - 31 */
}

.vl-phrases__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vl-phrases__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vl-phrases__label {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 1.5px;
  color: #FFFFFF;
}

.vl-phrases__col--friend .vl-phrases__label { background: var(--accent); }
.vl-phrases__col--family .vl-phrases__label { background: var(--accent-2); }
.vl-phrases__col--all    .vl-phrases__label { background: var(--violet); }

.vl-phrases__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--paper-h);
  /* Обводка в дампе strokeAlignment: inner - border добавил бы свою
     толщину к высоте карточки (без явного height), inset box-shadow
     его не занимает (конвенция проекта, см. prazdnik-pixel-perfect). */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: var(--r-card);
}

.vl-phrases__en {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  line-height: 23px;   /* в макете явно 1.3: 18 x 1.3 = 23.4 */
  color: var(--text);
}

.vl-phrases__ru {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;   /* в макете явно 1.5: 14 x 1.5 = 21 точно */
  color: var(--text-2);
}

@media (max-width: 860px) {
  .vl-phrases { padding-block: 52px; }

  .vl-phrases__lead { font-size: 15px; line-height: 27px; }   /* 15 x 1.8 = 27 точно */

  /* Общий .hw-h2 даёт на телефоне line-height:31px, а в дампе этого
     блока у "H" высота ровно 30px - та же мелкая нестыковка общего
     класса, что в "Пути конверта". Поправка только тут. */
  .vl-phrases__head .hw-h2 { line-height: 30px; }

  .vl-phrases__cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vl-phrases__en { font-size: 16px; line-height: 21px; }   /* 16 x 1.3 = 20.8 */
  .vl-phrases__ru { font-size: 13px; line-height: 20px; }   /* 13 x 1.5 = 19.5, в макете строка целая - 20 */
}