/* ==================================================================
   blog.css  -  de enige opmaak voor /blog/ (home.php) en een los
   bericht (single.php). Bovenop tokens-erika.css en home.css.

   Dit blad is met opzet anders van aard dan de andere paginabladen.
   Elke andere pagina is een compositie die wij bouwen; een bericht is
   een pagina die Erika zelf vult in de WordPress-editor. Wij weten dus
   niet welke elementen erin komen te staan. Daarom bestaat dit bestand
   uit twee delen:

     1. de omlijsting  (.bl-*)  - hero, kaarten, vorige/volgende
     2. de leeskolom   (.bl-tekst > *) - typografie voor ALLES wat de
        editor kan uitspugen: alinea's, koppen, lijsten, citaten,
        afbeeldingen met bijschrift, tabellen, knoppen, insluitingen.

   Deel 2 is het hart. Zolang dat klopt hoeft Erika niets te weten van
   opmaak: zij typt, en de site maakt het passend. Voeg hier dus geen
   opmaak per bericht toe - dan is de eerstvolgende post weer stuk.

   Naden: dit sjabloon heeft geen golf. De hero vervaagt onderin naar
   var(--paper), en dat is exact de kleur van de sectie eronder; de
   overgang is dus onzichtbaar in plaats van een vorm. De secties
   eronder houden hun waas in een aparte .wash-laag met inset, zodat
   er nooit een radiale gloed tegen een sectiegrens aan ligt.
   Zie CLAUDE.md, "De naden zijn nooit vanzelf goed".
   ================================================================== */

:root{
  --bl-measure:680px;      /* leesbreedte van een artikel, ruimer dan --measure */
}


/* ==================================================================
   1. OMLIJSTING
   ================================================================== */

/* ---------- hero (cream), gedeeld door /blog/ en een los bericht ---------- */
.bl-hero{
  position:relative;overflow:hidden;font-family:var(--font-body);
  padding:96px 44px 130px;
  background:
    radial-gradient(980px 700px at 78% -12%, rgba(232,220,239,.5), transparent 60%),
    radial-gradient(860px 620px at -6% 84%, rgba(184,196,173,.26), transparent 58%),
    var(--cream);
}
.bl-hero .blob{position:absolute;border-radius:var(--radius-circle);filter:var(--blur-blob);pointer-events:none;z-index:1}
/* Boven de vervaging (z-index 3), anders wast die de onderste regel van de
   inleiding weg zodra de tekst dichter bij de onderrand komt te staan. */
.bl-hero-inner{position:relative;z-index:4;max-width:820px;margin:0 auto;text-align:center}

/* Vervaging naar paper in plaats van een golf. Ligt als eigen laag op
   z-index 3, dus bóven de blobs: anders schijnt de sage-blob linksonder
   door de vervaging heen en zit de kleursprong er alsnog.
   Eindigt op exact var(--paper), de kleur van de sectie erna, dus de
   sectiegrens is onzichtbaar.
   rgba(250,245,236,0) en niet "transparent": dat laatste vervaagt in
   sommige browsers via doorzichtig zwart en geeft een grijze zweem
   halverwege de overgang. */
.bl-fade{
  position:absolute;bottom:-1px;left:0;right:0;height:230px;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(250,245,236,0) 0%,
    rgba(250,245,236,.55) 44%,
    rgba(250,245,236,.92) 74%,
    var(--paper) 92%,
    var(--paper) 100%);
}

/* De waaslaag van elke paper-sectie. Het masker laat hem aan de boven- en
   onderkant altijd uitvloeien, hoe hoog of laag de sectie ook is. Dat is de
   reden dat het een masker is en geen inset: met vaste marges (140px, 200px)
   houdt een kórte sectie een strook over waarin de radiale gloed geen ruimte
   heeft om te vervagen, en dan staat er een lichte balk met harde randen op de
   pagina. Zo stond hij op 2026-08-14 op /door-de-ogen-van/, het bericht zonder
   tekst. Nul aan de rand betekent bovendien dat de sectiegrens 0.0 blijft.
   De eerste 5% en de laatste 5% zijn niet "bijna" maar helemaal doorzichtig.
   Zonder die stroken loopt de vervaging door tot in de band die naadscore
   bemonstert, en dat is precies genoeg voor een sprong van 2.6 onderaan een
   kort artikel. Gemeten op /door-de-ogen-van/ op 390. */
.bl-lijst .wash,
.bl-artikel .wash{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(to bottom, transparent 0, transparent 5%, #000 26%, #000 70%, transparent 95%);
          mask:linear-gradient(to bottom, transparent 0, transparent 5%, #000 26%, #000 70%, transparent 95%);
}

.bl-eyebrow{
  display:block;margin-bottom:22px;font-size:11.5px;font-weight:500;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--teal);
}
.bl-hero h1{
  font-family:var(--font-display);font-weight:400;margin:0 0 26px;
  font-size:clamp(38px,4.6vw,60px);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;
}
.bl-hero h1 em{font-style:italic;color:var(--aubergine-soft)}
.bl-hero .lede{
  margin:0 auto;max-width:34em;font-size:var(--text-lede);line-height:var(--leading-body);
  font-weight:var(--weight-light);color:var(--text-body);text-wrap:pretty;
}

/* Terug-link boven de titel van een los bericht. De tekst is 24px hoog; het
   raakvlak wordt met een onzichtbaar vlak op --tap-min (48px) gebracht. Dat
   gebeurt met ::after en niet met padding, zodat de opmaak geen millimeter
   verschuift. Gemeten op staging: 146 x 24px, de helft van wat het
   designsysteem voorschrijft. */
a.bl-terug{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:30px;
  font-size:var(--text-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--aubergine-soft);text-decoration:none;
  transition:color var(--dur-color) var(--ease-soft);
}
.bl-terug::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:var(--tap-min);
}
.bl-terug span:first-child{transition:transform var(--dur-ui) var(--ease-soft)}
@media (hover:hover){
  .bl-terug:hover{color:var(--aubergine)}
  .bl-terug:hover span:first-child{transform:translateX(-4px)}
}

/* datumregel onder de titel van een bericht */
.bl-meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;
  margin:0;font-size:var(--text-body-xs);color:var(--text-muted);letter-spacing:var(--tracking-body);
}
.bl-meta .punt{opacity:.45}


/* ---------- de lijst met berichten (/blog/) ---------- */
.bl-lijst{position:relative;overflow:hidden;background:var(--paper);padding:20px 44px 140px;font-family:var(--font-body)}
.bl-lijst .wash{
  background:
    radial-gradient(900px 560px at 88% 18%, rgba(232,222,240,.42), transparent 70%),
    radial-gradient(820px 540px at 4% 82%, rgba(216,228,223,.36), transparent 72%);
}
.bl-lijst-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}

.bl-kaart{
  display:block;text-decoration:none;color:inherit;position:relative;
  background:var(--surface-card);border-radius:var(--radius-petal);
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform var(--dur-card) var(--ease-reveal),
             box-shadow var(--dur-card) var(--ease-reveal),
             background-color var(--dur-color) var(--ease-soft);
}
.bl-kaart + .bl-kaart{margin-top:28px}
.bl-kaart:nth-child(even){border-radius:var(--radius-petal-alt)}

.bl-kaart .beeld{display:block;overflow:hidden;background:var(--cream-warm)}
.bl-kaart .beeld img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-reveal);
}

.bl-kaart .binnen{display:block;padding:34px 38px 36px}
.bl-kaart .datum{
  display:block;margin-bottom:14px;font-size:var(--text-meta);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--teal);
}
.bl-kaart h2,
.bl-kaart h3{
  margin:0 0 14px;font-family:var(--font-display);font-weight:400;
  line-height:var(--leading-heading);letter-spacing:var(--tracking-display);color:var(--text-heading);
}
.bl-kaart h2{font-size:var(--text-h3)}
.bl-kaart h3{font-size:var(--text-h3-sm)}
.bl-kaart .aanhef{
  margin:0;font-size:var(--text-body-sm);line-height:var(--leading-body-tight);
  font-weight:var(--weight-light);color:var(--text-body);text-wrap:pretty;
}
.bl-kaart .lees{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:var(--text-ui);font-weight:500;letter-spacing:.04em;color:var(--aubergine);
}
.bl-kaart .lees .arr{transition:transform var(--dur-ui) var(--ease-soft)}

/* Alle hover-regels van de kaart achter (hover:hover), net als in kop.css. Een
   aanraakscherm houdt :hover vast na een tik: zonder die grens blijft de kaart
   waar je net op tikte opgetild staan, met de foto ingezoomd, tot je ergens
   anders tikt. Dat valt juist op bij het terugkomen uit een bericht. */
@media (hover:hover){
  .bl-kaart:hover{transform:translateY(var(--lift-card));box-shadow:var(--shadow-card-hover);background:var(--surface-card-hover)}
  .bl-kaart:hover .beeld img{transform:scale(1.04)}
  .bl-kaart:hover .lees .arr{transform:translateX(var(--shift-arrow))}
}

/* het eerste bericht groot, de rest als rij. Met weinig berichten oogt een
   rijtje anders leeg; zo staat er altijd één bericht vol in beeld. */
.bl-kaart.groot .beeld{aspect-ratio:16/8}
.bl-kaart.groot .binnen{padding:36px 44px 42px}
.bl-kaart.rij{display:grid;grid-template-columns:300px 1fr;align-items:stretch}
.bl-kaart.rij .beeld{height:100%;min-height:210px}
.bl-kaart.rij.geen-beeld{grid-template-columns:1fr}

/* lege staat */
.bl-leeg{
  max-width:34em;margin:0 auto;text-align:center;
  font-size:var(--text-lede);line-height:var(--leading-body);
  font-weight:var(--weight-light);color:var(--text-body);
}

/* pagineren */
.bl-pager{margin-top:56px;text-align:center}
.bl-pager .nav-links{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center}
.bl-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap-min);height:var(--tap-min);padding:0 16px;
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:var(--text-body-sm);color:var(--aubergine);
  background:var(--surface-card);box-shadow:var(--shadow-soft);
  transition:background-color var(--dur-color) var(--ease-soft), color var(--dur-color) var(--ease-soft);
}
@media (hover:hover){.bl-pager .page-numbers:hover{background:var(--surface-card-hover)}}
.bl-pager .page-numbers.current{background:var(--action-primary);color:var(--action-primary-text)}
.bl-pager .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}


/* ---------- het artikel (single.php) ---------- */
.bl-artikel{position:relative;overflow:hidden;background:var(--paper);padding:48px 44px 40px;font-family:var(--font-body)}
.bl-artikel .wash{
  background:
    radial-gradient(880px 620px at 92% 22%, rgba(232,222,240,.38), transparent 72%),
    radial-gradient(780px 560px at -4% 74%, rgba(216,228,223,.32), transparent 72%);
}
.bl-artikel-inner{position:relative;z-index:2;max-width:var(--bl-measure);margin:0 auto}

/* Uitgelichte afbeelding. Staat helemaal binnen deze sectie, zonder negatieve
   marge: die stak vroeger de golf in, maar er ís geen golf meer. Bovendien
   knipte overflow:hidden op deze sectie de bovenrand er dan af — op 390 was dat
   64px, gemeten op staging op 2026-08-14.
   --shadow-card en niet --shadow-photo: die laatste heeft 50px verschuiving en
   90px vervaging, waait dus tot bóven de afbeelding uit en werd op de
   sectiegrens afgeknipt. Dat gaf een streep van 11.6 op mobiel. */
.bl-uitgelicht{
  position:relative;z-index:4;margin:0 auto 56px;max-width:860px;
  border-radius:var(--radius-panel);overflow:hidden;box-shadow:var(--shadow-card);
}
.bl-uitgelicht img{display:block;width:100%;height:auto}


/* ---------- vorige / volgende + afsluiter ---------- */
.bl-verder{position:relative;overflow:hidden;background:var(--paper);padding:40px 44px 130px;font-family:var(--font-body)}
.bl-verder-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.bl-navgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bl-navkaart{
  display:block;padding:28px 32px;text-decoration:none;color:inherit;
  background:var(--surface-card);border-radius:var(--radius-way);
  box-shadow:var(--shadow-soft);
  transition:transform var(--dur-card) var(--ease-reveal),
             box-shadow var(--dur-card) var(--ease-reveal),
             background-color var(--dur-color) var(--ease-soft);
}
@media (hover:hover){.bl-navkaart:hover{transform:translateY(var(--lift-hover));box-shadow:var(--shadow-card);background:var(--surface-card-hover)}}
.bl-navkaart.next{text-align:right;border-radius:var(--radius-way-hover)}
.bl-navkaart .lab{
  display:block;margin-bottom:10px;font-size:var(--text-meta);font-weight:500;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--teal);
}
.bl-navkaart .titel{
  display:block;font-family:var(--font-display);font-weight:400;font-size:22px;
  line-height:1.25;color:var(--text-heading);
}
.bl-alles{margin-top:40px;text-align:center}


/* ==================================================================
   2. DE LEESKOLOM - alles wat Erika in de editor typt
   Hieronder staat geen enkele klasse die zij hoeft te kennen.
   ================================================================== */

.bl-tekst{
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:var(--text-lede);line-height:var(--leading-body);
  letter-spacing:var(--tracking-body);color:var(--text-body);
  /* Erika kan een lange link plakken (een adres van een crematorium, een
     rouwkaart-URL). Zo'n woord past op 342px niet in de kolom en duwt dan de
     hele pagina breder dan het scherm. Dit is de enige plek in het thema waar
     de tekst van buiten komt, dus de enige plek waar dat kan gebeuren. */
  overflow-wrap:break-word;
}
.bl-tekst > *:first-child{margin-top:0}
.bl-tekst > *:last-child{margin-bottom:0}

/* alinea's. De eerste is vanzelf de inleiding: groter en donkerder,
   zonder dat er iets ingesteld hoeft te worden. */
.bl-tekst p{margin:0 0 1.5em;text-wrap:pretty}
.bl-tekst > p:first-of-type{font-size:19px;line-height:1.8;color:var(--text-strong)}

/* koppen. h1 hoort niet in de tekst te staan (die is de titel van het
   bericht); zet hij er toch een, dan valt hij niet uit de toon. */
.bl-tekst h1,
.bl-tekst h2,
.bl-tekst h3,
.bl-tekst h4{
  font-family:var(--font-display);font-weight:400;color:var(--text-heading);
  line-height:var(--leading-heading);letter-spacing:var(--tracking-display);
  text-wrap:balance;
}
.bl-tekst h1,
.bl-tekst h2{margin:2em 0 .5em;font-size:clamp(28px,3.2vw,38px)}
.bl-tekst h3{margin:1.9em 0 .45em;font-size:var(--text-h3-sm)}
.bl-tekst h4{margin:1.8em 0 .4em;font-size:19px;font-family:var(--font-body);font-weight:var(--weight-medium);color:var(--text-strong)}
.bl-tekst em{font-style:italic}
.bl-tekst strong,.bl-tekst b{font-weight:var(--weight-medium);color:var(--text-strong)}

/* links in de tekst */
.bl-tekst a{
  color:var(--aubergine);text-decoration:underline;
  text-decoration-color:var(--action-ghost-border);text-underline-offset:4px;
  text-decoration-thickness:1px;
  transition:color var(--dur-color) var(--ease-soft), text-decoration-color var(--dur-color) var(--ease-soft);
}
@media (hover:hover){.bl-tekst a:hover{color:var(--aubergine-deep);text-decoration-color:var(--aubergine)}}

/* lijsten */
.bl-tekst ul,.bl-tekst ol{margin:0 0 1.5em;padding-left:1.35em}
.bl-tekst li{margin-bottom:.55em}
.bl-tekst li::marker{color:var(--teal-soft)}
.bl-tekst ul ul,.bl-tekst ol ol{margin-top:.55em;margin-bottom:0}

/* citaat. Geen streep en geen rand: de site kent die niet. */
.bl-tekst blockquote,
.bl-tekst .wp-block-quote,
.bl-tekst .wp-block-pullquote{
  margin:2.2em 0;padding:34px 38px;
  background:var(--surface-card);border-radius:var(--radius-pull);
  box-shadow:var(--shadow-soft);border:0;
}
.bl-tekst blockquote p{
  margin:0 0 .5em;font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:var(--text-quote);line-height:var(--leading-quote);color:var(--aubergine);
}
.bl-tekst blockquote p:last-child{margin-bottom:0}
.bl-tekst blockquote cite,
.bl-tekst blockquote .wp-block-quote__citation{
  display:block;margin-top:16px;font-style:normal;
  font-size:var(--text-body-xs);color:var(--text-muted);letter-spacing:var(--tracking-body);
}

/* afbeeldingen. Alles wat de editor plaatst blijft binnen de kolom staan;
   een té grote foto kan de pagina dus niet breder maken dan het scherm. */
.bl-tekst img{max-width:100%;height:auto;border-radius:var(--radius-panel);box-shadow:var(--shadow-card)}
.bl-tekst figure{margin:2.4em 0}
.bl-tekst figure img{display:block;margin:0 auto}
.bl-tekst figcaption,
.bl-tekst .wp-caption-text{
  margin-top:14px;text-align:center;
  font-size:var(--text-body-xs);font-style:italic;color:var(--text-muted);
}
/* de editor kent "breed" en "volle breedte": begrensd, nooit buiten het scherm */
.bl-tekst .alignwide,
.bl-tekst .alignfull{
  width:auto;max-width:min(860px,calc(100vw - 88px));
  margin-left:50%;transform:translateX(-50%);
}
.bl-tekst .aligncenter{margin-left:auto;margin-right:auto;text-align:center}

/* scheidingslijn: een zacht teken in plaats van een streep */
.bl-tekst hr{
  border:0;margin:3em auto;width:120px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline),transparent);
}

/* knop uit de editor, in de stijl van de site */
.bl-tekst .wp-block-button__link{
  display:inline-block;padding:15px 30px;border-radius:var(--radius-pill);
  background:var(--action-primary);color:var(--action-primary-text);
  font-family:var(--font-body);font-size:var(--text-ui);font-weight:var(--weight-medium);
  letter-spacing:.03em;text-decoration:none;box-shadow:var(--shadow-btn);
  transition:background-color var(--dur-color) var(--ease-soft), transform var(--dur-ui) var(--ease-soft);
}
@media (hover:hover){.bl-tekst .wp-block-button__link:hover{background:var(--action-primary-hover);transform:translateY(var(--lift-hover));color:#fff}}

/* insluiting (YouTube, Vimeo): altijd in verhouding, nooit te breed */
.bl-tekst .wp-block-embed__wrapper{position:relative}
.bl-tekst iframe{max-width:100%;border-radius:var(--radius-panel)}
.bl-tekst .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper{aspect-ratio:16/9}
.bl-tekst .wp-block-embed.wp-embed-aspect-16-9 iframe{position:absolute;inset:0;width:100%;height:100%}

/* Tabel: licht, zonder kader. De wikkel mag zelf schuiven: een tabel met vijf
   kolommen past niet op 342px, en zonder deze regel wordt niet de tabel maar de
   hele pagina breder dan het scherm.

   De vier verlopen maken een schaduw aan de kant waar nog inhoud buiten beeld
   staat, en alleen dan. De twee "local"-lagen schuiven mee met de inhoud en
   dekken de vaste schaduw af zodra je aan het eind bent. Geen JavaScript, geen
   altijd zichtbare versiering: staat de tabel helemaal in beeld, dan zie je
   niets. Zonder dit wordt een brede tabel stil afgeknipt en ziet niemand dat er
   nog kolommen zijn. */
.bl-tekst .wp-block-table,
.bl-tekst figure.wp-block-table{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(250,245,236,0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--paper) 30%, rgba(250,245,236,0)) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(74,52,97,.16), rgba(74,52,97,0)) left center / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(74,52,97,.16), rgba(74,52,97,0)) right center / 15px 100% no-repeat scroll;
}
.bl-tekst table{width:100%;border-collapse:collapse;margin:2.2em 0;font-size:var(--text-body-sm)}
.bl-tekst th,.bl-tekst td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hairline)}
.bl-tekst th{font-weight:var(--weight-medium);color:var(--text-strong)}

/* wat de editor verder nog kan sturen */
.bl-tekst .wp-block-separator{background:none}
.bl-tekst code,.bl-tekst kbd{font-family:var(--font-mono);font-size:.9em;background:var(--action-ghost-wash);padding:2px 6px;border-radius:6px}


/* ==================================================================
   3. KLEINERE SCHERMEN
   ================================================================== */

@media (max-width:900px){
  .bl-kaart.rij{grid-template-columns:1fr}
  .bl-kaart.rij .beeld{min-height:0;aspect-ratio:16/8}
}

@media (max-width:780px){
  .bl-hero{padding:70px var(--wrap-pad-mobile) 120px}
  .bl-lijst{padding:16px var(--wrap-pad-mobile) 100px}
  .bl-artikel{padding:36px var(--wrap-pad-mobile) 30px}
  .bl-verder{padding:30px var(--wrap-pad-mobile) 100px}
  .bl-fade{height:170px}
  .bl-uitgelicht{margin:0 auto 42px;border-radius:18px}
  .bl-kaart .binnen,
  .bl-kaart.groot .binnen{padding:28px 26px 30px}
  .bl-navgrid{grid-template-columns:1fr}
  .bl-navkaart.next{text-align:left}
  .bl-tekst{font-size:16.5px}
  .bl-tekst > p:first-of-type{font-size:18px}
  .bl-tekst blockquote,
  .bl-tekst .wp-block-quote,
  .bl-tekst .wp-block-pullquote{padding:26px 24px}
  .bl-tekst .alignwide,
  .bl-tekst .alignfull{margin-left:0;transform:none;max-width:100%}
  /* Iets kleiner en krapper, zodat een tabel van drie kolommen op 342px nog
     wél in beeld past en alleen de echt brede hoeft te schuiven. */
  .bl-tekst table{font-size:14px}
  .bl-tekst th,.bl-tekst td{padding:10px}
}

@media (max-width:560px){
  .bl-hero h1{font-size:34px}
  .bl-kaart h2{font-size:26px}
  .bl-kaart h3{font-size:21px}
}