/* Kennisbank: overzicht, categorie, artikel en de 404. Alleen daar geladen.

   De tekst volgt de tekstpagina's van de site (pagina-over-ons.css): zelfde
   lettertype, kleuren, koppen en regelafstand. De blog stond eerst in de serif
   (Source Serif 4) en een maat groter dan de rest; Lars wil de blog in de
   huisstijl van de rest van de site (10-09). Het lettertype komt uit body in
   basis.css en wordt hier nergens meer overschreven. De maten hieronder zijn
   die van .phero h1, .psect h2, .psect h3 en .psect p. */

.bl-hero{padding:0 0 2rem;border-bottom:1px solid var(--hair)}
.bl-hero .eyebrow{margin:.6rem 0 0}
.bl-hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:.5rem 0 0;max-width:24ch}
/* Geen max-width in ch meer op lopende tekst (Lars, 10-09): de tekst vult de
   kolom en neemt zo minder hoogte in. De kolom zelf (.bl-smal) blijft. */
.bl-lead{margin:1rem 0 0;color:var(--body);font-size:1.02rem;line-height:1.65}
.bl-sect{padding:2.4rem 0 3rem;border-bottom:1px solid var(--hair)}
.bl-sect h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 1.4rem}
.bl-smal{max-width:820px}

/* Kaartjes */
.bl-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.bl-grid{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.bl-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column}
.bl-card:hover{border-color:var(--green-deep)}
.bl-foto{display:block;aspect-ratio:16/9;background:var(--sunken);overflow:hidden}
.bl-foto img{width:100%;height:100%;object-fit:cover;display:block}
.bl-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.bl-meta{font-size:.76rem;color:var(--muted);margin:0 0 .45rem;letter-spacing:.02em}
.bl-card h2,.bl-card h3{font-size:1.02rem;font-weight:600;line-height:1.35;margin:0 0 .5rem;text-wrap:balance}
.bl-card h2 a,.bl-card h3 a{color:var(--ink);text-decoration:none}
.bl-card h2 a:hover,.bl-card h3 a:hover{color:var(--green-deep)}
.bl-frag{font-size:.9rem;color:var(--body);line-height:1.55;margin:0 0 .9rem}
.bl-lees{margin-top:auto;font-size:.86rem;font-weight:600;color:var(--green-deep);text-decoration:none}
.bl-lees:hover{text-decoration:underline}

/* Paginering */
.bl-sect .pagination,.bl-sect .navigation{margin-top:2rem}
.bl-sect .nav-links{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center}
.bl-sect .page-numbers{display:inline-block;padding:.5rem .85rem;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:.9rem;background:var(--surface)}
.bl-sect a.page-numbers:hover{border-color:var(--green-deep);color:var(--green-deep)}
.bl-sect .page-numbers.current{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.bl-sect .page-numbers.dots{border:0;background:none}
.bl-sect .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Artikel */
.bl-artikel .bl-hero h1{max-width:28ch}
.bl-artikel .bl-meta{font-size:.86rem;margin:.9rem 0 0}
.bl-auteur{color:var(--ink);font-weight:500}
.bl-uitgelicht{margin:0 0 1.8rem}
.bl-uitgelicht img{width:100%;height:auto;border-radius:12px;display:block}
/* De lopende tekst, over de volle breedte van de kolom. Tot 10-09 stond hier
   58ch voor een leesbare regellengte; Lars wil de tekst breed, zie boven. */
.bl-inhoud{font-size:1rem;line-height:1.7;color:var(--body)}
.bl-inhoud p{margin:0 0 .9rem}
/* Tussenkoppen in de maten van de site: de h2 is de sectiekop van een
   tekstpagina, de h3 en h4 zijn die van .psect h3 en .pinhoud h4. De h4 zit
   niet in de kopregel van basis.css en krijgt hier dezelfde kleur en dikte. */
.bl-inhoud h2,.bl-inhoud h3,.bl-inhoud h4{color:var(--ink);font-weight:600;letter-spacing:-.02em;
  margin:1.9rem 0 .6rem;line-height:1.25;text-wrap:balance}
.bl-inhoud h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.bl-inhoud h3{font-size:1.12rem}
.bl-inhoud h4{font-size:1.05rem}
/* Vijftig oude artikelen beginnen met een h2; die hoeft niet nog een keer
   afstand te nemen van de kop erboven. */
.bl-inhoud > h2:first-child{margin-top:0}
.bl-inhoud ul,.bl-inhoud ol{padding-left:1.3rem;margin:0 0 .9rem}
.bl-inhoud li{margin-bottom:.35rem}
/* Links zoals in de antwoorden op de vragenpagina (.pfaq-a a). */
.bl-inhoud a{color:var(--green-deep);font-weight:600}
.bl-inhoud img{max-width:100%;height:auto;border-radius:10px}
.bl-inhoud blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--green-live);color:var(--ink)}
/* Tabellen als .ptab op de tekstpagina's. */
.bl-inhoud table{border-collapse:collapse;width:100%;font-size:.94rem}
.bl-inhoud th,.bl-inhoud td{border-bottom:1px solid var(--hair);padding:.8rem .7rem;text-align:left}
.bl-inhoud th{font-weight:600;color:var(--ink)}
/* Vierendertig artikelen uit 2011 dragen nog <span style="font-size: 13px;
   line-height: 19px;"> uit de oude editor mee. Die maat is kleiner dan de tekst
   eromheen en klopt nergens meer mee; hier overschreven in plaats van al die
   artikelen te bewerken. Afbeeldingen en video's raakt dit niet. */
.bl-inhoud [style*="font-size"]{font-size:inherit!important;line-height:inherit!important}
.bl-inhoud .alignleft,.bl-inhoud .alignright{float:none;margin:0 0 1rem}
.bl-inhoud iframe{max-width:100%}
.bl-tabel{overflow-x:auto}

/* Productblok in de tekst (hooikoortsblog) en de natuurlijke productzin */
.bl-potjes{display:grid;grid-template-columns:1fr;gap:.8rem;margin:1.4rem 0}
@media(min-width:640px){.bl-potjes{grid-template-columns:repeat(3,1fr)}}
.bl-potje{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:var(--surface);font-size:.9rem;line-height:1.5}
.bl-potje b{display:block;font-size:.98rem;color:var(--ink);margin-bottom:.25rem}
.bl-potje a{color:var(--green-deep);font-weight:600;text-decoration:none}
.bl-potje a:hover{text-decoration:underline}
.bl-product{margin:2rem 0 0;padding:1rem 1.1rem;background:var(--green-wash);border-radius:10px;font-size:.95rem;
  line-height:1.6;color:var(--ink)}
.bl-product a{color:var(--green-deep);font-weight:600}
.bl-terug{margin:1.6rem 0 0;font-size:.9rem}
.bl-terug a{color:var(--green-deep);text-decoration:none;font-weight:500}
.bl-meer{background:var(--sunken)}

/* 404 */
.bl-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0}
.bl-knoppen .cta{display:inline-block;width:auto;text-decoration:none}
.bl-knop2{display:inline-block;padding:.98rem 1.1rem;border:1px solid var(--line);border-radius:6px;color:var(--ink);
  text-decoration:none;font-weight:600;background:var(--surface)}
.bl-knop2:hover{border-color:var(--green-deep);color:var(--green-deep)}
.bl-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media(min-width:760px){.bl-pgrid{gap:1.2rem}}
.bl-pcard{display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.9rem;
  text-decoration:none;color:var(--ink)}
.bl-pcard:hover{border-color:var(--green-deep)}
.bl-pfoto{display:block;aspect-ratio:1;background:#fff;border-radius:8px;overflow:hidden;margin-bottom:.7rem}
.bl-pfoto img{width:100%;height:100%;object-fit:contain;display:block}
.bl-pnaam{display:block;font-weight:600;font-size:.92rem;line-height:1.3}
.bl-pregel{display:block;font-size:.8rem;color:var(--muted);margin-top:.25rem}
.bl-pprijs{display:block;margin-top:.5rem;font-weight:700;color:var(--green-deep)}
@media(max-width:639px){.bl-pgrid{grid-template-columns:1fr 1fr}.bl-pgrid .bl-pcard:nth-child(3){grid-column:1/-1}}