/* ===== KK ARTICLES LIST (Карусель/Сітка) ===== */

/* Full-bleed / edge-to-edge надёжным способом */
.kk-articles-wrap{
  /* Было: margin: 40px 0; (1.9.7)
     FIX 1.9.9: меняем ТОЛЬКО нижний отступ (bottom spacing) */
  margin: 40px 0 12px 0 !important;

  width: 100vw !important;
  max-width: 100vw !important;

  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  /* Вернули как было у тебя: не трогаем edge padding */
  padding-left: clamp(10px, 2vw, 18px) !important;
  padding-right: clamp(10px, 2vw, 18px) !important;

  box-sizing: border-box !important;
  text-align: left !important;
}

.kk-articles-title{
  font-size: 32px !important;
  font-weight: 900 !important;
  margin: 0 0 24px 0 !important;
  color: #111827 !important;
  position: relative !important;
  padding-left: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
.kk-articles-title::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top: 0.15em !important;
  width: 5px !important;
  height: 0.95em !important;
  background: linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%) !important;
  border-radius: 999px !important;
}

/* ===== CARD ===== */
.kk-article-card{
  background:#fff !important;
  border-radius: 18px !important;
  overflow:hidden !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  display:flex !important;
  flex-direction:column !important;
  height: 100% !important;
  min-height: 390px !important;
  position:relative !important;
  will-change: transform;
}
.kk-article-card:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.14) !important;
  border-color: rgba(139,92,246,.75) !important;
}

.kk-article-media{
  width:100% !important;
  height: 210px !important;
  display:block !important;
  object-fit: cover !important;
  background: linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%) !important;
}

.kk-article-body{
  padding: 22px !important;
  display:flex !important;
  flex-direction:column !important;
  gap: 14px !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Заголовок: 3 строки максимум + фикс высоты */
.kk-article-h{
  font-size: 18px !important;
  font-weight: 850 !important;
  margin:0 !important;
  color:#0f172a !important;
  line-height:1.35 !important;

  display:-webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow:hidden !important;

  min-height: 4.05em !important;
}

/* Описание: 3 строки максимум + фикс высоты */
.kk-article-desc{
  font-size: 14.5px !important;
  color:#475569 !important;
  margin:0 !important;
  line-height:1.65 !important;

  display:-webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow:hidden !important;

  min-height: 4.95em !important;
}

/* Кнопка: black-purple gradient */
.kk-article-btn{
  margin-top:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  text-decoration:none !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;

  background: linear-gradient(135deg,#000000 0%,#4C1D95 100%) !important;
  color:#fff !important;
  border: none !important;

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
  width: fit-content !important;
}
.kk-article-btn::after{
  content:'→' !important;
  margin-left: 10px !important;
  transition: transform .2s ease !important;
}
.kk-article-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(76,29,149,.35) !important;
  filter: brightness(1.02) !important;
}
.kk-article-btn:hover::after{
  transform: translateX(5px) !important;
}

/* ===== Carousel ===== */
.kk-articles-carousel{
  --kk-card-w: 320px;
  --kk-gap: 22px;

  display:flex !important;
  gap: var(--kk-gap) !important;

  /* Вернули как было у тебя (1.9.7) */
  padding: 18px 0 22px !important;

  overflow-x:auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 20px !important;

  align-items: stretch !important;

  background: radial-gradient(1200px 400px at 10% 0%, rgba(139,92,246,.08) 0%, rgba(255,255,255,0) 60%),
              radial-gradient(1200px 400px at 90% 0%, rgba(109,40,217,.07) 0%, rgba(255,255,255,0) 60%) !important;
  border: 1px solid rgba(148,163,184,.35) !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(139,92,246,.85) rgba(148,163,184,.25) !important;
}
.kk-articles-carousel::-webkit-scrollbar{ height: 7px !important; }
.kk-articles-carousel::-webkit-scrollbar-track{
  background: rgba(148,163,184,.22) !important;
  border-radius: 999px !important;
}
.kk-articles-carousel::-webkit-scrollbar-thumb{
  background: linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%) !important;
  border-radius: 999px !important;
}

.kk-articles-carousel .kk-article-card{
  flex: 0 0 auto !important;
  width: var(--kk-card-w) !important;
  scroll-snap-align: start !important;
  height: 100% !important;
}

/* ===== Grid ===== */
.kk-articles-grid{
  display:grid !important;
  gap: 26px !important;
  width:100% !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

@media (max-width: 1024px){
  .kk-articles-title{ font-size: 28px !important; }
}
@media (max-width: 768px){
  .kk-articles-title{ font-size: 24px !important; }
  .kk-article-card{ min-height: 360px !important; }
  .kk-article-media{ height: 200px !important; }
}