/* ==========================================================================
   page-artikelen.css : /artikelen (kennisbank-overzicht), ontwerp opus.
   Alleen wat specifiek is voor deze pagina; componenten komen uit voltoo-ui.css.
   ========================================================================== */

/* Kop */
.artikelen-hero { padding-bottom: var(--space-48); }
.artikelen-hero .vt-lead { margin-top: var(--space-16); }

/* Zoekvelden (kop en menu): witte invoer met rand en zoekicoon, zelfde stijl als de zoekbalk */
.vt-art-search,
.vt-art-side-search { position: relative; }
.vt-art-search { margin-top: var(--space-32); max-width: 560px; }
.vt-art-search > .vt-svg,
.vt-art-side-search > .vt-svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.vt-art-search .vt-search-input::-webkit-search-decoration,
.vt-art-search .vt-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vt-art-side-search { margin-top: var(--space-16); }
.vt-art-side-search > .vt-svg { left: 14px; width: 16px; height: 16px; }
.vt-art-side-search .vt-search-input { min-height: 44px; padding-left: 40px; font-size: 15px; }

/* Uitgelicht: datum en "Nieuw" op de artikelkaart */
.vt-art-featured { margin-top: var(--space-32); row-gap: var(--space-24); }
.vt-article-media { position: relative; }
.vt-art-new { position: absolute; top: 12px; left: 12px; padding: 5px 8px; background: var(--color-text); color: var(--color-surface); border-radius: var(--radius); font: 600 12px/1.2 var(--font-body); }
.vt-art-date { display: block; padding: 6px 22px 0; font-size: 13px; line-height: 1.4; color: var(--color-text-soft); }

/* Alle artikelen: menu links (sticky), blokken rechts.
   Het menu begint op de hoogte van de eerste foto, niet van de bloktitel:
   padding = regelhoogte bloktitel (22px x 1.3) + ruimte tot de kaarten (16px). */
.vt-art-index { margin-top: var(--space-32); }
.vt-art-side { padding-top: calc(22px * 1.3 + var(--space-16)); }
.vt-art-side-inner { position: sticky; top: calc(var(--vt-header-h) + 24px); }
/* Tekstlinks met dezelfde maten als het oude menu: regelhoogte 3.6em, actief = vet + streepje van 74px */
.vt-art-nav { display: flex; flex-direction: column; margin-bottom: var(--space-8); }
.vt-art-nav a { position: relative; display: block; font: 400 16px/3.6em var(--font-body); color: var(--color-text); transition: font-weight 200ms ease; }
.vt-art-nav a:first-child { margin-top: -21px; }  /* bovenkant tekst gelijk met bovenkant foto */
.vt-art-nav a:hover,
.vt-art-nav a.is-active { font-weight: 600; }
.vt-art-nav a.is-active::after { content: ""; position: absolute; left: 0; bottom: 0.4em; width: 74px; height: 2px; background: var(--color-accent); }

.vt-art-block { scroll-margin-top: calc(var(--vt-header-h) + 24px); }
.vt-art-block + .vt-art-block { margin-top: var(--space-48); }
.artikelen-anchor { display: block; scroll-margin-top: calc(var(--vt-header-h) + 24px); }
.vt-art-block-title { font-size: 22px; }
.vt-art-empty { margin-top: var(--space-16); font-size: 16px; }
.vt-art-noresults { margin-top: 0; }

/* Artikelkaart in de lijst: foto 16:9 (of merklogo, zwart op lichtgrijs), titel, datum */
.vt-acards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--space-16); }
.vt-acard {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--vt-line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-text);
  transition: border-color var(--vt-t);
}
.vt-acard:hover { border-color: var(--color-text); }
.vt-acard-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-medium); }
.vt-acard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vt-t-img); }
.vt-acard:hover .vt-acard-media img { transform: scale(1.04); }
.vt-acard-media--logo { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--vt-page); border-bottom: 1px solid var(--vt-line); }
.vt-acard-media--logo img { width: auto; height: auto; max-width: 60%; max-height: 50%; object-fit: contain; filter: brightness(0); }
.vt-acard:hover .vt-acard-media--logo img { transform: none; }
.vt-acard-title { padding: 14px 16px 0; font: 600 16px/1.4 var(--font-body); }
.vt-acard-brand { font-weight: 700; }
.vt-acard-date { display: block; margin-top: auto; padding: 8px 16px 14px; font-size: 13px; color: var(--color-text-soft); }

@media (max-width: 1024px) {
  /* Menu wordt een horizontale rij tekstlinks boven de artikelen, zoekveld eronder */
  .vt-art-side { grid-column: 1 / -1; padding-top: 0; }
  .vt-art-content { grid-column: 1 / -1; }
  .vt-art-side-inner { position: static; }
  .vt-art-nav { flex-direction: row; gap: 24px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .vt-art-nav::-webkit-scrollbar { display: none; }
  .vt-art-nav a { flex-shrink: 0; white-space: nowrap; line-height: 3em; }
  .vt-art-nav a.is-active::after { width: 100%; }
  .vt-art-nav a:first-child { margin-top: 0; }
  .vt-art-side-search { margin-top: var(--space-16); }
  .vt-art-content { margin-top: var(--space-32); }
}
@media (max-width: 768px) {
  .vt-acards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vt-acard-title { padding: 12px 12px 0; font-size: 15px; }
  .vt-acard-date { padding: 6px 12px 12px; }
  .vt-art-block + .vt-art-block { margin-top: var(--space-32); }
}
@media (max-width: 480px) {
  .vt-acards { grid-template-columns: minmax(0, 1fr); }
}