/* ==========================================================================
   Секция «Почему Арм-Гарант выбирают снабженцы и подрядчики?»

   Макет: 1:372. Заголовок центрирован, сетка 3×600 с зазором 20,
   карточка 600×345.33: иконка 48 в контейнере 82×82 (отступ 17),
   текст с 158.33 — заголовок 32 Medium, линия на 55, описание 20 серым.

   Блок повторяется на странице «Партнёрам», поэтому файл подключается
   и там (см. ag_page_styles в inc/enqueue.php).
   ========================================================================== */

.why__title {
  max-width: 1247px;
  margin: 0 auto var(--space-48);
  text-align: center;
}

/* Карточка в макете 600×345.33 (нода 1:375), три ряда с зазором 20
   дают ровно 1076 — вместе с заголовком это 1182 всей секции. */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 345.33px;
  gap: 20px;
}

.why-card {
  display: flex;
  flex-direction: column;
  min-height: 345.33px;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.why-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  padding: 17px;
  color: var(--color-brand);
}

.why-card__icon svg { width: 48px; height: 48px; }

.why-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  /* Текстовый блок прижат к низу карточки, а не отбит фиксированными 44:
     у карточки с двухстрочным заголовком («Комплексная комплектация
     объектов», нода 1:2566) жёсткий отступ разгонял высоту ряда. */
  margin-top: auto;
}

.why-card__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.why-card__line {
  display: block;
  height: 1px;
  background: var(--color-border);
}

.why-card__desc {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

@media (max-width: 1100px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .why__grid { grid-template-columns: 1fr; }
  .why-card { min-height: 0; padding: var(--space-24); }
  .why-card__text { margin-top: var(--space-24); }
  .why-card__title { font-size: var(--fs-24); }
}

/* --- Телефон: сетка не должна держать десктопную высоту ряда --------------- */
@media (max-width: 700px) {
  .why__grid { grid-auto-rows: auto; }
}

/* --- Телефон: карточки во весь экран (см. пояснение в front-hero.css) ------ */
@media (max-width: 700px) {
  .why-card {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
    padding-inline: var(--side-padding);
  }
}