/* Что пишут дети: открытки + слот фото. Макет: X8xvU (1440) и qqDUK (390).

   Цвет фона открытки (розовый/жёлтый/мятный) - чередование оформления,
   не контента: задаётся :nth-child(3n+1/2/3), а не полем. Добавит
   заказчица четвёртую открытку - она выйдет розовой и цикл пойдёт снова,
   ровно как в макете, где цветов три на любое число открыток. */

.vl-kids {
  /* В макете вертикальный паддинг секции 110px, а не общие 116. */
  padding-block: 110px;
  /* Заливка в дампе белая (X8xvU и qqDUK, fill #FFFFFF), как у пути
     конверта - см. комментарий в vl-path.css. */
  background: var(--white);
}

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

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

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

.vl-kids__cards {
  display: flex;
  gap: 20px;
}

.vl-kids__card {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 28px;
  /* Обводка в дампе strokeAlignment: inner - border добавил бы свою
     толщину к высоте карточки (высота не задана явно, box-sizing её не
     спасает), inset box-shadow её не занимает. */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: var(--r-card);
}

.vl-kids__card:nth-child(3n+1) { background: var(--bg-soft); }
.vl-kids__card:nth-child(3n+2) { background: var(--card-yellow); }
.vl-kids__card:nth-child(3n+3) { background: var(--card-mint); }

.vl-kids__card-to {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 */
  letter-spacing: 1.5px;
  color: var(--accent-2);
}

.vl-kids__card-text {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 30px;   /* в макете явно 1.35: 22 x 1.35 = 29.7 */
  color: var(--text);
}

.vl-kids__card-line {
  height: 1px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.vl-kids__card-author {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 */
  /* Общий --text-2 (#666D74) здесь не проходит AA: карточка розовая
     (--bg-soft, самый светлый из трёх фонов открытки нечётного цикла
     чуть темнее белого), контраст был 4.48 при норме 4.5. Свой цвет,
     тон тот же, темнее на 4% - на розовой карточке стало 4.76, на
     жёлтой и мятной запас только больше. */
  color: #62696F;
}

.vl-kids__photo {
  box-sizing: border-box;
  height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: var(--r-card);
}

.vl-kids__photo-icon {
  width: 22px;
  height: 22px;
  color: var(--line-h);
}

.vl-kids__photo-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-3);
}

@media (max-width: 860px) {
  /* Десктопные 110px выше не внутри медиа-запроса - без явного сброса
     протекли бы и на телефон, а в макете (qqDUK) здесь общие 52px
     из .hw-sec. Та же утечка, что чинили в "Правиле дня" и "Не про
     романтику". */
  .vl-kids { padding-block: 52px; }

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

  /* Свой лид, не общий .hw-lead - без мобильного переопределения здесь
     протекал бы десктопный line-height:31px. */
  .vl-kids__lead { font-size: 15px; line-height: 27px; }   /* 15 x 1.8 = 27 точно */

  .vl-kids__cards { flex-direction: column; gap: 14px; }

  /* В дампе на телефоне у "TO" и подписи автора строка на 2px/1px
     ниже, чем на десктопе (13 и 15 вместо 15 и 16) при тех же кеглях -
     мелкая особенность самого макета, поправка только здесь. */
  .vl-kids__card-to { line-height: 13px; }
  .vl-kids__card-text { font-size: 20px; line-height: 27px; }   /* 20 x 1.35 = 27 точно */
  .vl-kids__card-author { line-height: 15px; }

  .vl-kids__photo {
    align-items: center;
    text-align: center;
  }

  .vl-kids__photo-text { max-width: 300px; }
}