/* Hairtec – Recente blogs (stijl volgt hairtec.nl) */
.htrb{
  --htrb-navy:var(--e-global-color-primary,#223558);
  --htrb-text:#333333;
  --htrb-soft:var(--e-global-color-secondary,#EEEFF2);
  --htrb-radius:20px;
  /* Geen eigen breedte of padding: de Elementor-container bepaalt dat, net als bij de andere secties */
  width:100%;margin:0;padding:0;
  font-family:europa,helvetica,sans-serif;color:var(--htrb-text);box-sizing:border-box;
}
.htrb *,.htrb *::before,.htrb *::after{box-sizing:border-box}
.htrb a,.htrb a:hover,.htrb a:focus{text-decoration:none!important;color:inherit}
.htrb .htrb-post:hover .htrb-title,.htrb .htrb-post:focus .htrb-title{text-decoration:none!important}

.htrb-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.htrb .htrb-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--htrb-navy);margin:0 0 8px;line-height:1.2}
.htrb .htrb-heading{font-family:inherit;font-size:32px;line-height:32px;font-weight:700;letter-spacing:normal;color:var(--htrb-navy);margin:0}

/* Knop: zelfde als Elementor-knop "ALLE BLOGS" */
.htrb .htrb-all{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:20px;border-radius:100px;background:var(--htrb-navy);color:#fff;font-size:12px;line-height:12px;font-weight:400;text-transform:uppercase;white-space:nowrap;transition:background-color .2s}
.htrb .htrb-all:hover,.htrb .htrb-all:focus-visible{background:#5c5c5c;color:#fff}
.htrb-all svg{width:12px;height:12px;flex:none;fill:currentColor}
.htrb-all--foot{display:none!important}

.htrb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Kaart: zelfde kader als de huidige blogkaarten op de site */
.htrb .htrb-post{display:flex;flex-direction:column;min-width:0;background:var(--htrb-soft);border-radius:var(--htrb-radius);overflow:hidden}
.htrb .htrb-post:focus-visible{outline:2px solid var(--htrb-navy);outline-offset:4px;border-radius:var(--htrb-radius)}

.htrb-media{aspect-ratio:3/2;overflow:hidden;background:#e3e5ea}
.htrb-media img{display:block;width:100%;height:100%!important;max-width:none;object-fit:cover;border-radius:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.htrb-post:hover .htrb-media img{transform:scale(1.04)}

.htrb-body{display:flex;flex-direction:column;gap:5px;flex:1;padding:16px 18px 20px}
.htrb-meta{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.3;color:var(--htrb-text)}
.htrb-tag{font-weight:700;color:var(--htrb-navy)}
.htrb-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.htrb .htrb-title{font-family:inherit;margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:normal;color:var(--htrb-navy);overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .htrb-media img{transition:none}
  .htrb-post:hover .htrb-media img{transform:none}
}

/* Tablet en mobiel: swipebare carousel */
@media (max-width:1024px){
  .htrb-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-right:-20px;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .htrb-grid::-webkit-scrollbar{display:none}
  .htrb .htrb-post{flex:0 0 40%;scroll-snap-align:start}
}

/* Mobiel: knop volle breedte onder de carousel (zoals nu op de site) */
@media (max-width:767px){
  .htrb-all--head{display:none!important}
  .htrb-all--foot{display:flex!important;width:100%;margin-top:24px}
  .htrb-grid{margin:0 -20px;padding:0 20px;scroll-padding-left:20px}
  .htrb .htrb-post{flex:0 0 72%;scroll-snap-align:start}
  .htrb .htrb-title{font-size:17px;line-height:22px}
}