/* ═══════════════════════════════════════════════════════════════════════════
   ch-107 · صفحه اول: «آزمون‌های محبوب» به تفکیک دسته‌بندی اصلی
   هر دسته یک ردیف: سرِ ردیف (نام دسته، تعداد آزمون، «مشاهدهٔ همه»، دکمه‌های چپ و راست) و یک نوار افقی از همان
   کارت‌های spot-card صفحه اول (site-pages-v5.css). نوار با اسکرول افقیِ چسبان (scroll-snap) جابه‌جا می‌شود و
   دکمه‌ها فقط وقتی دیده می‌شوند که آزمون‌ها از جای ردیف بیشتر باشند (home-spot-rows.js).
   ═══════════════════════════════════════════════════════════════════════════ */

.spot-sec--rows .pub-shead{margin-bottom:26px}
.spr{display:flex;flex-direction:column;gap:34px}
.spr-row{--spr-gap:16px;--spr-cols:5;min-width:0}

/* ── سرِ ردیف ── */
.spr-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:14px;min-width:0}
.spr-title{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}
.spr-title h3{position:relative;margin:0;padding-inline-start:13px;font-size:18px;font-weight:900;line-height:1.5;letter-spacing:-.2px;color:var(--tk-ink,#161a23);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.spr-title h3::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:4px;height:18px;margin-top:-9px;border-radius:999px;background:var(--tk-amber,#ffc218)}
.spr-count{flex:none;font-size:12px;font-weight:700;color:var(--tk-ink-soft,#5b6472);white-space:nowrap}

.spr-acts{flex:none;display:flex;align-items:center;gap:10px}
.spr-all{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border:1px solid var(--tk-line,#e3e6ec);border-radius:999px;background:var(--tk-surface,#fff);color:var(--tk-ink,#161a23);font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap;transition:border-color .2s,background-color .2s,gap .2s}
.spr-all svg{width:15px;height:15px;flex:none}
.spr-all:hover{gap:9px;border-color:color-mix(in srgb,var(--tk-amber,#ffc218) 70%,var(--tk-line,#e3e6ec));background:color-mix(in srgb,var(--tk-amber,#ffc218) 14%,var(--tk-surface,#fff))}

.spr-nav{display:flex;align-items:center;gap:6px}
.spr-nav[hidden]{display:none}
.spr-arrow{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--tk-line,#e3e6ec);border-radius:50%;background:var(--tk-surface,#fff);color:var(--tk-ink,#161a23);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,opacity .2s}
.spr-arrow svg{width:16px;height:16px}
.spr-arrow:hover:not(:disabled){background:var(--tk-amber,#ffc218);border-color:var(--tk-amber,#ffc218);color:#1b1f28}
.spr-arrow:disabled{opacity:.35;cursor:default}
.spr-all:focus-visible,.spr-arrow:focus-visible{outline:2px solid var(--tk-amber-deep,#e9ad00);outline-offset:2px}

/* ── نوار کارت‌ها ──
   ستون‌ها با grid-auto-flow:column کنار هم می‌مانند. فاصلهٔ بالا و پایین داخل نوار برای بالا آمدن کارت و سایه‌اش
   هنگام hover است (overflow افقی، لبهٔ بالا و پایین را هم می‌بُرد) و با margin منفی جبران می‌شود. */
.spr-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--spr-cols) - 1) * var(--spr-gap)) / var(--spr-cols));gap:var(--spr-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px 2px 26px;margin:-8px -2px -26px}
.spr-track::-webkit-scrollbar{display:none}
.spr-track > .spot-card{scroll-snap-align:start;min-width:0}
.spr-track .spot-body h4{margin:0;font-size:14px;font-weight:800;line-height:1.85;color:var(--tk-ink,#161a23);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.7em}
.spot-by{display:flex;align-items:center;gap:5px;min-width:0;margin-top:-6px;font-size:11px;font-weight:600;line-height:1.6;color:var(--tk-ink-soft,#5b6472);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-by svg{flex:none;width:12px;height:12px;opacity:.75}

@media (max-width:1180px){.spr-row{--spr-cols:3}}
@media (max-width:900px){
  .spr-row{--spr-gap:14px}
  .spr-track{grid-auto-columns:calc((100% - var(--spr-gap)) / 2.2)}
}
@media (max-width:560px){
  .spr{gap:28px}
  .spr-row{--spr-gap:12px}
  .spr-head{margin-bottom:12px;gap:10px}
  .spr-title{flex-direction:column;align-items:flex-start;gap:0}
  .spr-title h3{font-size:16px;max-width:100%}
  .spr-count{padding-inline-start:13px;font-size:11.5px}
  .spr-all{height:34px;padding:0 12px 0 10px;font-size:12px}
  .spr-arrow{width:34px;height:34px}
  .spr-acts{gap:8px}
  .spr-track{grid-auto-columns:78%}
}

@media (prefers-reduced-motion:reduce){
  .spr-track{scroll-behavior:auto}
  .spr-all,.spr-arrow{transition:none}
}

/* ── تم شب ── */
[data-theme="dark"] .spr-all,[data-theme="dark"] .spr-arrow{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .spr-all:hover{background:rgba(255,194,24,.14);border-color:rgba(255,194,24,.55)}
[data-theme="dark"] .spr-arrow:hover:not(:disabled){background:var(--tk-amber,#ffc218);border-color:var(--tk-amber,#ffc218);color:#1b1f28}
[data-theme="dark"] .spot-by{color:var(--tk-ink-soft,#a6aab0)}