Glossary: restore slider, move below title (no two-col), 360px cards filling full container width

index.html

@@ -858,21 +858,74 @@ main {
 
 .tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); }
 
-/* ── GLOSSARY (auto-fit grid, fills container) ── */
+/* ── GLOSSARY (horizontal slider, full-width below title) ── */
-.glossary {
+.glossary-slider {
   margin-top: 40px;
-  display: grid;
+  width: 100%;
-  gap: 12px;
+  min-width: 0;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
+.glossary {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+.glossary::-webkit-scrollbar { height: 6px; }
+.glossary::-webkit-scrollbar-track { background: transparent; }
+.glossary::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
 .gloss-item {
   border: 1px solid var(--border);
   border-radius: 12px;
   background: #fff;
   display: flex;
   flex-direction: column;
-  min-height: 160px;
+  scroll-snap-align: start;
+  min-height: 200px;
+  flex: 0 0 360px;
+  min-width: 360px;
+}
+@media (max-width: 640px) {
+  .gloss-item { flex-basis: 88vw; min-width: 88vw; min-height: 180px; }
+}
+
+.gloss-nav {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.gloss-nav-btn {
+  width: 40px; height: 40px;
+  border: 1px solid var(--border);
+  background: #fff;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  transition: background 150ms ease, opacity 150ms ease, border-color 150ms ease;
+  color: var(--text-65);
+}
+.gloss-nav-btn:hover:not(:disabled) {
+  background: var(--blue); color: #fff; border-color: var(--blue);
+}
+.gloss-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.gloss-nav-btn svg { width: 18px; height: 18px; }
+
+.gloss-counter {
+  font-size: 0.8125rem;
+  color: var(--text-55);
+  font-variant-numeric: tabular-nums;
+  min-width: 64px;
+  text-align: center;
 }
 
 .gloss-trigger {
@@ -1543,16 +1596,25 @@ footer {
 
       <!-- SECTION 5: GLOSSARY -->
       <section class="section" id="glossary">
-        <div class="container two-col">
+        <div class="container">
-          <div class="section-header">
+          <div class="section-label">08 — Словарь</div>
-            <div class="section-label">08 — Словарь</div>
+          <h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
-            <h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
+          <p class="section-body">
-            <p class="section-body">
+            14 слов, которые встретятся сегодня. Без технического жаргона. Листай стрелками или свайпом.
-              Семь слов, которые встретятся сегодня. Нажми на любое — увидишь объяснение
+          </p>
-              без технического жаргона.
+
-            </p>
+          <div class="glossary-slider">
+            <div class="glossary" id="glossary-list"></div>
+            <div class="gloss-nav">
+              <button type="button" id="gloss-prev" class="gloss-nav-btn" aria-label="Назад">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,8 10,13"/></svg>
+              </button>
+              <span class="gloss-counter" id="gloss-counter">1 / 14</span>
+              <button type="button" id="gloss-next" class="gloss-nav-btn" aria-label="Вперёд">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>
+              </button>
+            </div>
           </div>
-          <div class="glossary" id="glossary-list"></div>
         </div>
       </section>
 
@@ -1847,6 +1909,39 @@ const SCHEDULE = [
       glossaryEl.appendChild(div);
     });
 
+    // Glossary slider controls
+    (function initGlossSlider() {
+      const prev    = document.getElementById('gloss-prev');
+      const next    = document.getElementById('gloss-next');
+      const counter = document.getElementById('gloss-counter');
+      const cards   = Array.from(glossaryEl.querySelectorAll('.gloss-item'));
+      const total   = cards.length;
+      let idx = 0;
+
+      function update() {
+        counter.textContent = `${idx + 1} / ${total}`;
+        prev.disabled = idx === 0;
+        next.disabled = idx === total - 1;
+      }
+      function go(i) {
+        idx = Math.max(0, Math.min(total - 1, i));
+        cards[idx].scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });
+        update();
+      }
+      function syncFromScroll() {
+        const baseLeft = glossaryEl.getBoundingClientRect().left;
+        let best = 0, bestDist = Infinity;
+        for (let i = 0; i < cards.length; i++) {
+          const d = Math.abs(cards[i].getBoundingClientRect().left - baseLeft);
+          if (d < bestDist) { bestDist = d; best = i; }
+        }
+        if (best !== idx) { idx = best; update(); }
+      }
+      prev.addEventListener('click', () => go(idx - 1));
+      next.addEventListener('click', () => go(idx + 1));
+      glossaryEl.addEventListener('scroll', syncFromScroll, { passive: true });
+      update();
+    })();
 
     // Render projects
     const projectsEl = document.getElementById('projects-grid');