/* Overzicht: filterpillen en mozaïek */
main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; display: grid; gap: 10px; }
.bronnen { margin-bottom: 8px; }

/* Mozaïek: 6 kolommen, patroon van 8 tegels herhaalt */
.mozaiek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; gap: 14px; }
.tegel { grid-column: span 2; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 18px 20px 20px; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; background: var(--brand); color: #fff; isolation: isolate; transition: border-color .15s ease; }
.tegel:hover { border-color: var(--accent); }
.tegel.t0 { grid-column: span 4; grid-row: span 2; }
.tegel.t3, .tegel.t4 { grid-column: span 3; }
/* Duotone: grijs beeld, vermenigvuldigd met het oranje van de tegel */
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; z-index: -2; transition: transform .5s ease; }
.tegel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 15, 19, .94) 0%, rgba(12, 15, 19, .55) 42%, rgba(12, 15, 19, 0) 75%); }
.tegel:hover img { transform: scale(1.04); }
.tegel.zonder { background: var(--tegel); }
.tegel.zonder::before { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 90, 31, .26), transparent 60%); }
.tegel h2 { margin: 4px 0 0; font-weight: 700; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.tegel.t0 h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; }
.tegel.t3 h2, .tegel.t4 h2 { font-size: 1.25rem; }
/* De hele tegel is klikbaar via de kop; de bronnen eronder blijven eigen links */
.strek::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tegel:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wie { margin: 0; font-size: 13px; font-weight: 600; color: #ffa37a; }
.samen { margin: 12px 0 0; max-width: 54ch; font-size: 1rem; color: rgba(255, 255, 255, .86); }
.ook { position: relative; z-index: 2; margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); }
.ook a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.ook a:hover { text-decoration-color: #fff; }

.leeg { grid-column: 1 / -1; margin: 40px 0; font-size: 1.1rem; color: var(--muted); max-width: 40ch; }

/* Tablet: 4 kolommen */
@media (max-width: 1000px) {
  .mozaiek { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tegel, .tegel.t3, .tegel.t4 { grid-column: span 2; }
  .tegel.t0 { grid-column: span 4; grid-row: span 1; min-height: 380px; }
  .tegel.t7 { grid-column: span 4; }
}
/* Telefoon: één kolom, filterpillen scrollen zijwaarts */
@media (max-width: 600px) {
  main { padding: 14px 12px 48px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .mozaiek { grid-template-columns: 1fr; gap: 12px; grid-auto-rows: minmax(190px, auto); }
  .tegel, .tegel.t0, .tegel.t3, .tegel.t4, .tegel.t7 { grid-column: span 1; }
  .tegel.t0 { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { .tegel img { transition: none; } }