/* ============================================================
   EduBI-style course cards for the main site (Bootstrap page)
   Drop this file in your css/ folder and link it in <head> AFTER
   your other stylesheets:
     <link href="css/courses-redesign.css" rel="stylesheet">
   It restyles the existing .single-course markup to match the
   reference design (big image, level badge, instructor avatar,
   title, description, and a clean meta row with Enroll).
   ============================================================ */

/* card shell */
.courses .single-course {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(18, 38, 72, 0.06);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 26px;
}
.courses .single-course:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(18, 38, 72, 0.13);
}

/* ---- image header ---- */
.courses .course-head {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, #0a1733, #0492c2);
}
.courses .course-head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.courses .single-course:hover .course-head img {
  transform: scale(1.06);
}

/* "View Details" button appears on hover over the image */
.courses .course-head .btn.white.primary {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  background: #fff;
  color: #0492c2;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 3;
}
.courses .course-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 20, 45, 0);
  transition: background 0.25s ease;
}
.courses .single-course:hover .course-head::after {
  background: rgba(8, 20, 45, 0.28);
}
.courses .single-course:hover .course-head .btn.white.primary {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* level badge (top-left, soft dark translucent) */
.courses .course-head .level-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  background: rgba(10, 23, 51, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  padding: 5px 13px;
  border-radius: 50px;
}

/* ---- body ---- */
.courses .course-body {
  padding: 0 22px 14px;
  position: relative;
  flex: 1;
}

/* instructor avatar overlapping the image + name */
.courses .name-price {
  position: static;
}
.courses .teacher-info {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.courses .teacher-info img {
  position: absolute;
  top: -30px;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(8, 20, 45, 0.22);
  object-fit: cover;
  z-index: 5;
}
.courses .teacher-info .title {
  margin: 34px 0 0; /* push name below the avatar */
  font-size: 13px;
  font-weight: 600;
  /* color:#48566f; */
  color: #fff;
}

/* course title + description */
.courses .course-body .c-title {
  margin: 8px 0 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}
.courses .course-body .c-title a {
  color: #0a1733;
  text-decoration: none;
  transition: color 0.15s ease;
}
.courses .course-body .c-title a:hover {
  color: #0492c2;
}
.courses .course-body > p {
  color: #6a7890;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ---- meta row (hours · lessons · price · Enroll) ---- */
.courses .course-meta {
  border-top: 1px solid #eef1f6;
  background: #fafbfd;
  padding: 14px 22px;
  margin-top: auto;
}
.courses .course-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.courses .course-info span {
  font-size: 12.5px;
  color: #6a7890;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.courses .course-info span i {
  color: #06bbcc;
}
.courses .course-info .price {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
  color: #0492c2;
}

/* Optional Enroll button — add this inside .course-info in your HTML:
   <button class="c-enroll" onclick="openEnroll('Course name')">Enroll</button> */
.courses .course-info .c-enroll {
  border: none;
  background: #06bbcc;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 50px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.courses .course-info .c-enroll:hover {
  filter: brightness(1.06);
}

/* responsive: comfortable spacing on tablet/phone */
@media (max-width: 991px) {
  .courses .single-course {
    margin-bottom: 22px;
  }
}