/* ---------- معرفی کوتاه ---------- */
.hero{padding:26px 0 18px}
.hero h1{font-size:23px;font-weight:800;line-height:1.5}
.hero p{margin-top:4px;color:var(--muted);font-size:14px}

/* ---------- دسته‌بندی‌ها ---------- */
.cats{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(98px,1fr);
  gap:10px;
  margin-inline:-16px;
  padding:2px 16px 14px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.cats::-webkit-scrollbar{display:none}
.cat{
  scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;
  padding:14px 8px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  color:var(--muted);
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s,transform .08s;
}
.cat:active{transform:scale(.97)}
.cat-ic{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--text);
  transition:background .18s,color .18s;
}
.cat-t{font-size:13px;font-weight:600;line-height:1.55;text-align:center;color:var(--text)}
.cat.active{border-color:var(--accent);background:var(--accent-soft)}
.cat.active .cat-ic{background:var(--accent);color:var(--accent-ink)}
.cat.active .cat-t{color:var(--accent)}
@media (hover:hover){.cat:not(.active):hover{border-color:var(--accent)}}

/* ---------- لیست آموزش‌ها ---------- */
.panel{padding-bottom:28px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 12px}
.panel-head h2{font-size:16px;font-weight:700}
.panel-head span{font-size:12.5px;color:var(--muted)}

.list{display:grid;gap:12px}
.card{
  display:grid;grid-template-columns:116px 1fr;gap:13px;align-items:center;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);text-decoration:none;
  box-shadow:var(--shadow);
  transition:border-color .15s,transform .08s;
}
.card:active{transform:scale(.985)}
.thumb{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16/11;border-radius:12px;
  background:var(--surface-2);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.thumb-badge{
  position:absolute;inset-inline-start:7px;bottom:7px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,12,20,.62);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.card-body{display:block;min-width:0}
.card-body h3{font-size:15px;font-weight:700;line-height:1.7;margin-bottom:2px}
.card-body p{
  font-size:13px;line-height:1.8;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (hover:hover){.card:hover{border-color:var(--accent)}}

.empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:42px 16px;text-align:center;color:var(--muted);
  border:1.5px dashed var(--border);border-radius:var(--radius);
}

@media (min-width:640px){
  .hero{padding-top:34px}
  .hero h1{font-size:27px}
  .cats{grid-auto-columns:minmax(130px,1fr)}
  .list{grid-template-columns:repeat(2,1fr);gap:16px}
  .card{grid-template-columns:1fr;gap:0;padding:0;overflow:hidden;align-items:start}
  .thumb{aspect-ratio:16/9;border-radius:0}
  .card-body{padding:13px 15px 16px}
}
@media (min-width:900px){
  .list{grid-template-columns:repeat(3,1fr)}
}

/* ---------- فوتر ---------- */
.foot{padding:20px 0 34px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------- مودال ---------- */
html.modal-open{overflow:hidden}
.modal{
  position:fixed;inset:0;z-index:60;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .25s;
}
.modal.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.backdrop{
  position:absolute;inset:0;
  background:rgba(4,7,13,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s;
}
.modal.open .backdrop{opacity:1}
.sheet{
  position:absolute;inset-inline:0;bottom:0;
  max-height:94vh;max-height:94dvh;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.25);
  transform:translateY(28px);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s;
}
.modal.open .sheet{transform:none;opacity:1}
.sheet:focus{outline:none}
.modal-x{
  position:absolute;z-index:3;top:10px;inset-inline-end:10px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(8,12,20,.62);border-color:transparent;color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.media{position:relative;background:#000;line-height:0}
.media.is-video{aspect-ratio:16/9;max-height:72vh}
.media video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.media.is-image{background:var(--surface-2)}
.media.is-image img{display:block;width:100%;max-height:64vh;object-fit:contain;margin:0 auto}
.m-body{padding:18px 18px calc(20px + env(safe-area-inset-bottom))}
.m-body h2{font-size:18px;font-weight:800;line-height:1.7}
.m-desc{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.95;white-space:pre-line}
.m-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}

@media (min-width:700px){
  .sheet{
    inset-inline:auto;left:50%;right:auto;top:50%;bottom:auto;
    width:min(720px,92vw);
    border-radius:22px;
    transform:translate(-50%,-47%);
  }
  .modal.open .sheet{transform:translate(-50%,-50%)}
  .m-body{padding-bottom:22px}
}

/* ---------- اعلان کوتاه (toast) ---------- */
.toast{
  position:fixed;z-index:80;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--text);color:var(--bg);
  padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:600;
  transition:opacity .2s,transform .2s;
  max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.fatal{max-width:420px;margin:18vh auto;padding:0 20px;text-align:center}
.fatal h1{font-size:20px;margin-bottom:8px}
.fatal p{color:var(--muted)}