/* ============================================================
   alati-hub.css — „/alati/" hub stranica.
   PORT dizajnerovog prototipa „Alati (hub stranica).html"
   (design_handoff_alati_hub_cip, 2026-07-07). Rescope: prototip
   je nosio body.page-alat-lozinka (copy artefakt) → ovde
   page-alati. Chrome/tokeni 1:1 iz /lozinka/ i /simulator/
   (--al-* konzola paleta). Učitava se SAMO na ovoj ruti
   (extra_css). Heder flyout + prekidač teme = header.css.
   ============================================================ */

/* ---- tokeni — konzola (dark, default) ---- */
body.page-alati{
  --al-bg:#0f0f0d; --al-grid:rgba(232,232,230,.02);
  --al-plate:#141412; --al-plate2:#191917; --al-field:#0a0a09;
  --al-line:#262624; --al-line2:#343430;
  --al-hi:#ece9e3; --al-md:#c8c5be; --al-lo:#a0a09e; --al-mute:#8a8780; --al-faint:#5a5754; --al-mute-text:#8a8780;
  --al-brand:#c0392b; --al-brand-hi:#d44a3a;
  /* crvena kao TEKST: --al-brand/-hi nose i podloge i ivice, pa se ne diraju.
     Tamna uzima --brand-on-dark (#ee4130, S130); svetla ostaje na #b0301f. */
  --al-brand-text:var(--brand-on-dark); --al-brand-soft:rgba(192,57,43,.16);
  --al-accent:#ffd9a8;
  /* akcent nosi i podloge i obrise; tekst ide na -text (svetla tema nize) */
  --al-accent-text:var(--al-accent);
  --container-wide:1320px;
}
html{ color-scheme:dark; }
html, body.page-alati{ background:var(--al-bg); }
body.page-alati{ color:var(--al-hi); }
body.page-alati ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }

/* ---- link boje ---- */
body.page-alati a{ color:var(--al-brand-text); }
body.page-alati a:hover{ color:var(--al-hi); }

/* Sticky footer — stranica je kratka na visokim ekranima; telo je flex-kolona
   pune visine, main raste, .toolx apsorbuje višak (grid pozadina do futera). */
body.page-alati{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.page-alati > main#main{ display:flex; flex-direction:column; flex:1 0 auto; }
body.page-alati > main#main > .toolx{ flex:1 0 auto; }

/* ============================================================
   HERO · KONZOLA (.axc) — chrome iz /lozinka/, /simulator/
   ============================================================ */
body.page-alati .axc{ background:#0f0f0d; border-bottom:1px solid #262624; }
body.page-alati .axc-inner{
  max-width:var(--container-wide); margin:0 auto; padding:44px 28px 40px;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
}
body.page-alati .axc-kick{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:#8a8780; margin:0 0 16px;
}
body.page-alati .axc-kick::before{
  content:""; width:6px; height:6px; background:#c0392b;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
body.page-alati .axc-kick b{ color:#ffd9a8; font-weight:500; }
body.page-alati .axc h1{
  font-weight:600; font-size:clamp(32px,4vw,50px); line-height:1.04;
  letter-spacing:-.02em; color:#ece9e3; margin:0;
}
body.page-alati .axc h1 em{ font-style:normal; color:var(--al-brand-text); }
body.page-alati .axc-sub{ font-size:15.5px; line-height:1.62; color:#a0a09e; margin:18px 0 0; max-width:60ch; }
body.page-alati .axc-stat{
  font-family:var(--font-mono); font-size:10.5px; line-height:2;
  letter-spacing:.14em; text-transform:uppercase; color:#8a8780;
  text-align:right; white-space:nowrap; padding-bottom:4px;
}
body.page-alati .axc-stat b{ color:#ece9e3; font-weight:500; }
body.page-alati .axc-stat .ok{ color:#7fa168; }
@media (max-width:1000px){
  body.page-alati .axc-inner{ grid-template-columns:1fr; gap:22px; }
  body.page-alati .axc-stat{ text-align:left; }
}
@media (max-width:560px){ body.page-alati .axc-inner{ padding:32px 18px 28px; } }

/* ============================================================
   TELO — .toolx : mreža alat-kartica
   ============================================================ */
body.page-alati .toolx{
  background:var(--al-bg); padding:56px 28px 92px;
  background-image:
    linear-gradient(var(--al-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--al-grid) 1px, transparent 1px);
  background-size:56px 56px;
}
body.page-alati .toolx__inner{ max-width:1320px; margin:0 auto; }

body.page-alati .toolx__label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--al-mute-text); margin:0 0 20px;
}
body.page-alati .toolx__label::after{ content:""; flex:1; height:1px; background:var(--al-line); }

/* Pet kolona, koliko i alata (Denis, S127). Sa četiri je peta kartica visila
   sama u drugom redu — prazan prostor pored nje čita se kao da nešto nedostaje,
   ne kao raspored. Kad se doda šesti alat, ovde ide `repeat(3,1fr)` pa dva puna
   reda po tri; broj kolona prati broj kartica i nije nasleđena vrednost.

   ⚑ Prag od 1360px je IZMEREN, ne odabran: na 1320px je okvir naslova tačno 182px
   a najduža reč („izloženosti") takođe 182 — nula rezerve, a na 1200px se seče za
   23px. Kartice imaju `overflow:hidden`, pa se to ne bi videlo kao prelivanje
   nego kao odsečena reč. Ko menja naslove kartica ili veličinu slova, meri opet. */
body.page-alati .tool-cards{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:1359px){
  body.page-alati .tool-cards{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1180px){
  body.page-alati .tool-cards{ grid-template-columns:repeat(2,1fr); }
}

/* --- alat-kartica --- */
body.page-alati .tcard{
  position:relative; display:flex; flex-direction:column; min-height:216px;
  background:var(--al-plate); border:1px solid var(--al-line);
  padding:26px 26px 22px; text-decoration:none; color:inherit;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
  overflow:hidden;
}
/* kosa crvena ivica — eho hub-čipa; puni se na hover */
body.page-alati .tcard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--al-brand); transform:translateX(-3px); transition:transform .16s ease;
}
body.page-alati .tcard:hover{ border-color:var(--al-line2); background:var(--al-plate2); transform:translateY(-2px); }
body.page-alati .tcard:hover::before{ transform:translateX(0); }
/* Enciklopedija kartica — tricolor akcenat (njen potpis) umesto crvene;
   --cat-* tokeni iz globalnog :root u header.css */
body.page-alati .tcard--enc::before{
  background:linear-gradient(
    var(--cat-pretnje) 0 33.3%,
    var(--cat-tehnike) 33.3% 66.6%,
    var(--cat-odbrane) 66.6% 100%
  );
}
body.page-alati .tcard:focus-visible{ outline:2px solid var(--al-brand-hi); outline-offset:2px; }

body.page-alati .tcard__num{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--al-mute-text); margin:0 0 14px; }
body.page-alati .tcard__name{ font-family:var(--font-sans); font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--al-hi); margin:0 0 10px; }
body.page-alati .tcard__desc{ font-size:13.5px; line-height:1.6; color:var(--al-lo); margin:0; }
body.page-alati .tcard__foot{
  margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.page-alati .tcard__tags{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
body.page-alati .tcard__go{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:var(--al-brand-text); transition:gap .16s ease;
}
body.page-alati .tcard:hover .tcard__go{ gap:11px; }

@media (max-width:640px){
  body.page-alati .tool-cards{ grid-template-columns:1fr; }
}

/* ============================================================
   PRINCIP traka (.alx-why) — „ništa ne napušta pregledač"
   (v2 predaja: zamena za „u pripremi"; planovi se ne obznanjuju)
   ============================================================ */
body.page-alati .alx-why{
  margin-top:64px; padding-top:52px; border-top:1px solid var(--al-line);
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
body.page-alati .alx-why__kick{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--al-mute-text); margin:0 0 18px;
}
body.page-alati .alx-why__kick::before{
  content:""; width:6px; height:6px; background:var(--al-brand);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
body.page-alati .alx-why h2{
  font-weight:600; font-size:clamp(28px,3.4vw,42px); line-height:1.08; letter-spacing:-.02em;
  color:var(--al-hi); margin:0 0 18px;
}
body.page-alati .alx-why h2 em{ font-style:normal; color:var(--al-brand-text); }
body.page-alati .alx-why__lead{ font-size:15px; line-height:1.62; color:var(--al-lo); margin:0 0 26px; max-width:50ch; }
body.page-alati .alx-why__cta{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--al-brand-text); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;
  transition:gap .15s ease, border-color .15s ease;
}
body.page-alati .alx-why__cta:hover{ gap:13px; border-color:var(--al-brand-hi); }

body.page-alati .alx-why__panel{ position:relative; overflow:hidden; background:var(--al-plate); border:1px solid var(--al-line); padding:30px 30px 26px; }
body.page-alati .alx-why__nut{ position:absolute; right:-38px; bottom:-44px; width:220px; height:220px; color:var(--al-hi); opacity:.05; }
body.page-alati .alx-why__panel-kick{ position:relative; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 14px; }
body.page-alati .alx-why__spec{ position:relative; display:flex; flex-direction:column; }
body.page-alati .alx-why__spec span{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--al-line);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text);
}
body.page-alati .alx-why__spec span:last-child{ border-bottom:0; }
body.page-alati .alx-why__spec b{ color:var(--al-hi); font-weight:500; letter-spacing:.1em; }
body.page-alati .alx-why__ok{ position:relative; display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7fa168; }
@media (max-width:900px){ body.page-alati .alx-why{ grid-template-columns:1fr; gap:30px; } }
html[data-theme="light"] body.page-alati .alx-why__ok{ color:#487034; }

/* ============================================================
   FUTER — enc-footer strip (uvek taman); ≤767 preuzima cp-tabbar
   ============================================================ */
body.page-alati .enc-ftr{
  background:#0a0a09; border-top:1px solid #2e2e2c; color:#a0a09e;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
}
body.page-alati .enc-ftr-inner{
  /* Pun po širini prozora (kao /enciklopedija/, /lozinka/ i /izlozenost/), ne
     do kraja kolone sadržaja. Denisova odluka S132: hub je jedina strana koju
     je gledao gde se futer skupljao uz stubac, pa je delovao kao greška.
     Ranije je ovde stajalo `max-width:var(--container-wide); margin:0 auto;`. */
  padding:10px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body.page-alati .enc-ftr-l,
body.page-alati .enc-ftr-r{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
body.page-alati .enc-ftr a{ color:inherit; text-decoration:none; transition:color .12s; }
body.page-alati .enc-ftr a:hover{ color:#ece9e3; }
body.page-alati .enc-ftr .dot{ width:3px; height:3px; background:#3a3a37; border-radius:50%; display:inline-block; }
@media (max-width:767px){
  body.page-alati .enc-ftr{ display:none; }
  body.page-alati .toolx{ padding-bottom:calc(92px + 48px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   LIGHT tema (heder+futer ostaju tamni)
   ============================================================ */
html[data-theme="light"]{ color-scheme:light; }
html[data-theme="light"], html[data-theme="light"] body.page-alati{ background:#f2f0e9; }
html[data-theme="light"] body.page-alati{
  --al-bg:#f2f0e9; --al-grid:rgba(20,20,18,.035);
  --al-plate:#ffffff; --al-plate2:#f6f4ee; --al-field:#ffffff;
  --al-line:#e0dcd1; --al-line2:#cec9bb;
  --al-hi:#1a1917; --al-md:#3c3a34; --al-lo:#5b574f; --al-mute:#7b776e; --al-faint:#9a958a; --al-mute-text:#666663;
  --al-brand:#b0301f; --al-brand-hi:#8f2417; --al-brand-soft:rgba(176,48,31,.12); --al-brand-text:#b0301f;
  --al-accent:#9a5a15; --al-accent-text:#935614;
}
html[data-theme="light"] body.page-alati .axc{ background:#ecebe3; border-bottom-color:#e3dfd4; }
html[data-theme="light"] body.page-alati .axc-kick{ color:var(--al-mute-text); }
html[data-theme="light"] body.page-alati .axc-kick b{ color:#935614; }
html[data-theme="light"] body.page-alati .axc h1{ color:#1a1917; }
html[data-theme="light"] body.page-alati .axc h1 em{ color:#b0301f; }
html[data-theme="light"] body.page-alati .axc-sub{ color:#5b574f; }
html[data-theme="light"] body.page-alati .axc-stat{ color:var(--al-mute-text); }
html[data-theme="light"] body.page-alati .axc-stat b{ color:#1a1917; }
html[data-theme="light"] body.page-alati .axc-stat .ok{ color:#487034; }