/* Harv — blog index + diensten index (blog.html / diensten.html). Bold editorial list, no cards. */
.harv-boek main.harv-below > section { padding-block: 0; }
/* note: out-specify the `main.harv-below > section { padding-block:0 }` reset above */
.harv-boek main.harv-below > section.bl-hero { padding-block: clamp(54px, 7vw, 104px) clamp(16px, 2.5vw, 30px); }
/* phone/tablet: the floating navbar overlays the page top, so the title needs
   more headroom than the desktop clamp gives it */
@media (max-width: 991px) {
  .harv-boek main.harv-below > section.bl-hero { padding-block-start: 118px; }
}
.bl-hero { text-align: center; }
.bl-hero .sec-h { font-size: clamp(2.4rem, 6vw, 4.2rem); }
/* clean round green dot after the page title ("Blog." / "Diensten.") */
.bl-hero .sec-h .dot {
  display: inline-block; vertical-align: baseline;
  width: .16em; height: .16em; margin-left: .04em;
  border-radius: 50%; background: var(--green);
}
.bl-hero .sec-sub { max-width: 56ch; margin-left: auto; margin-right: auto; }

.bl-list { display: flex; flex-direction: column; border-top: 1px solid rgba(16, 19, 20, .12); margin-top: clamp(20px, 3vw, 34px); padding-bottom: clamp(50px, 8vw, 100px); }
.bl-row { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); padding: clamp(24px, 3.4vw, 42px) 6px; border-bottom: 1px solid rgba(16, 19, 20, .12);
  text-decoration: none; color: #101314; transition: padding-left .4s cubic-bezier(.16,1,.3,1), background-color .3s; }
.bl-row:hover { padding-left: 20px; }
/* hover: a quiet green marker on the title (no big row highlight) */
.bl-row:hover h2 { background: linear-gradient(transparent 62%, #77fb38 0); }
.bl-row .bl-main { flex: 1 1 auto; min-width: 0; }
.bl-row .bl-cat { display: table; font-size: .72rem; font-weight: 700; color: #101314; background: #77fb38; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.bl-row h2 { font-size: clamp(1.7rem, 3.8vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0; color: #101314;
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bl-row .bl-main p { margin-top: 10px; }
.bl-row p { margin: 0; color: #5b6166; font-size: 1.02rem; line-height: 1.5; max-width: 72ch; }
.bl-row .bl-ar { flex: 0 0 auto; font-size: clamp(1.3rem, 2vw, 1.9rem); color: #101314; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.bl-row:hover .bl-ar { transform: translateX(9px); }

@media (max-width: 680px) { .bl-row { gap: 0; } .bl-row .bl-ar { display: none; } }