/* ===========================
   KriebelNieuws – overzicht
   =========================== */

/* Kleuren & basis */
:root{
  --brand:#d9933d;   /* oranje kader */
  --panel:#5c859b;   /* blauw vlak */
  --ink:#eaf2f6;     /* tekst op blauw */
  --ink-soft:#d7e3ea;
  --muted:#c9d6df;   /* zachte grijs/blauw voor meta */
  --edge:#000;       /* zwarte lijnen */
}

/* Oranje kader om de pagina */
.blog-wrapper{
  width:1200px;
  margin:20px auto;
  background:var(--brand);
  padding:28px 32px 40px;         /* iets dunner kader */
  border-radius:14px;
  border:2px solid var(--edge);
  box-shadow:none;                /* old look */
  box-sizing:border-box;
}

/* Titel bovenaan – GEEN CAPS */
.blog-header{
  padding:24px 12px 8px;
  text-align:center;
}
.blog-header h1{
  margin:0;
  font-size:72px;                 /* groot maar niet schreeuwerig */
  line-height:1.05;
  color:#fff;
  text-transform:none !important; /* expliciet geen caps */
  letter-spacing:0;
}

/* Binnenruimte voor het overzicht */
.blog-overzicht{ padding:0 4px; }

/* Raster – kolomsgewijze kaarten (zoals oud) */
.blog-grid{
  display:flex;
  flex-direction:column;
  gap:28px;                        /* compacter dan 40px */
}

/* Kaart – klikbaar item met blauw vlak en zwarte rand */
.blog-item{
  display:flex;
  align-items:stretch;
  background:var(--panel);
  border:3px solid var(--edge);    /* zwarte lijnen zoals vroeger */
  border-radius:10px;
  overflow:hidden;
  box-shadow:none;
  text-decoration:none;
  color:var(--ink);
  transition:transform .15s ease;
}
.blog-item:hover{ transform:translateY(-1px); }

/* Thumb links, content rechts */
.blog-thumbnail{
  width:50%;
  height:420px;                    /* beeldvullender */
  object-fit:cover;
  display:block;
  background:#000;                 /* voorkomt witte flits bij laden */
}

/* Tekstkolom – consistente topafstand */
.blog-inhoud{
  width:50%;
  padding:48px;                    /* balans met hogere thumb */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-sizing:border-box;
}

/* Reset alle directe children margins: we bepalen ze zelf */
.blog-inhoud > *{ margin:0; }


/* Auteur – subtieler, met automatisch icoon */
.auteur{
  font-size:13px;           /* kleiner */
  font-weight:300;          /* dunner */
  color:#b0bec5;            /* subtieler grijs */
  font-style:normal;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:22px;
}

/* Zet hier je icoon centraal, HTML hoeft dan alleen "Suzanne" te zijn */
.auteur::before{
  content: "🖊️"; /* emoji direct, niet via codepoint escape */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size: 12px;
  opacity: 0.6;
  margin-right: 6px; /* als je dat nog wilt */
}




/* Titel (h2) */
.blog-inhoud h2{
  font-size:30px;                  /* rustiger dan 44px */
  line-height:1.15;
  font-weight:700;
  color:#fff;
  margin-bottom:10px;              /* naar datum */
}

/* Datum – dichter op preview, iets kleiner & zachter */
.datum{
  font-size:16px;
  line-height:1.25;
  color:var(--ink-soft);
  margin-bottom:2px;               /* dichter op p */
}

/* Previewtekst */
.blog-inhoud p{
  font-size:20px;
  line-height:1.45;                /* compacter */
  color:var(--ink);
  /* geen extra margin-top nodig, staat al dicht op datum */
}

/* Alle tekst in de kaart erft kleur en heeft geen onderlijning */
.blog-item *{
  text-decoration:none;
  color:inherit;
}