/* Basestil */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: Arial, sans-serif; background:#fff; color:#000; }

/* Toppmeny */
.topbar { border-bottom:1px solid #000; }
.topbar .container {
  max-width: 1100px; margin:0 auto;
  padding: 10px 20px; display:flex; align-items:center; justify-content:space-between;
}
.topbar .logo { font-weight:bold; text-decoration:none; color:#000; font-size:18px; }
.topbar nav { display:flex; gap:14px; }
.topbar nav a { text-decoration:none; color:#000; padding:8px 10px; border:1px solid #ccc; border-radius:0; }
.topbar nav a:hover, .topbar nav a.active { border-color:#000; }

/* Layout */
.page { max-width:1100px; margin:0 auto; padding:20px; }
.section-title { font-size:20px; margin:10px 0 14px; }

/* Kort/grid for forsiden */
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.card { border:1px solid #eee; padding:12px; }
.card a.title { text-decoration:none; color:#000; font-weight:bold; display:block; margin:8px 0 4px; }
.card .meta { color:#555; font-size:14px; }
.card .badge { display:inline-block; min-width:28px; text-align:center; border:1px solid #ccc; padding:2px 6px; font-size:12px; }

/* Bilde-plassholder / bilde */
.card .img {
  width:100%; height:180px; background:#000; /* svart plassholder */
  display:block; object-fit:cover;
}

/* Responsiv */
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .page { padding:16px; }
}

/* Små hjelpeklasser */
.muted { color:#555; }

/* --- Nytt: bildeopplasting og forhåndsvisning --- */
.img-preview {
  display:block;
  width:100%;
  max-width:480px;
  height:auto;
  border:1px solid #000;
  margin-top:8px;
}

.hidden {
  display:none;
}

.hint {
  font-size:12px;
  color:#333;
  margin-top:4px;
}

.test-image {
  display:block;
  width:100%;
  max-width:800px;
  height:auto;
  object-fit:cover;
  border:1px solid #000;
  margin:0 auto 20px auto;
}