/* =========================================================
   COURSES SECTION (Technical Mentor) — Organized CSS
   Works with:
   .tuition-course-section, .tuition-tab-nav, .tuition-single-course,
   #coursesGridAll/#coursesGridOnline/#coursesGridOffline, Bootstrap Tabs
========================================================= */

/* ---------- Variables (keep if not defined globally) ---------- */
:root{
  --tm-primary: #2f6bff;
  --tm-secondary: #8338ec;
  --tm-accent: #ff006e;

  --tm-dark: #111827;
  --tm-gray: #6b7280;
  --tm-light: #f8fafc;

  --tm-radius: 16px;
  --tm-radius-sm: 12px;
  --tm-border: 1px solid rgba(17,24,39,.10);
  --tm-shadow: 0 14px 30px rgba(0,0,0,.08);
  --tm-shadow-hover: 0 22px 44px rgba(0,0,0,.14);
}

/* =========================================================
   1) SECTION WRAPPER + HEADING
========================================================= */
.tuition-course-section{
  padding: 90px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9eef7 100%);
}

.tuition-course-section .section-content h2{
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin: 0 0 14px;
  color: var(--tm-dark);
}

.tuition-course-section .section-content p{
  margin: 0;
  max-width: 520px;
  color: var(--tm-gray);
  font-weight: 600;
}

/* spacing helper if your theme uses mb-60 */
.mb-60{ margin-bottom: 60px; }

/* =========================================================
   2) TABS (Bootstrap buttons styled)
========================================================= */
.tuition-tab-nav{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tuition-tab-nav .nav-link{
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  color: var(--tm-gray);
  font-weight: 800;
  border-radius: 999px;
  padding: 10px 18px;
  transition: .2s ease;
  line-height: 1;
}

.tuition-tab-nav .nav-link:hover{
  border-color: rgba(47,107,255,.40);
  color: var(--tm-primary);
  transform: translateY(-1px);
}

.tuition-tab-nav .nav-link.active{
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
  box-shadow: 0 14px 26px rgba(47,107,255,.18);
}

/* Bootstrap tab-pane visibility safeguard (if other css hides it) */
.tab-pane{ display: none; }
.tab-pane.show.active{ display: block; }

/* =========================================================
   3) COURSE CARD
========================================================= */


.tm-course-card{
  background: #fff;
  border-radius: 26px;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  overflow: hidden;
  height: 100%;
}

/* Thumbnail wrapper (keep overflow hidden so image clips) */
.tm-course-card__thumb{
  position: relative;
  overflow: hidden;
  border-radius: 26px 26px 0 0;   /* TL TR BR BL */
}

/* Image should follow the same top-only radius */
.tm-course-card__img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 26px 26px 0 0 !important; /* TL TR BR BL */
}


/* save icon (top-right) */
.tm-course-card__save{
  position: absolute;
  top: 26px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.95);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

.tm-course-card__save i{
  font-size: 18px;
  color: #111827;
}

/* category pills on image bottom-left */
.tm-course-card__cats{
  position: absolute;
  left: 26px;
  bottom: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tm-pill{
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

.tm-pill--dark{ background: #0b0f2a; }
.tm-pill--red{ background: #ff4b45; }

/* body */
.tm-course-card__body{
  padding: 18px 22px 22px;
}

/* meta row: lessons + rating */
.tm-course-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 8px;
  color: #6b7280;
  font-weight: 800;
}

.tm-meta-left,
.tm-meta-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tm-meta-left i{
  font-size: 16px;
  color: #9ca3af;
}

.tm-meta-right i{
  font-size: 16px;
  color: #f59e0b; /* star */
}

.tm-meta-right small{
  color: #9ca3af;
  font-weight: 800;
}

/* title */
.tm-course-card__title{
  margin: 8px 0 14px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.tm-course-card__title a{
  color: #0b0f2a;
  text-decoration: none;
}

.tm-course-card__title a:hover{
  color: #2f6bff;
}

/* instructor row */
.tm-course-card__instructor{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 18px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  color: #6b7280;
  font-weight: 800;
}

.tm-course-card__avatar{
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

/* bottom: price + button */
.tm-course-card__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
}

.tm-course-card__price{
  font-size: 22px;
  font-weight: 900;
  color: #ff4b45; /* price red like screenshot */
}

/* pill outline enroll button */
.tm-course-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(17,24,39,.18);
  color: #111827;
  font-weight: 900;
  background: #fff;
  text-decoration: none;
  min-width: 220px;
}

.tm-course-card__btn:hover{
  border-color: #2f6bff;
  color: #2f6bff;
}

.tm-course-card__btn i{
  font-size: 18px;
}

/* responsive */
@media (max-width: 576px){
  .tm-course-card__img{ height: 210px; }

  .tm-course-card__bottom{
    flex-direction: column;
    align-items: stretch;
  }

  .tm-course-card__btn{
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   4) INSTRUCTORS (Avatar Row Fix)
========================================================= */
.tuition-single-course .course-instructor.pro-instructors{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 12px 0 14px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
}

/* avatars container */
.tuition-single-course .course-instructor.pro-instructors .pro-ins-avatars{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* IMPORTANT: stop img{width:100%} stretching */
.tuition-single-course .course-instructor.pro-instructors img.pro-ins-avatar{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;

  display: block !important;
  object-fit: cover !important;
  border-radius: 50% !important;

  border: 2px solid #fff;
  background: #f1f3f5;

  flex: 0 0 34px !important;

  /* overlap */
  margin-left: -10px;
}

.tuition-single-course .course-instructor.pro-instructors img.pro-ins-avatar:first-child{
  margin-left: 0;
}

/* +N circle */
.tuition-single-course .course-instructor.pro-instructors .pro-ins-more{
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;

  margin-left: -10px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--tm-secondary);
  border: 2px solid #fff;
}

/* names */
.tuition-single-course .course-instructor.pro-instructors .pro-ins-text{
  min-width: 0;
}

.tuition-single-course .course-instructor.pro-instructors .pro-ins-names{
  font-weight: 900;
  font-size: 14px;
  color: var(--tm-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.tuition-single-course .course-instructor.pro-instructors .pro-ins-sub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tm-gray);
}

/* =========================================================
   5) BOTTOM ROW (Price + Button)
========================================================= */
.tuition-single-course .course-bottom-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(17,24,39,.08);
}

/* price */
.tuition-single-course .tutor-item-price span{
  font-weight: 900;
  font-size: 18px;
  color: var(--tm-primary);
}

/* enroll button */
.tuition-single-course .the-btn.border-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(47,107,255,.35);
  background: rgba(47,107,255,.06);
  color: var(--tm-primary);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: .2s ease;
}

.tuition-single-course .the-btn.border-btn:hover{
  background: var(--tm-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 26px rgba(47,107,255,.20);
}

.tuition-single-course .the-btn.border-btn i{
  font-size: 16px;
}

/* =========================================================
   6) LOADING / ERROR STATES
========================================================= */
#coursesLoading{
  font-weight: 800;
  color: var(--tm-gray);
}

#coursesError{
  font-weight: 800;
}

/* =========================================================
   7) RESPONSIVE
========================================================= */
@media (max-width: 991px){
  .tuition-course-section{
    padding: 75px 0;
  }

  .tuition-course-section .row.align-items-end{
    gap: 18px;
  }
}

@media (max-width: 768px){
  .mb-60{ margin-bottom: 34px; }

  .tuition-course-section{
    padding: 65px 0;
  }

  .tuition-course-section .section-content h2{
    font-size: clamp(24px, 7vw, 34px);
  }

  .tuition-tab-nav{
    width: 100%;
  }

  .tuition-tab-nav .nav-link{
    padding: 10px 14px;
    font-size: 13px;
  }

  .tuition-single-course .course-thumb .course-img{
    height: 190px;
  }

  .tuition-single-course .course-bottom-meta{
    flex-direction: column;
    align-items: stretch;
  }

  .tuition-single-course .the-btn.border-btn{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px){
  .tuition-single-course .course-thumb{
    padding: 14px 14px 0;
  }
  .tuition-single-course .course-content{
    padding: 16px 16px 18px;
  }
  .tuition-single-course .course-instructor.pro-instructors .pro-ins-names{
    max-width: 180px;
  }
}