/* Лагеря и поездки: "Два направления" - лагерь в школе и поездка в ЮАР.
   Макет: фреймы k2mhxG (десктоп, 1440x430) и Z17cmW (телефон, 390x537).
   Полосу 1440 с контентом 1328 (56/20 на телефоне) даёт сайтовый .wrap
   (base.css) - здесь не повторяется. У секции своего заголовка нет:
   сразу ряд из двух карточек. */

.cm-napravleniya {
  background: var(--paper);
  /* Дамп: padding-block 100 - свой отступ блока, не токен --section-y (110). */
  padding-block: 100px;
}

.cm-napravleniya__row {
  display: flex;
  /* Дамп: в "Ряду" три элемента (карточка, прямоугольник-черта 1px,
     карточка) с gap=64 между каждым - то есть между карточками 64+1+64
     "пустого" пространства. Черта здесь не третий элемент (см. ниже
     .cm-napravleniya__item::before), поэтому зазор ряда - сумма двух
     зазоров и ширины черты: 64 + 1 + 64 = 129. */
  gap: 129px;
}

.cm-napravleniya__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* дамп: gap внутри карточки 16 */
}

@media (min-width: 861px) {
  .cm-napravleniya__item {
    /* Дамп: сам контент карточки (кикер+заголовок+черта+абзац+ссылка) -
       194px, а "Ряд" в макете - 230: черта между карточками в дампе
       нарисована длиннее содержимого (рисуется отдельным прямоугольником
       1x230, выше карточки на 36px), и высоту ряда задаёт она, а не
       текст. Разделитель здесь - псевдоэлемент на высоту карточки
       (ниже), поэтому высоту ряда держит сама карточка через min-height.
       Заперто в ширину: на телефоне ряд становится столбиком, и это же
       свойство на flex-item внутри column-раскладки (flex-basis:0 у
       flex:1 1 0) рушит высоту карточки до контента без запаса - там
       запас не нужен (черта короткая, 1px). */
    min-height: 230px;
  }
}

/* Разделительная линия между карточками - псевдоэлемент на второй и
   каждой следующей карточке, а не отдельный узел ряда: раскладка тогда
   верна при любом числе карточек, которое задаёт заказчица, а не только
   при двух (тот же принцип, что у .pg-ryad в pg.css). Линия стоит по
   центру парного зазора (129px), поэтому отступ - половина зазора. */
.cm-napravleniya__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -64.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.cm-napravleniya__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 (метрика Inter) - высота строки в дампе не нарисована */
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--magenta-text);
}

.cm-napravleniya__h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  line-height: 39px;   /* 34 x 1.15 = 39.1, в дампе строка 39 */
  letter-spacing: -1px;
  color: var(--ink);
}

.cm-napravleniya__line {
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--sun);
}

.cm-napravleniya__p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 30px;   /* дамп: 17 x 1.75 = 29.75, в дампе строка 30 */
  color: var(--muted);
}

.cm-napravleniya__link {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 (метрика Inter) */
  color: var(--magenta-text);
  text-decoration: none;
}

@media (max-width: 860px) {
  .cm-napravleniya {
    padding-block: var(--section-y-m); /* 52 в дампе = токену */
  }

  .cm-napravleniya__row {
    flex-direction: column;
    /* Дамп: в столбик три элемента (карточка, черта 1px, карточка) с
       gap=20 - то есть между карточками 20+1+20 = 41. */
    gap: 41px;
  }

  .cm-napravleniya__item:not(:first-child)::before {
    left: 0;
    right: 0;
    top: -20.5px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .cm-napravleniya__kicker {
    font-size: 10px;
    line-height: 12px;   /* 10 x 1.21 */
  }

  .cm-napravleniya__h3 {
    font-size: 23px;
    line-height: 26px;   /* 23 x 1.15 = 26.45, в дампе строка 26 */
    letter-spacing: -0.6px;
  }

  .cm-napravleniya__p {
    font-size: 15px;
    line-height: 26px;   /* 15 x 1.75 = 26.25, в дампе строка 26 */
  }

  .cm-napravleniya__link {
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 */
  }
}