/* Mobile-first (XS = default), jednostavno i jasno */

/* Breakpointi:
   XS: 0 - 575.98px
   SM: 576px - 767.98px
   MD: 768px - 991.98px
   LG: 992px - 1199.98px
   XL: 1200px +
*/

/* Osnovni stilovi (XS) */
* { box-sizing: border-box; }
html,body { margin:0; font-family: Arial, sans-serif; }
body {
  background: #fff;       /* bijela za XS */
  color: #111;            /* tamni tekst za čitljivost */
  padding: 16px;
}
.site-header h1 { margin:0 0 6px; font-size:1.2rem; }
.subtitle { margin:0 0 12px; color:#555; }

/* Grid za kartice (jedan stupac na XS) */
.grid { display:grid; grid-template-columns: 1fr; gap:12px; margin:8px 0 24px; }
.card {
  padding:12px;
  border-radius:8px;
  background: #f0f8ff; /* svijetla kartica */
  border: 1px solid rgba(0,0,0,0.05);
}

/* SM: >=576px — promijeni boje (npr. svjetlo plavo pozadina) */
@media (min-width: 576px) {
  body { background: #f7fbff; color: #082a47; } /* blago plavo tijelo, tamniji tekst */
  .card { background: #e6f0fb; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* MD: >=768px — tablet: drugačija shema boja */
@media (min-width: 768px) {
  body { background: #fff8ef; color: #5a3300; } /* topli ton */
  .card { background: #fff3e0; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* LG: >=992px — desktop: hladna zelena shema */
@media (min-width: 992px) {
  body { background: #f2fff6; color: #064b2b; } /* svijetlo zelena pozadina */
  .card { background: #e8fff0; }
  .grid { grid-template-columns: repeat(3, 1fr); gap:16px; }
}

/* XL: >=1200px — veći desktop: tamnija nijansa */
@media (min-width: 1200px) {
  body { background: #eef3ff; color: #07285b; } /* blijedo plavo */
  .card { background: #e6ecff; }
  .grid { grid-template-columns: repeat(5, 1fr); gap:18px; }
}

/* Print: crno-bijelo tonovi */
@media print {
  /* ukloni boje i forsiraj crno-bijelu čitljivost */
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  body { background: #fff !important; }
  .card { border: 1px solid #000 !important; background: transparent !important; }
  a::after { content: " (" attr(href) ")"; color: #000; }
}