/*
  Карточка «тема поддержки» (components/support-topic-card.njk), секция
  «Поддержка в эксплуатации». Сетка из 2 карточек — align-items:stretch
  на гриде (см. support-topics.css), чтобы карточка без тегов визуально
  не отличалась по высоте от карточки с тегами (в макете обе — 272px).
*/
.support-topic-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  border-radius: var(--radius-card);
  background: var(--color-support-card-bg);
}

.support-topic-card__row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.support-topic-card__text {
  flex: 1;
  min-width: 0;
}

.support-topic-card__title {
  margin: 0 0 15px;
  font-size: var(--fs-step-title);
  line-height: var(--lh-step-title);
  font-weight: var(--fw-bold);
  color: var(--color-heading-dark);
}

.support-topic-card__description {
  margin: 0;
  font-size: var(--fs-step-desc);
  line-height: var(--lh-step-desc);
  color: var(--color-ink);
  opacity: 0.6;
}

.support-topic-card__divider {
  align-self: stretch;
  flex-shrink: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.support-topic-card__icon {
  flex-shrink: 0;
}

.support-topic-card__icon svg {
  display: block;
  width: 60px;
  height: 60px;
}

.support-topic-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/*
  Мобильная адаптация (600px,
  база 390px). Структурная перестройка: на десктопе одна строка
  title+description вместе слева, разделитель, иконка справа; на
  мобильном — верхняя строка title+divider+icon, а description отдельным
  блоком НИЖЕ на всю ширину карточки. Без правки njk: .support-topic-card__text
  (обёртка title+description в разметке) переводится в display:contents —
  сама она перестаёт быть боксом, а title/description становятся прямыми
  grid-items родителя .support-topic-card__row, который раскладывает их по
  grid-template-areas в 2 ряда.
*/
@media (max-width: 599.98px) {
  .support-topic-card {
    padding: min(30px, calc(30 / 390 * 100vw));
    border-radius: min(25px, calc(25 / 390 * 100vw));
  }

  .service-support-topics__grid .support-topic-card:nth-child(1) {
    min-height: min(216px, calc(216 / 390 * 100vw));
  }

  .service-support-topics__grid .support-topic-card:nth-child(2) {
    min-height: min(345px, calc(345 / 390 * 100vw));
  }

  .support-topic-card__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "title divider icon" "desc desc desc";
    align-items: center;
    column-gap: min(20px, calc(20 / 390 * 100vw));
    row-gap: min(15px, calc(15 / 390 * 100vw));
  }

  .support-topic-card__text {
    display: contents;
  }

  .support-topic-card__title {
    grid-area: title;
    margin: 0;
    font-size: min(16px, calc(16 / 390 * 100vw));
    line-height: min(23px, calc(23 / 390 * 100vw));
  }

  .support-topic-card__description {
    grid-area: desc;
    font-size: min(12px, calc(12 / 390 * 100vw));
    line-height: min(21px, calc(21 / 390 * 100vw));
  }

  .support-topic-card__divider {
    grid-area: divider;
    align-self: center;
    height: min(45px, calc(45 / 390 * 100vw));
  }

  .support-topic-card__icon {
    grid-area: icon;
  }

  .support-topic-card__icon svg {
    width: min(40px, calc(40 / 390 * 100vw));
    height: min(40px, calc(40 / 390 * 100vw));
  }

  .support-topic-card__tags {
    margin-top: min(20px, calc(20 / 390 * 100vw));
  }
}