/* ==========================================================================
   OUTBOX — DIZAJN SISTEM v1.0
   Implementacija dizajna iz Claude Design projekta (Outbox Dizajn Sistem.dc.html)
   Fluidni pristup: sve veličine clamp() 375→1440px, @media samo za raspored.
   ========================================================================== */

:root {
  /* --- boje ------------------------------------------------------------- */
  --amber: #FBB040;
  --amber-hover: #FFC978;
  --ink: #231F20;
  --white: #FFFFFF;
  --n900: #17161A;
  --n800: #201F23;
  --n700: #2A282D;
  --n600: #3A373D;
  --n500: #5A555F;
  --n400: #8B858F;
  --n200: #C9C4CC;
  --n050: #F5F3F0;
  --border: #2B282F;
  --border-alt: #34313A;
  --border-btn: #4A464F;
  --text-mut: #A9A4AC;
  --success: #56C08A;
  --error: #E5533D;
  --info: #4A9DD8;

  /* --- fontovi ----------------------------------------------------------- */
  --os: 'Oswald', Helvetica, Arial, sans-serif;
  --ar: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- fluidna tipografija (375→1440) ------------------------------------ */
  --fs-hero: clamp(44px, calc(28.51px + 4.131vw), 88px);
  --fs-h2: clamp(26px, calc(21.77px + 1.127vw), 38px);
  --fs-num: clamp(12px, calc(11.65px + 0.094vw), 13px);
  --fs-lead: clamp(17px, calc(16.30px + 0.188vw), 19px);
  --fs-body: clamp(15px, calc(14.65px + 0.094vw), 16px);
  --fs-small: clamp(13px, calc(12.65px + 0.094vw), 14px);
  --fs-tiny: clamp(12px, calc(11.65px + 0.094vw), 13px);
  --fs-label: clamp(11px, calc(10.65px + 0.094vw), 12px);
  --fs-d64: clamp(38px, calc(28.85px + 2.441vw), 64px);
  --fs-d46: clamp(28px, calc(21.66px + 1.690vw), 46px);
  --fs-d40: clamp(26px, calc(21.07px + 1.315vw), 40px);
  --fs-d32: clamp(24px, calc(21.18px + 0.751vw), 32px);
  --fs-d28: clamp(21px, calc(18.54px + 0.657vw), 28px);
  --fs-d26: clamp(20px, calc(17.89px + 0.563vw), 26px);
  --fs-d24: clamp(19px, calc(17.24px + 0.469vw), 24px);
  --fs-d22: clamp(18px, calc(16.59px + 0.376vw), 22px);
  --fs-hero-ex: clamp(34px, calc(20.62px + 3.568vw), 72px);
  --fs-social: clamp(30px, calc(22.25px + 2.066vw), 52px);
  --fs-btn: clamp(13px, calc(12.65px + 0.094vw), 14px);
  --fs-btn-lg: clamp(15px, calc(14.30px + 0.188vw), 17px);
  --fs-nav: clamp(12px, calc(11.30px + 0.188vw), 14px);
  --fs-mono: clamp(10px, calc(9.65px + 0.094vw), 11px);
  --fs-spec: clamp(20px, calc(19.30px + 0.188vw), 22px);

  /* --- fluidni razmaci ---------------------------------------------------- */
  --sp-section: clamp(56px, calc(44.73px + 3.005vw), 88px);
  --sp-hero-top: clamp(56px, calc(41.92px + 3.756vw), 96px);
  --sp-hero-bot: clamp(48px, calc(36.73px + 3.005vw), 80px);
  --sp-block: clamp(28px, calc(22.37px + 1.502vw), 44px);
  --sp-sub: clamp(24px, calc(18.37px + 1.502vw), 40px);
  --sp-card: clamp(22px, calc(17.07px + 1.315vw), 36px);
  --sp-card-lg: clamp(28px, calc(18.14px + 2.629vw), 56px);
  --sp-hero-pad: clamp(24px, calc(9.92px + 3.756vw), 64px);
  --sp-pad-x: clamp(20px, calc(12.96px + 1.878vw), 40px);
  --gap: clamp(16px, calc(13.18px + 0.751vw), 24px);
  --gap-sm: clamp(12px, calc(9.18px + 0.751vw), 20px);
  --sp-head-y: clamp(16px, calc(11.77px + 1.127vw), 28px);
  --logo-h: clamp(30px, calc(27.18px + 0.751vw), 38px);
  --sp-slide-pad: clamp(24px, calc(15.55px + 2.254vw), 48px);
  --sp-social-pad: clamp(24px, calc(16.96px + 1.878vw), 44px);

  /* --- potpis sustava: brid ----------------------------------------------- */
  --brid: 26px;
  --clip-brid: polygon(0 0, 100% 0, 100% calc(100% - var(--brid)), calc(100% - var(--brid)) 100%, 0 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 0 120px;
  background: var(--n900);
  color: var(--n050);
  font-family: var(--ar);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hover); }
::selection { background: var(--amber); color: var(--ink); }

img { max-width: 100%; }

/* --- pomoćne klase --------------------------------------------------------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-pad-x); }

.os { font-family: var(--os); }

.eyebrow {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--amber);
  margin-bottom: 26px;
}
.eyebrow--grey { color: var(--n400); margin-bottom: 18px; }

.mono { font-size: var(--fs-tiny); font-family: var(--mono); color: var(--n400); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--border-alt);
  padding: var(--sp-head-y) var(--sp-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  position: sticky;
  top: 0;
  background: rgba(23, 22, 26, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
}
.site-header__logo { height: var(--logo-h); width: auto; display: block; }
.site-header__meta {
  font-family: var(--os);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--fs-tiny);
  color: var(--text-mut);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: var(--sp-hero-top) 0 var(--sp-hero-bot); border-bottom: 1px solid var(--border); }
.hero__eyebrow {
  font-family: var(--os);
  font-size: var(--fs-num);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 28px;
}
.hero__title {
  font-family: var(--os);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  max-width: 14em;
}
.hero__title em { font-style: normal; color: var(--amber); }
.hero__lead {
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--n200);
  margin: 0 0 40px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- gumbi ----------------------------------------------------------------- */
.btn {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: var(--fs-btn);
  padding: 16px 28px;
  display: inline-block;
  border: none;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--primary:hover { background: var(--amber-hover); color: var(--ink); }
.btn--secondary { background: transparent; border: 1px solid var(--border-btn); color: var(--n050); }
.btn--secondary:hover { border-color: var(--amber); color: var(--amber); }
.btn--link {
  background: transparent;
  color: var(--amber);
  padding: 16px 6px;
  border-bottom: 2px solid var(--amber);
}
.btn--disabled { background: var(--n700); color: var(--n500); cursor: not-allowed; }
.btn--sm { font-size: var(--fs-label); padding: 11px 20px; min-height: 0; }
.btn--lg {
  letter-spacing: 0.12em;
  font-size: var(--fs-btn-lg);
  padding: 22px 44px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

/* ==========================================================================
   SEKCIJE
   ========================================================================== */
.section { padding: var(--sp-section) 0 0; }
.section--rule { border-top: 1px solid var(--border); }

.section__head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 12px; }
.section__num { font-family: var(--os); font-size: var(--fs-num); letter-spacing: 0.2em; color: var(--amber); }
.section__title {
  font-family: var(--os);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-h2);
  letter-spacing: 0.01em;
  margin: 0;
}
.section__intro { max-width: 60ch; color: var(--text-mut); margin: 0 0 var(--sp-sub); }
.section__intro strong { color: var(--n050); }

/* ==========================================================================
   01 · BOJE
   ========================================================================== */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); margin-bottom: var(--sp-block); }
.swatch {
  padding: 26px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: var(--clip-brid);
}
.swatch--amber { background: var(--amber); color: var(--ink); }
.swatch--ink { background: var(--ink); color: var(--n050); border: 1px solid var(--border-alt); }
.swatch--white { background: var(--white); color: var(--ink); }
.swatch__name {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: var(--fs-tiny);
}
.swatch__hex { font-family: var(--os); font-size: var(--fs-d28); font-weight: 500; }

.scale-label {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--text-mut);
  margin-bottom: 16px;
}
.scale { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: 14px; }
.scale > div { height: 88px; }
.scale__900 { background: var(--n900); border: 1px solid var(--border-alt); border-right: none; }
.scale__800 { background: var(--n800); }
.scale__700 { background: var(--n700); }
.scale__600 { background: var(--n600); }
.scale__500 { background: var(--n500); }
.scale__400 { background: var(--n400); }
.scale__200 { background: var(--n200); }
.scale__050 { background: var(--n050); }
.scale-legend { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-bottom: var(--sp-block); }
.scale-legend > div { font-size: var(--fs-mono); font-family: var(--mono); color: var(--n400); }

.func-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); margin-bottom: var(--sp-block); }
.func-color { border: 1px solid var(--border); background: var(--n800); padding: 20px; display: flex; gap: 16px; align-items: center; }
.func-color__chip { width: 44px; height: 44px; flex: none; }
.func-color__chip--success { background: var(--success); }
.func-color__chip--error { background: var(--error); }
.func-color__chip--info { background: var(--info); }
.func-color__name { font-family: var(--os); text-transform: uppercase; font-size: var(--fs-small); letter-spacing: 0.1em; }
.func-color__hex { font-size: var(--fs-label); font-family: var(--mono); color: var(--n400); }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); padding-bottom: 24px; }
.rules__col { background: var(--n800); padding: 22px 26px; }
.rules__col--do { border-left: 3px solid var(--success); }
.rules__col--dont { border-left: 3px solid var(--error); }
.rules__title {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-tiny);
  margin-bottom: 10px;
}
.rules__col--do .rules__title { color: var(--success); }
.rules__col--dont .rules__title { color: var(--error); }
.rules__col ul { margin: 0; padding-left: 18px; color: var(--n200); font-size: var(--fs-body); }

/* ==========================================================================
   02 · TIPOGRAFIJA
   ========================================================================== */
.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: var(--sp-block); }
.type-card { background: var(--n800); padding: var(--sp-card); }
.type-card__label {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--amber);
  margin-bottom: 24px;
}
.type-card__glyphs { font-size: var(--fs-d64); line-height: 1; font-weight: 600; }
.type-card__glyphs--os { font-family: var(--os); text-transform: uppercase; }
.type-card__sample { font-size: var(--fs-spec); line-height: 1.35; margin-top: 20px; color: var(--n200); }
.type-card__sample--os { font-family: var(--os); text-transform: uppercase; }
.type-card__sample--ar { font-size: var(--fs-lead); line-height: 1.6; }
.type-card__weights { font-size: var(--fs-label); font-family: var(--mono); color: var(--n400); margin-top: 24px; }

.type-scale { border: 1px solid var(--border); }
.type-scale__row {
  display: grid;
  grid-template-columns: 150px 1fr 210px;
  gap: var(--gap);
  align-items: baseline;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
}
.type-scale__name {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  color: var(--n400);
}
.type-scale__sample { overflow: hidden; }
.type-scale__spec { font-size: var(--fs-label); font-family: var(--mono); color: var(--n400); text-align: right; }

.ts-display-xl { font-family: var(--os); font-size: var(--fs-d64); line-height: 0.95; font-weight: 700; text-transform: uppercase; }
.ts-h1 { font-family: var(--os); font-size: var(--fs-d46); line-height: 1.02; font-weight: 600; text-transform: uppercase; }
.ts-h2 { font-family: var(--os); font-size: var(--fs-d32); line-height: 1.1; font-weight: 600; text-transform: uppercase; }
.ts-h3 { font-family: var(--os); font-size: var(--fs-d22); line-height: 1.2; font-weight: 500; text-transform: uppercase; }
.ts-overline { font-family: var(--os); font-size: var(--fs-num); letter-spacing: 0.2em; font-weight: 500; text-transform: uppercase; color: var(--amber); }
.ts-text-l { font-size: var(--fs-lead); line-height: 1.65; color: var(--n200); }
.ts-text { font-size: var(--fs-body); line-height: 1.6; color: var(--n200); }
.ts-small { font-size: var(--fs-small); line-height: 1.5; color: var(--n400); }

/* ==========================================================================
   03 · MREŽA, RAZMACI I BRID
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); margin-bottom: var(--sp-block); }
.panel { background: var(--n800); padding: var(--sp-card); }
.panel__label {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-label);
  color: var(--amber);
  margin-bottom: 26px;
}

.spacing-list { display: flex; flex-direction: column; gap: 12px; }
.spacing-list__row { display: flex; align-items: center; gap: 16px; }
.spacing-list__bar { height: 18px; background: var(--amber); flex: none; }
.spacing-list__row span { font-size: var(--fs-tiny); font-family: var(--mono); color: var(--n400); }

.brid-demo { display: flex; gap: var(--gap-sm); align-items: flex-end; flex-wrap: wrap; }
.brid-demo__box { width: clamp(96px, 12vw, 130px); aspect-ratio: 1; }
.brid-demo__box--grey { background: var(--n700); border: 1px solid var(--n600); clip-path: var(--clip-brid); }
.brid-demo__box--amber { background: var(--amber); clip-path: var(--clip-brid); }
.brid-demo__para { width: clamp(44px, 5.5vw, 60px); aspect-ratio: 60 / 130; background: var(--n050); clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%); }
.brid-demo-note { font-size: var(--fs-small); color: var(--n400); margin: 24px 0 0; }

.grid-demo { background: var(--n800); padding: var(--sp-card); margin-bottom: 24px; }
.grid-demo__cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.grid-demo__cols div { height: 120px; background: var(--n700); }

/* ==========================================================================
   04 · LOGOTIP
   ========================================================================== */
.logo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 24px; }
.logo-tile {
  background: var(--ink);
  padding: var(--sp-card-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(170px, 20vw, 230px);
}
.logo-tile img { height: clamp(80px, 10vw, 110px); width: auto; display: block; }

.logo-usage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.logo-usage__item { background: var(--n800); }
.logo-usage__preview { height: 130px; display: flex; align-items: center; justify-content: center; }
.logo-usage__preview img { height: 56px; width: auto; }
.logo-usage__preview--ink { background: var(--ink); }
.logo-usage__preview--light { background: var(--n050); }
.logo-usage__preview--amber { background: var(--amber); }
.logo-usage__preview--grey { background: var(--n500); }
.logo-usage__preview--grey img { opacity: 0.55; }
.logo-usage__verdict {
  padding: 16px 20px;
  font-size: var(--fs-tiny);
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.logo-usage__verdict--ok { color: var(--success); }
.logo-usage__verdict--no { color: var(--error); }

/* ==========================================================================
   05 · KOMPONENTE
   ========================================================================== */
.component-block { background: var(--n800); padding: var(--sp-card); margin-bottom: 2px; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-row + .btn-row { margin-top: 24px; }

.components-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 2px; }

/* --- forma ------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  color: var(--n200);
}
.field__input {
  background: var(--n900);
  border: 1px solid var(--n600);
  color: var(--n050);
  font-family: var(--ar);
  font-size: 16px;
  padding: 14px 16px;
  min-height: 48px;
  outline: none;
  transition: border-color 0.15s;
}
.field__input:focus { border-color: var(--amber); }
.field__input::placeholder { color: var(--n500); }
.field--error .field__label { color: var(--error); }
.field--error .field__input { border-color: var(--error); }
.field__hint--error { font-size: var(--fs-tiny); color: var(--error); }

.checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.checkbox__box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--amber);
  background: var(--amber);
  flex: none;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}
.checkbox span:last-child { font-size: var(--fs-small); color: var(--n200); }

/* --- oznake i status ---------------------------------------------------- */
.tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.tag {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 7px 14px;
}
.tag--amber { background: var(--amber); color: var(--ink); }
.tag--outline { border: 1px solid var(--border-btn); color: var(--n200); }
.tag--error { background: var(--error); color: var(--n050); }
.tag--muted { background: var(--n700); color: var(--n400); }

.alerts { display: flex; flex-direction: column; gap: 12px; }
.alert { display: flex; gap: 14px; padding: 16px 18px; background: var(--n900); }
.alert span:first-child { font-weight: 700; }
.alert span:last-child { font-size: var(--fs-small); color: var(--n200); }
.alert--success { border-left: 3px solid var(--success); }
.alert--success span:first-child { color: var(--success); }
.alert--info { border-left: 3px solid var(--info); }
.alert--info span:first-child { color: var(--info); }
.alert--error { border-left: 3px solid var(--error); }
.alert--error span:first-child { color: var(--error); }

/* --- navigacija ---------------------------------------------------------- */
.component-block--nav { padding: var(--sp-card) 0 0; }
.component-block--nav .panel__label { margin-left: var(--sp-card); margin-right: var(--sp-card); }
.nav-demo {
  background: var(--ink);
  padding: 22px var(--sp-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.nav-demo__logo { height: 34px; width: auto; }
.nav-demo__links { display: flex; gap: clamp(16px, 2.5vw, 32px); align-items: center; flex-wrap: wrap; }
.nav-demo__link {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-nav);
  color: var(--n200);
}
.nav-demo__link--active { color: var(--amber); border-bottom: 2px solid var(--amber); padding-bottom: 4px; }
.nav-demo__cta {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-tiny);
  font-weight: 600;
  background: var(--amber);
  color: var(--ink);
  padding: 12px 20px;
}

/* --- tablica -------------------------------------------------------------- */
.table { border: 1px solid var(--border); }
.table__head,
.table__row { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr 0.8fr; gap: var(--gap); align-items: center; }
.table__head {
  padding: 16px 22px;
  background: var(--n900);
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  color: var(--n400);
}
.table__row { padding: 18px 22px; border-top: 1px solid var(--border); font-size: var(--fs-body); }
.table__event { font-family: var(--os); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-body); }
.table__venue { color: var(--text-mut); }
.table__num { text-align: right; font-family: var(--mono); font-size: var(--fs-small); }
.table__num--amber { color: var(--amber); }
.table th, .table td { text-align: left; }

.pagination { display: flex; gap: 8px; margin-top: 24px; align-items: center; }
.pagination__page {
  font-family: var(--os);
  font-size: var(--fs-small);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination__page--active { background: var(--amber); color: var(--ink); font-weight: 600; }
.pagination__page--idle { border: 1px solid var(--n600); color: var(--n200); }
.pagination__next {
  font-family: var(--os);
  font-size: var(--fs-small);
  padding: 0 18px;
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid var(--n600);
  color: var(--n200);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   06 · OBRASCI
   ========================================================================== */
.event-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: var(--sp-card-lg); }
.event-card { background: var(--n800); clip-path: var(--clip-brid); display: flex; flex-direction: column; }
.event-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--n700); }
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.75) contrast(1.05);
}
.event-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 600;
  background: var(--amber);
  color: var(--ink);
  padding: 7px 13px;
}
.event-card__body { padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.event-card__date { font-family: var(--os); font-size: var(--fs-tiny); letter-spacing: 0.16em; color: var(--amber); text-transform: uppercase; }
.event-card__title { font-family: var(--os); font-size: var(--fs-d26); line-height: 1.1; text-transform: uppercase; font-weight: 600; }
.event-card__venue { font-size: var(--fs-small); color: var(--text-mut); }
.event-card__price {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-tiny);
  color: var(--n050);
  border-top: 1px solid var(--border);
}

.date-list { border-top: 1px solid var(--border); margin-bottom: var(--sp-card-lg); }
.date-list__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: 24px 8px;
  border-bottom: 1px solid var(--border);
}
.date-list__date { font-family: var(--os); font-size: var(--fs-body); letter-spacing: 0.12em; color: var(--amber); text-transform: uppercase; }
.date-list__title { font-family: var(--os); font-size: var(--fs-d24); text-transform: uppercase; font-weight: 500; line-height: 1.15; }
.date-list__venue { font-size: var(--fs-small); color: var(--n400); }
.date-list__cta {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-tiny);
  font-weight: 600;
  border: 1px solid var(--border-btn);
  color: var(--n050);
  padding: 13px 22px;
  transition: border-color 0.15s, color 0.15s;
}
.date-list__cta:hover { border-color: var(--amber); color: var(--amber); }

.newsletter {
  background: var(--amber);
  color: var(--ink);
  padding: var(--sp-card-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-sub);
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.newsletter__title {
  font-family: var(--os);
  font-size: var(--fs-d40);
  line-height: 1;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
}
.newsletter__text { font-size: var(--fs-body); max-width: 44ch; opacity: 0.8; }
.newsletter__form { display: flex; gap: 0; }
.newsletter__input {
  background: var(--ink);
  border: none;
  color: var(--n050);
  font-family: var(--ar);
  font-size: 16px;
  padding: 18px 20px;
  min-width: 0;
  width: clamp(160px, 22vw, 260px);
  outline: none;
}
.newsletter__input::placeholder { color: var(--n500); }
.newsletter__btn {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: var(--fs-btn);
  background: var(--ink);
  color: var(--amber);
  border: none;
  border-left: 1px solid var(--n600);
  padding: 18px 28px;
  cursor: pointer;
  transition: color 0.15s;
}
.newsletter__btn:hover { color: var(--amber-hover); }

/* ==========================================================================
   07 · PRIMJERI U PRIMJENI
   ========================================================================== */
.hero-example { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ink); margin-bottom: var(--sp-card-lg); }
.hero-example__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.55);
}
.hero-example__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23,22,26,0.95) 0%, rgba(23,22,26,0.5) 60%, rgba(23,22,26,0.2) 100%);
}
.hero-example__content {
  position: absolute;
  inset: 0;
  padding: var(--sp-hero-pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 1.8vw, 20px);
}
.hero-example__tag {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-label);
  font-weight: 600;
  background: var(--amber);
  color: var(--ink);
  padding: 8px 14px;
  align-self: flex-start;
}
.hero-example__title {
  font-family: var(--os);
  font-size: var(--fs-hero-ex);
  line-height: 0.94;
  text-transform: uppercase;
  font-weight: 700;
  max-width: 16ch;
}
.hero-example__meta { display: flex; gap: clamp(16px, 3vw, 32px); align-items: center; flex-wrap: wrap; }
.hero-example__date {
  font-family: var(--os);
  font-size: var(--fs-btn-lg);
  letter-spacing: 0.14em;
  color: var(--amber);
  text-transform: uppercase;
}

.slides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--sp-card-lg); }
.slide { aspect-ratio: 16 / 9; padding: var(--sp-slide-pad); display: flex; flex-direction: column; }
.slide--cover { background: var(--ink); justify-content: space-between; }
.slide--cover img { height: clamp(24px, 2.5vw, 30px); width: auto; align-self: flex-start; }
.slide__overline {
  font-family: var(--os);
  font-size: var(--fs-num);
  letter-spacing: 0.24em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.slide__title { font-family: var(--os); font-size: var(--fs-d46); line-height: 0.98; text-transform: uppercase; font-weight: 700; }
.slide__footer { font-size: var(--fs-tiny); color: var(--n400); }
.slide--list { background: var(--n900); border: 1px solid var(--border); gap: 22px; }
.slide--list h3 { font-family: var(--os); font-size: var(--fs-d26); text-transform: uppercase; font-weight: 600; margin: 0; }
.slide__items { display: flex; flex-direction: column; gap: clamp(10px, 1.5vw, 16px); }
.slide__item { display: flex; gap: 18px; align-items: baseline; }
.slide__item span:first-child { font-family: var(--os); color: var(--amber); font-size: var(--fs-body); letter-spacing: 0.1em; }
.slide__item span:last-child { font-size: var(--fs-btn-lg); color: var(--n200); }

.media-examples { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--gap); }

.email-demo { background: var(--n800); border: 1px solid var(--border); }
.email-demo__head { background: var(--ink); padding: 26px 32px; border-bottom: 1px solid var(--border); }
.email-demo__head img { height: 28px; width: auto; }
.email-demo__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--n700); }
.email-demo__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); }
.email-demo__body { padding: 32px; }
.email-demo__overline {
  font-family: var(--os);
  font-size: var(--fs-num);
  letter-spacing: 0.2em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.email-demo__title {
  font-family: var(--os);
  font-size: var(--fs-d32);
  line-height: 1.02;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.email-demo__text { font-size: var(--fs-body); color: var(--text-mut); margin: 0 0 24px; }
.email-demo__footer { padding: 22px 32px; border-top: 1px solid var(--border); font-size: var(--fs-label); color: var(--n500); }

.social-demo { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--ink); }
.social-demo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(0.5);
}
.social-demo__content {
  position: absolute;
  inset: 0;
  padding: var(--sp-social-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.social-demo__content > img { height: 34px; width: auto; align-self: flex-start; }
.social-demo__bar { width: 64px; height: 5px; background: var(--amber); margin-bottom: 20px; }
.social-demo__title { font-family: var(--os); font-size: var(--fs-social); line-height: 0.94; text-transform: uppercase; font-weight: 700; }
.social-demo__thanks {
  font-family: var(--os);
  font-size: var(--fs-body);
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
  margin-top: 16px;
}

/* ==========================================================================
   08 · TON PISANJA
   ========================================================================== */
.tone { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 32px; }
.tone__col { background: var(--n800); padding: var(--sp-card); }
.tone__label {
  font-family: var(--os);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-tiny);
  margin-bottom: 16px;
}
.tone__label--do { color: var(--success); }
.tone__label--dont { color: var(--error); }
.tone__headline { font-family: var(--os); font-size: var(--fs-d26); text-transform: uppercase; line-height: 1.1; margin-bottom: 16px; }
.tone__headline--dont { color: var(--n500); }
.tone__col p { font-size: var(--fs-body); color: var(--text-mut); margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  padding: var(--sp-section) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-sub);
  flex-wrap: wrap;
}
.footer__lockup { height: clamp(56px, 7vw, 76px); width: auto; margin-bottom: 24px; display: block; }
.footer__meta { font-size: var(--fs-small); color: var(--n500); }
.footer__para { width: clamp(84px, 11vw, 120px); aspect-ratio: 1; background: var(--amber); clip-path: polygon(24% 0, 100% 0, 76% 100%, 0 100%); }

/* ==========================================================================
   RASPORED NA MANJIM EKRANIMA (@media samo za raspored)
   ========================================================================== */
@media (max-width: 900px) {
  .type-scale__row { grid-template-columns: 1fr; gap: 8px; }
  .type-scale__spec { text-align: left; }
  .logo-usage { grid-template-columns: repeat(2, 1fr); }
  .media-examples { grid-template-columns: 1fr; }
  .slides { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; }
  .hero-example { aspect-ratio: auto; min-height: 420px; }
  .hero-example__img, .hero-example__scrim { position: absolute; }
  .hero-example__content { position: relative; min-height: 420px; }
}

@media (max-width: 700px) {
  /* info boxovi / statistike u JEDAN stupac na mobitelu */
  .swatches, .func-colors { grid-template-columns: 1fr; }
  .rules, .grid-2, .type-cards, .components-2col, .tone { grid-template-columns: 1fr; }
  .event-cards { grid-template-columns: 1fr; }
  .logo-tiles { grid-template-columns: 1fr; }
  .scale, .scale-legend { grid-template-columns: repeat(4, 1fr); }
  .scale-legend { row-gap: 8px; }
  .grid-demo__cols { grid-template-columns: repeat(6, 1fr); }
  .grid-demo__cols div:nth-child(n+7) { display: none; }
  .date-list__row { grid-template-columns: 1fr; gap: 10px; }
  .date-list__cta { justify-self: start; }
  .table__head, .table__row { grid-template-columns: 1.4fr 1fr; }
  .table__head div:nth-child(n+3), .table__row div:nth-child(n+3) { display: none; }
  .newsletter__form { flex-direction: column; }
  .newsletter__input { width: 100%; }
  .newsletter__btn { border-left: none; border-top: 1px solid var(--n600); }
  .site-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .swatch { min-height: 150px; }
}