/* ═══════════════════════════════════════════════════════════════
   HARBOR51 - BLOGARCHIEF (home.php)
   Alleen geladen op is_home() — de hoofdlijst met berichten.
   ═══════════════════════════════════════════════════════════════ */

body #content.site-content { padding-top:0 !important; padding-bottom:0 !important; }
.site-content .content-area, #primary.content-area { margin-top:0 !important; margin-bottom:0 !important; }
.entry-header, .page-header { display:none !important; }

.h51-blog-hero, .h51-blog-in { font-family:"Inter",sans-serif; }
.h51-blog-hero *, .h51-blog-hero *::before, .h51-blog-hero *::after,
.h51-blog-in *, .h51-blog-in *::before, .h51-blog-in *::after { box-sizing:border-box; }

/* ─── HERO ─── */
.h51-blog-hero { background:linear-gradient(180deg,#eef4fa 0%,#f8fbfd 60%,#fff 100%);
  border-bottom:1px solid #e2e8f0; padding:88px 0 64px; }
.h51-blog-hero-in { width:min(760px, 100% - 48px); margin:0 auto; text-align:center; }
.h51-blog-hero h1 { font-family:"Montserrat",sans-serif; font-weight:900; font-size:clamp(28px,3.8vw,42px);
  line-height:1.14; letter-spacing:-.025em; color:#0f172a; margin:0 0 14px; }
.h51-blog-lead { font-size:16px; line-height:1.65; color:#475569; margin:0 auto; max-width:520px; }

/* ─── GRID EN KAARTEN ─── */
.h51-blog-in { width:min(1180px, 100% - 48px); margin:0 auto; padding:64px 0 24px; }
.h51-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.h51-blog-kaart { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px rgba(15,23,42,.05); transition:border-color .15s, box-shadow .2s, transform .2s;
  display:flex; flex-direction:column; }
.h51-blog-kaart:hover { border-color:#4192d3; box-shadow:0 10px 28px rgba(15,23,42,.09); transform:translateY(-2px); }

.h51-blog-thumb { display:block; aspect-ratio:16/10; background:#eef4fa; overflow:hidden; }
.h51-blog-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.h51-blog-thumb.geen-afbeelding { background:linear-gradient(135deg,#e8f2fb 0%,#f8fafc 100%); }

.h51-blog-kaart-in { padding:24px 22px 26px; display:flex; flex-direction:column; flex-grow:1; }

.h51-blog-meta { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.h51-blog-badge { display:inline-block; background:#e8f2fb; color:#2c7ab7 !important;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; padding:5px 11px; border-radius:9999px; text-decoration:none !important; }
.h51-blog-badge:hover { background:#d7e9f8; }
.h51-blog-datum { font-family:"Montserrat",sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; }

.h51-blog-titel { font-family:"Montserrat",sans-serif; font-weight:800; font-size:18px; line-height:1.32;
  letter-spacing:-.015em; margin:0 0 12px; }
.h51-blog-titel a { color:#0f172a; text-decoration:none !important; }
.h51-blog-kaart:hover .h51-blog-titel a { color:#2c7ab7; }

.h51-blog-excerpt { font-size:14px; line-height:1.65; color:#64748b; margin:0 0 18px; flex-grow:1; }

.h51-blog-lees { display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:#2c7ab7 !important; text-decoration:none !important; }
.h51-blog-lees svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.h51-blog-kaart:hover .h51-blog-lees svg { transform:translateX(3px); }

/* ─── PAGINERING ─── */
.h51-blog-paginering { display:flex; justify-content:center; margin:56px 0 24px; }
.h51-blog-paginering .nav-links { display:flex; align-items:center; gap:6px; }
.h51-blog-paginering .page-numbers { display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px; border-radius:8px; border:1px solid #e2e8f0;
  background:#fff; font-family:"Montserrat",sans-serif; font-weight:700; font-size:13px;
  color:#475569 !important; text-decoration:none !important; transition:border-color .15s, background .15s; }
.h51-blog-paginering .page-numbers:hover { border-color:#4192d3; color:#2c7ab7 !important; }
.h51-blog-paginering .page-numbers.current { background:#4192d3; border-color:#4192d3; color:#fff !important; }
.h51-blog-paginering .page-numbers.dots { border:none; background:none; }

/* ─── LEGE STAAT ─── */
.h51-blog-leeg { text-align:center; padding:60px 0 80px; color:#64748b; font-size:15px; }

/* ─── SMALLERE SCHERMEN ─── */
@media (max-width:1000px) {
  .h51-blog-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .h51-blog-hero { padding:64px 0 48px; }
  .h51-blog-in { padding:44px 0 16px; }
  .h51-blog-grid { grid-template-columns:1fr; gap:18px; }
}