/* ============================================================================
   LumenSpark - landing/responsive.css
   Mobilna stranica je dizajnirana zasebno, nije samo skalirani desktop.
   Redoslijed: 1180 -> 1024 -> 900 -> 720 -> 560 -> 380
   ============================================================================ */

/* ==========================================================================
   <= 1180px  (uski desktop / veliki tablet)
   ========================================================================== */
@media (max-width:1180px){
  :root{--lsw-gutter:22px}
  .lsw-hero .lsw-wrap{max-width:1160px}
  .lsw-hero-grid{gap:40px}
  .lsw-hero-visual{width:calc(100% + 54px)}
  .lsw-hero-stage{padding:40px 0 36px 44px}
  .lsw-float-spark{right:48px;min-width:224px}
  .lsw-cap{gap:40px}
  .lsw-story-grid{gap:40px}
}

/* ==========================================================================
   <= 1024px  (tablet landscape)
   ========================================================================== */
@media (max-width:1024px){
  .lsw-section{padding:56px 0}
  .lsw-section-tight{padding:40px 0}

  /* Hero: jedan stupac, vizual ispod */
  .lsw-hero{
    min-height:0;display:block;
    padding:calc(var(--lsw-nav-h) + 34px) 0 48px;
  }
  .lsw-hero-grid{grid-template-columns:1fr;gap:40px}
  /* Video je desktop-only: na tabletu i telefonu nema autoplaya u pozadini */
  .lsw-hero-media,.lsw-hero-scrim{display:none}
  .lsw-hero-copy{max-width:660px}
  .lsw-hero-title{max-width:24ch}
  .lsw-hero-visual{width:calc(100% + 30px)}
  .lsw-hero-stage{padding:36px 0 32px 32px;transform:none}
  .lsw-hero-visual[data-lsw-parallax] .lsw-hero-stage{transform:none}
  .lsw-hero-stage::before{inset:20% 0 10% 20%;filter:blur(40px)}
  .lsw-hero-scroll{display:none}

  /* Dvije kartice umjesto cetiri - ostale bi se gurale */
  .lsw-float-util{display:none}
  .lsw-float-health{top:0;left:0}
  .lsw-float-spark{bottom:0;right:34px}

  .lsw-proof-inner{grid-template-columns:1fr;gap:24px}
  .lsw-proof-items{grid-template-columns:repeat(3,minmax(0,1fr))}

  .lsw-shead-split{grid-template-columns:1fr;gap:20px}

  /* Bento: 2 stupca */
  .lsw-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lsw-bento-lg,.lsw-bento-md,.lsw-bento-sm{grid-column:span 1}
  .lsw-bento-wide{grid-column:span 2}

  /* Prica: sticky iskljucen, normalne sekcije */
  .lsw-story-grid{grid-template-columns:1fr;gap:0}
  .lsw-story-sticky{position:static;margin-bottom:24px}
  .lsw-story-frames{display:flex;flex-direction:column;gap:0}
  .lsw-story-frame{position:relative;opacity:1;visibility:visible;transform:none}
  .lsw-story-frame:not(:first-child){display:none}
  .lsw-story-steps{border-top:1px solid var(--lsw-on-dark-border)}
  .lsw-story-step{opacity:1;padding-left:0;border-left:none;padding-top:16px;padding-bottom:20px;
                  border-bottom:1px solid var(--lsw-on-dark-border)}
  .lsw-story-step::before{display:none}
  .lsw-story-step:last-child{border-bottom:none}

  .lsw-role-grid{grid-template-columns:1fr;gap:24px}
  .lsw-trust-grid{grid-template-columns:1fr;gap:24px}

  .lsw-cap{grid-template-columns:1fr;gap:24px}
  .lsw-cap.is-flip .lsw-cap-copy{order:0}
  .lsw-cap.is-flip .lsw-cap-viz{order:0}
  .lsw-cap+.lsw-cap{margin-top:48px}
  .lsw-cap-copy{max-width:640px}


  .lsw-foot-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .lsw-foot-brand{grid-column:span 3}
}

/* ==========================================================================
   <= 900px  (uski tablet / rotirani telefon)
   ========================================================================== */
@media (max-width:900px){
  /* Navigacija prelazi na sheet */
  .lsw-nav-links,.lsw-nav-signin{display:none}
  .lsw-nav-burger{display:flex}
  .lsw-nav-actions .lsw-btn{display:none}
  .lsw-nav-actions .lsw-lang{display:none}

  /* Model: horizontalni rail -> vertikalni tok */
  .lsw-rail{padding:20px 16px}
  .lsw-rail-svg{display:none}
  .lsw-rail-nodes{grid-template-columns:1fr;gap:0}
  .lsw-rail-node{
    flex-direction:row;align-items:flex-start;gap:16px;text-align:left;
    padding:12px 0;border-bottom:1px solid var(--lsw-on-dark-border);
    position:relative;
  }
  .lsw-rail-node:last-child{border-bottom:none}
  .lsw-rail-badge{width:38px;height:38px;border-radius:8px}
  .lsw-rail-node div{min-width:0}

  .lsw-trust-list{grid-template-columns:1fr}

  /* Uloge: akordeon umjesto tabova */
  .lsw-roles-tabs{display:none}
  .lsw-role-panel{display:none}
  .lsw-roles-acc{display:flex}
}

/* ==========================================================================
   <= 720px  (telefon)
   ========================================================================== */
@media (max-width:720px){
  :root{--lsw-gutter:18px;--lsw-nav-h:60px}

  .lsw-section{padding:48px 0}
  .lsw-section-tight{padding:32px 0}
  .lsw-shead{margin-bottom:24px;gap:12px}

  /* --- Mobilni hero (zaseban dizajn) ------------------------------------ */
  .lsw-hero{padding:calc(var(--lsw-nav-h) + 24px) 0 36px}
  .lsw-hero-grid{gap:24px}
  .lsw-hero-grain{opacity:.04}
  .lsw-hero-title{
    font-size:clamp(2.15rem,9.4vw,2.7rem);   /* ~34-43px */
    line-height:1.06;letter-spacing:-.04em;max-width:20ch;
  }
  .lsw-hero-sub{font-size:15px;line-height:1.5;margin-bottom:20px}
  .lsw-hero-cta{flex-direction:column;align-items:stretch;gap:8px}
  .lsw-hero-cta .lsw-btn{width:100%}
  .lsw-hero-facts{gap:8px 8px;padding-top:16px;margin-top:16px}
  .lsw-hero-fact{font-size:9px;padding:4px 8px}

  /* Jedna lebdeca kartica iznad okvira, Spark u normalnom toku ispod njega */
  .lsw-hero-visual{width:100%}
  .lsw-hero-stage{padding:28px 0 0 0}
  .lsw-hero-stage::before{display:none}
  .lsw-float{min-width:0;padding:8px 12px;border-radius:12px;
             box-shadow:0 16px 40px -20px rgba(0,0,0,.9)}
  .lsw-float-val{font-size:17px}
  .lsw-float-health{top:0;left:0;right:auto}
  .lsw-float-spark{
    position:relative;inset:auto;margin-top:12px;min-width:0;width:100%;
    animation:none;
  }

  /* Aplikacijski okvir: rail sakriven, KPI u 2 stupca */
  .lsw-app.is-rail .lsw-app-body{grid-template-columns:1fr}
  .lsw-app-rail{display:none}
  .lsw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lsw-kpi{border-bottom:1px solid var(--lsw-border)}
  .lsw-kpi:nth-child(2n){border-right:none}
  .lsw-kpi:nth-last-child(-n+1){border-bottom:none}
  .lsw-app-panels{grid-template-columns:1fr;padding:12px}

  .lsw-proof{padding:16px 0}
  .lsw-proof-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lsw-proof-item{padding:12px 8px}

  .lsw-viz-split{grid-template-columns:1fr}
  .lsw-viz-split.is-lean{grid-template-columns:1fr}
  .lsw-cap-features{grid-template-columns:1fr;gap:8px}
  .lsw-bento{grid-template-columns:1fr;gap:12px}
  .lsw-bento-wide{grid-column:span 1}
  .lsw-bento-card{padding:16px}

  /* Kanban: horizontalni swipe s vidljivom indikacijom preljeva */
  .lsw-kb{
    grid-template-columns:repeat(3,minmax(160px,1fr));
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .lsw-kb-col{scroll-snap-align:start}
  .lsw-cal{grid-template-columns:repeat(7,minmax(0,1fr))}

  .lsw-cta{padding:52px 0}
  .lsw-cta-actions{flex-direction:column;align-self:stretch}
  .lsw-cta-actions .lsw-btn{width:100%}

  .lsw-foot{padding:36px 0 20px}
  .lsw-foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .lsw-foot-brand{grid-column:span 2}
  .lsw-foot-bar{flex-direction:column;align-items:flex-start;gap:16px}
  .lsw-foot-bar-actions{margin-left:0}
}

/* ==========================================================================
   <= 560px
   ========================================================================== */
@media (max-width:560px){
  .lsw-story-step h3{font-size:1.2rem}
  .lsw-mnav-links a{font-size:22px;min-height:52px}
  .lsw-gantt-row{grid-template-columns:62px minmax(0,1fr)}
  .lsw-ring{width:84px;height:84px}
  .lsw-ring-v{font-size:17px}
}

/* ==========================================================================
   <= 380px  (dno podrzanog raspona)
   ========================================================================== */
@media (max-width:380px){
  :root{--lsw-gutter:14px}
  .lsw-hero-title{font-size:2.05rem}
  .lsw-kpis{grid-template-columns:1fr}
  .lsw-kpi{border-right:none}
  .lsw-proof-items{grid-template-columns:1fr}
  .lsw-badge{font-size:9px;padding:3px 8px}
}

/* ==========================================================================
   Kratki ekrani (mobilni landscape) - manje vertikalnog zraka
   ========================================================================== */
/* Niska prozorska visina: scroll oznaka nema gdje stati */
@media (max-height:820px){
  .lsw-hero-scroll{display:none}
}

@media (max-height:520px) and (orientation:landscape){
  .lsw-hero{min-height:0;padding-top:calc(var(--lsw-nav-h) + 26px);padding-bottom:40px}
  .lsw-mnav-links a{min-height:48px;font-size:22px}
}

/* ==========================================================================
   Print - citljiv dokument bez ukrasa
   ========================================================================== */
@media print{
  .lsw-nav,.lsw-mnav,.lsw-hero-scroll,.lsw-float,.lsw-skip,.lsw-hero-media{display:none !important}
  .lsw-dark,.lsw-hero,.lsw-cta,.lsw-foot,.lsw-proof{
    background:var(--lsw-on-accent) !important;color:var(--lsw-print-ink) !important;
  }
  .lsw-rv{opacity:1 !important;transform:none !important}
  .lsw-story-frame{position:relative;opacity:1;visibility:visible}
}

/* ==========================================================================
   NOVI BLOKOVI (v4): izjava, preglednik, konektori, CTA pojas
   ========================================================================== */
@media (max-width:1180px){
  .lsw-hero-stage{padding:20px 0 60px 128px}
  .lsw-float-spark{left:74px;min-width:238px}
  .lsw-why-grid{gap:40px}
  .lsw-xp-grid{gap:40px}
}

@media (max-width:1024px){
  .lsw-statement{font-size:clamp(1.85rem,5.4vw,2.9rem);max-width:26ch;margin-bottom:32px}
  .lsw-why-grid{grid-template-columns:1fr;gap:32px}
  .lsw-honest{margin-top:32px}

  /* Preglednik: rail u dva reda, panel u jedan stupac */
  .lsw-xp{margin-top:32px}
  .lsw-xp-rail{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:24px}
  .lsw-xp-tab{min-height:66px;padding:12px 12px 12px}
  .lsw-xp-tab:nth-child(3n){border-right:none}
  .lsw-xp-tab:nth-child(-n+3){border-bottom:1px solid var(--lsw-border)}
  .lsw-xp-grid{grid-template-columns:1fr;gap:24px}
  .lsw-xp-copy{max-width:640px}

  .lsw-conn{grid-template-columns:1fr;gap:20px;margin-top:32px}
  .lsw-cta-band{grid-template-columns:1fr;gap:24px;margin-top:32px;text-align:center}
  .lsw-cta-links{align-items:center}

  /* Hero: kartice se vracaju uz rub okvira */
  .lsw-hero-stage{padding:16px 0 0 0}
  .lsw-float-health{top:0;left:0}
  .lsw-float-util{display:none}
  .lsw-float-spark{position:relative;inset:auto;left:auto;margin-top:16px;width:100%;min-width:0;animation:none}
}

@media (max-width:720px){
  .lsw-statement{font-size:clamp(1.7rem,7.6vw,2.3rem);letter-spacing:-.038em;max-width:22ch;margin-bottom:24px}
  .lsw-cmp-head,.lsw-cmp-rows li{grid-template-columns:1fr;gap:4px}
  .lsw-cmp-head span:first-child{display:none}
  .lsw-cmp-rows li span{font-size:13px}
  .lsw-cmp-rows li b{font-size:15px}
  .lsw-honest{padding:16px 16px;font-size:13px}

  /* Preglednik: rail se horizontalno prelistava, s vidljivim preljevom */
  .lsw-xp-rail{
    grid-template-columns:repeat(6,minmax(132px,1fr));
    overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .lsw-xp-tab{scroll-snap-align:start;min-height:60px}
  .lsw-xp-tab:nth-child(3n){border-right:1px solid var(--lsw-border)}
  .lsw-xp-tab:nth-child(-n+3){border-bottom:none}
  .lsw-xp-feats li{font-size:14px}

  .lsw-conn-list{gap:8px}
  .lsw-conn-list b{font-size:12px}
}

/* ==========================================================================
   SEKVENCA I PARALLAX na manjim ekranima (v5)
   ========================================================================== */
@media (max-width:1024px){
  /* Traka napretka nema smisla kad su koraci obicne slozene sekcije */
  .lsw-story-steps{padding-left:0}
  .lsw-story-progress{display:none}
  .lsw-story-step::before{display:none}
  .lsw-story-frame{transform:none;transition:none}
  /* Parallax je desktop-only; JS cisti transform, ovo je pojas i naramenice */
  [data-lsw-py]{transform:none !important}
}

@media (max-width:720px){
  .lsw-frame-bar::before{width:26px;background-size:26px 8px}
}