/* Course artwork is DOM text, not a remotely generated image. Containers set its size.
   A scoped layer keeps legacy page rules from styling its internal spans. */
@layer ds-course-covers {
  .ds-native-course-cover, .ds-native-course-cover :where(span) {
    box-sizing:border-box!important; min-width:0!important; margin:0!important;
    border:0!important; border-radius:0!important; aspect-ratio:auto!important;
    width:auto!important; height:auto!important; padding:0!important;
    background:none!important; text-transform:none!important; letter-spacing:normal!important;
    font-family:var(--ds-font,system-ui,sans-serif)!important; font-weight:400!important;
    color:inherit!important; box-shadow:none!important; text-align:start!important;
  }
  .ds-native-course-cover {
    container-type:inline-size!important; position:relative!important; isolation:isolate!important;
    display:block!important; width:100%!important; height:100%!important; overflow:hidden!important;
    color:var(--ds-text,#f5f7fa)!important; background:var(--ds-bg,#07141c)!important;
    background-image:radial-gradient(ellipse at 95% 8%,color-mix(in srgb,var(--ds-accent,#20c9b8) 18%,transparent),transparent 65%)!important;
  }
  .ds-native-cover-pattern {
    position:absolute!important; inset:0!important; display:block!important;
    background:var(--ds-text,#f5f7fa)!important;
    mask:url('/assets/img/deenstudy-calligraphy.png') center/cover no-repeat!important;
    -webkit-mask:url('/assets/img/deenstudy-calligraphy.png') center/cover no-repeat!important;
    opacity:.075!important; pointer-events:none!important;
  }
  .ds-native-cover-bubble {
    position:absolute!important; display:block!important; border-radius:50%!important;
    border:1px solid color-mix(in srgb,var(--ds-accent,#20c9b8) 24%,transparent)!important;
    background:radial-gradient(circle at 28% 22%,#fff4,transparent 24%),radial-gradient(circle at 70% 85%,color-mix(in srgb,var(--ds-accent,#20c9b8) 24%,transparent),transparent 65%)!important;
    box-shadow:inset 0 0 16px #fff1,0 10px 28px #0001!important; pointer-events:none!important;
  }
  .ds-native-cover-bubble.bubble-one { width:30%!important; aspect-ratio:1!important; top:8%!important; right:4%!important; }
  .ds-native-cover-bubble.bubble-two { width:16%!important; aspect-ratio:1!important; left:4%!important; bottom:6%!important; opacity:.6!important; }
  .ds-native-cover-body {
    position:relative!important; z-index:1!important; display:flex!important; flex-direction:column!important;
    align-items:flex-start!important; justify-content:center!important; width:100%!important; height:100%!important;
    padding:6% 8%!important; gap:3cqw!important;
  }
  .ds-native-cover-brand {
    display:block!important; width:31%!important; height:5.5cqw!important; flex:none!important;
    background:url('/assets/img/SBS-DeenStudy-Light-Logo.png') left center/contain no-repeat!important;
  }
  html[data-theme="light"] .ds-native-cover-brand { filter:brightness(.34) saturate(1.12)!important; }
  .ds-native-cover-title {
    display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important;
    overflow:hidden!important; width:100%!important; font-size:6.2cqw!important; font-weight:700!important;
    line-height:1.2!important; overflow-wrap:anywhere!important; text-wrap:balance!important;
  }
  .ds-native-cover-author, .ds-native-cover-teacher {
    display:flex!important; flex-direction:column!important; gap:.6cqw!important; width:100%!important;
    font-size:3.3cqw!important; line-height:1.25!important;
  }
  .ds-native-cover-author > span:not(.ds-native-cover-label), .ds-native-cover-teacher > span:not(.ds-native-cover-label) {
    display:block!important; width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important;
    font-weight:550!important;
  }
  .ds-native-cover-label { display:block!important; font-size:2.3cqw!important; color:var(--ds-muted2,var(--ds-text))!important; }
  .ds-native-cover-teacher { padding-top:2cqw!important; border-top:1px solid var(--ds-border,#ffffff26)!important; }
  .ds-native-course-cover.is-compact .ds-native-cover-body { padding:10%!important; gap:6cqw!important; }
  .ds-native-course-cover.is-compact .ds-native-cover-brand { width:100%!important; height:14cqw!important; }
  .ds-native-course-cover.is-compact .ds-native-cover-title { font-size:clamp(8px,15cqw,24px)!important; -webkit-line-clamp:2!important; }
  .ds-native-course-cover.is-wide .ds-native-cover-body { padding:6% 8%!important; gap:3cqw!important; }
  .ds-native-course-cover.is-wide .ds-native-cover-brand { width:50%!important; height:8cqw!important; }
  .ds-native-course-cover.is-wide .ds-native-cover-title { font-size:clamp(7px,9cqw,18px)!important; }
  /* Full metadata remains in the accessible label/tool-tip for tiny list icons. */
  .ds-native-course-cover.is-compact :is(.ds-native-cover-author,.ds-native-cover-teacher) { display:none!important; }
  html body #ds-app-admin .ds-admin-native-course-preview {
    width:100%!important; max-width:480px!important; aspect-ratio:16/9!important;
    overflow:hidden!important; border:1px solid var(--ds-border)!important; border-radius:14px!important;
  }
  html body #ds-app-admin .ds-admin-native-course-preview[hidden] { display:none!important; }
  /* Grid-centred legacy icons have an intrinsic zero-width track under containment. */
  html body #ds-app-admin :is(.ds-admin-thumb,.ds-admin-side-thumb,.ds-admin-preview-img):has(> .ds-native-course-cover) { position:relative!important; }
  html body #ds-app-admin :is(.ds-admin-thumb,.ds-admin-side-thumb,.ds-admin-preview-img) > .ds-native-course-cover { position:absolute!important; inset:0!important; }
  /* Overlay badges must not cover the logo or the teacher credit. */
  html body :is(.ds-catalog-thumb,.dsdash-course-cover):has(.ds-native-course-cover) > :is(.ds-course-state,small) {
    left:auto!important; right:12px!important; top:12px!important; bottom:auto!important; max-width:52%!important;
  }
  html body .dsdash-course-cover:has(.ds-native-course-cover)::after { content:none!important; }
  @media(max-width:640px){
    html body #ds-app-courses.ds-platform-page .ds-my-cover-wide:has(.ds-native-course-cover) { display:block!important; width:100%!important; max-height:none!important; aspect-ratio:16/9!important; }
  }
}