/* ===========================================================================
   kt-blog section — статьи: три карточки с заголовками и ссылками
   Блок статей: заголовок по центру, ряд из трёх карточек,
   под ними кнопка «Читать все статьи»
   =========================================================================== */

.kt-blog {
  /* Секция закрепляется при скролле, и под ней проезжает предыдущий
     контент — фон обязан быть непрозрачным, иначе он просвечивает. */
  background: var(--bg-main);

  width: min(var(--container), 100% - 2 * var(--page-gutter));
  max-width: var(--container); /* 1652px */
  margin-inline: auto;
}

/* Контейнер секции */
.kt-blog .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0;
}

/* Заголовок секции */
.kt-blog__title {
  font-size: 48px;
  font-weight: var(--weight-500);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-constant-dark);
  margin: 0 0 39px 0; /* 39px из макета */
  text-align: center;
  width: 100%;
}

/* Ряд из трёх карточек */
.kt-blog__cards-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
  margin-bottom: 39px; /* 39px из макета до кнопки */
  /* Всего: 532 + 536 + 536 + 24 + 24 = 1652px */
}

/* Карточка: базовый контейнер */
.kt-blog__card {
  position: relative;
  border-radius: var(--radius-l); /* 20px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--space-xxxl); /* 32px */
  justify-content: space-between;
  height: 420px; /* Зафиксированная высота из макета */
}

/* Карточка 1: тёмная с фоном-градиентом */
.kt-blog__card--dark {
  background: var(--bg-dark-primary);
  color: var(--text-constant-light);
  width: 532px;
}

/* Фоновый градиент (декоративный gloss-эффект) */
.kt-blog__card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Карточки 2 и 3: светлые с рамкой */
.kt-blog__card--light {
  background: var(--bg-main);
  color: var(--text-constant-dark);
  border: 2px solid var(--border-main-quarteary); /* rgba(41, 40, 36, 0.12) */
  width: 536px;
}

/* Контент карточки — относительная позиция над фоном (для тёмной) */
.kt-blog__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: space-between;
}

/* Бейдж в карточке */
.kt-blog__card .badge {
  width: fit-content;
  font-size: 16px;
}

/* Заголовок карточки */
.kt-blog__card-title {
  font-size: 40px;
  font-weight: var(--weight-500);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  /* Заголовок может быть в 2-3 строки, максимум 3 */
}

/* Ссылка "Читать полностью" */
.kt-blog__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-accent);
  font-size: 16px;
  font-weight: var(--weight-400);
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 0.18s ease;
  width: fit-content;
}

.kt-blog__card--dark .kt-blog__card-link {
  color: white;
}

.kt-blog__card-link:hover {
  color: var(--text-accent-secondary);
}

.kt-blog__card--dark .kt-blog__card-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* SVG стрелка в ссылке */
.kt-blog__card-link-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  stroke: currentColor;
}

/* Кнопка "Читать все статьи" — внизу по центру */
.kt-blog__button {
  align-self: center;
}

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

/* Tablet: 1024px */


/* Tablet portrait: 768px — карточки схлопываются в одну колонку */


/* Mobile: 480px */


/* Бейдж и заголовок — одна группа у верхнего края карточки.
   Без неё у .kt-blog__card-content было три ребёнка, и space-between
   уводил заголовок в середину вместо верха. */
.kt-blog__card-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* Макет: заголовок статьи 40px/1.10 в ширину 472px — ровно две строки.
   У средней карточки при меньшей ширине выходило три строки. */
.kt-blog__card-title {
  max-width: 472px;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}



/* В Figma паддинг 32px считается от края фрейма, а обводка 2px рисуется
   ПОВЕРХ него. В CSS с border-box рамка+паддинг = 34px, контент выходит
   468px вместо 472 — и заголовок средней карточки ломался на три строки.
   Компенсируем толщиной рамки у карточек, где она есть. */
.kt-blog__card--light {
  padding: 30px;
}

/* ============================================================================
   Планшет (≤1024) — узел 534:7622: заголовок 40, две карточки 317 (пад 32,
   заголовок 32), кнопка «Читать все статьи» как на десктопе.
   ============================================================================ */

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

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

  /* Зазоры в макете 24 (десктопные маржины 39) */
  .kt-blog__title { margin: 0 0 24px; }
  .kt-blog__cards-row { margin-bottom: 24px; }

  .kt-blog__title { font-size: 40px; }

  .kt-blog__cards-row { gap: 24px; }

  .kt-blog__card {
    flex: 1 1 0;
    min-width: 0;
    height: 317px;
    padding: 32px;
  }

  .kt-blog__card-title {
    font-size: 32px;
    line-height: 1.1;
  }

  /* В планшетном макете только две статьи */
  .kt-blog__cards-row .kt-blog__card:nth-child(3) { display: none; }
}

/* ============================================================================
   Мобильный (≤767px) — узел 534:7828: 342x417 фрейм (g24),
   заголовок 105px + карточка 220px (p20) + кнопка 44px
   ============================================================================ */

@media (max-width: 767px) {
  .kt-blog {
    max-width: calc(100% - 34px);
  }

  .kt-blog .container {
    padding: 0;
  }

  .kt-blog__title {
    font-size: 32px;
    margin: 0 0 24px;
    line-height: 1.1;
  }

  .kt-blog__cards-row {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
  }

  .kt-blog__card {
    width: 100%;
    height: 220px;
    padding: 20px;
    flex: none;
  }

  .kt-blog__card--dark {
    width: 100%;
  }

  .kt-blog__card--light {
    display: none;
  }

  .kt-blog__card-title {
    font-size: 24px;
    line-height: 1.1;
    max-width: none;
  }

  /* На мобиле только первая карточка */
  .kt-blog__cards-row .kt-blog__card:nth-child(n+2) { display: none; }

  .kt-blog__button {
    width: calc(100% - 48px);
    margin-inline: 24px;
    height: 44px;
    padding: 8px 24px;
    font-size: 14px;
  }
}