/* Felles stiler for de offentlige innholdssidene
   (artikler, prosjekter, årsmøter og turtips).

   Lenkes etter tokens.css og før sidens egen <style>, så en side kan overstyre
   enkeltverdier med en regel med samme velger. Overstyr bare det som er ulikt:
   en regel med f.eks. «padding» i sidens grunnstil slår også ut mobilregelen her.
   Meny og bunntekst ligger i layout.css. */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--et-font-body); background: #fff; color: var(--et-text); }
img { display: block; max-width: 100%; }

/* ── Sidebredde og toppfelt ── */
.et-container {
  max-width: 1216px;
  margin: 0 auto;
  padding: 48px 32px;
}
.et-page-hero {
  background: var(--et-lys-stein);
  border-radius: 25px;
  padding: 56px 56px 48px;
  margin-bottom: 40px;
  text-align: center;
}
.et-page-hero h1 {
  font-family: var(--et-font-title);
  font-weight: 800;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -.96px;
  color: var(--et-text);
  margin: 0 0 12px;
}
.et-page-hero p {
  font-family: var(--et-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--et-text-muted);
  max-width: 680px;
  margin: 0 auto;
}

/* ── Rutenett for kort ── */
.et-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
}

/* ── Kort med bilde (artikler og turtips) ── */
.post {
  background: #fff;
  border: 1px solid var(--et-border-light);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.post:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  text-decoration: none;
}
.post-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-title {
  font-family: var(--et-font-title);
  font-weight: 800;
  font-size: 20px;
  line-height: 26px;
  color: var(--et-heading);
  margin-bottom: 10px;
}
.post-excerpt {
  font-family: var(--et-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--et-text-muted);
  margin-bottom: auto;
}

/* ── Tom liste ── */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: var(--et-text-muted);
}
.empty-state .icon { font-size: 64px; margin-bottom: 16px; opacity: 0.4; }

@media (max-width: 780px) {
  .et-container { padding: 32px 16px; }
  .et-page-hero { padding: 40px 28px; border-radius: 18px; }
  .et-page-hero h1 { font-size: 32px; line-height: 40px; }
  .et-page-hero p { font-size: 17px; line-height: 26px; }
  .et-grid { grid-template-columns: 1fr; gap: 20px; }
}