/* Author Igor Veynik | Site: NexusLab.ru | Telegram: @thenexus | created 2026-07-08 | updated 2026-07-08 */
/* LS-4: реальные кликабельные категории на баннере «Соберите весь проект» (десктоп — пилюли-выноски, мобилка — сетка кнопок) */

:root{
  --ls4-gold:#c0a15e;
  --ls4-gold-deep:#b08a42;
  --ls4-gold-btn:#b8974f;
  --ls4-ink:#1f1a15;
}

/* ===== превью-обёртка (в продакшене фон даёт сам слайд Aspro) ===== */
.ls4-slide{
  position:relative;
  width:100%;
  aspect-ratio:2000 / 573;              /* = ratio боевого бокса 3.49 */
  background:var(--ls4-bg-desktop, url(2_desktop_fit.jpg)) center/cover no-repeat;
  overflow:hidden;
  line-height:0;
}
/* ===== продакшен: делаем слайд-хост позиционируемым для оверлея ===== */
.ls4-host{position:relative}

/* сплошная ссылка-подложка (весь баннер → каталог, как сейчас) */
.ls4-base{position:absolute;inset:0;z-index:1}

/* слой хотспотов */
.ls4-hotspots{position:absolute;inset:0;z-index:2;line-height:1.2}

/* якорь в точке декора (x,y задаются через --x/--y на элементе) */
.ls4-hotspot{position:absolute;left:var(--x);top:var(--y);width:0;height:0;text-decoration:none}

/* точка-маркер */
.ls4-dot{position:absolute;left:0;top:0;width:15px;height:15px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--ls4-gold);box-shadow:0 0 0 4px rgba(192,161,94,.28);transition:.25s}
.ls4-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.ls4-hotspot:hover .ls4-dot{box-shadow:0 0 0 7px rgba(192,161,94,.4)}

/* пилюля с иконкой и подписью (белая плашка) */
.ls4-pill{position:absolute;top:0;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:8px 15px;background:rgba(255,255,255,.85);backdrop-filter:blur(3px);
  border:1px solid rgba(192,161,94,.55);border-radius:40px;box-shadow:0 6px 18px rgba(60,45,20,.14);
  font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ls4-ink);
  transform:translateY(-50%);transition:.25s}
.ls4-pill svg{width:19px;height:19px;stroke:var(--ls4-gold-deep);flex:0 0 auto;transition:.25s}

/* соединитель точка↔пилюля */
.ls4-pill::before{content:"";position:absolute;top:50%;width:14px;height:1px;background:var(--ls4-gold)}

/* пилюля слева от точки */
.ls4-hotspot.to-left  .ls4-pill{right:20px}
.ls4-hotspot.to-left  .ls4-pill::before{right:-14px}
/* пилюля справа от точки */
.ls4-hotspot.to-right .ls4-pill{left:20px}
.ls4-hotspot.to-right .ls4-pill::before{left:-14px}

/* hover — заливка золотом */
.ls4-hotspot:hover .ls4-pill{background:var(--ls4-gold-btn);border-color:var(--ls4-gold-btn);color:#fff;
  box-shadow:0 10px 24px rgba(150,110,40,.35)}
.ls4-hotspot:hover .ls4-pill svg{stroke:#fff}

/* CTA «Рассчитать проект» */
.ls4-cta{position:absolute;z-index:3;left:4.5%;top:67%;
  display:inline-flex;align-items:center;gap:14px;padding:15px 30px;border-radius:6px;line-height:1;
  background:var(--ls4-gold-btn);color:#fff;text-decoration:none;font-weight:700;font-size:17px;
  letter-spacing:.05em;text-transform:uppercase;box-shadow:0 8px 20px rgba(150,110,40,.28);transition:.25s}
.ls4-cta svg{width:22px;height:14px;stroke:#fff}
.ls4-cta:hover{background:#a07d38;transform:translateY(-2px);box-shadow:0 12px 26px rgba(150,110,40,.4)}

/* адаптив пилюль под средние ширины */
@media(max-width:1100px){
  .ls4-pill{font-size:12px;padding:6px 11px;gap:6px}
  .ls4-pill svg{width:16px;height:16px}
  .ls4-cta{font-size:13px;padding:11px 18px}
}

/* ===== мобильная сетка категорий (под баннером) ===== */
.ls4-mobcats{display:none}
@media(max-width:767px){
  .ls4-slide{aspect-ratio:1515 / 1038;background-image:var(--ls4-bg-tablet, url(2_tablet_fit.jpg))} /* превью: планшетный кадр */
  .ls4-hotspots,.ls4-cta{display:none}
  .ls4-mobcats{display:grid;grid-template-columns:1fr;gap:8px;padding:12px}
  .ls4-mcat{display:flex;align-items:center;gap:8px;min-width:0;padding:11px 12px;
    border:1px solid rgba(192,161,94,.5);border-radius:10px;background:#fff;
    text-decoration:none;color:var(--ls4-ink);font-weight:700;font-size:12px;
    text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
  .ls4-mcat svg{width:22px;height:22px;stroke:var(--ls4-gold-deep);flex:0 0 auto}
  .ls4-mcat:active{background:var(--ls4-gold-btn);color:#fff}
  .ls4-mcat:active svg{stroke:#fff}
}