/* ============================================================
   components.css: pieces reused across pages.
   Breadcrumbs, page headers, course cards, lesson lists,
   progress bars, blog cards and shared boxes.
   ============================================================ */

/* breadcrumbs + page header */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:26px;color:var(--muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.phead{padding-block:22px clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px 56px;align-items:end;border-bottom:1px solid var(--rule)}
.phead h1{margin-top:12px}
@media (max-width:820px){.phead{grid-template-columns:minmax(0,1fr)}}

.fdot{display:inline-flex;align-items:center;gap:7px;color:var(--acc)}
.fdot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.box{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:18px 20px}
.box .eyebrow{margin-bottom:10px}
.empty{padding:32px;text-align:center;border:1px dashed var(--rule);border-radius:10px;color:var(--muted)}

/* checkmark bullet list */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:24px}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}

/* progress bar */
.pbar-wrap{display:flex;align-items:center;gap:12px;margin-top:4px}
.pbar{position:relative;flex:1;height:6px;border-radius:999px;background:var(--rule-soft);overflow:hidden;min-width:60px}
.pbar i{position:absolute;inset:0 auto 0 0;background:var(--acc);border-radius:999px;transition:width .4s}

/* course card */
.ccard{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;text-decoration:none;transition:border-color .25s,transform .3s cubic-bezier(.2,.8,.2,1);min-width:0}
.ccard:hover{border-color:var(--acc);transform:translateY(-2px)}
.ccard-top{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.ccard h3{font-size:1.35rem;font-weight:800}
.ccard p{color:var(--muted);font-size:.95rem}
.ccard-list{list-style:none;margin:2px 0 0;padding:0;counter-reset:cl;display:grid;gap:4px;border-top:1px solid var(--rule-soft);padding-top:10px}
.ccard-list li{counter-increment:cl;display:grid;grid-template-columns:1.6em minmax(0,1fr);font-size:.9rem}
.ccard-list li::before{content:counter(cl);font:500 .75rem var(--mono);color:var(--muted);padding-top:2px}
.ccard-list li.done::before{content:"✓";color:var(--acc)}
.ccard-go{margin-top:auto;padding-top:6px;font:600 .9rem var(--body);color:var(--acc)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.stack{display:grid;gap:14px}

/* lesson list */
.llist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.lrow{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--rule-soft);text-decoration:none;transition:background .2s}
.lrow:hover{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.lnum{width:2.2em;height:2.2em;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;color:var(--muted)}
.lrow.done .lnum{background:var(--acc);border-color:var(--acc);color:var(--sheet)}
.lmain{display:flex;flex-direction:column;gap:3px;min-width:0}
.ltitle{font-weight:600;font-size:1.05rem}
.lrow:hover .ltitle{color:var(--acc)}
.lsub{color:var(--muted);overflow-wrap:anywhere}
.lstat{color:var(--acc);white-space:nowrap}
.lrow.done .lstat{color:var(--muted)}
@media (max-width:520px){.lrow{grid-template-columns:2.6em minmax(0,1fr)}.lstat{display:none}}

/* blog cards */
.pcard{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);text-decoration:none;transition:border-color .25s}
.pcard:hover{border-color:var(--ink)}
.pcard h3{font-size:1.25rem}
.pcard p{color:var(--muted);font-size:.95rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px}
.plist{display:grid;gap:14px;max-width:760px}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--rule);border-radius:8px;text-decoration:none;min-width:0;background:var(--sheet)}
.pager a:hover{border-color:var(--acc)}
.pager a:last-child{text-align:right}
.pager span:last-child{font-weight:600;font-size:.95rem}

/* "next" banner */
.nextfield{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;text-decoration:none;padding:24px 28px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);transition:border-color .3s;margin-top:clamp(24px,4vw,48px)}
.nextfield:hover{border-color:var(--acc)}
.nextfield h3{font-size:1.5rem;font-weight:800;margin-top:6px}
.nextfield .arrow{font-size:1.6rem;color:var(--acc);transition:transform .3s}
.nextfield:hover .arrow{transform:translateX(6px)}

/* label/value lists */
dl.spec{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr)}
dl.spec dt,dl.spec dd{padding:10px 0;border-bottom:1px solid var(--rule-soft);margin:0}
dl.spec dt{font:500 .72rem var(--mono);color:var(--muted);padding-right:18px;letter-spacing:.06em;text-transform:uppercase;padding-top:13px}
dl.spec > :nth-last-child(-n+2){border-bottom:0}