/* AI operations showcase – media/text separation. 2026-11-04
   The 16:9 source artwork was taller than the old 193px CSS grid row.
   An intrinsic grid minimum let the image spill over its text panel.
   Use a bounded flex media frame so the heading and copy never sit under an image. */
#aiCarousel .ai-carousel-track { align-items: stretch; }
#aiCarousel .ai-showcase-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 385px;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}
#aiCarousel .ai-showcase-image {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 225px;
  height: 225px;
  min-height: 0;
  max-height: 225px;
  width: 100%;
  padding: 11px 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #f5fbff, #eaf5ff);
  border-bottom: 1px solid #e3effb;
}
#aiCarousel .ai-showcase-image img {
  display: block;
  flex: 0 1 auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center;
  margin: 0;
}
#aiCarousel .ai-showcase-text {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: 16px 21px 24px;
  background: #fff;
  overflow: visible;
}
#aiCarousel .ai-small-index {
  display: block;
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .07em;
  color: #397aa9;
}
#aiCarousel .ai-showcase-title {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  flex: 0 0 auto;
  min-height: 31px;
  margin-top: 9px;
}
#aiCarousel .ai-mini-icon {flex: 0 0 30px; width: 30px; height: 30px;}
#aiCarousel .ai-showcase-text h3 {
  min-width: 0;
  margin: 0;
  color: #0b3674;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 850;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#aiCarousel .ai-showcase-text p {
  margin: 9px 0 0;
  color: #536f8b;
  font-size: clamp(12px, .99vw, 14px);
  line-height: 1.85;
  overflow-wrap: break-word;
}
[dir="rtl"] #aiCarousel .ai-showcase-text {direction: rtl; text-align: right;}
[dir="ltr"] #aiCarousel .ai-showcase-text {direction: ltr; text-align: left;}
@media (max-width: 1100px) {
  #aiCarousel .ai-showcase-card { min-height: 375px; }
  #aiCarousel .ai-showcase-image {
    flex-basis: 217px;
    height: 217px;
    max-height: 217px;
  }
}
@media (max-width: 740px) {
  #aiCarousel .ai-showcase-card { min-height: 0; }
  #aiCarousel .ai-showcase-image {
    flex: 0 0 clamp(170px, 56vw, 245px);
    height: clamp(170px, 56vw, 245px);
    max-height: clamp(170px, 56vw, 245px);
    padding: 10px;
  }
  #aiCarousel .ai-showcase-text {padding: 16px 18px 22px;}
  #aiCarousel .ai-showcase-text h3 {font-size: clamp(17px, 4.8vw, 20px);}
  #aiCarousel .ai-showcase-text p {font-size: clamp(13px, 3.5vw, 14px);}
}
@media (max-width: 390px) {
  #aiCarousel .ai-showcase-image {
    flex-basis: 175px;
    height: 175px;
    max-height: 175px;
  }
  #aiCarousel .ai-showcase-text {padding: 14px 15px 20px;}
}