/* ==========================================================
   zex.rs hub: razvodna tabla na naslovnoj Ghost teme (home.hbs)
   Teme se pune iz Ghost admina, vidi README-zex.md
   Source postavlja html{font-size:62.5%}, zato ovde nema rem.
   ========================================================== */

/* Zajednički font za ceo sajt (i za /mesh/) */
:root{--font-sans:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

.zex-hub{
  --wall:#E3E6E4;
  --enclosure:#F2F3F0;
  --enclosure-edge:#C7CCC8;
  --steel:#A9B0B4;
  --steel-dark:#838B90;
  --plastic:#FCFCFA;
  --plastic-edge:#D9DCD8;
  --ink:#1B2226;
  --muted:#58636A;
  --recess:#2A3136;
  --led:#2BB24C;
  --warn:#F4C400;
  --tape:#1E2327;
  --display:"Albert Sans", Arial, system-ui, sans-serif;
  --body:"Albert Sans", Arial, system-ui, sans-serif;
  position:relative;
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  /* siva pozadina se završava na sredini table, pa tabla "stoji" na prelazu ka blogu */
  background:linear-gradient(to bottom,var(--wall) calc(100% - 160px),transparent calc(100% - 160px));
  padding-bottom:56px;
}
.zex-hub *,.zex-hub *::before,.zex-hub *::after{box-sizing:border-box}
.zex-hub a{color:inherit}
.zex-hub .zx-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- uvod ---------- */
.zex-hub .intro{padding:clamp(40px,8vw,88px) 0 clamp(32px,5vw,48px);max-width:640px}
.zex-hub .intro h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(38.4px,6vw,67.2px);
  line-height:1;
  letter-spacing:-.035em;
  margin:0 0 20px;
}
.zex-hub .intro p{margin:0;font-size:18.4px;color:var(--muted);max-width:544px}

/* ---------- razvodni ormar ---------- */
.zex-hub .cabinet{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 40%),
    var(--enclosure);
  border:1px solid var(--enclosure-edge);
  border-radius:14px;
  padding:clamp(20px,4vw,44px);
  box-shadow:
    0 1px 0 #fff inset,
    0 30px 60px -30px rgba(40,50,55,.35),
    0 2px 4px rgba(40,50,55,.08);
}
/* šrafovi u uglovima ormara */
.zex-hub .cabinet::before,.zex-hub .cabinet::after,.zex-hub .cabinet .screws::before,.zex-hub .cabinet .screws::after{
  content:"";position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#B9BFC2 60%,#8E969B);
  box-shadow:0 1px 1px rgba(0,0,0,.25);
}
.zex-hub .cabinet::before{top:12px;left:12px}
.zex-hub .cabinet::after{top:12px;right:12px}
.zex-hub .cabinet .screws::before{bottom:12px;left:12px}
.zex-hub .cabinet .screws::after{bottom:12px;right:12px}

.zex-hub .sticker{
  position:absolute;
  top:-26px;right:clamp(16px,5vw,56px);
  display:flex;align-items:center;gap:10px;
  background:var(--warn);
  color:var(--ink);
  padding:10px 16px 10px 12px;
  border-radius:6px;
  font-family:var(--display);
  font-weight:700;
  font-size:15.2px;
  line-height:1.15;
  transform:rotate(2.5deg);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
  z-index:2;
}
.zex-hub .sticker svg{flex:none}

.zex-hub .cabinet-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:0 0 22px;
}
.zex-hub .cabinet-head h2{
  font-family:var(--display);
  font-weight:700;
  font-size:19.2px;
  margin:0;
}
.zex-hub .cabinet-head p{margin:0;color:var(--muted);font-size:15.2px}

/* ---------- šina i moduli ---------- */
.zex-hub .rail{
  list-style:none;margin:0;padding:0 14px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(max(172px,25%),1fr)); /* najviše 4 teme u redu */
  row-gap:30px;
  counter-reset:live prep spare;
}
.zex-hub .rail > li{position:relative;display:flex}
/* DIN šina: svaki modul crta svoj deo, pa se deo spaja u neprekinutu šinu po redu */
.zex-hub .rail > li::before{
  content:"";position:absolute;left:-14px;right:-14px;top:46%;height:34px;z-index:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,0,0,.18) 18px 26px) center/100% 8px no-repeat,
    linear-gradient(180deg,#C9CED1,var(--steel) 45%,var(--steel-dark));
  border-top:1px solid #D8DCDE;
  border-bottom:1px solid #737B80;
}

.zex-hub .breaker{
  position:relative;z-index:1;
  flex:1;
  display:flex;flex-direction:column;
  min-height:330px;
  margin:0 -0.5px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--plastic) 55%,#EFF0EC 100%);
  border:1px solid var(--plastic-edge);
  border-radius:4px;
  padding:14px 14px 16px;
  text-decoration:none;
  box-shadow:0 1px 0 #fff inset,0 3px 6px -2px rgba(30,40,45,.18);
}

.zex-hub .breaker .label{
  align-self:flex-start;
  letter-spacing:-.01em;
  background:var(--tape);
  color:#F4F4F0;
  font-family:var(--display);
  font-weight:700;
  font-size:17.92px;
  line-height:1.1;
  padding:6px 10px 7px;
  border-radius:2px;
  transform:rotate(-1.2deg);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 3px rgba(0,0,0,.25);
}

.zex-hub .switch-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px 0 22px}
.zex-hub .switch{
  position:relative;width:46px;height:76px;flex:none;
  background:linear-gradient(180deg,#1E2428,var(--recess));
  border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.45) inset,0 1px 0 #fff;
}
.zex-hub .lever{
  position:absolute;left:5px;right:5px;top:5px;height:36px;
  background:linear-gradient(180deg,#FFFFFF,#E2E4E0);
  border-radius:4px;
  box-shadow:0 2px 3px rgba(0,0,0,.5),0 -1px 0 rgba(0,0,0,.08) inset;
}
.zex-hub .lever::after{ /* oznaka I */
  content:"";position:absolute;left:50%;top:8px;width:3px;height:14px;margin-left:-1.5px;
  background:#C7322B;border-radius:1px;
}
.zex-hub .state{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--display);font-weight:700;font-size:12.48px;color:var(--muted);
}
.zex-hub .led{
  width:12px;height:12px;border-radius:50%;
  background:#9AA3A0;
  box-shadow:0 1px 1px rgba(0,0,0,.3) inset;
}

.zex-hub .breaker .desc{margin:0 0 14px;font-size:15.68px;line-height:1.45}
.zex-hub .breaker .go{
  margin-top:auto;
  font-family:var(--display);font-weight:700;font-size:16px;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
  text-decoration-color:rgba(27,34,38,.25);
}

/* uključena tema */
.zex-hub .breaker.live{counter-increment:live}
.zex-hub .breaker.live .led{
  background:radial-gradient(circle at 40% 35%,#B9F5C8,var(--led) 60%);
  box-shadow:0 0 10px 2px rgba(43,178,76,.55);
}
.zex-hub .breaker.live:hover .go,.zex-hub .breaker.live:focus-visible .go{text-decoration-color:var(--ink)}
.zex-hub .breaker.live:hover{border-color:#BFC4BF}
.zex-hub .breaker.live:active .lever{transform:translateY(3px)}
.zex-hub .breaker.live:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* tema u pripremi: osigurač isključen, nije link */
.zex-hub .breaker.prep{counter-increment:prep;cursor:default}
.zex-hub .breaker.prep .lever{top:auto;bottom:5px}
.zex-hub .breaker.prep .lever::after{ /* oznaka O */
  width:12px;height:12px;margin-left:-6px;top:auto;bottom:9px;
  background:none;border:2.5px solid #58636A;border-radius:50%;
}
.zex-hub .breaker.prep .desc{color:var(--muted)}
.zex-hub .breaker.prep .soon{
  margin-top:auto;align-self:flex-start;
  font-family:var(--display);font-weight:700;font-size:14.4px;
  color:#6B5A00;background:#FFF1B8;border-radius:3px;padding:3px 8px;
}

/* slobodno mesto: slepa ploča */
.zex-hub .breaker.spare{
  counter-increment:spare;
  background:
    linear-gradient(180deg,#F4F5F2,#E9EBE7);
  box-shadow:0 1px 0 #fff inset;
  align-items:center;justify-content:center;
  color:var(--muted);
  text-align:center;
}
.zex-hub .breaker.spare::before,.zex-hub .breaker.spare::after{
  content:"";position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#B9BFC2 60%,#8E969B);
}
.zex-hub .breaker.spare::before{top:14px}
.zex-hub .breaker.spare::after{bottom:14px}
.zex-hub .breaker.spare span{font-size:14.4px;max-width:144px;line-height:1.35}

/* brojač na dnu ormara, broji sam iz HTML-a */
.zex-hub .meter{
  display:flex;gap:10px 28px;flex-wrap:wrap;
  margin:30px 0 0;padding:14px 16px;
  background:#E7E9E5;border-radius:8px;
  font-size:15.2px;color:var(--muted);
}
.zex-hub .meter b{color:var(--ink);font-family:var(--display)}
.zex-hub .meter .n-live::after{content:counter(live)}
.zex-hub .meter .n-spare::after{content:counter(spare)}
.zex-hub .meter .n-prep::after{content:counter(prep)}

/* ---------- dno ---------- */

/* ---------- jedan trenutak animacije: osigurači se uključuju redom ---------- */
@media (prefers-reduced-motion:no-preference){
  .zex-hub .breaker.live .lever{animation:zx-flip .35s cubic-bezier(.3,1.6,.5,1) both}
  .zex-hub .breaker.live .led{animation:zx-glow .01s steps(1) both}
  .zex-hub .rail > li:nth-child(1) .lever{animation-delay:.5s}
  .zex-hub .rail > li:nth-child(1) .led{animation-delay:.72s}
  .zex-hub .rail > li:nth-child(2) .lever{animation-delay:.72s}
  .zex-hub .rail > li:nth-child(2) .led{animation-delay:.94s}
  .zex-hub .rail > li:nth-child(3) .lever{animation-delay:.94s}
  .zex-hub .rail > li:nth-child(3) .led{animation-delay:1.16s}
  .zex-hub .rail > li:nth-child(4) .lever{animation-delay:1.16s}
  .zex-hub .rail > li:nth-child(4) .led{animation-delay:1.38s}
  .zex-hub .rail > li:nth-child(n+5) .lever{animation-delay:1.38s}
  .zex-hub .rail > li:nth-child(n+5) .led{animation-delay:1.6s}
  @keyframes zx-flip{from{transform:translateY(30px)}to{transform:translateY(0)}}
  @keyframes zx-glow{from{background:#9AA3A0;box-shadow:0 1px 1px rgba(0,0,0,.3) inset}}
}

@media (max-width:520px){
  .zex-hub .rail{grid-template-columns:repeat(2,1fr);padding:0 8px}
  .zex-hub .rail > li::before{left:-8px;right:-8px}
  .zex-hub .breaker{min-height:300px;padding:12px 11px 14px}
  .zex-hub .breaker .label{font-size:16px}
  .zex-hub .breaker .desc{font-size:14.72px}
  .zex-hub .sticker{font-size:13.6px;top:-30px}
}

/* ---------- telefon: kompaktni redovi umesto visokih osigurača ---------- */
@media (max-width:520px){
  .zex-hub{background:linear-gradient(to bottom,var(--wall) calc(100% - 90px),transparent calc(100% - 90px))}
  .zex-hub .cabinet{padding:22px 14px 18px}
  .zex-hub .rail{grid-template-columns:1fr;row-gap:10px;padding:0}
  .zex-hub .rail > li::before{display:none}
  .zex-hub .breaker{
    display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;
    min-height:0;padding:12px;margin:0;
  }
  .zex-hub .breaker .switch-row{grid-row:1 / span 3;margin:0;align-self:center;flex-direction:column;gap:8px}
  .zex-hub .breaker .state{font-size:0}          /* ostaje samo lampica */
  .zex-hub .switch{width:34px;height:56px}
  .zex-hub .lever{height:26px;left:4px;right:4px;top:4px}
  .zex-hub .breaker.prep .lever{bottom:4px}
  .zex-hub .lever::after{top:6px;height:10px}
  .zex-hub .breaker.prep .lever::after{bottom:6px;width:10px;height:10px;margin-left:-5px}
  .zex-hub .breaker .label{font-size:16px;transform:none;justify-self:start}
  .zex-hub .breaker .desc{margin:0;font-size:15px}
  .zex-hub .breaker .go,.zex-hub .breaker.prep .soon{margin-top:2px;justify-self:start}
  .zex-hub .sticker{top:-30px}
}

/* ---------- blog grid ispod table ---------- */
/* grid poravnat sa tablom: ista širina sadržaja (1080 - 2x40) */
.home-template .zx-feed-wrap{--container-width:1000px}
.home-template .zx-feed-wrap .gh-outer{padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.home-template .zx-feed-wrap .gh-container:not(.has-sidebar) :is(.gh-container-title,.gh-main,.gh-more){grid-column:1 / -1}
.home-template .zx-feed-wrap .gh-container{margin-top:8px}
.home-template .zx-feed-wrap .gh-container-title{
  font-size:2.2rem;font-weight:800;letter-spacing:-.02em;text-transform:none;
  color:#1B2226;
}
.home-template .zx-feed-wrap :is(.gh-card-title,.gh-card-excerpt,.gh-card-meta,.gh-card-tag){font-family:var(--font-sans)}
.home-template .zx-feed-wrap .gh-card-title{font-weight:750;letter-spacing:-.015em}

/* ---------- glavni meni: stavke kao natpisi na osiguračima ---------- */
.gh-navigation .gh-navigation-menu .nav{gap:10px}
.gh-navigation .gh-navigation-menu .nav > li > a{
  padding:5px 11px 6px;
  background:#1E2327;
  color:#F4F4F0 !important;
  border-radius:2px;
  font-weight:700;
  line-height:1.2;
  box-shadow:0 2px 3px rgba(0,0,0,.18);
  transition:background-color .15s;
}
.gh-navigation .gh-navigation-menu .nav > li > a:hover{background:#000;opacity:1}
/* trenutna stranica: žuta traka, kao nalepnica na tabli */
.gh-navigation .gh-navigation-menu .nav > li.nav-current > a{background:#F4C400;color:#1B2226 !important}
.gh-navigation .gh-navigation-menu .nav > li > a:focus-visible{outline:3px solid #F4C400;outline-offset:2px}
@media (max-width:767px){
  #gh-navigation .gh-navigation-menu .nav{gap:14px}
  #gh-navigation .gh-navigation-menu .nav > li > a{padding:8px 16px 9px}
}