/* De kennisbank van interieurbeton.nl (27-10-2026). Het thema van SiteJob had de opmaak voor het
   overzicht (archive-card-grid, card) en voor een artikel (resource) al; dit vult aan wat de PHP van
   WordPress vroeger deed en wat de rijke tekst uit het CMS meebrengt. Zie pagina_kennisbank in
   tools/interieurbeton-nl/bouw.py. */

/* De lege staat alleen bij een lege lijst. */
.archive-card-grid:empty { display: none; }
.archive-card-grid:not(:empty) + .empty-state { display: none; }

/* De hele kaart is klikbaar via de link in de titel. */
.archive-card-grid .card-title a { color: inherit; text-decoration: none; }
.archive-card-grid .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.archive-card-grid .card-title a:focus-visible { outline: none; }
.archive-card-grid .card:has(.card-title a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.archive-card-grid .card-meta time { text-transform: none; }
.archive-card-grid .card-type:empty { display: none; }

/* Een artikel zonder hoofdbeeld: geen lege band. */
.card-media:has(img[hidden]), .resource-banner:has(img[hidden]) { display: none; }

/* De kop van een artikel. */
.resource-header .eyebrow-term { margin-left: .7em; padding-left: .7em; border-left: 1px solid var(--resource-line); }
.resource-header .eyebrow-term:empty { display: none; }
.resource-header .byline-name strong { color: var(--white); font-weight: 600; }
.resource-header .byline-detail time,
.resource-header .byline-detail > span { color: var(--white); }

/* Wat de rijke tekst meebrengt. */
.resource .entry-content figure { margin: 36px 0; }
.resource .entry-content figure img { display: block; width: 100%; height: auto; }
.resource .entry-content table { width: 100%; max-width: none; border-collapse: collapse; margin: 0 0 28px; font-size: .95rem; line-height: 1.55; }
.resource .entry-content th,
.resource .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.resource .entry-content th { font-weight: 600; background: var(--white); }
.resource .entry-content blockquote p { margin-bottom: 8px; }
.resource .entry-content blockquote p:last-child { font-family: inherit; font-weight: 400; font-size: .9rem; color: var(--text-soft); }
.resource .kb-terug { margin-top: 48px; }

@media (max-width: 640px) {
  .resource .entry-content table { display: block; overflow-x: auto; }
}