/* =========================================================
   BLOGKOP (Twan 24-10): wie vanuit Google op een blog landt, ziet dezelfde opening als de homepage.
   De vier herofoto's (img/v7) als mozaiek: A boven, de verfstrook C eronder tot het einde van de laatste titelregel,
   B en D onderin met de inleiding in B. De titel staat met zijn grondlijn op de bovenrand van de strook.
   Laadscherm: de strook ís de laadbalk (zie js/blogkop.js); zonder JS of met "minder beweging" staat alles meteen open.
   ========================================================= */
.blogkop{
  --bk-nav: 56px;
  --bk-strook: clamp(56px, 9.5vh, 132px);
  --bk-onder: clamp(220px, 31vh, 320px);
  --bk-b: 44%;
  --bk-c: 62%;            /* js/blogkop.js zet het einde van de laatste titelregel */
  --bk-zak: -0.112em;     /* grondlijn op de strook bij line-height .95 (Inter Tight); het script meet het precies */
  --bk-inkt: #EDE7DA;
  position: relative;
  height: calc(100vh - var(--bk-nav)); height: calc(100svh - var(--bk-nav));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--bk-strook) var(--bk-onder);
  background: #000;
  overflow: clip;
  isolation: isolate;
  color: var(--bk-inkt);
}
.bk-tegel{ position: relative; overflow: clip; min-width: 0; }
.bk-tegel img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-a{ grid-area: 1 / 1 / 3 / 2; background: #194f7d; z-index: 1; }
.bk-a img{ object-position: 70% 40%; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.bk-c{ grid-area: 2 / 1 / 3 / 2; width: var(--bk-c); background: #5291b6; z-index: 2; }
.bk-b{ grid-area: 3 / 1 / 4 / 2; width: var(--bk-b); background: #021747; z-index: 3;
       display: flex; align-items: center; }
.bk-d{ grid-area: 3 / 1 / 4 / 2; margin-left: var(--bk-b); background: #559ed3; z-index: 3; }

.blogkop__titel{
  grid-area: 1 / 1 / 2 / 2; align-self: end; z-index: 4;
  margin: 0 0 var(--bk-zak); padding: 0 var(--a-marge);
  max-width: min(17ch, 100%);
  font: 700 clamp(40px, min(6.4vw, 10.5vh), 108px)/.95 "Inter Tight", system-ui, sans-serif;
  letter-spacing: -.035em;
  color: var(--bk-inkt);
  text-wrap: balance;
}
.blogkop__titel em{ font-style: normal; color: inherit; }
.blogkop__lead{
  position: relative; z-index: 1;
  margin: 0; padding: clamp(20px, 3vw, 44px) var(--a-marge);
  max-width: 40ch;
  font: 400 clamp(16px, 1.3vw, 20px)/1.45 "Inter Tight", system-ui, sans-serif;
  letter-spacing: -.005em;
  color: var(--bk-inkt);
  opacity: .86;
  text-wrap: pretty;
}
.blogkop__lead p{ margin: 0; color: inherit; font: inherit; max-width: none; }
.blogkop__lead p.meta{ margin-top: 14px; font-size: .8em; opacity: .72; }
/* grondlijn-meter van het script: een lege inline-block op de grondlijn van de laatste regel */
.bk-gl{ display: inline-block; width: 0; height: 0; }

/* het artikel begint met lucht onder de donkere kop */
.blogkop + article{ padding-top: clamp(48px, 6vw, 88px); }

@media (max-width: 920px){ .blogkop{ --bk-nav: 54px; } }
@media (max-width: 58.75rem){
  .blogkop{ --bk-strook: 12vw; --bk-onder: auto; --bk-b: 100%; }
  .bk-d{ display: none; }
  .bk-b img{ filter: brightness(.7); }   /* de inleiding staat hier over de hele breedte: de lichte aders iets terug */
  .blogkop__titel{ font-size: clamp(36px, 10.6vw, 64px); max-width: 100%; }
  /* onderin 96 px vrij: daar staat de chatknop (dc-bot) */
  .blogkop__lead{ max-width: none; padding-block: 24px 96px; }
}
/* Safari op de telefoon: de werkbalk zweeft over de pagina; de kop loopt door tot de onderrand (zoals de homepage),
   de inleiding blijft in het zichtbare deel */
@supports (height: 100lvh){
  @media (max-width: 58.75rem){
    .blogkop{ height: calc(100lvh - var(--bk-nav)); }
    .blogkop__lead{ padding-bottom: calc(96px + 100lvh - 100svh); }
  }
}

/* ---------- laadscherm ---------- */
/* dicht: alles zwart behalve de strook, die als laadbalk volloopt (--bk-laad 0..1, gezet door het script) */
html.bk-intro .bk-a::after, html.bk-intro .bk-b::after, html.bk-intro .bk-d::after{
  content: ""; position: absolute; inset: 0; z-index: 2; background: #000;
  transition: transform .75s cubic-bezier(.7,0,.2,1);
}
html.bk-intro .bk-a img{ transform: scale(1.08); }
html.bk-intro .bk-c{ clip-path: inset(0 calc(100% - var(--bk-laad, 0) * 100%) 0 0); transition: clip-path .45s cubic-bezier(.3,.6,.2,1); }
html.bk-intro .blogkop__titel{ clip-path: inset(-20% 100% -30% 0); }
html.bk-intro .blogkop__lead{ opacity: 0; transform: translateY(10px); }
html.bk-intro #dcb-host{ display: none; }
/* schrijven: de titel komt van links naar rechts in beeld, over de strook heen */
html.bk-schrijf .blogkop__titel{ clip-path: inset(-20% 0 -30% 0); transition: clip-path .7s cubic-bezier(.6,0,.2,1); }
/* open: A gaat omhoog, B en D omlaag, de bloem zoomt rustig terug */
html.bk-open .bk-a::after{ transform: translateY(-101%); }
html.bk-open .bk-b::after, html.bk-open .bk-d::after{ transform: translateY(101%); }
html.bk-open .bk-a img{ transform: none; }
html.bk-open .blogkop__lead{ opacity: .86; transform: none; transition: opacity .6s .25s, transform .6s .25s cubic-bezier(.2,.7,.2,1); }