body { background-color: #f7f8fb; }
.placeholder-img { width: 100%; height: 200px; background: #e9ecef; display:flex; align-items:center; justify-content:center; color:#6c757d; }
.card img { object-fit: cover; height: 180px; }
pre { white-space: pre-wrap; word-wrap: break-word; }


/* Course thumbnails: consistent shape, never cropped */
.course-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;     /* keeps a nice card shape */
  height: auto;             /* let aspect-ratio control height */
  object-fit: contain;      /* show entire image; no crop */
  background: #f8f9fa;      /* subtle letterbox for odd ratios */
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: block;
  image-rendering: auto;
}

/* Fallback for older browsers (no aspect-ratio support) */
@supports not (aspect-ratio: 1) {
  .course-thumb { height: 220px; }
  @media (max-width: 576px) { .course-thumb { height: 160px; } }
}

/* Course detail “hero” image: larger but still uncropped */
.course-hero{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  background: #f8f9fa;
  display: block;
}

/* Fallback for hero */
@supports not (aspect-ratio: 1) {
  .course-hero { height: 320px; }
}