:root {
  --bg: #ffffff;
  --text: #222;
  --muted: #666;
  --brand: #c0392b;
  --card: #fafafa;
  --border: #e5e5e5;
  --accent: #2ecc71;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.app { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-size: 28px; margin-top: 12px; }
h2 { font-size: 22px; margin-top: 24px; }
h3 { font-size: 18px; }

main#main-content { padding: 12px 0 40px; }

section { margin-bottom: 28px; }

.loading, .error { padding: 12px; color: var(--muted); }

.grid {
  display: grid;
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-media {
  display: block;
  aspect-ratio: 16/9;
  background: #ddd;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body { padding: 12px; }

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:hover { color: var(--brand); }

.card-text { color: var(--muted); margin: 6px 0 10px; }

.meta { display: flex; gap: 10px; color: var(--muted); font-size: 14px; }

.recipe-thumbnails,
.news-thumbnails,
.forum-thumbnails,
.rating-categories {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Grid-responsivitet */
.recipe-thumbnails > .card,
.news-thumbnails > .card,
.forum-thumbnails > .card,
.rating-categories > .card {
  grid-column: span 12;
}

@media (min-width: 520px) {
  .recipe-thumbnails > .card,
  .news-thumbnails > .card,
  .forum-thumbnails > .card,
  .rating-categories > .card {
    grid-column: span 6;
  }
}

@media (min-width: 900px) {
  .recipe-thumbnails > .card,
  .news-thumbnails > .card,
  .forum-thumbnails > .card,
  .rating-categories > .card {
    grid-column: span 3;
  }

  /* Fremhev første kort i utvalgte og siste nyheter (større) */
  #featured-recipes .recipe-thumbnails > .card:nth-child(1),
  #latest-news .news-thumbnails > .card:nth-child(1) {
    grid-column: span 6;
  }
}

/* 2-kolonne layout for innhold + sidebar */
.layout-2col { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) {
  .layout-2col { grid-template-columns: 3fr 1fr; }
}
.sidebar-col .sidebar-widget {
  background: #fafafa; border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px; margin-bottom: 16px;
}
.ad-inline { margin: 16px 0; }
.ad-placeholder {
  border: 1px dashed #bbb; border-radius: 8px; padding: 18px; text-align: center; color: #777; background: #fff;
}

.tags {
  margin-top: 8px;
}
.tag {
  display: inline-block;
  background: #eee;
  color: #333;
  font-size: 13px;
  padding: 4px 8px;
  margin: 2px;
  border-radius: 12px;
}

.rating-stars {
  margin-top: 8px;
  color: #f1c40f;
  font-size: 18px;
}
.rating-stars .star {
  opacity: 0.4;
}
.rating-stars .star.filled {
  opacity: 1;
}

.tags {
  margin-top: 8px;
}
.tag {
  display: inline-block;
  background: #eee;
  color: #333;
  font-size: 13px;
  padding: 4px 8px;
  margin: 2px;
  border-radius: 12px;
}

.rating-stars {
  margin-top: 8px;
  color: #f1c40f;
  font-size: 18px;
}
.rating-stars .star {
  opacity: 0.4;
}
.rating-stars .star.filled {
  opacity: 1;
}
/* Footer/header og navbar kan bruke egne komponent-stiler om ønskelig */