/* Klass site layout. Uses the theme tokens from klass.css. */

/* The component sits inside the site template, so the theme root is a block, not a full page. */
.k.klass{min-height:0;display:block;container-type:inline-size;container-name:klass;padding:clamp(16px,3vw,32px);border-radius:var(--r-card);margin-block:8px 24px}
.k.klass img{max-width:100%;height:auto}

.klass .k-page-intro{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.klass .k-page-intro p{max-width:68ch}

/* Catalogue filters */
.klass .k-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:20px}
.klass .k-filters .k-field{flex:1 1 220px}
.klass .k-filters .k-field-sm{flex:0 1 200px}

/* Course cards */
.klass .k-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));list-style:none;margin:0;padding:0}
.klass .k-card{display:flex;flex-direction:column;overflow:hidden;height:100%}
.klass .k-card-cover{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-end;justify-content:space-between;padding:12px;border-bottom:var(--bw) solid var(--line);background-size:cover;background-position:center}
.klass .k-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.klass .k-card-cover .k-pill{position:relative;background:var(--bg-2)}
.klass .k-card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1 1 auto}
.klass .k-card-body .k-h3 a{color:var(--text)}
.klass .k-card-body .k-h3 a:hover{color:var(--a1)}
.klass .k-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:var(--bw) solid var(--line)}
.klass .k-price{font-weight:700;font-variant-numeric:tabular-nums}

/* Course page */
.klass .k-course-head{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);margin-bottom:28px}
@container klass (min-width:820px){.klass .k-course-head{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.klass .k-course-head .k-display{font-size:clamp(28px,4vw,42px)}
.klass .k-facts{display:flex;flex-wrap:wrap;gap:8px}
.klass .k-enrol-card{display:flex;flex-direction:column;gap:14px;padding:20px}
.klass .k-enrol-card .k-price{font-size:calc(26px * var(--ts))}
.klass .k-course-body{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@container klass (min-width:820px){.klass .k-course-body{grid-template-columns:minmax(0,1fr) 340px}}
.klass .k-prose{line-height:var(--lh)}
.klass .k-prose > * + *{margin-top:.9em}
.klass .k-prose h2,.klass .k-prose h3{font-family:var(--display);font-weight:var(--dw)}

/* A course without a description or image gives the curriculum the full width */
.klass .k-course-body.k-single{grid-template-columns:minmax(0,1fr)!important}

/* Curriculum */
.klass .k-curriculum{display:flex;flex-direction:column;gap:12px}
.klass .k-section{padding:0;overflow:hidden}
.klass .k-section > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-weight:600}
.klass .k-section > summary::-webkit-details-marker{display:none}
.klass .k-section > summary > span:last-of-type{margin-left:auto}
.klass .k-section > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;flex:0 0 auto}
.klass .k-section[open] > summary::after{transform:rotate(-135deg)}
.klass .k-lessons{list-style:none;margin:0;padding:0;border-top:var(--bw) solid var(--line)}
.klass .k-lessons li{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:var(--bw) solid var(--line)}
.klass .k-lessons li:first-child{border-top:0}
.klass .k-lessons .k-lesson-title{flex:1 1 auto;min-width:0}
.klass .k-lessons .k-is-current{background:rgba(var(--a1-rgb),.08)}
.klass .k-state{width:20px;height:20px;border-radius:50%;flex:0 0 20px;display:grid;place-items:center;border:2px solid var(--line-2)}
.klass .k-state.k-is-done{background:var(--ok);border-color:var(--ok);color:#fff}
.klass .k-state.k-is-locked{border-style:dashed}

/* Progress bar */
.klass .k-progress{display:flex;align-items:center;gap:10px}
.klass .k-progress .k-bar{flex:1 1 auto}

/* Lesson page */
.klass .k-lesson-layout{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@container klass (min-width:860px){.klass .k-lesson-layout{grid-template-columns:300px minmax(0,1fr)}}
.klass .k-lesson-nav{align-self:start}
@container klass (min-width:860px){.klass .k-lesson-nav{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}}
.klass .k-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#000}
.klass .k-media iframe,.klass .k-media video{position:absolute;inset:0;width:100%;height:100%;border:0}
.klass .k-media-audio audio{width:100%}
.klass .k-lesson-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:var(--bw) solid var(--line)}

/* Empty state and pagination */
.klass .k-empty{padding:32px;text-align:center}
.klass .k-pagination{margin-top:24px}

/* Respect underline preference for links inside prose */
.klass .k-prose a{text-decoration:underline;text-underline-offset:2px}