/* =====================================================
   CUSTOM FIXES (Design 1) – Course list card overflow
   Goal: no overlap/spill, SAME card size
===================================================== */

/* A) Make cards clip anything that spills out */
.webinar-card,
.course-card,
.bundle-card,
.card {
  overflow: hidden !important;
}

/* B) Flex rows inside cards must allow shrinking (this is the real fix) */
.webinar-card .d-flex,
.course-card .d-flex,
.bundle-card .d-flex,
.card .d-flex {
  min-width: 0 !important;
}

/* Any direct children inside flex rows should also be shrinkable */
.webinar-card .d-flex > *,
.course-card .d-flex > *,
.bundle-card .d-flex > *,
.card .d-flex > * {
  min-width: 0 !important;
}

/* C) Clamp titles to 2 lines (safe) */
.webinar-card h3,
.course-card h3,
.bundle-card h3,
.webinar-card .font-16,
.course-card .font-16,
.bundle-card .font-16 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  max-height: calc(1.25em * 2) !important;
}

/* D) The “in …” / category / small gray text: force ellipsis to work */
.webinar-card .text-gray-500,
.webinar-card .text-gray-400,
.course-card .text-gray-500,
.course-card .text-gray-400,
.bundle-card .text-gray-500,
.bundle-card .text-gray-400,
.card .text-gray-500,
.card .text-gray-400 {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* If the gray text is an <a> inside that line, clamp the <a> too */
.webinar-card .text-gray-500 a,
.webinar-card .text-gray-400 a,
.course-card .text-gray-500 a,
.course-card .text-gray-400 a,
.bundle-card .text-gray-500 a,
.bundle-card .text-gray-400 a,
.card .text-gray-500 a,
.card .text-gray-400 a {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: bottom;
}

/* E) Keep price/duration tidy */
.webinar-card .text-primary,
.course-card .text-primary,
.bundle-card .text-primary,
.card .text-primary {
  white-space: nowrap !important;
}
.webinar-card { outline: 3px solid red !important; }