/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700&display=swap');

:root{
  --brand:#d9933d;   /* oranje rand */
  --panel:#5c859b;   /* blauw vlak */
  --ink:#eaf2f6;     /* tekst op blauw */
  --ink-soft:#d7e3ea;
  --muted:#b7c8d1;
  --edge:#000;
}

/* ---------- Basis ---------- */
body{
  background:#fff;
  color:#333;
  font-family:'Lato',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.6;
}

/* ---------- Shell ---------- */
.post-shell {
  width:1200px;   /* was 980px */
  margin:40px auto 80px;
  padding:22px;
  background:var(--brand);
  border:2px solid var(--edge);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}


.post-card{
  background:var(--panel);
  border:2px solid var(--edge);
  border-radius:8px;
  padding:40px;
  color:var(--ink);
}

/* ---------- Meta ---------- */
.post-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}

.post-meta .author{
  font-size:13px;
  font-weight:300;
  color:var(--muted);
}

.post-meta .author::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 */
}


/* ---------- Titels ---------- */
.post-title{
  font-weight:600;
  font-size:40px;
  line-height:1.2;
  color:#fff;
  margin:6px 0 14px;
  letter-spacing:0;
  text-transform:none !important; /* override eventuele CAPS */
}

.post-date{
  font-weight:600;
  font-size:16px;
  color:var(--ink-soft);
  margin:0 0 18px;
}

/* ---------- Tekst ---------- */
.post-card .post-content{
  font-size:25px;
  line-height:1.2;
  max-width:none;
  font-weight:300;
  letter-spacing:0;
}

.post-card .post-content p,
.post-card .post-content li,
.post-card .post-content blockquote,
.post-card .post-content a,
.post-card .post-content strong,
.post-card .post-content em{
  font-size:inherit;
  line-height:inherit;
}

.post-card .post-content p{ margin:12px 0 14px; }

/* cursief subtiel, met ‘ ’ */
.post-card .post-content em{
  color:var(--ink-soft);
  font-style:italic;
  font-weight:300;
}
.post-card .post-content p em{
  display:block;
  margin:8px 0 6px;
}

/* ---------- Headings binnen posts ---------- */
.post-card .post-content h1,
.post-card .post-content h2,
.post-card .post-content h3,
.post-card .post-content h4,
.post-card .post-content h5,
.post-card .post-content h6{
  font-family:'Lato',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-transform:none;
  letter-spacing:0;
  color:#fff;
  line-height:1.25;
  margin:16px 0 8px;
}

.post-card .post-content h2,
.post-card .post-content .h2{
  font-weight:700;
  font-size:28px;
  margin:24px 0 8px;
}

/* Kleine subtekst */
.small{ font-size:14px; color:var(--muted); }

/* ---------- Blockquote ---------- */
blockquote{
  margin:14px 0;
  padding-left:14px;
  border-left:3px solid rgba(255,255,255,.45);
  color:var(--ink);
  font-style:italic;
}

/* ---------- Afbeeldingen ---------- */
.post-card .post-content img{
  display:block;
  width:75%;
  height:auto;
  margin:16px auto;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  border:2px solid rgba(0,0,0,.4);
}

/* ---------- Terugknop ---------- */
.back-wrap{ text-align:center; margin-top:28px; }
.back{
  display:inline-block;
  font-size:18px;
  font-weight:600;
  color:#222;
  text-decoration:none;
  background:#fff;
  border:2px solid #222;
  padding:10px 16px;
  border-radius:10px;
  transition:transform .08s ease, background .12s ease;
}
.back:hover{ background:#222; color:#fff; transform:translateY(-1px); }



/* ---------- Typo-consistentie ---------- */
.post-card,
.post-card *{
  font-family:'Lato',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Collage: 2 of 3 kolommen, even breed als losse foto ---------- */
.post-card .post-content .collage-2,
.post-card .post-content .collage-3{
  width: 75%;           /* zelfde breedte als losse img */
  margin: 20px auto;    /* netjes centreren in het blauwe vlak */
  display: grid;
  gap: 10px;            /* afstand tussen de tegels */
}

/* kolommen kiezen */
.post-card .post-content .collage-2{ grid-template-columns: repeat(2, 1fr); }
.post-card .post-content .collage-3{ grid-template-columns: repeat(3, 1fr); }

/* Belangrijk: override de algemene img-regel binnen de collage */
.post-card .post-content .collage-2 img,
.post-card .post-content .collage-3 img{
  width: 100%;          /* vul het gridvak volledig */
  height: auto;
  margin: 0;            /* GEEN extra marge (overrulet 16px auto) */
  aspect-ratio: 1 / 1;  /* nette, gelijke tegels; wil je vierkant: 1/1 */
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  border: 2px solid rgba(0,0,0,.4);
}