/* ============================================================================
   LumenSpark - landing/capabilities.css
   Asimetricna bento mreza + naizmjenicne capability sekcije. Prefiks .lsw-
   ============================================================================ */

/* ==========================================================================
   BENTO (samo jedna mreza na stranici - ostalo su normalne sekcije)
   ========================================================================== */
.lsw-bento{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:auto;
  gap:16px;
}
.lsw-bento-card{
  position:relative;
  background:var(--lsw-surface);
  border:1px solid var(--lsw-border);
  border-radius:var(--lsw-r-lg);
  padding:20px;
  display:flex;flex-direction:column;gap:12px;
  min-width:0;
  transition:border-color var(--motion-standard),box-shadow var(--motion-standard);
}
.lsw-bento-card:hover{border-color:var(--lsw-border-strong);box-shadow:var(--lsw-sh-2)}

/* Rasporedi - 6 stupaca, tri pune asimetricne linije:
   [margin 4 | capacity 2] [spark 2 | flow 4] [time 3 | audit 3] */
.lsw-bento-lg{grid-column:span 4}
.lsw-bento-md{grid-column:span 2}
.lsw-bento-wide{grid-column:span 4}
.lsw-bento-sm{grid-column:span 3}

/* Aktivna kartica - terracotta samo tu */
.lsw-bento-card.is-lead{
  border-color:var(--lsw-accent-border);
  background:linear-gradient(180deg,var(--lsw-accent-soft) 0%,var(--lsw-surface) 42%);
}
.lsw-bento-card.is-dark{
  background:var(--lsw-brand);color:var(--lsw-on-dark);
  border-color:rgba(245,240,234,.12);
}
.lsw-bento-card.is-dark .lsw-bento-t{color:var(--lsw-on-dark)}
.lsw-bento-card.is-dark .lsw-bento-p{color:var(--lsw-on-dark-3)}
.lsw-bento-card.is-dark .lsw-eyebrow{color:var(--lsw-on-dark-4)}

.lsw-bento-head{display:flex;flex-direction:column;gap:8px}
.lsw-bento-t{
  font-family:var(--lsw-font);font-weight:670;
  font-size:clamp(1.12rem,1.45vw,1.32rem);line-height:1.2;letter-spacing:-.028em;
}
.lsw-bento-p{font-size:13px;line-height:1.5;color:var(--lsw-text-3);max-width:46ch}
.lsw-bento-viz{margin-top:auto}

/* Metrika velike kartice */
.lsw-bento-metric{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lsw-bento-num{
  font-size:clamp(2.1rem,3.1vw,2.7rem);font-weight:700;letter-spacing:-.045em;
  line-height:.92;font-variant-numeric:tabular-nums;color:var(--lsw-text);
}
.lsw-bento-num small{
  display:block;font-family:var(--lsw-mono);font-size:10px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--lsw-text-4);
  margin-top:8px;
}

/* ==========================================================================
   CAPABILITY SEKCIJE (naizmjenicno)
   ========================================================================== */
.lsw-cap{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:48px;align-items:center;
}
.lsw-cap.is-flip .lsw-cap-copy{order:2}
.lsw-cap.is-flip .lsw-cap-viz{order:1}
.lsw-cap+.lsw-cap{margin-top:64px}

.lsw-cap-copy{max-width:520px}
.lsw-cap-copy .lsw-eyebrow{margin-bottom:16px}
.lsw-cap-copy h2{margin-bottom:12px}
.lsw-cap-copy .lsw-lead{margin-bottom:16px}

.lsw-cap-features{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px;margin-bottom:16px;
}
.lsw-cap-features li{
  display:flex;gap:8px;align-items:baseline;
  font-size:13px;line-height:1.4;color:var(--lsw-text-2);
}
.lsw-cap-features li::before{
  content:'';width:4px;height:4px;border-radius:50%;flex:none;
  background:var(--lsw-border-strong);transform:translateY(-2px);
}
.lsw-dark .lsw-cap-features li{color:var(--lsw-on-dark-2)}
.lsw-dark .lsw-cap-features li::before{background:var(--lsw-accent)}

.lsw-cap-viz{position:relative;min-width:0}

/* Naslov iznad vizuala (semanticki opis) */
.lsw-viz-cap{
  margin-top:8px;
  font-family:var(--lsw-mono);font-size:10px;letter-spacing:.05em;
  color:var(--lsw-text-4);line-height:1.5;
}
.lsw-dark .lsw-viz-cap{color:var(--lsw-on-dark-4)}

/* Okvir vizuala */
.lsw-frame{
  background:var(--lsw-surface);
  border:1px solid var(--lsw-border);
  border-radius:var(--lsw-r-lg);
  box-shadow:var(--lsw-sh-3);
  overflow:hidden;
}
.lsw-dark .lsw-frame{
  background:var(--lsw-panel-dark);
  border-color:var(--lsw-on-dark-border);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.7);
}
.lsw-frame-bar{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-bottom:1px solid var(--lsw-border);
  background:var(--lsw-surface-soft);
}
.lsw-dark .lsw-frame-bar{
  background:var(--lsw-panel-dark-2);border-bottom-color:var(--lsw-on-dark-border);
}
/* Tri tocke - vizualni znak da je rijec o snimci sucelja, ne o ilustraciji */
.lsw-frame-bar::before{
  content:'';flex:none;width:34px;height:8px;
  background-image:
    radial-gradient(circle 4px at 4px 4px,var(--lsw-border-strong) 98%,transparent),
    radial-gradient(circle 4px at 17px 4px,var(--lsw-border-strong) 98%,transparent),
    radial-gradient(circle 4px at 30px 4px,var(--lsw-border-strong) 98%,transparent);
  opacity:.75;
}
.lsw-dark .lsw-frame-bar::before{
  background-image:
    radial-gradient(circle 4px at 4px 4px,rgba(245,240,234,.22) 98%,transparent),
    radial-gradient(circle 4px at 17px 4px,rgba(245,240,234,.22) 98%,transparent),
    radial-gradient(circle 4px at 30px 4px,rgba(245,240,234,.22) 98%,transparent);
}
.lsw-frame-bar b{font-size:12px;font-weight:650;letter-spacing:-.005em}
.lsw-frame-bar span{
  margin-left:auto;font-family:var(--lsw-mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lsw-text-4);
}
.lsw-dark .lsw-frame-bar span{color:var(--lsw-on-dark-4)}
.lsw-frame-body{padding:16px}
.lsw-frame-body.is-flush{padding:0}

/* Dva stupca unutar okvira */
.lsw-viz-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lsw-viz-split.is-lean{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}

/* Kalendarska mreza (odsustva / raspored) */
.lsw-cal{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.lsw-cal i{
  aspect-ratio:1;border-radius:2px;background:var(--lsw-surface-muted);
  display:block;
}
.lsw-cal i.is-work{background:var(--lsw-heat-1)}
.lsw-cal i.is-full{background:var(--lsw-accent)}
.lsw-cal i.is-off{background:var(--lsw-teal-soft);box-shadow:inset 0 0 0 1px var(--lsw-teal-b)}
.lsw-cal i.is-none{background:transparent;box-shadow:inset 0 0 0 1px var(--lsw-border)}
.lsw-cal-legend{
  display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.05em;color:var(--lsw-text-4);
}
.lsw-cal-legend span{display:inline-flex;align-items:center;gap:4px}
.lsw-cal-legend i{width:8px;height:8px;border-radius:2px;flex:none}

/* Kanban minijatura */
.lsw-kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lsw-kb-col{
  background:var(--lsw-surface-soft);border:1px solid var(--lsw-border);
  border-radius:var(--lsw-r-sm);padding:8px;min-width:0;
}
.lsw-kb-h{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lsw-text-4);
}
.lsw-kb-h b{
  margin-left:auto;font-weight:500;color:var(--lsw-text-3);
}
.lsw-kb-card{
  background:var(--lsw-surface);border:1px solid var(--lsw-border);
  border-radius:6px;padding:8px 8px;margin-bottom:4px;
}
.lsw-kb-card:last-child{margin-bottom:0}
.lsw-kb-card b{display:block;font-size:11px;font-weight:600;letter-spacing:-.005em}
.lsw-kb-card span{
  display:flex;align-items:center;gap:8px;margin-top:4px;
  font-family:var(--lsw-mono);font-size:9px;color:var(--lsw-text-4);
}
.lsw-kb-tag{
  display:inline-block;width:22px;height:3px;border-radius:2px;
  background:var(--lsw-accent);
}
.lsw-kb-tag.is-teal{background:var(--lsw-teal)}
.lsw-kb-tag.is-purple{background:var(--lsw-purple)}

/* Gantt minijatura */
.lsw-gantt{display:flex;flex-direction:column;gap:8px}
.lsw-gantt-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:center}
.lsw-gantt-row>span{
  font-family:var(--lsw-mono);font-size:9px;color:var(--lsw-text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lsw-gantt-track{height:14px;position:relative;background:var(--lsw-surface-soft);border-radius:2px}
.lsw-gantt-bar{
  position:absolute;top:2px;bottom:2px;border-radius:2px;
  left:var(--x,0%);width:var(--w,40%);
  background:var(--lsw-accent);opacity:.9;
}
.lsw-gantt-bar.is-teal{background:var(--lsw-teal)}
.lsw-gantt-bar.is-green{background:var(--lsw-green)}
.lsw-gantt-bar.is-orange{background:var(--lsw-orange)}
.lsw-gantt-ms{
  position:absolute;top:-3px;width:8px;height:8px;left:var(--x,50%);
  background:var(--lsw-brand);transform:rotate(45deg);border-radius:2px;
}
.lsw-gantt-today{
  position:absolute;top:-4px;bottom:-4px;width:1px;left:var(--x,55%);
  background:var(--lsw-red);opacity:.6;
}

/* Novcani tijek (mini area) */
.lsw-area{display:block;width:100%;height:110px}
.lsw-area-fill{fill:url(#lswAreaGrad)}
.lsw-area-line{fill:none;stroke:var(--lsw-accent);stroke-width:1.8;stroke-linejoin:round}
.lsw-area-zero{stroke:var(--lsw-border-strong);stroke-width:1;stroke-dasharray:3 3}

/* Tijek prilika (funnel) */
.lsw-funnel{display:flex;flex-direction:column;gap:8px}
.lsw-funnel-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:8px;align-items:center}
.lsw-funnel-bar{
  height:26px;border-radius:4px;display:flex;align-items:center;padding:0 8px;
  background:var(--lsw-surface-muted);
  width:var(--w,100%);
  font-size:11px;font-weight:600;color:var(--lsw-text-2);
  white-space:nowrap;overflow:hidden;
  transition:width var(--motion-slow) var(--motion-ease);
}
[data-lsw-grow] .lsw-funnel-bar{width:8%}
[data-lsw-grow].is-in .lsw-funnel-bar{width:var(--w,100%)}
.lsw-funnel-bar.is-1{background:var(--lsw-tint-1)}
.lsw-funnel-bar.is-2{background:var(--lsw-tint-2)}
.lsw-funnel-bar.is-3{background:var(--lsw-tint-3);color:var(--lsw-text)}
.lsw-funnel-bar.is-4{background:var(--lsw-accent);color:var(--lsw-on-accent)}
.lsw-funnel-row>span{
  font-family:var(--lsw-mono);font-size:10px;color:var(--lsw-text-3);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Timer / evidencija */
.lsw-log{display:flex;flex-direction:column}
.lsw-log-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--lsw-surface-soft);
}
.lsw-log-row:last-child{border-bottom:none}
.lsw-log-row b{font-size:11px;font-weight:600;display:block;letter-spacing:-.005em}
.lsw-log-row em{
  font-style:normal;font-family:var(--lsw-mono);font-size:9px;color:var(--lsw-text-4);
  display:block;margin-top:2px;
}
.lsw-log-row time{
  font-family:var(--lsw-mono);font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--lsw-text-2);
}

/* ==========================================================================
   SLOT ZA STVARNU SNIMKU SUCELJA
   Koristi se cim u assets/shots/ postoje sanitizirane snimke
   (vidi tools/make-shots.sh). Do tada stoje read-only rekonstrukcije.
   width/height na <img> drze CLS na nuli.
   ========================================================================== */
.lsw-shot{
  margin:0;border:1px solid var(--lsw-border);border-radius:var(--lsw-r-lg);
  overflow:hidden;background:var(--lsw-surface-soft);
  box-shadow:var(--lsw-sh-3);
}
.lsw-shot img{width:100%;height:auto;display:block}
.lsw-dark .lsw-shot{border-color:var(--lsw-on-dark-border);background:var(--lsw-panel-dark)}

/* ==========================================================================
   SPARKLINE MARZE  (bento: profitabilnost)
   Linija se iscrtava kad kartica ude u vidno polje, ploha se otvara odozdo.
   Bez biblioteke: jedan inline SVG i dvije keyframe animacije.
   ========================================================================== */
/* Gradijenti SVG-a idu preko tokena, ne preko sirovog hex zapisa */
.lsw-g0{stop-color:var(--lsw-accent);stop-opacity:.22}
.lsw-g0b{stop-color:var(--lsw-accent);stop-opacity:.28}
.lsw-g1{stop-color:var(--lsw-accent);stop-opacity:0}

.lsw-spark-chart{margin:0;position:relative}
.lsw-spark-chart svg{display:block;width:100%;height:96px}
.lsw-sc-target{
  stroke:var(--lsw-border-strong);stroke-width:1;stroke-dasharray:3 4;
}
.lsw-sc-fill{fill:url(#lswMarginFill);opacity:0;transition:opacity 650ms var(--motion-ease) 320ms}
.lsw-sc-line{
  fill:none;stroke:var(--lsw-accent);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.lsw-sc-dot{fill:var(--lsw-accent);opacity:0;transition:opacity 320ms var(--motion-ease) 900ms}
.lsw-sc-low{fill:var(--lsw-red);opacity:0;transition:opacity 320ms var(--motion-ease) 650ms}
.lsw-spark-chart.is-in .lsw-sc-line{animation:lsw-draw 1200ms var(--motion-ease) forwards}
.lsw-spark-chart.is-in .lsw-sc-fill,
.lsw-spark-chart.is-in .lsw-sc-dot,
.lsw-spark-chart.is-in .lsw-sc-low{opacity:1}
.lsw-spark-chart figcaption{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--lsw-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lsw-text-4);
}

/* ==========================================================================
   OPERATIVNI TIJEK  (bento: siroka kartica)
   Iznosi iznad, puls koji putuje linijom ispod - kartica je prije bila prazna.
   ========================================================================== */
.lsw-flow-vals{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  margin-bottom:20px;
}
.lsw-flow-vals span{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center}
.lsw-flow-vals b{
  font-size:16px;font-weight:690;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;color:var(--lsw-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lsw-flow-vals i{
  font-style:normal;font-family:var(--lsw-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lsw-text-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Naizmjenicno bojanje: prva tri hladno, zadnja tri toplo, marza je akcent */
.lsw-flow-vals span:nth-child(5) b{color:var(--lsw-orange)}
.lsw-flow-vals span:nth-child(6) b{color:var(--lsw-accent)}
.lsw-flow-vals span:nth-child(7) b{color:var(--lsw-green)}

.lsw-flow-anim{position:relative}
.lsw-flow-pulse{
  position:absolute;top:4px;left:0;
  width:8px;height:8px;border-radius:50%;
  background:var(--lsw-accent);opacity:0;
  box-shadow:0 0 0 4px var(--lsw-accent-soft);
  pointer-events:none;
}
.lsw-flow-anim.is-in .lsw-flow-pulse{
  animation:lsw-flow-run 4800ms cubic-bezier(.45,0,.2,1) 480ms infinite;
}
@keyframes lsw-flow-run{
  0%   {left:0;opacity:0}
  8%   {opacity:1}
  88%  {opacity:1}
  100% {left:100%;opacity:0}
}
/* Cvorovi se pale redom kako puls prolazi */
.lsw-flow-anim.is-in .lsw-flow-dot{animation:lsw-node-lit 4800ms linear 480ms infinite}
.lsw-flow-anim .lsw-flow-node:nth-child(1) .lsw-flow-dot{animation-delay:480ms}
.lsw-flow-anim .lsw-flow-node:nth-child(3) .lsw-flow-dot{animation-delay:1150ms}
.lsw-flow-anim .lsw-flow-node:nth-child(5) .lsw-flow-dot{animation-delay:1820ms}
.lsw-flow-anim .lsw-flow-node:nth-child(7) .lsw-flow-dot{animation-delay:2490ms}
.lsw-flow-anim .lsw-flow-node:nth-child(9) .lsw-flow-dot{animation-delay:3160ms}
.lsw-flow-anim .lsw-flow-node:nth-child(11) .lsw-flow-dot{animation-delay:3830ms}
.lsw-flow-anim .lsw-flow-node:nth-child(13) .lsw-flow-dot{animation-delay:4500ms}
@keyframes lsw-node-lit{
  0%,6%   {border-color:var(--lsw-border-strong);background:var(--lsw-surface)}
  9%,16%  {border-color:var(--lsw-accent);background:var(--lsw-accent-soft)}
  22%,100%{border-color:var(--lsw-border-strong);background:var(--lsw-surface)}
}

@media (max-width:1024px){
  .lsw-flow-vals{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
  .lsw-flow-vals span:nth-child(n+5){display:none}
}
@media (max-width:720px){
  .lsw-flow-vals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lsw-flow-vals span:nth-child(n+4){display:none}
  .lsw-flow-vals b{font-size:15px}
  .lsw-spark-chart svg{height:80px}
}