/* Калькуляторы и словарь на главной.

   Карточка (.tool-card) целиком приходит из tools.css — здесь только оболочка
   секции и сетка: на странице инструментов их четыре и они лежат в две колонки,
   на главной пять и колонок три. */

.home-tools-b .title {
  margin-bottom: 32px;
}

/* Типографика заголовка и лида — из общего набора заголовков разделов в
   style.css, чтобы блок не разъехался с соседними секциями главной. Цвет лида
   тоже не задаём: в остальных секциях он наследует базовый #171F26, и серый
   здесь читался как другой уровень текста. */
.home-tools-b .title h2 {
  margin: 0;
}

/* Иконка без плашки.

   Бежевый квадрат #FBF3E2 давал к белой карточке 1,10:1 — форма не читалась,
   глаз видел цветное пятно без смысла. И плашка не помогала иконке, а мешала:
   на бежевом та давала 6,02:1, на чистом белом — 6,65:1. Слой, добавленный
   ради выделения иконки, слегка ухудшал её же читаемость.

   Остаётся сама иконка, охрой — тем же #B8770A, что у номеров шагов обучения,
   так тёплый акцент сайта сохраняется. Размер поднят с 22 до 28: без плашки
   иконке нужен собственный вес, иначе она теряется в пустоте. */
.tools-grid--home .tool-card__icon {
  width: auto;
  height: auto;
  background: none;
  color: #B8770A;
  margin-bottom: 14px;
}

/* Размер задаём здесь, а не в разметке: шаблон иконок общий со страницей
   /tools, где плашка осталась и 22px в ней на месте. */
.tools-grid--home .tool-card__icon svg {
  width: 28px;
  height: 28px;
}

/* Пятая карточка (словарь) занимает свободное место в нижнем ряду: три колонки
   дают 3 + 2, и пустая ячейка справа выглядела бы обрывом. */
.tools-grid--home {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tools-grid--home > li:last-child:nth-child(3n + 2) {
  grid-column: span 2;
}

.home-tools__foot {
  margin-top: 28px;
}

/* Растянутая карточка словаря: ширина оправдана, только если в ней есть что
   показать. Иначе это широкий прямоугольник с воздухом — сама растяжка не
   виновата, виновата пустота внутри. Живые термины заодно отвечают на вопрос
   «что там внутри» лучше любого описания. */
.tool-card__terms {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 14px;
}

/* Один в один с характеристиками в карточках сборников (.ebook-card__feats li):
   это одна и та же сущность — короткая метка внутри карточки, и выглядеть она
   должна одинаково в обоих блоках. */
.tool-card__term {
  padding: 4px 9px;
  border-radius: 6px;
  background-color: #F1F2F4;
  font-size: 13px;
  line-height: 18px;
  color: #52606D;
}

.home-tools__more {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #171F26;
  text-decoration: none;
  border-bottom: 1px solid #C8CDD3;
  padding-bottom: 2px;
}

.home-tools__more:hover,
.home-tools__more:focus-visible {
  border-bottom-color: #171F26;
}

@media only screen and (max-width: 991px) {
  .tools-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools-grid--home > li:last-child:nth-child(3n + 2) {
    grid-column: auto;
  }

  /* В две колонки нечётная пятая карточка снова остаётся одна в ряду. */
  .tools-grid--home > li:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .home-tools-b .title {
    margin-bottom: 24px;
  }

  .home-tools-b .title span {
    font-size: 16px;
    line-height: 25px;
  }
}

@media only screen and (max-width: 575px) {
  .tools-grid--home {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-grid--home > li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .home-tools__foot {
    margin-top: 20px;
  }
}