/* SoundCloud-nummers als raster. Sober: het artwork doet het werk. */

.wsc-sc__intro { max-width: 60ch; }

.wsc-sc__grid {
  display: grid;
  grid-template-columns: repeat(var(--wsc-sc-kolommen, 4), minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 30px);
}

.wsc-sc__kaart { min-width: 0; }

/* Het artwork is de knop. Bij een klik komt de speler ervoor in de plaats; de
   verhouding gaat dan los, want een speler is geen vierkant. */
.wsc-sc__art {
  display: block; width: 100%; aspect-ratio: 1;
  overflow: hidden; margin-bottom: 12px;
  background: var(--wsc-line, rgba(0, 0, 0, .08));
}
.wsc-sc__art.is-geladen { aspect-ratio: auto; }
.wsc-sc__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wsc-sc__tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; background: var(--wsc-accent-bg, rgba(0, 0, 0, .06));
}

.wsc-sc__titel { font-size: 16px; margin: 0 0 4px; line-height: 1.3; text-wrap: pretty; }
.wsc-sc__meta { font-size: 13px; margin: 0; color: var(--wsc-ink-3, #6b7280); }

.wsc-sc__meer { margin-top: clamp(22px, 3vw, 32px); }
.wsc-sc__aantal { opacity: .7; }

@media (max-width: 900px) {
  .wsc-sc__grid { grid-template-columns: repeat(min(var(--wsc-sc-kolommen, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .wsc-sc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wsc-sc__titel { font-size: 15px; }
  /* De knop over de volle breedte: hij is de enige actie onder het raster. */
  .wsc-sc__meer .wsc-btn { display: block; width: 100%; text-align: center; }
}