/* NF2 — Artikeloverzicht (cream). Paper-kaarten op cream MET previewbeeld
   (Timo 2026-07-21): elke kaart draagt bovenaan (featured: links) een editoriale
   fal.ai-previewfoto uit assets/images/blog/. Vervangt de eerdere beeldloze
   typografische kaarten (de oude WP-beelden waren generieke Canva/stock en
   cohereerden niet). Iets grotere titel/excerpt-maat (Timo: "die font iets
   groter"). Uitgelicht = nieuwste artikel, horizontale foto-links-layout. Hele
   kaart klikbaar via stretched-link op het titel-anker (één echt anker per kaart). */

.nf-index { padding-block: var(--space-section); }

/* ---------- Kaart-DNA ---------- */

.nf-card {
  position: relative; /* draagvlak voor de stretched-link */
  display: flex;
  flex-direction: column;
  padding: 0;              /* padding leeft nu op .nf-card-body; foto bleedt full-bleed */
  overflow: hidden;        /* clipt de foto op de r-md-hoeken */
  color: var(--text-body);
  transition: transform .18s ease, box-shadow .18s ease;
}

.nf-card:hover,
.nf-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
}

/* Previewbeeld: full-bleed boven de copy; vaste 16/10-verhouding = kaarten even
   hoog beeld. Subtiele zoom-in op hover, meebewegend met de kaart-lift. */
.nf-card-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sand-100); /* rustige placeholder tot de foto laadt */
}

.nf-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.nf-card:hover .nf-card-media img,
.nf-card:focus-within .nf-card-media img { transform: scale(1.04); }

/* Copy-blok onder/naast het beeld. flex:1 zodat "Lees artikel" onderin blijft. */
.nf-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
}

.nf-card-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Scheidingspunt tussen thema en datum */
.nf-card-datum::before {
  content: "·";
  margin-right: 10px;
  color: var(--orange-500);
}

.nf-card-titel {
  font-size: 1.4rem; /* Timo 2026-07-21: iets groter (was 1.25rem) */
  line-height: 1.1;
  color: var(--text-strong);
  margin-bottom: 12px;
  max-width: 17em;
}

.nf-card-titel a {
  color: inherit;
  text-decoration: none;
}

/* Stretched-link: de hele kaart klikt, het titel-anker blijft het enige anker */
.nf-card-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.nf-card-titel a:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
}

.nf-card-excerpt {
  font-size: 1rem; /* Timo 2026-07-21: iets groter (was .9375rem) */
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 52ch;
}

.nf-card-lees {
  margin-top: auto; /* onderin, kaarten even hoog */
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .12em;
  padding-bottom: 3px;
  color: var(--text-strong);
}

.nf-card:hover .nf-card-lees { color: var(--orange-600); }

/* ---------- Uitgelicht (nieuwste): foto links, copy rechts ---------- */

.nf-card--featured {
  flex-direction: row;      /* horizontale split op desktop */
  align-items: stretch;
  margin-bottom: var(--gap-sm);
}

.nf-card--featured .nf-card-media {
  flex: 0 0 46%;
  aspect-ratio: auto;       /* vult de kaarthoogte i.p.v. vaste ratio */
  min-height: 320px;
}

.nf-card--featured .nf-card-body {
  flex: 1;
  justify-content: center;  /* copy verticaal gecentreerd naast de grote foto */
  padding: clamp(30px, 3.5vw, 52px) clamp(28px, 3.5vw, 52px);
}

.nf-card--featured .nf-card-titel {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  max-width: 18em;
}

.nf-card--featured .nf-card-excerpt {
  font-size: 1.0625rem;
  max-width: 52ch;
}

/* ---------- Grid ---------- */

.nf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-sm);
  align-items: stretch;
}

.nf-grid > li { display: flex; }
.nf-grid .nf-card { flex: 1; }

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobiel ---------- */

@media (max-width: 860px) {
  /* Featured stapelt: foto boven, copy eronder (zoals de grid-kaarten). */
  .nf-card--featured { flex-direction: column; }
  .nf-card--featured .nf-card-media {
    flex: none;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .nf-card--featured .nf-card-body { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .nf-grid { grid-template-columns: 1fr; }
  .nf-card-body { padding: 24px 22px 26px; }
  .nf-card--featured .nf-card-titel { font-size: 1.5rem; }
  .nf-card--featured .nf-card-excerpt { font-size: 1rem; }
}