/* На промежуточных ширинах (1025–1919) карточки сужаются и текст занимает
   больше строк — даём рядам расти, чтобы ничего не обрезалось. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .kt-contact-info__row--top {
    grid-auto-rows: minmax(174px, auto);
  }

  .kt-contact-info__row--mid {
    grid-auto-rows: minmax(145px, auto);
  }

  .kt-contact-info__row--bottom {
    grid-auto-rows: minmax(262px, auto);
  }

  /* Значение в ряду телеграмов сужается вместе с карточкой */
  .kt-contact-info__row--mid .kt-contact-info__value {
    font-size: clamp(24px, 2vw, 32px);
  }
}

/* ============================================================================
   Секция: Контактная информация (kt-contact-info)
   Узел Figma: 305:7248
   Сетка 3x2 из карточек с контактной информацией.
   ========================================================================== */

.kt-contact-info {
  /* Корневой элемент: размер ровно 1652px без собственных вертикальных отступов.
     Расстояния между секциями управляет rhythm.css (180px). */
  width: min(1652px, 100% - 2 * var(--page-gutter));
  max-width: 1652px;
  margin-inline: auto;
}

.kt-contact-info .container {
  width: 100%;
  padding-inline: 0;
}

/* Сетка: два ряда с РАЗНЫМ числом колонок, поэтому каждый ряд — своя сетка.
   Раньше это была одна сетка 3x2 с `display: contents` у рядов; так больше
   нельзя: в верхнем ряду четыре карточки (узел 814:2273), в нижнем три. */
.kt-contact-info__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kt-contact-info__row {
  display: grid;
  gap: 24px;
}

/* Ряд 1: почта и телефон — две широкие карточки по 814px */
.kt-contact-info__row--top {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(174px, auto);
}

/* Ряд 2: три телеграма. Карточки ниже остальных (145 против 174): подпись и
   значение стоят плотнее, а само значение мельче — 32px вместо 40. */
.kt-contact-info__row--mid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(145px, auto);
}

/* Ряд 3: адрес, время работы, юридическая информация */
.kt-contact-info__row--bottom {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(262px, auto);
}

/* Карточка */
.kt-contact-info__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* 30, а не 32: рамка 2px в макете рисуется ВНУТРЬ карточки, то есть входит
     в её высоту 174/262. С паддингом 32 карточка выходила на 4px выше макета. */
  padding: 30px;
  border-radius: var(--radius-l);
  border: 2px solid var(--border-main-quarteary);
  background: var(--bg-main);
}

/* В первых двух рядах горизонтальный паддинг по макету 24, а не 32
   (минус 2 на рамку — см. выше). */
.kt-contact-info__row--top .kt-contact-info__card,
.kt-contact-info__row--mid .kt-contact-info__card {
  padding: 30px 22px;
}

/* Ряд телеграмов: подпись и значение стоят вплотную, зазор 12 вместо 32. */
.kt-contact-info__row--mid .kt-contact-info__card {
  gap: 12px;
}

.kt-contact-info__row--mid .kt-contact-info__value {
  font-size: 32px;
}

/* Содержимое распределяется по высоте только там, где в макете оно прижато к
   низу: время работы и юридическая информация. Остальные карточки заполняют
   свою высоту ровно, им хватает выравнивания по верху. */
.kt-contact-info__row--bottom .kt-contact-info__card:nth-child(n + 2) {
  justify-content: space-between;
  height: 100%;
}


/* Подпись карточки */
.kt-contact-info__label {
  font-size: 24px;
  font-weight: var(--weight-400);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Основное значение */
.kt-contact-info__value {
  font-size: 40px;
  font-weight: var(--weight-500);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-constant-dark);
  word-break: break-word;
}

/* Ссылка в почте: цвет как у остальных значений (просьба дизайнера —
   синий выделялся из ряда, хотя в макете он синий). */
.kt-contact-info__link {
  /* В новом макете (узел 815:2559) почта — синяя ссылка #0055ff, а не тёмный
     текст: это единственный кликабельный контакт в секции. */
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.17em;
  transition: color 0.18s ease;
  text-decoration-thickness: 2px;
}

.kt-contact-info__link:hover {
  color: var(--text-accent-secondary);
}

/* Телефон. В макете это обычный тёмный текст, не синяя ссылка, но на телефоне
   по нему должно работать нажатие — поэтому тег ссылки, а вид как у значения. */
.kt-contact-info__phone {
  color: inherit;
  text-decoration: none;
}

.kt-contact-info__phone:hover {
  color: var(--text-accent);
}

/* Юридическая информация (несколько строк) */
.kt-contact-info__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 20px;
  font-weight: var(--weight-500);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-constant-dark);
}

.kt-contact-info__legal p {
  /* Макет: 20px/1.10 вес 500, шаг между строками 8px.
     При 40px текст не помещался в карточку. */
  margin: 0;
  font-size: 20px;
  font-weight: var(--weight-500);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ============================================================================
   Адаптив
   ========================================================================== */

/* 1440px и выше — базовое состояние (3x2 сетка) */
@media (max-width: 1440px) {
  .kt-contact-info__label {
    font-size: clamp(20px, 1.5vw, 24px);
  }

  .kt-contact-info__value {
    font-size: clamp(32px, 2.5vw, 40px);
  }

  .kt-contact-info__legal p {
  /* Макет: 20px/1.10 вес 500, шаг между строками 8px.
     При 40px текст не помещался в карточку. */
    font-size: 20px;
  }
}

/* 1024px — сжатый вид, сохраняем 3x2 сетку */


/* 768px — переход на 2x3 (2 карточки в строке) */


/* 480px — одна колонка */


/* ============================================================================
   Планшет (≤1024) — узел 534:7604: карточки колонкой, 704x95, пад 20,
   подпись 14, значение 20.
   ============================================================================ */

@media (max-width: 1199px) {
  .kt-contact-info {
    max-width: calc(100% - 64px);
  }

  .kt-contact-info .container {
    padding: 0;
    max-width: none;
  }

  .kt-contact-info__grid {
    gap: 16px;
  }

  .kt-contact-info__row--top,
  .kt-contact-info__row--mid,
  .kt-contact-info__row--bottom {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
  }

  .kt-contact-info__row--top .kt-contact-info__card,
  .kt-contact-info__row--mid .kt-contact-info__card {
    padding: 20px;
    gap: 12px;
  }

  .kt-contact-info__card {
    padding: 20px;
    gap: 12px;
    border-radius: 16px;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
  }

  .kt-contact-info__label {
    font-size: 14px;
    line-height: 1.26;
  }

  .kt-contact-info__value,
  .kt-contact-info__link,
  .kt-contact-info__row--mid .kt-contact-info__value {
    font-size: 20px;
    line-height: 1.26;
  }


}

/* ============================================================================
   Мобиль (≤767) — узел 534:7813: карточки колонкой, 343x501, пад 20,
   подпись 12, значение 18 w600, gap между карточками 12.
   ============================================================================ */

@media (max-width: 767px) {
  .kt-contact-info {
    max-width: calc(100% - 32px);
  }

  .kt-contact-info .container {
    padding: 0;
    max-width: none;
  }

  .kt-contact-info__grid {
    gap: 12px;
  }

  .kt-contact-info__row--top,
  .kt-contact-info__row--mid,
  .kt-contact-info__row--bottom {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }

  .kt-contact-info__card {
    padding: 20px;
    gap: 8px;
    border-radius: 16px;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
  }

  .kt-contact-info__label {
    font-size: 12px;
    line-height: 1.26;
    font-weight: var(--weight-400);
  }

  .kt-contact-info__value,
  .kt-contact-info__link,
  .kt-contact-info__row--mid .kt-contact-info__value {
    font-size: 18px;
    line-height: 1.26;
    font-weight: 600; /* токена --weight-600 нет — вес не применялся */
  }

  /* Карточка «Юридическая информация» показывается на всех брейкпоинтах
     по просьбе заказчика — в макетах ≤1024 её нет, это осознанное отклонение. */
}