/* kamelo.eu/news: een raster van kaarten zoals openai.com/news. Titel links, filters eronder, per bericht een
   pastelvlak met de versie, daaronder titel, één regel en soort + datum. De kaarten maakt tools/news.mjs. */
.nw { max-width: var(--wide); margin: 0 auto; padding: 150px var(--gutter) 96px; }
.nw h1 { font-size: var(--h1); font-weight: var(--hw); letter-spacing: var(--track); line-height: 1.02; margin: 0; }

.nw-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 34px 0 0; }
.nw-tabs button { font: inherit; font-size: 17px; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; transition: color .2s; }
.nw-tabs button:hover, .nw-tabs button[aria-pressed="true"] { color: var(--ink); }
.nw-tabs button:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: 4px; }
html:not(.js) .nw-tabs { display: none; }

.nw-grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 24px; }
.nw-card[hidden] { display: none; }
.nw-card a { display: block; color: inherit; text-decoration: none; }
.nw-art { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; overflow: hidden; color: #1d1d1f;
  transition: transform .5s var(--ease); }
.nw-art span { font-size: clamp(34px, 4.4vw, 64px); font-weight: var(--hw); letter-spacing: var(--track); padding: 0 12%; text-align: center; line-height: 1.05; }
.nw-card a:hover .nw-art { transform: scale(.985); }
.nw-card a:focus-visible { outline: 2px solid var(--action); outline-offset: 6px; border-radius: 8px; }
.nw-card h2 { text-align: left; font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; margin: 18px 0 0; text-wrap: balance; }
.nw-card a:hover h2 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nw-card p { text-align: left; color: var(--muted); font-size: 15px; line-height: 1.45; margin: 6px 0 0; }
.nw-meta { display: flex; gap: 10px; margin-top: 12px; font-size: 14px; }
.nw-meta span { color: var(--ink); }
.nw-meta time { color: var(--muted); }

/* Pasteltinten, net als de rest van de site: elke kaart een eigen tint. */
.nw-art.a1 { background: radial-gradient(90% 80% at 20% 15%, #eef6ff, transparent 60%), linear-gradient(140deg, #bcdcff, #93c7ff); }
.nw-art.a2 { background: radial-gradient(90% 80% at 80% 15%, #f3f0ff, transparent 60%), var(--p-lilac); }
.nw-art.a3 { background: radial-gradient(90% 80% at 20% 85%, #f0fbf5, transparent 60%), var(--p-mint); }
.nw-art.a4 { background: radial-gradient(90% 80% at 80% 85%, #fff4ec, transparent 60%), var(--p-peach); }
.nw-art.a5 { background: radial-gradient(90% 80% at 20% 15%, #fffaf0, transparent 60%), var(--p-sand); }
.nw-art.a6 { background: radial-gradient(90% 80% at 80% 15%, #fff3f8, transparent 60%), var(--p-pink); }

.nw-more { margin: 80px 0 0; color: var(--muted); font-size: 15px; }
.nw-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) { .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; } }
@media (max-width: 600px) {
  .nw { padding-top: 112px; }
  .nw-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
  .nw-tabs button { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .nw-art { transition: none; } .nw-card a:hover .nw-art { transform: none; } }
@media (max-width: 560px) { .nw-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 20px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; } .nw-tabs::-webkit-scrollbar { display: none; } .nw-tabs button { flex: none; } }