.flashcard .tag { margin-left: .5rem; }
.is-hidden { display: none; }
.course-shelf { overflow-x: auto; padding-bottom: .5rem; }
.course-card  { min-width: 20rem; min-height: 18rem; border-radius: 1rem; }
.course-hero{
  height: 160px; 
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background-size: cover;
  background-position: center center;
  /* default gradient if no image */
  background-image: linear-gradient(180deg, #5728d9 0%, #260e4b 100%);
}
.course-hero[data-img]{
  height: 125px;             /* the ratio controls height */
  width: 125px;
  position: absolute;
  left: 100px;
  background-image:var(--hero-url);
}

/* add space after any badge inside a card */
.card .badge { margin-bottom: .5rem; }

.course-hero .badge { background: rgba(255,255,255,.25); }
.course-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3.5em; /* keeps card heights consistent */
}
/* Size presets */
.course-card--sm { min-height: 18rem; }
.course-card--md { min-height: 22rem; }
.course-card--lg { min-height: 26rem; }

.course-hero--sm { height: 120px; }
.course-hero--md { height: 150px; }
.course-hero--lg { height: 180px; }

/* Optional color presets for variety (use Bootstrap vars) */
.course-hero--primary  { background: linear-gradient(135deg, var(--bs-primary),  #6610f2); color:#fff; }
.course-hero--success  { background: linear-gradient(135deg, var(--bs-success),  #198754); color:#fff; }
.course-hero--warning  { background: linear-gradient(135deg, var(--bs-warning),  #fd7e14); color:#212529; }
.course-hero--dark     { background: linear-gradient(135deg, var(--bs-dark),     #343a40); color:#fff; }
.course-hero .badge { background: rgba(255,255,255,.25); }

.hero {
  background: linear-gradient(135deg, var(--bs-primary), #6610f2);
  color: #fff;
}
.hero .hero-inner { padding: 3rem 1rem; }
@media (min-width: 768px) { .hero .hero-inner { padding: 4rem 2rem; } }

.feature-card .card-body { padding: 1.25rem 1.25rem; }
.cta .btn { white-space: nowrap; }

.course-hero.contain { 
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #0f172a; /* backdrop color behind letterbox */
}
.master-photo-wrap{
  /* gives the photo area a nice visible height */
  min-height: 260px;              /* tweak to taste */
  height: 100%;
  position: relative;
}

.master-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fills the box, crops nicely */
  display: block;
}