/* /cases — «стена отзывов»: 17 карточек реальных пользователей Глабикс.
   Masonry через CSS columns (1 → 2@768 → 3@1024). Карточки — новый
   компонент .cases-card на светло-серой подложке (как .contacts-card).
   Типографика только через UI-kit (.text-body-m / .text-muted); цвета —
   только токены base.css, без хардкода hex.

   Hero — общий компонент articles-hero (см. components/articles-hero-2026.css),
   минимальный вариант как /media и /blog. Своего bg/градиента не задаём —
   переиспользуем дефолт компонента. */

/* Контент-секция: hero (.articles-hero) уже даёт верхний margin-bottom,
   поэтому секции нужен только нижний отступ до футера. Та же вертикальная
   шкала, что у .contacts-section / .articles-hero (40 → 48@576 → 56@768 → 60@1024). */
.cases-section {
  margin-bottom: 40px;
}

@media (min-width: 576px) {
  .cases-section {
    margin-bottom: 48px;
  }
}

@media (min-width: 768px) {
  .cases-section {
    margin-bottom: 56px;
  }
}

@media (min-width: 1024px) {
  .cases-section {
    margin-bottom: 60px;
  }
}

/* Masonry-стена. column-gap управляет только горизонтальным зазором —
   вертикальный задаём через margin-bottom на самой карточке. */
.cases-wall {
  column-count: 1;
  column-gap: 16px;
}

@media (min-width: 768px) {
  .cases-wall {
    column-count: 2;
    column-gap: 24px;
  }
}

@media (min-width: 1024px) {
  .cases-wall {
    column-count: 3;
    column-gap: 32px;
  }
}

.cases-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 16px;
  background-color: var(--gray-100);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {
  .cases-card {
    margin-bottom: 24px;
    padding: 32px;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .cases-card {
    margin-bottom: 32px;
    padding: 40px;
    gap: 24px;
  }
}

/* Бейдж-категория — пилюля на мягкой подложке (2026-аналог legacy
   .badge.bg-pink-gradient). Единый цвет для всех карточек. */
.cases-card__badge {
  width: max-content;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--surface-card-blue-soft);
  color: var(--brand-blue-strong);
  font-family: "Onest", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* Шапка-автор: человек — аватар + имя в ряд; компания (--company) —
   логотип + подпись/сайт в столбец. */
.cases-card__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cases-card__author--company {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cases-card__avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.cases-card__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.cases-card__name {
  font-family: "Onest", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-default);
}

/* Ссылка-имя: цвет наследуется (не красим), affordance — подчёркивание. */
a.cases-card__name {
  text-decoration: underline;
}

.cases-card__site {
  font-family: "Onest", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
}

a.cases-card__site {
  text-decoration: underline;
}

/* Заголовок карточки — собственный размер 18 → 20@1024 (не .text-h3,
   который на десктопе уходит в 32px и слишком крупен для карточки стены). */
.cases-card__title {
  margin: 0;
  font-family: "Onest", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-default);
}

@media (min-width: 1024px) {
  .cases-card__title {
    font-size: 20px;
  }
}

/* Текст отзыва — .text-body-m, приглушённый цвет. Внутренние отступы
   и список «—» портированы из старого styles/cases.css. */
.cases-card__text {
  color: var(--text-muted);
}

.cases-card__text p {
  margin: 0;
}

.cases-card__text p + p {
  margin-top: 16px;
}

.cases-card__text strong {
  font-weight: 700;
}

.cases-card__text ul {
  margin: 16px 0 0;
  padding-left: 24px;
  list-style: none;
}

.cases-card__text li::marker {
  content: "— ";
}

.cases-card__text a {
  text-decoration: underline;
}