/* m-ai.info — blog (isti vizualni sistem kot domača stran) */
:root{
  --paper:#F3F1EA;--stone:#E8E5DA;--ink:#111318;--ink-2:#1B1E25;--graphite:#575A62;
  --rule:#D5D1C3;--rule-d:#2C3039;--mist:#A4A7B0;--lime:#D4FF3A;
  --display:"Bricolage Grotesque","Arial Black",Arial,sans-serif;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pill:999px;--wrap:1240px;color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:var(--pill);font-weight:600}
.skip:focus{left:12px}
.site-head :focus-visible,.site-foot :focus-visible,.blog-cta :focus-visible,.blog-hero :focus-visible{outline-color:var(--lime)}

/* jezik: prikazan je samo izbrani */
body.lang-sl [data-lang="en"],body.lang-en [data-lang="sl"]{display:none!important}

/* pilula + gumbi */
.pill{display:inline-block;flex:none;width:22px;height:8px;border-radius:var(--pill);background:var(--lime);transition:width .25s cubic-bezier(.2,.8,.2,1)}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--lime);color:var(--ink);font:600 1rem/1 var(--text);padding:16px 22px;border-radius:var(--pill);text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn .pill{background:var(--ink)}
.btn:hover .pill{width:34px}
.btn--sm{padding:12px 16px;font-size:.92rem;gap:10px}
.btn--sm .pill{width:16px;height:6px}

/* glava */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(17,19,24,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--paper)}
.head-row{display:flex;align-items:center;gap:28px;min-height:70px}
.brand{display:flex;color:var(--paper)}
.logo{height:27px;width:auto;display:block}
.nav{display:flex;gap:26px;margin-inline:auto;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none;color:var(--mist)}
.nav a:hover,.nav a[aria-current]{color:var(--paper)}
.head-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav + .head-actions{margin-left:0}
.lang{display:flex;gap:2px;font-size:.8rem;font-weight:600}
.lang button{font:inherit;display:inline-flex;align-items:center;min-height:40px;padding:0 11px;border-radius:var(--pill);border:0;background:none;color:var(--mist);cursor:pointer}
.lang button:hover{color:var(--paper)}
.lang button[aria-pressed="true"]{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule-d)}

/* kazalo bloga */
.blog-hero{background:var(--ink);color:var(--paper);padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,88px)}
.blog-hero h1{font:800 clamp(3.2rem,11vw,9rem)/.85 var(--display);letter-spacing:-.06em;margin:0;display:flex;align-items:center;gap:.14em}
.blog-hero h1 .pill{width:.62em;height:.24em;margin-top:.12em}
.blog-hero p{margin-top:28px;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.5;color:var(--mist);max-width:34em}
.blog-list{padding-block:clamp(48px,6vw,88px) clamp(80px,9vw,128px)}
.blog-grid{border-bottom:1px solid var(--rule)}
.blog-card{display:grid;grid-template-columns:11rem minmax(0,1fr);grid-template-areas:"meta title" "meta desc";column-gap:clamp(20px,3vw,48px);row-gap:8px;padding-block:28px;border-top:1px solid var(--rule);text-decoration:none}
.blog-card h2{grid-area:title;margin:0;font:700 clamp(1.35rem,2.4vw,1.9rem)/1.12 var(--display);letter-spacing:-.025em;text-wrap:balance}
.blog-card > p{grid-area:desc;color:var(--graphite);max-width:46em}
.blog-card-meta{grid-area:meta;display:grid;align-content:start;gap:2px;font-size:.9rem;color:var(--graphite);font-variant-numeric:tabular-nums;padding-top:.35em}
.blog-card:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* članek */
.post-wrap{padding-block:clamp(40px,6vw,80px) clamp(72px,8vw,120px)}
.blog-article{max-width:44rem;margin-inline:auto}
.blog-back{display:inline-flex;align-items:center;gap:8px;color:var(--graphite);text-decoration:none!important;font-size:.95rem;font-weight:500;margin-bottom:28px}
.blog-back:hover{color:var(--ink)}
.blog-meta{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--graphite);font-size:.92rem;margin-bottom:18px;font-variant-numeric:tabular-nums}
.blog-article h1{font:800 clamp(2.2rem,5.2vw,3.7rem)/1 var(--display);letter-spacing:-.035em;margin:0 0 clamp(28px,4vw,44px);text-wrap:balance}
.blog-article h2{font:700 clamp(1.5rem,2.6vw,2rem)/1.12 var(--display);letter-spacing:-.025em;margin:2.4em 0 .6em;text-wrap:balance}
.blog-article h3{font:700 1.3rem/1.2 var(--display);letter-spacing:-.015em;margin:2em 0 .5em}
.blog-article p{font-size:1.125rem;line-height:1.72;margin:0 0 1.15em}
.blog-article ul,.blog-article ol{font-size:1.125rem;line-height:1.7;margin:0 0 1.3em;padding-left:1.3em}
.blog-article li{margin-bottom:.45em}
.blog-article li::marker{color:var(--graphite)}
.blog-article strong{font-weight:650}
.blog-article a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.blog-article a:hover{text-decoration-thickness:2.5px}
.blog-article blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--ink)}
.blog-article blockquote p{font:600 1.3rem/1.4 var(--display);letter-spacing:-.01em;margin-bottom:.5em}
.blog-article cite{font-style:normal;font-size:.92em;color:var(--graphite)}
.blog-article table{width:100%;border-collapse:collapse;font-size:1rem;margin:1.5em 0;display:block;overflow-x:auto}
.blog-article th,.blog-article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.blog-article th{font-weight:650}
.blog-article code{font-size:.92em;background:var(--stone);padding:.1em .35em;border-radius:5px}
.blog-cta{background:var(--ink);color:var(--paper);border-radius:22px;padding:clamp(24px,4vw,40px);margin:3.2em 0 2em;display:grid;gap:14px;justify-items:start}
.blog-cta h3{margin:0!important;font:800 clamp(1.5rem,3vw,2.1rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--paper)}
.blog-cta p{color:var(--mist)!important;margin:0!important;font-size:1.08rem!important}
.blog-cta a{margin-top:8px;text-decoration:none!important;color:var(--ink)!important}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0 0}
.blog-tags span{font-size:.85rem;padding:.35rem .8rem;border-radius:var(--pill);box-shadow:inset 0 0 0 1px var(--rule);color:var(--graphite)}

/* noga */
.site-foot{background:var(--ink);color:var(--paper);padding-block:clamp(40px,6vw,72px) 40px}
.site-foot .logo--foot{width:100%;height:auto;max-width:980px;color:var(--paper)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--rule-d)}
.tagline{color:var(--mist);font-size:.82rem;font-weight:500;letter-spacing:.38em}
.foot-meta{display:grid;gap:6px;font-size:.92rem;color:var(--mist);text-align:right}
.foot-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 20px;margin-top:6px}
.foot-links a{color:var(--paper);text-decoration:none}
.foot-links a:hover{text-decoration:underline}

@media (max-width:1060px){.nav{display:none}}
@media (max-width:720px){
  .head-row{gap:12px;min-height:62px}
  .logo{height:23px}
  .lang button{padding:0 8px}
  .blog-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "title" "desc";row-gap:6px}
  .blog-card-meta{display:flex;gap:14px;padding-top:0}
  .foot-meta{text-align:left}
  .foot-links{justify-content:flex-start}
}
@media (max-width:440px){
  .btn--sm{padding:11px 13px;font-size:.85rem}
  .btn--sm .pill{display:none}
  .head-actions{gap:8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}