/* Lesson artwork is derived entirely from Lesson/Schedule metadata in lesson-artwork.js. */
.lesson-artwork{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent,var(--accent-blue)) 45%,var(--line));
  background:var(--surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,var(--accent-blue)) 12%,transparent);
}
.lesson-artwork::after{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(3,7,11,.32));
  content:"";
}
.lesson-artwork img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.lesson-artwork>span{display:none;color:var(--muted);font:700 20px 'DM Mono'}
.lesson-artwork.is-fallback{border-style:dashed;background:color-mix(in srgb,var(--surface) 82%,transparent)}
.lesson-artwork.is-fallback::after{display:none}
.lesson-artwork.is-fallback>span{display:block}

.personal-lesson-card{grid-template-columns:96px minmax(0,1fr);column-gap:16px}
.personal-lesson-card .class-card-classification{align-items:center;width:max-content;max-width:100%;padding:5px 8px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.personal-lesson-card .class-card-classification strong{color:color-mix(in srgb,var(--accent) 78%,white)}
.personal-lesson-card:has([data-lesson-artwork^="focus-"]) .program-badge-foundational,
.schedule-slot-card:has([data-lesson-artwork^="focus-"]) .program-badge-foundational{--program-badge-color:var(--lesson-focus);--program-badge-text:#181521}
.personal-lesson-card>.lesson-artwork--card{grid-column:1;width:96px;margin-top:5px;border-radius:10px}
.personal-lesson-card>.library-card-body{grid-column:2}
.personal-lesson-card>footer{grid-column:1/-1}

.schedule-lesson-layout{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:9px;min-width:0}
.schedule-lesson-layout.is-unassigned{grid-template-columns:minmax(0,1fr);gap:0}
.schedule-lesson-layout>.lesson-artwork--schedule{width:42px;margin-top:9px;border-radius:7px}
.schedule-lesson-layout>.schedule-lesson{min-width:0}

@media(min-width:1181px){
  .schedule-lesson-layout{grid-template-columns:1fr}
  .schedule-lesson-layout>.lesson-artwork--schedule{width:clamp(56px,65%,72px);height:auto;aspect-ratio:1;justify-self:start}
  .schedule-lesson-layout>.lesson-artwork--schedule img{object-fit:contain}
}
@media(max-width:760px){
  .schedule-lesson-layout{grid-template-columns:56px minmax(0,1fr);gap:11px}
  .schedule-lesson-layout>.lesson-artwork--schedule{width:56px}
}
@media(max-width:620px){
  .personal-lesson-card{grid-template-columns:76px minmax(0,1fr)}
  .personal-lesson-card>.lesson-artwork--card{width:76px}
  .personal-lesson-card>.library-card-body{padding-right:0}
}
@media(max-width:360px){
  .personal-lesson-card{grid-template-columns:64px minmax(0,1fr);column-gap:12px}
  .personal-lesson-card>.lesson-artwork--card{width:64px}
  .schedule-lesson-layout{grid-template-columns:48px minmax(0,1fr)}
  .schedule-lesson-layout>.lesson-artwork--schedule{width:48px}
}