/* Nieuws van Ordergo voor de klant (nieuws.html, js/nieuws.js), naar het voorbeeld van
   VWA Insights: de lijst als kaartjes en één bericht met terug-link, meta, titel en tekst.
   Kleuren uit dashboard.css; lettergroottes (12 / 14 / 16 / 24 / 32) en afstanden (4 / 8 / 12 / 16 / 20 / 24 / 48)
   op de schaal van de styleguide; het label "Nieuw" is de .badge-info (dashboard.css). */

.nieuws-pagina { max-width: 960px; }

/* de kaartjes: de lijst op /nieuws en "Meer nieuws" onder een bericht */
.nieuws-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.nieuws-kaartje {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.nieuws-kaartje:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.nieuws-kaartje:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nieuws-kaartje time { font-size: 12px; color: var(--text-secondary); }
.nieuws-kaartje h2, .nieuws-kaartje h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.nieuws-kaartje p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.nieuws-verder { margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-primary); }
/* de paginatitel is een h1 in de gewone paginakop */
.nieuws-titel { margin: 0; font-size: 32px; font-weight: 700; color: var(--text-primary); }
.nieuws-leeg { font-size: 14px; color: var(--text-secondary); }
.nieuws-paginering { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; font-size: 14px; color: var(--text-secondary); }
.nieuws-paginering .btn-secondary { text-decoration: none; }

/* één bericht */
.nieuws-terug { display: inline-block; margin-bottom: 20px; font-size: 14px; color: var(--text-secondary); text-decoration: none; }
.nieuws-terug:hover { color: var(--text-primary); }
.nieuws-terug:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nieuws-artikel { max-width: 720px; }
.nieuws-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.nieuws-artikel h1 { margin: 12px 0 20px; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.nieuws-tekst-vol { font-size: 16px; line-height: 1.7; color: var(--text-primary); }
.nieuws-tekst-vol p + p { margin-top: 16px; }
.nieuws-meer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.nieuws-meer h2 { margin: 0 0 16px; font-size: 24px; font-weight: 600; color: var(--text-primary); }

@media (max-width: 640px) {
  .nieuws-artikel h1 { font-size: 24px; }
}