/* ============================================================
   Studio Centar - reset, tipografska skala, utility
   Koristi isključivo varijable iz tokens.css.
   ============================================================ */

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--text-strong);
  letter-spacing:var(--ls-heading);
  margin:0;
  text-wrap:balance;
}
p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
img,picture,video{max-width:100%}
img{height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* ---- linkovi ---- */
a{
  color:var(--action);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--t-hover);
}
a:hover{color:var(--action-hover)}
a:active{color:var(--action-press)}

/* ---- fokus: vidljiv na svim interaktivnim elementima ---- */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- tamna (scenska) površina ---- */
.sc-stage{background:var(--surface-stage);color:var(--text-stage-body)}
.sc-stage h1,.sc-stage h2,.sc-stage h3,.sc-stage h4{color:var(--text-stage-strong)}
.sc-stage a{color:var(--action-stage)}
.sc-stage a:hover{color:var(--chalk-0)}
.sc-stage :focus-visible{outline-color:var(--focus-ring-stage)}

/* ---- tipografske uloge ---- */
.t-hero{font:var(--type-hero);letter-spacing:var(--ls-hero);color:var(--text-strong)}
.t-display{font:var(--fw-bold) var(--fs-d1)/var(--lh-display) var(--font-display);letter-spacing:var(--ls-display)}
.t-d2{font:var(--fw-bold) var(--fs-d2)/var(--lh-display) var(--font-display);letter-spacing:var(--ls-display)}
.t-h1{font:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading)}
.t-h2{font:var(--type-heading)}
.t-h3{font:var(--fw-bold) var(--fs-h3)/1.25 var(--font-display)}
.t-lead{font:var(--type-body);font-size:var(--fs-body-lg);color:var(--text-body)}
.sc-stage .t-lead{color:var(--text-stage-body)}
.t-meta{font:var(--type-meta);color:var(--text-body)}
.t-mono{font:var(--type-mono);letter-spacing:var(--ls-mono)}
.t-muted{color:var(--text-muted)}
.sc-stage .t-muted{color:var(--text-stage-muted)}

/* nadnaslov: uvek mono, verzal, u boji akcije */
.eyebrow{
  font:var(--type-mono);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--action);
}
.sc-stage .eyebrow{color:var(--action-stage)}

/* ---- layout ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--light{background:var(--surface-page)}
.section--stage{background:var(--surface-stage)}
.section--tight{padding-top:0}

.grid{display:grid;gap:var(--grid-gap)}
/* mreže su auto-fit: moraju dobro da izgledaju i sa 4 stavke */
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--programs{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--team{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid--halves{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.stack{display:flex;flex-direction:column}
.stack > * + *{margin-top:var(--sp-4)}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* ---- utility ---- */
.measure{max-width:52ch}   /* telo nikad preko ~68 znakova */
.measure-wide{max-width:62ch}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-8{margin-top:var(--sp-8)}
.mt-10{margin-top:var(--sp-10)}
.mt-16{margin-top:var(--sp-16)}
.tabular{font-variant-numeric:tabular-nums}

/* preskoči na sadržaj - prvi fokusabilni element strane */
.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;z-index:100;
  background:var(--action);color:var(--text-onbrand);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-button);
  text-decoration:none;font:var(--type-meta);
  transition:top var(--t-hover);
}
.skip-link:focus{top:var(--sp-4);color:var(--text-onbrand)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}