/* ─────────────────────────────────────────────────────────────────────────
   MODULE:        apps/site (marketingsite)
   DOET:          De stijl van het blog, en alleen van het blog: het overzicht
                  op /blog/ en het sjabloon van een stuk op /blog/<slug>. Sinds
                  29 september 2026 (de eigenaar: "dat het niet alleen werkt als blog
                  maar ook als landingspagina's dat het converteert") is dat
                  sjabloon een landingspagina: een hero met kop, één zin en
                  twee knoppen, korte blokken die elk met hun kop openen (geen
                  label erboven), een oproep halverwege, en de donkere
                  slotband van de rest van de site als afsluiter.

   CONNECTS:      public/blog/index.html, public/blog/<slug>.html ──▶ link
                                        rel=stylesheet, NA site.css
                  public/assets/site.css ──▶ levert wat hier bewust NIET staat:
                                        de tokens, .btn en zijn varianten,
                                        .cta-pair, .page__title, .page__lead,
                                        .dark-band met zijn kinderen, de kop
                                        en de voet
                  tools/blog.test.mjs ──▶ elke selector begint met .blog of
                                        .post, een gedeelde klasse alleen van
                                        de lijst GEDEELD daar, geen afgeschafte
                                        vorm, geen pagina buiten public/blog/
                                        laadt dit bestand, en site.css draagt
                                        geen regel voor het blog meer

   STAAT HIER EN NIET IN SITE.CSS, en dat is geen smaak. De eigenaar wil dat
   pagina's los van elkaar staan, zodat een kleine wijziging niets breekt.
   Andere rondes veranderen site.css tegelijk met deze; een blogregel
   daarin is een botsing bij het samenvoegen en een kans dat een wijziging
   aan het blog een andere pagina raakt. Dit bestand laadt alleen op het
   blog, dus een regel hier raakt per definitie geen andere pagina. Tot 29
   september 2026 (commit 964abe4) stond het als blok "blog" onderaan
   site.css.

   SAFE TO EDIT:  Ja. Elke selector begint met een blogcontainer (.blog of
                  .post, de toets eist het), dus een regel hier raakt geen
                  pagina buiten het blog. BINNEN het blog mag een regel wel
                  bewust een gedeeld onderdeel van site.css bijstellen, zoals
                  .post-knoppen .btn en .post-slot .dark-band__title
                  hieronder; de gedeelde klassen die dat mogen staan in
                  GEDEELD in tools/blog.test.mjs (.btn, .dark-band__title,
                  .dark-band__cta), en een nieuwe erbij is een bewuste keuze
                  die daar begint. Wat de toets NIET tegenhoudt: een regel
                  als .post .btn die elke knop op het blog anders maakt.
                  Verander je dit bestand, hoog dan de ?v= op in de head van
                  elke pagina onder public/blog/ (nu lp3).
   BREAKS IF:     Er een schaduw, een volronde hoek op tekst, een
                  hoofdletterlabel of amber in komt: de vormregels van
                  CLAUDE.md en README (De ontwerpbron). De afsluiter is de
                  .dark-band van site.css; zijn slotstreep (de kloofregel,
                  navy en amber) zet .post-slot::after hieronder op één
                  kleur navy, want het blog heeft geen amber.

   DE MATEN. Een leeskolom van 680px tekst (728 met de goot), net als
   /privacy. Lopende tekst 17px op 1,7, ongeveer 65 tekens per regel in
   Poppins. De hero staat in dezelfde kolom, links uitgelijnd, zodat kop,
   zin en knoppen op één lijn beginnen met de tekst eronder. Een blok
   begint met een haarlijn en meteen zijn kop in Montserrat 700, zonder
   label erboven (geen eyebrow: docs/09-design-system.md, de kop staat er
   zelf); de oude tussenkoppen zijn daarbinnen h3. Een kop die links staat
   breekt met pretty en niet met balance: balance knipt een kop van twee
   regels in twee halve, en op 1440 stond dan de ene blokkop op de volle
   breedte en de volgende op de halve (personapanel 29 sep 2026, twee van
   de vier zagen het als een ander sjabloon). Een blokkop past op 1440 op
   één regel; tools/blog.test.mjs houdt hem op hooguit MAX_BLOKKOP (40)
   tekens. Daarom is hij 30px en niet 31: gemeten in Chromium op 1440 was
   "Your setup decides what ChatGPT Ads sees" (40 tekens) op 31px 678 van
   de 680 pixels breed, op het randje; op 30px is dat 656. Balance
   blijft waar de kop gecentreerd staat (de slotband) of de hero is.
   Een opsomming heeft geen bolletjes (besluit 9, 23 sep 2026) maar een
   haarlijn tussen de regels. De oproep halverwege is een wit vel met een
   rand van 1px, plat, zoals een kaart op /integrations.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Het overzicht op /blog/ ──────────────────────────────────────────── */

.blog { max-width: 728px; padding-top: 96px; padding-bottom: 128px; }
/* De basis zet alleen ul terug (geen bolletjes, geen inspringing); een ol
   houdt in elke browser zijn eigen nummer en 40px links. Zonder deze regel
   stond er op 1440 "1." voor de enige titel in het overzicht en "1. 1"
   voor elke stap (gemeten 29 sep 2026). */
.blog-list, .post__steps { margin: 0; padding-left: 0; list-style: none; }

.blog-list { margin-top: 48px; border-top: 1px solid var(--line); }
.blog-item { padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.blog-item__title { font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; text-wrap: balance; }
.blog-item__title a { color: var(--navy-900); }
.blog-item__title a:hover { color: var(--navy-600); }
.blog-item__summary { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-600); }
.blog-item__meta { margin-top: 12px; font-size: 14px; color: var(--ink-600); }
.blog__cta { margin-top: 40px; }

/* ── Het sjabloon van een stuk ────────────────────────────────────────── */

/* De kolom. Geen .container: die is 1120 breed, en de slotband onderaan
   moet juist van rand tot rand, dus main zelf is geen kolom. */
.post__artikel {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: 96px;
}

/* De hero: de regel met Blog, datum en leestijd, de kop, één zin, twee
   knoppen. Niets anders; de eerste blik is een landingspagina. */
.post-hero { padding-top: 80px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.post__meta { font-size: 14px; color: var(--ink-600); }
.post__title {
  margin-top: 14px;
  font-size: clamp(32px, 4.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: balance;
}
.post__lead { margin-top: 20px; max-width: 34em; font-size: 19px; line-height: 1.55; color: var(--ink-600); }

/* Twee knoppen naast elkaar, even hoog. Op een telefoon onder elkaar en
   rand tot rand (.btn--hero doet dat daar al in site.css; .btn--mid krijgt
   het hieronder). */
.post-knoppen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.post-hero .post-knoppen { margin-top: 32px; }
/* De proefregel onder de twee knoppen, zoals .hero__note op de homepage:
   wat een klik kost staat naast de knop en niet pas in de afsluiter. Het
   personapanel van 29 sep 2026 zocht het alle vier (creditcard, wat na de
   proef) en vond het pas op het laatste scherm. */
.post-hero__note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-600); }

/* Een blok: probleem, waarom de huidige opzet het mist, wat Sightwick
   dicht. De kop is het scanbare deel; wie leest, leest eronder. */
.post-blok { padding-top: 48px; }
/* Een haarlijn tussen twee blokken; na de oproep niet, want het vel van de
   oproep scheidt al (op 1440 stond er anders een lijn 16px onder de kaart). */
.post-blok + .post-blok { margin-top: 16px; border-top: 1px solid var(--line); }
.post-blok__title {
  margin-top: 0;
  font-size: clamp(25px, 2.8vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: pretty;
}
.post__body h3 {
  margin-top: 36px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: pretty;
}
.post__body p { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--ink-900); }
.post-blok__title + p, .post-blok__title + .post__steps { margin-top: 18px; }
.post__body h3 + p, .post__body h3 + .post__list { margin-top: 12px; }
/* Een parameternaam als utm_source=chatgpt.com is lang en heeft geen
   spatie: zonder anywhere duwt hij op 360px de kolom breder dan het scherm. */
.post__body code, .post__sources code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--navy-900);
  overflow-wrap: anywhere;
}
.post__list { margin-top: 16px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.6; color: var(--ink-900); }
.post__list li { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
/* Een lijst die een blok opent of sluit, krijgt aan die kant geen eigen
   haarlijn: onder de kop stond er anders een lijn tussen kop en eerste
   regel, en aan het eind van een blok twee lijnen 16px uit elkaar (die van
   de laatste regel en de blokscheiding), gezien op 1440 na het panel van
   29 sep 2026 in het blok met de grenzen. */
.post-blok__title + .post__list { margin-top: 12px; border-top: 0; }
.post__list:last-child li:last-child { border-bottom: 0; padding-bottom: 0; }
.post__steps { margin-top: 18px; counter-reset: stap; font-size: 17px; line-height: 1.6; color: var(--ink-900); }
.post__steps li { position: relative; padding-left: 36px; counter-increment: stap; }
.post__steps li + li { margin-top: 14px; }
.post__steps li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--navy-700);
}

/* De oproep halverwege: één zin en dezelfde twee knoppen. Een wit vel op
   papier, rand van 1px, geen schaduw. De zin is een p binnen .post__body,
   dus hij krijgt die klasse erbij als voorvoegsel: anders wint .post__body p
   (17px, inkt, 16px marge). */
.post-cta {
  margin-top: 56px;
  margin-bottom: 8px;
  padding: 28px 32px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
}
.post__body .post-cta__title { margin-top: 0; font-family: var(--font-heading); font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; color: var(--navy-900); text-wrap: pretty; }
.post-cta .post-knoppen { margin-top: 20px; }

/* De bronnen: dicht, één regel. Ze staan voor wie wil nalezen en horen
   niet tussen de laatste zin en de afsluiter in de weg te staan. */
.post__sources { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }
.post__sources summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-900);
}
.post__sources summary::after { content: "+"; font-family: var(--font-mono); font-weight: 500; color: var(--navy-700); }
.post__sources[open] summary::after { content: "\2212"; }
.post__sources ul { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-600); }
.post__sources li + li { margin-top: 6px; }
.post__sources a { overflow-wrap: anywhere; }

/* De afsluiter is .dark-band uit site.css (dezelfde slotband als op elke
   andere pagina); alleen de kop is hier kleiner, want een zin van zes
   woorden op 66px wordt op een telefoon vijf regels. */
.post-slot .dark-band__title { max-width: 16em; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; text-wrap: balance; }
.post-slot .post-knoppen { justify-content: center; }
/* GEEN KLOOFSTREEP BOVEN DE VOET, en dat is geen smaak. .dark-band::after
   in site.css tekent de kloofregel (60 navy, 40 amber): op de homepage de
   staafgrafiek uit #gap als streep, op het blog zonder die grafiek. Alle
   vier de personas van het panel van 29 sep 2026 lazen hem daar als een
   laadbalk die halverwege bleef hangen. Het blog heeft geen amber (zie de
   kop van dit bestand), dus hier één kleur: de scheiding tussen de
   slotband en de voet blijft, het halve oranje gaat weg. Alleen op het
   blog; de andere pagina's houden hun streep. */
.post-slot::after { background: var(--navy-700); }

@media (max-width: 720px) {
  .blog { padding-top: 40px; padding-bottom: 64px; }
  .blog-list { margin-top: 32px; }
  .blog-item { padding-top: 22px; padding-bottom: 22px; }
  .blog-item__title { font-size: 21px; }

  .post__artikel { padding-bottom: 56px; }
  .post-hero { padding-top: 28px; padding-bottom: 36px; }
  .post__title { margin-top: 10px; }
  .post__lead { margin-top: 14px; font-size: 18px; }
  .post-hero .post-knoppen { margin-top: 24px; }
  /* Rand tot rand; de hoogte komt uit site.css (.btn--hero 52px, zoals de
     heroknop van de homepage op een telefoon). */
  .post-knoppen { flex-direction: column; align-items: stretch; gap: 10px; }
  .post-knoppen .btn { width: 100%; }
  .post-blok { padding-top: 36px; }
  .post-blok__title { font-size: 24px; }
  .post__body h3 { margin-top: 28px; font-size: 19px; }
  .post-cta { margin-top: 40px; padding: 22px 20px 20px; }
  .post__body .post-cta__title { font-size: 20px; }
  .post__sources { margin-top: 36px; }
  .post-slot .dark-band__cta { width: 100%; }
}