/**
 * Opmaak voor de items die uit de editor komen, in de stijl van de bestaande
 * kaarten op blog.html en press.html zodat nieuw en oud naast elkaar niet
 * uit de toon vallen.
 */

.feed-section { max-width: 1180px; margin: 0 auto; padding: 0 max(5vw, 24px) 60px; }
.feed-heading {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
  color: var(--yillo-dark);
}

.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.feed-card {
  display: flex;
  flex-direction: column;
  background: var(--yillo-card);
  border: 1px solid var(--yillo-border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.feed-card:hover { border-color: color-mix(in srgb, var(--yillo-accent) 40%, transparent); transform: translateY(-2px); }

.feed-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--yillo-primary) 8%, transparent); }
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.feed-card:hover .feed-thumb img { transform: scale(1.04); }

.feed-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.feed-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.feed-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yillo-accent-text);
  background: var(--yillo-tint);
  padding: 4px 10px;
  border-radius: 6px;
}
.feed-date { font-size: 0.76rem; color: var(--yillo-muted); }

.feed-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  color: var(--yillo-dark);
}
.feed-body p {
  font-family: var(--yillo-font-read);
  font-size: 0.88rem;
  color: var(--yillo-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 18px;
}
.feed-link { font-size: 0.78rem; font-weight: 700; color: var(--yillo-accent-text); }

/* Video's: de speler staat centraal, tekst eronder. */
.feed-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; }
.feed-video h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 16px 0 8px;
  color: var(--yillo-dark);
}
.feed-video p {
  font-family: var(--yillo-font-read);
  font-size: 0.88rem;
  color: var(--yillo-muted);
  line-height: 1.7;
}
.feed-video .post-video { margin: 0; }