/* static/css/components/building-kenya-ai-economy.css */
.bk-ai { width: 100%; background: var(--primary-text-bg, #FFF); }

.bk-ai__inner {
  max-width: 1435px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 81px) clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 6vw, 81px);
}

.bk-ai__title {
  color: var(--Primary-Text, #040548);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.bk-ai__carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.bk-ai__track {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 8px;
}
.bk-ai__track::-webkit-scrollbar { display: none; }

.bk-ai__card {
  flex: 0 0 auto;
  width: min(548px, 85vw);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

.bk-ai__media {
  position: relative;
  width: 100%;
  aspect-ratio: 548 / 274;
  border-radius: clamp(16px, 2vw, 24px);
  background: lightgray 50% / cover no-repeat;
  overflow: hidden;
}

.bk-ai__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.bk-ai__play img {
  width: clamp(48px, 8vw, 72px);
  height: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease;
}
.bk-ai__card:hover .bk-ai__play img { transform: scale(1.08); }

.bk-ai__text { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }

.bk-ai__subtitle {
  color: var(--Primary-Text, #040548);
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600; line-height: normal; margin: 0;
}

.bk-ai__desc {
  color: var(--Secondary-Text, #334155);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 400; line-height: normal; margin: 0; align-self: stretch;
}

@media (max-width: 1024px) {
  .bk-ai__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.bk-ai__indicators { display: flex; gap: 8px; justify-content: center; align-items: center; }
.bk-ai__dot {
  width: 29px; height: 12px; border-radius: 5px; border: none; padding: 0;
  background: var(--black-stroke-regular-caption, rgba(19, 19, 19, 0.10));
  cursor: pointer; transition: width 0.3s ease, background 0.3s ease;
}
.bk-ai__dot--active { width: 50px; background: var(--Primary-Color, #E91E8C); }