/* UniversalBlog — Sliders (8 вариантов, Pure CSS + Vanilla JS) */

/* === BASE === */
.ub-slider { position:relative;overflow:hidden;margin-bottom:32px; }
.ub-slider-track { display:flex;transition:transform .5s cubic-bezier(.25,.46,.45,.94);will-change:transform; }
.ub-slider-slide { flex:0 0 100%;min-width:0;position:relative; }
.ub-slider-btn { position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:18px;font-weight:700; }
.ub-slider-btn-prev { left:14px; }
.ub-slider-btn-next { right:14px; }
.ub-slider-dots { position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10; }
.ub-slider-dot { width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;transition:all .25s;padding:0; }
.ub-slider-dot.active { background:#fff;width:24px;border-radius:4px; }

/* === 1. FULLSCREEN — Полноэкранный с градиентом снизу === */
.ub-slider-fullscreen .ub-slider-slide { height:520px; }
.ub-slider-fullscreen .ub-slide-img { position:absolute;inset:0; }
.ub-slider-fullscreen .ub-slide-img img { width:100%;height:100%;object-fit:cover; }
.ub-slider-fullscreen .ub-slide-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%); }
.ub-slider-fullscreen .ub-slide-content { position:absolute;bottom:60px;left:60px;right:60px;color:#fff;z-index:2; }
.ub-slider-fullscreen .ub-slide-cat { background:var(--color-primary);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 12px;border-radius:50px;display:inline-block;margin-bottom:12px; }
.ub-slider-fullscreen .ub-slide-title { font-size:36px;font-weight:900;line-height:1.15;margin-bottom:12px;max-width:680px;text-shadow:0 2px 8px rgba(0,0,0,.4); }
.ub-slider-fullscreen .ub-slide-meta { font-size:13px;opacity:.8;display:flex;gap:16px;flex-wrap:wrap; }
.ub-slider-fullscreen .ub-slider-btn { background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3); }
.ub-slider-fullscreen .ub-slider-btn:hover { background:var(--color-primary); }

/* === 2. SPLIT — Разделённый: картинка слева, список справа === */
.ub-slider-split { display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--color-dark);border-radius:var(--radius-lg);overflow:hidden; }
.ub-slider-split .ub-slider-main { position:relative;overflow:hidden;min-height:400px; }
.ub-slider-split .ub-slider-track { height:100%; }
.ub-slider-split .ub-slider-slide { height:400px; }
.ub-slider-split .ub-slide-img { position:absolute;inset:0; }
.ub-slider-split .ub-slide-img img { width:100%;height:100%;object-fit:cover;opacity:.6; }
.ub-slider-split .ub-slide-overlay { position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.6),transparent); }
.ub-slider-split .ub-slide-content { position:absolute;bottom:30px;left:28px;right:28px;color:#fff;z-index:2; }
.ub-slider-split .ub-slide-cat { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent);margin-bottom:8px; }
.ub-slider-split .ub-slide-title { font-size:24px;font-weight:800;line-height:1.25; }
.ub-slider-split .ub-slider-thumbs { overflow-y:auto;max-height:400px; }
.ub-slider-split .ub-slider-thumb-item { display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;transition:background .2s; }
.ub-slider-split .ub-slider-thumb-item:hover,.ub-slider-split .ub-slider-thumb-item.active { background:rgba(255,255,255,.07); }
.ub-slider-split .ub-slider-thumb-item.active { border-left:3px solid var(--color-primary); }
.ub-slider-split .ub-slider-thumb-img { flex:0 0 70px;height:54px;border-radius:6px;overflow:hidden; }
.ub-slider-split .ub-slider-thumb-img img { width:100%;height:100%;object-fit:cover; }
.ub-slider-split .ub-slider-thumb-title { font-size:13px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.ub-slider-split .ub-slider-thumb-date { font-size:11px;color:rgba(255,255,255,.45);margin-top:4px; }
.ub-slider-split .ub-slider-btn { display:none; }

/* === 3. CARDS — Слайдер из карточек (несколько за раз) === */
.ub-slider-cards .ub-slider-track { gap:var(--gap); }
.ub-slider-cards .ub-slider-slide { flex:0 0 calc(33.333% - 16px);min-width:0; }
.ub-slider-cards .ub-slide-card { background:var(--color-surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column; }
.ub-slider-cards .ub-slide-card-thumb { aspect-ratio:16/10;overflow:hidden; }
.ub-slider-cards .ub-slide-card-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.ub-slider-cards .ub-slide-card:hover .ub-slide-card-thumb img { transform:scale(1.05); }
.ub-slider-cards .ub-slide-card-body { padding:16px;flex:1; }
.ub-slider-cards .ub-slide-card-cat { background:var(--color-primary);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:50px;display:inline-block;margin-bottom:8px; }
.ub-slider-cards .ub-slide-card-title { font-size:15px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.ub-slider-cards .ub-slide-card-title a { color:var(--color-text); }
.ub-slider-cards .ub-slide-card-title a:hover { color:var(--color-primary); }
.ub-slider-cards .ub-slide-card-meta { font-size:12px;color:var(--color-text-muted);margin-top:8px; }
.ub-slider-cards .ub-slider-btn { background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow);top:35%;border:1.5px solid var(--color-border); }
.ub-slider-cards .ub-slider-btn:hover { background:var(--color-primary);color:#fff;border-color:var(--color-primary); }
.ub-slider-cards .ub-slider-btn-prev { left:-18px; }
.ub-slider-cards .ub-slider-btn-next { right:-18px; }
.ub-slider-cards .ub-slider-dots .ub-slider-dot { background:var(--color-border); }
.ub-slider-cards .ub-slider-dots .ub-slider-dot.active { background:var(--color-primary); }
.ub-slider-cards .ub-slider-dots { position:static;transform:none;margin-top:20px;justify-content:center; }

/* === 4. MINIMAL — Минимальный с индикатором === */
.ub-slider-minimal .ub-slider-slide { height:380px; }
.ub-slider-minimal .ub-slide-img { position:absolute;inset:0; }
.ub-slider-minimal .ub-slide-img img { width:100%;height:100%;object-fit:cover; }
.ub-slider-minimal .ub-slide-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 100%); }
.ub-slider-minimal .ub-slide-content { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:48px;color:#fff;z-index:2;max-width:600px; }
.ub-slider-minimal .ub-slide-title { font-size:28px;font-weight:800;line-height:1.2;margin-bottom:12px; }
.ub-slider-minimal .ub-slide-read { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 20px;border-radius:50px;font-size:13px;font-weight:600;backdrop-filter:blur(4px);transition:background .2s;margin-top:16px;text-decoration:none;width:fit-content; }
.ub-slider-minimal .ub-slide-read:hover { background:var(--color-primary);border-color:var(--color-primary);color:#fff; }
.ub-slider-minimal .ub-slider-btn { background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4); }
.ub-slider-minimal .ub-slider-btn:hover { background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.7); }
/* Прогресс-бар */
.ub-slider-minimal .ub-slider-progress { position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.2);z-index:10; }
.ub-slider-minimal .ub-slider-progress-bar { height:100%;background:var(--color-primary);width:0;transition:width 5s linear; }
.ub-slider-minimal .ub-slider-dots { bottom:24px; }

/* === 5. OVERLAY-GRID — Сетка с оверлеем (первый большой) === */
.ub-slider-overlaygrid { display:grid;grid-template-columns:2fr 1fr;gap:4px;border-radius:var(--radius-lg);overflow:hidden; }
.ub-slider-overlaygrid .ub-og-main { position:relative;min-height:400px; }
.ub-slider-overlaygrid .ub-og-main img { width:100%;height:100%;object-fit:cover;display:block; }
.ub-slider-overlaygrid .ub-og-main .ub-og-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%); }
.ub-slider-overlaygrid .ub-og-main .ub-og-content { position:absolute;bottom:28px;left:28px;right:28px;color:#fff;z-index:2; }
.ub-slider-overlaygrid .ub-og-subs { display:flex;flex-direction:column;gap:4px; }
.ub-slider-overlaygrid .ub-og-sub { position:relative;flex:1;overflow:hidden; }
.ub-slider-overlaygrid .ub-og-sub img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.ub-slider-overlaygrid .ub-og-sub:hover img { transform:scale(1.05); }
.ub-slider-overlaygrid .ub-og-sub .ub-og-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%); }
.ub-slider-overlaygrid .ub-og-sub .ub-og-content { position:absolute;bottom:16px;left:16px;right:16px;color:#fff;z-index:2; }
.ub-slider-overlaygrid .ub-og-cat { background:var(--color-primary);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:50px;display:inline-block;margin-bottom:7px; }
.ub-slider-overlaygrid .ub-og-title { font-size:22px;font-weight:800;line-height:1.2; }
.ub-slider-overlaygrid .ub-og-sub .ub-og-title { font-size:15px;font-weight:700; }
.ub-slider-overlaygrid .ub-og-title a { color:#fff; }
.ub-slider-overlaygrid .ub-og-meta { font-size:12px;opacity:.75;margin-top:6px; }

/* === 6. TICKER — Бегущая строка новостей === */
.ub-slider-ticker { background:var(--color-dark);color:#fff;display:flex;align-items:stretch;border-radius:var(--radius);overflow:hidden; }
.ub-slider-ticker-label { background:var(--color-primary);padding:12px 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;display:flex;align-items:center; }
.ub-slider-ticker-wrap { flex:1;overflow:hidden;position:relative; }
.ub-slider-ticker-track { display:flex;animation:ub-ticker 30s linear infinite; }
.ub-slider-ticker-track:hover { animation-play-state:paused; }
.ub-slider-ticker-item { white-space:nowrap;padding:12px 32px;font-size:14px;border-right:1px solid rgba(255,255,255,.1); }
.ub-slider-ticker-item a { color:rgba(255,255,255,.85);transition:color .2s; }
.ub-slider-ticker-item a:hover { color:var(--color-accent); }
@keyframes ub-ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* === 7. STORIES — Истории (вертикальный прогресс) === */
.ub-slider-stories { border-radius:var(--radius-lg);overflow:hidden;position:relative;background:#000; }
.ub-slider-stories .ub-slider-slide { height:480px; }
.ub-slider-stories .ub-slide-img { position:absolute;inset:0; }
.ub-slider-stories .ub-slide-img img { width:100%;height:100%;object-fit:cover;opacity:.75; }
.ub-slider-stories .ub-slide-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 40%,transparent 70%); }
/* Progress bars */
.ub-slider-stories .ub-stories-progress { position:absolute;top:16px;left:16px;right:16px;display:flex;gap:4px;z-index:10; }
.ub-slider-stories .ub-stories-bar { flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden; }
.ub-slider-stories .ub-stories-bar-fill { height:100%;background:#fff;width:0;transition:width 5s linear; }
.ub-slider-stories .ub-stories-bar.done .ub-stories-bar-fill { width:100%; }
.ub-slider-stories .ub-stories-bar.active .ub-stories-bar-fill { width:100%; }
.ub-slider-stories .ub-slide-content { position:absolute;bottom:40px;left:24px;right:24px;color:#fff;z-index:2; }
.ub-slider-stories .ub-slide-cat { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent);margin-bottom:8px; }
.ub-slider-stories .ub-slide-title { font-size:22px;font-weight:800;line-height:1.2; }
.ub-slider-stories .ub-slide-meta { font-size:12px;opacity:.7;margin-top:8px; }
/* Tap zones */
.ub-slider-stories .ub-story-tap-prev { position:absolute;left:0;top:0;bottom:0;width:40%;z-index:5;cursor:w-resize; }
.ub-slider-stories .ub-story-tap-next { position:absolute;right:0;top:0;bottom:0;width:40%;z-index:5;cursor:e-resize; }

/* === 8. PARALLAX — Параллакс эффект === */
.ub-slider-parallax { overflow:hidden;border-radius:var(--radius-lg); }
.ub-slider-parallax .ub-slider-slide { height:440px;overflow:hidden; }
.ub-slider-parallax .ub-slide-img { position:absolute;inset:-10%;transition:transform .6s ease; }
.ub-slider-parallax .ub-slide-img img { width:100%;height:120%;object-fit:cover; }
.ub-slider-parallax .ub-slide-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.25) 100%); }
.ub-slider-parallax .ub-slide-content { position:absolute;top:50%;left:60px;transform:translateY(-50%);color:#fff;z-index:2;max-width:560px; }
.ub-slider-parallax .ub-slide-cat { display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 14px;border-radius:50px;margin-bottom:14px;backdrop-filter:blur(4px); }
.ub-slider-parallax .ub-slide-title { font-size:34px;font-weight:900;line-height:1.15;margin-bottom:14px;text-shadow:0 2px 12px rgba(0,0,0,.3); }
.ub-slider-parallax .ub-slide-text { font-size:15px;opacity:.85;margin-bottom:20px;line-height:1.6; }
.ub-slider-parallax .ub-slide-btn { display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:#fff;padding:12px 28px;border-radius:50px;font-size:14px;font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:all .2s;text-decoration:none; }
.ub-slider-parallax .ub-slide-btn:hover { background:var(--color-accent);color:#fff;transform:translateY(-2px); }
.ub-slider-parallax .ub-slider-btn { background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px); }
.ub-slider-parallax .ub-slider-btn:hover { background:var(--color-primary); }
.ub-slider-parallax .ub-slider-dots { bottom:20px; }

/* Responsive sliders */
@media(max-width:992px) {
  .ub-slider-split { grid-template-columns:1fr; }
  .ub-slider-split .ub-slider-thumbs { display:flex;overflow-x:auto;max-height:none; }
  .ub-slider-split .ub-slider-thumb-item { min-width:180px;flex-direction:column; }
  .ub-slider-overlaygrid { grid-template-columns:1fr; }
  .ub-slider-overlaygrid .ub-og-subs { flex-direction:row; }
  .ub-slider-cards .ub-slider-slide { flex:0 0 calc(50% - 12px); }
}
@media(max-width:768px) {
  .ub-slider-fullscreen .ub-slider-slide,.ub-slider-minimal .ub-slider-slide,.ub-slider-stories .ub-slider-slide { height:300px; }
  .ub-slider-fullscreen .ub-slide-title,.ub-slider-parallax .ub-slide-title { font-size:22px; }
  .ub-slider-fullscreen .ub-slide-content,.ub-slider-parallax .ub-slide-content { left:24px;right:24px;bottom:40px; }
  .ub-slider-parallax .ub-slide-content { top:auto;bottom:30px;transform:none;left:24px; }
  .ub-slider-cards .ub-slider-slide { flex:0 0 calc(100% - 0px); }
  .ub-slider-cards .ub-slider-btn-prev { left:-8px; }
  .ub-slider-cards .ub-slider-btn-next { right:-8px; }
  .ub-slider-overlaygrid .ub-og-subs { flex-direction:column; }
  .ub-slider-overlaygrid .ub-og-sub { min-height:160px; }
  .ub-slider-ticker-label { display:none; }
}