/* Canonical image presentation and authoring rules. Do not replace with page-specific fixed heights. */
/* Hero/banner media: preserve intrinsic ratio and let page-specific containers crop; never stretch width/height independently. */
img.t24-image-hero {
  max-width: 100%;
  image-rendering: auto;
}

.t24-image-course-cover,
.t24-course-cover-slot,
.t24m-course-card .course-cover,
.marketplace-course-image,
.education-course-image,
.discovery-product-image,
.editorial-class-image {
  width: 100%;
  aspect-ratio: 750 / 422;
  overflow: hidden;
  background: #edf2f7;
}

.t24-image-course-cover > img,
.t24-course-cover-slot > img,
.t24m-course-card .course-cover img,
.marketplace-course-image img,
.education-course-image img,
.discovery-product-image img,
.editorial-class-image img,
img.t24-image-course-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

img.t24-image-course-cover,
img.t24-media-cover-220 {
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 422;
  object-fit: cover;
  object-position: 50% 50%;
}

.t24-image-tutor-profile,
.t24m-avatar,
.tutor-profile-avatar {
  aspect-ratio: 1 / 1;
}

.t24-image-tutor-profile > img,
.t24m-avatar img,
img.tutor-profile-avatar,
img.t24-image-tutor-profile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.t24-image-contain,
.t24-evidence-image,
.t24-logo-image,
.t24-badge-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.t24-image-cropper { display: grid; gap: .75rem; }
.t24-image-current { display: grid; gap: .4rem; width: min(100%, 360px); }
.t24-image-current > span { font-size: .78rem; color: var(--bs-secondary-color, #667085); font-weight: 600; }
.t24-image-current-frame,
.t24-image-preview-frame {
  position: relative;
  overflow: hidden;
  background: #f2f4f7;
  border: 1px solid var(--bs-border-color, #d0d5dd);
  border-radius: .75rem;
}
.t24-image-current-frame.is-course,
.t24-image-preview-frame.is-course { aspect-ratio: 750 / 422; }
.t24-image-current-frame.is-profile,
.t24-image-preview-frame.is-profile { width: min(100%, 260px); aspect-ratio: 1 / 1; border-radius: 50%; }
.t24-image-current-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.t24-image-crop-stage { width: min(100%, 560px); display: grid; gap: .75rem; }
.t24-image-preview-frame canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.t24-image-preview-frame canvas:active { cursor: grabbing; }
.t24-image-circle-guide { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: inset 0 0 0 999px rgba(17,24,39,.12); pointer-events: none; }
.t24-image-crop-controls { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.t24-image-crop-controls label { display: grid; gap: .25rem; min-width: min(100%, 280px); font-size: .85rem; font-weight: 600; }
.t24-image-crop-controls input[type="range"] { width: 100%; }

/* Legacy selectors normalized to canonical slots. */
.t24m-course-card .course-cover { height: auto !important; }
.marketplace-course-image { height: auto !important; }
.education-course-image,
.discovery-product-image,
.editorial-class-image { height: auto !important; }
.t24-media-cover-220 { height: auto !important; }

/* Problem/evidence media must remain complete. */
.problem-image img,
.problem-attachment img,
.solution-attachment img,
.evidence-image img,
[data-evidence-image] img {
  max-width: 100%;
  height: auto;
  object-fit: contain !important;
}

/* Shared course cover library: native keyboard-accessible choices, responsive previews. */
.t24-cover-library{min-width:0;margin:1.25rem 0;border:0;padding:0}
.t24-cover-library legend{font-size:1rem;font-weight:650;margin-bottom:.35rem}
.t24-cover-library p{font-size:.9rem;color:#53657d;margin-bottom:.65rem}
.t24-cover-library-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-top:.75rem}
.t24-cover-library-option{display:block!important;position:relative;border:1px solid #d6dfeb;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;padding:0!important}
.t24-cover-library-option img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.t24-cover-library-option span{display:block;padding:.6rem;font-size:.85rem;color:#172b47;line-height:1.4}
.t24-cover-library-option input{position:absolute;top:.55rem;left:.55rem;width:24px!important;height:24px!important;accent-color:#0755d7}
.t24-cover-library-option:has(input:checked){outline:2px solid #0755d7;outline-offset:2px}
.t24-cover-library-option:focus-within{outline:3px solid #0755d7;outline-offset:3px}
.t24-cover-keep{display:flex!important;align-items:center;gap:.5rem;font-size:.9rem}
.t24-cover-keep input{width:24px!important;height:24px!important}