/* pages/courses.css — بخشی از سیستم سبک سایت عمومی پلاس */
.ctags{position:absolute;inset:0;z-index:4;pointer-events:none}
.ctag{position:absolute;top:0;left:0;right:auto;pointer-events:auto;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-display);font-size:12.5px;font-weight:800;color:#DCE7F5;
  padding:9px 15px;border-radius:var(--chip-radius);border:1px solid var(--line-strong);
  background:rgba(8,14,32,.72);backdrop-filter:blur(8px);
  transition:border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast)}
.ctag span{font-size:11px;color:var(--accent-soft);opacity:.85}
.ctag:hover,.ctag.on{border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 45%,transparent),
             0 10px 30px -16px var(--accent)}

/* برچسب هسته: کل کاتالوگ — کمی درشت‌تر از برچسب حوزه‌ها */
.ctag--core{font-weight:900}
.ctag--core span{color:var(--gold-400);opacity:1}

/* نوار میانی: دوره‌های جامع */
.camp-stat{list-style:none;display:grid;gap:12px}
.camp-stat li{display:flex;align-items:baseline;gap:12px;padding:14px 18px;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  background:rgba(255,255,255,.04)}
.camp-stat b{font-family:var(--font-display);font-size:26px;font-weight:900;color:#fff;
  min-inline-size:3ch}
.camp-stat span{font-size:13px;color:var(--accent-soft)}

/* فرم شلوغ‌تر: برچسب‌ها ریزتر و جمع‌وجورتر تا در همان فضا جا شوند */
.ctags--dense .ctag{padding:6px 10px;font-size:11.5px}
.ctags--dense .ctag span{font-size:10px}

/* ═══════════ فیلتر کاتالوگ (main_public/_partials/_catalog_live.html) ═══════════
   یک نوار تمیز با جست‌وجو و دو فیلتر پرکاربرد (وضعیت ثبت‌نام، حوزه)؛ بقیه
   داخل «فیلترهای بیشتر» که در دسکتاپ زیر نوار باز می‌شود و در گوشی برگه‌ای
   از پایین صفحه است. فیلترهای فعال به شکل برچسب با حذف یک‌کلیکی می‌آیند. */
.cf-live{position:relative;transition:opacity var(--dur-fast)}
.cf-live[aria-busy="true"]{opacity:.55;pointer-events:none}
.cf{padding:clamp(12px,1.6vw,16px);border:1px solid var(--line);border-radius:var(--card-radius);
  background:var(--surface);box-shadow:0 20px 50px -44px rgba(11,18,38,.7)}
.cf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}

.cf-search{flex:1 1 200px;max-inline-size:340px;display:flex;align-items:center;min-inline-size:0;
  border:1px solid var(--line-strong);border-radius:var(--btn-radius);background:var(--bg-elev)}
.cf-search input{flex:1;min-inline-size:0;border:0;background:transparent;color:var(--fg);
  font-family:var(--font-body);font-size:13.5px;padding:10px 14px;outline:none}
.cf-search button{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;
  border:0;background:transparent;color:var(--fg-muted);cursor:pointer}
.cf-search button svg{inline-size:18px;block-size:18px}
.cf-search:focus-within{border-color:var(--teal-600);box-shadow:0 0 0 3px color-mix(in oklab,var(--teal-600) 18%,transparent)}

.cf-group{border:0;margin:0;padding:0;min-inline-size:0}
.cf-group legend{font-family:var(--font-display);font-size:12px;font-weight:800;color:var(--fg-muted);
  margin-block-end:8px;padding:0}
.cf-group--bar{flex:1 1 auto}
.cf-chips{display:flex;flex-wrap:wrap;gap:6px}
.cf-group--bar .cf-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding-block:2px;margin-block:-2px}
.cf-group--bar .cf-chips::-webkit-scrollbar{display:none}
.cf-chip{position:relative;flex:none;cursor:pointer}
.cf-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:inherit}
.cf-chip span{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:12.5px;font-weight:800;
  color:var(--fg-muted);padding:8px 13px;border-radius:var(--chip-radius);border:1px solid var(--line-strong);
  background:var(--bg-elev);transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
.cf-chip em{position:absolute;inset-block-start:-6px;inset-inline-end:-4px;min-inline-size:18px;
  padding:0 5px;font-style:normal;font-size:10px;font-weight:800;line-height:18px;text-align:center;
  border-radius:999px;color:var(--fg-muted);background:var(--paper-200);pointer-events:none}
.cf-chip:hover span{color:var(--fg);border-color:var(--teal-600)}
.cf-chip input:checked+span{color:#fff;background:var(--teal-600);border-color:var(--teal-600)}
.cf-chip input:checked~em{background:var(--gold-400);color:#201700}
.cf-chip input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.cf-chip input:disabled{cursor:not-allowed}
.cf-chip input:disabled+span{opacity:.45;border-style:dashed}
.cf-chip input:disabled~em{opacity:.45}
.cf-group--bar .cf-chip em{display:none}

.cf-select{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;
  min-inline-size:150px;padding:5px 14px 5px 34px;border:1px solid var(--line-strong);
  border-radius:var(--btn-radius);background:var(--bg-elev);cursor:pointer}
.cf-select span{font-size:10.5px;font-weight:700;color:var(--fg-muted)}
.cf-select select{appearance:none;border:0;background:transparent;color:var(--fg);padding:0;
  font-family:var(--font-display);font-size:13px;font-weight:800;cursor:pointer;outline:none;max-inline-size:220px}
.cf-select::after{content:"";position:absolute;inset-inline-end:14px;inset-block-start:50%;
  inline-size:7px;block-size:7px;border:solid var(--fg-muted);border-width:0 0 2px 2px;
  transform:translateY(-70%) rotate(-45deg);pointer-events:none}
.cf-select.on{border-color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 7%,var(--bg-elev))}
.cf-select:focus-within{border-color:var(--teal-600);box-shadow:0 0 0 3px color-mix(in oklab,var(--teal-600) 18%,transparent)}

.cf-more{position:static}
.cf-more-btn{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--fg);white-space:nowrap;
  padding:11px 15px;border:1px solid var(--line-strong);border-radius:var(--btn-radius);background:var(--bg-elev);
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.cf-more-btn::-webkit-details-marker{display:none}
.cf-more-btn svg{inline-size:17px;block-size:17px}
.cf-more-btn b{display:grid;place-items:center;min-inline-size:20px;block-size:20px;padding:0 6px;
  border-radius:999px;font-size:11px;color:#201700;background:var(--gold-400)}
.cf-more-btn:hover,.cf-more[open] .cf-more-btn{border-color:var(--teal-600);color:var(--teal-600)}
.cf-more-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* دسکتاپ و تبلت: پنلی زیر نوار که روی نتیجه باز می‌شود؛ نتیجه پشتش زنده
   عوض می‌شود و دکمه‌ی پایین پنل شمار تازه را می‌گوید. */
.cf{position:relative}
.cf-sheet{display:none}
.cf-more[open] .cf-sheet{display:block;position:absolute;z-index:20;inset-inline:0;inset-block-start:calc(100% + 8px);
  padding:6px 18px 14px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--paper-50);
  box-shadow:0 34px 70px -34px rgba(11,18,38,.55)}
.cf-sheet-head{display:none}
.cf-sheet-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px 26px;padding:14px 0 4px}
.cf-sheet-body .cf-select{min-inline-size:0}
.cf-sheet-body .cf-select select{max-inline-size:none;inline-size:100%}
.cf-sheet-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-block-start:14px;
  margin-block-start:10px;border-block-start:1px solid var(--line)}
.cf-close,.cf-scrim{display:none}

.cf-apply{display:inline-flex}
.cf.is-live .cf-apply{display:none}

.cf-clear{font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--fg-muted);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mode-paper .cf-clear{color:var(--fg-muted)}
.cf-clear:hover{color:var(--teal-600)}

.cf-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block-start:14px}
.cf-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:12px;font-weight:800;
  padding:6px 8px 6px 12px;border-radius:var(--chip-radius);text-decoration:none;
  color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 9%,transparent);
  border:1px solid color-mix(in oklab,var(--teal-600) 30%,transparent);transition:background var(--dur-fast)}
.mode-paper .cf-tag{color:var(--teal-600)}
.cf-tag svg{inline-size:14px;block-size:14px;opacity:.75}
.cf-tag:hover{background:color-mix(in oklab,var(--teal-600) 16%,transparent)}

.result-line{justify-content:space-between;flex-wrap:wrap}
.result-line p{display:flex;align-items:baseline;gap:6px}
.cf-pageinfo{margin-inline-start:10px;font-size:12px}
.cf-sort{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fg-muted)}
.cf-sort select{font-family:var(--font-body);font-size:13px;color:var(--fg);background:var(--bg-elev);
  border:1px solid var(--line-strong);border-radius:var(--btn-radius);padding:8px 12px;cursor:pointer}
.pager .pg.dots{border-color:transparent}

/* گوشی: نوار فشرده، و «فیلترهای بیشتر» برگه‌ای از پایین صفحه */
@media (max-width:720px){
.cf-search{flex-basis:100%;max-inline-size:none}
.cf-group--bar{flex-basis:100%;order:2}
.cf-bar>.cf-select{flex:1 1 0;order:3;min-inline-size:0}
.cf-more{order:4;flex:none}
.cf-more[open]{display:block}
.cf-more-btn{padding-block:12px}
.cf-more[open] .cf-sheet{position:fixed;z-index:81;inset-inline:0;inset-block:auto 0;margin:0;padding:0;
  display:flex;flex-direction:column;max-block-size:86vh;border:0;border-radius:22px 22px 0 0;
  box-shadow:0 -30px 80px -20px rgba(5,7,15,.5);animation:cfSheet .32s var(--ease-out)}
.cf-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;
  font-family:var(--font-display);font-size:15px}
.cf-sheet-head::before{content:"";position:absolute;inset-block-start:7px;inset-inline:0;margin:auto;
  inline-size:42px;block-size:4px;border-radius:4px;background:var(--line-strong)}
.cf-close{display:grid;place-items:center;inline-size:36px;block-size:36px;border:0;border-radius:12px;
  background:var(--paper-100);color:var(--fg);cursor:pointer}
.cf-close svg{inline-size:18px;block-size:18px}
.cf-sheet-body{flex:1;overflow-y:auto;grid-template-columns:1fr;gap:20px;padding:6px 18px 18px;border:0;
  overscroll-behavior:contain}
.cf-sheet-foot{justify-content:space-between;margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
.cf-sheet-foot .btn{flex:1;justify-content:center}
.cf-more[open] .cf-scrim{display:block;position:fixed;inset:0;z-index:80;background:rgba(5,7,15,.48)}
.result-line{gap:10px}
/* ردیف وضعیت ثبت‌نام می‌شکند تا گزینه‌ی آخر پشت لبه‌ی صفحه پنهان نماند */
.cf-group--bar .cf-chips{flex-wrap:wrap;overflow:visible}
}
@keyframes cfSheet{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
.cf-more[open] .cf-sheet{animation:none}
.cf-live{transition:none}
}

/* ═══════════ صفحه دوم سرمه‌ای: پنج دوره برتر ═══════════ */
.top-head{max-inline-size:52ch}
.top-head h2{font-family:var(--font-display);font-size:clamp(22px,3vw,34px);
  font-weight:900;color:#fff;margin-block-start:8px}
.top-stage{margin-block-start:clamp(26px,3.4vw,44px)}

.top-rail{position:relative;min-block-size:clamp(300px,34vw,360px)}
.top-s{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(18px,2.6vw,38px);align-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .55s var(--ease,ease),transform .55s var(--ease,ease),visibility .55s}
.top-s.on{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.top-s{transition:none}}

.top-img{display:block;border-radius:var(--card-radius);overflow:hidden;
  aspect-ratio:16/10;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.top-img img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.top-img svg{inline-size:52px;block-size:52px;margin:auto;color:rgba(255,255,255,.4)}

.top-b{position:relative;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* شماره رتبه پشت متن می‌نشیند، سمت شروع خط (در راست‌به‌چپ یعنی راست)،
   تا از بلوک متن جدا نیفتد. */
.top-rank{position:absolute;inset-block-start:-14px;inset-inline-start:-6px;
  font-family:var(--font-display);font-size:clamp(52px,7vw,86px);font-weight:900;
  color:rgba(255,255,255,.07);line-height:1;pointer-events:none}
.top-k{font-size:12px;color:var(--accent-soft)}
.top-b h3{font-family:var(--font-display);font-size:clamp(19px,2.4vw,27px);font-weight:900;
  line-height:1.75}
.top-b h3 a{color:#fff;text-decoration:none}
.top-img{text-decoration:none}
.top-b h3 a:hover{color:var(--gold-400)}
.top-s2{font-size:13.5px;line-height:2;color:var(--accent-soft);max-inline-size:46ch}
.top-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--accent-soft)}
.top-rate{display:inline-flex;align-items:center;gap:5px;color:var(--gold-400);font-weight:800}
.top-rate svg{inline-size:14px;block-size:14px}
.top-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-block-start:6px}
.top-price b{font-family:var(--font-num);font-size:20px;font-weight:900;color:#fff}
.top-price span{font-size:11.5px;color:var(--accent-soft);margin-inline-start:5px}

.top-nav{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-block-start:clamp(20px,2.6vw,32px)}
.top-b[data-top]{inline-size:40px;block-size:40px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast)}
.top-b[data-top]:hover{background:rgba(255,255,255,.12);border-color:var(--gold-400)}
.top-b[data-top] svg{inline-size:17px;block-size:17px}
.top-dots{display:flex;gap:8px}
.top-dot{inline-size:9px;block-size:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.24);transition:background var(--dur-fast),inline-size var(--dur-fast)}
.top-dot.on{background:var(--gold-400);inline-size:24px;border-radius:999px}

@media (max-width:860px){
.top-s{grid-template-columns:1fr;gap:16px;align-content:start}
.top-rail{min-block-size:clamp(430px,72vw,520px)}
.top-rank{font-size:56px}
}

/* ═══════════ سرصفحه دوصفحه‌ای: یک بوم چسبان، دو لایه متن ═══════════
   ارتفاع سکشن دو برابر پنجره است و بوم داخلش چسبان می‌ماند؛ با اسکرول
   همان ذره‌ها از فرم خوشه‌ای به قاب اسلایدر تبدیل می‌شوند. */
.pagehead.ph-two{min-block-size:200vh;padding:0;overflow:clip}
.ph-sticky{position:sticky;inset-block-start:0;block-size:100vh;overflow:hidden;
  display:grid;place-items:center}
.ph-sticky > canvas{position:absolute;inset:0;inline-size:100%;block-size:100%}
.ph-screen{grid-area:1/1;inline-size:100%;position:relative;z-index:3;
  will-change:opacity,transform}
.ph-screen--2{pointer-events:none}
.ph-two .ctags{z-index:4}

/* لایه دوم: سر و ته اسلایدر */
.ph-screen--2 .top-head{max-inline-size:52ch;margin-block-end:clamp(16px,2vw,26px)}
.ph-screen--2 .top-head h2{font-family:var(--font-display);
  font-size:clamp(21px,2.8vw,32px);font-weight:900;color:#fff;margin-block-start:6px}
.top-stage{position:relative}

/* حالت‌های داده‌ی تهی سرصفحه — چیدمان همان دو صفحه می‌ماند، فقط چیزی که
   داده‌اش نیست حذف می‌شود.
   بدون دسته‌بندی: لایه‌ی برچسب حوزه‌ها ساخته نمی‌شود، پس جعبه‌اش هم نباید
   روی بوم بماند. بدون صفحه‌ی دوم: نیمه‌ی دوم سکشن چیزی برای نشان دادن
   ندارد و ارتفاع اضافه فقط اسکرول خالی می‌سازد. */
.pagehead.ph-two.ph-nocat .ctags{display:none}
.pagehead.ph-two.ph-one{min-block-size:100vh}

/* گوشی: برچسب‌های شناور حوزه‌ها در پرده‌ی باریک از لبه بیرون می‌زدند و روی
   تیتر می‌افتادند. همین حوزه‌ها در فیلتر «حوزه» کاتالوگ هست، پس برچسب‌ها و
   راهنمای «روی هر خوشه کلیک کن» اینجا کنار می‌روند و فقط فرم ذرات می‌ماند. */
@media (max-width:620px){
.pagehead.ph-two .ctags,.ph-hint{display:none}
}