/* ==========================================================================
   CHRISTINE PRODUCTIES — style-extra.css
   Nieuwe onderdelen, los van de bestaande stylesheets. Hier wordt geen
   bestaande klasse opnieuw gedefinieerd; alles heeft een eigen prefix:
     mk-  makers (band onder de hero + smalle balk boven de footer)
     re-  reacties      (komt in fase 4)
   Kleuren, fonts en spacing komen uit de variabelen van style.387d442d.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MAKERSBAND — direct onder de hero op de homepage.
      Donker, zodat hij zich onderscheidt van de lichte cred-rail eronder,
      en bewust laag gehouden: de films moeten in het eerste scherm blijven.
   -------------------------------------------------------------------------- */
.mk-band{
  background:var(--ink);
  color:#fff;
  border-block:1px solid rgba(191,23,40,.35);
  padding-block:var(--s-4);
  position:relative;
  isolation:isolate;
}
.mk-band-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-4) var(--s-5);
  align-items:center;
}
.mk-band-lbl{
  display:block;
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--red-soft);
  margin-bottom:6px;
}
.mk-band h2{
  margin:0 0 8px;
  font-size:var(--fs-h3);
  line-height:var(--lh-head);
  font-weight:800;
  letter-spacing:-.01em;
}
.mk-band h2 em{ color:var(--red-soft); font-style:normal; }
.mk-band-sub{
  margin:0;
  font-size:var(--fs-sm);
  line-height:1.5;
  color:rgba(255,255,255,.68);
  max-width:var(--measure-sm);
}

/* De rollen. Geen opsomming met bolletjes, maar losse labels op één rij. */
.mk-roles{
  list-style:none;
  margin:var(--s-2) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mk-roles li{
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:5px 11px;
}

.mk-band-cta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  justify-content:flex-end;
}

/* --------------------------------------------------------------------------
   2. MAKERSBALK — smalle balk direct boven de footer, op elke pagina.
      Licht, zodat hij loskomt van de donkere footer.
   -------------------------------------------------------------------------- */
.mk-bar{
  background:var(--ivory);
  border-top:1px solid var(--line);
  border-bottom:3px solid var(--red);
  padding-block:var(--s-3);
}
.mk-bar-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
}
.mk-bar p{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.45;
  font-weight:600;
  color:var(--ink);
  max-width:var(--measure);
}
.mk-bar p b{ color:var(--red-deep); }
.mk-bar .btn{ flex:none; }

/* --------------------------------------------------------------------------
   3. Mobiel. Onder 720px alles onder elkaar en knoppen op volle breedte,
      zodat ze met een duim te raken zijn.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .mk-band-in{ grid-template-columns:1fr; }
  .mk-band-cta{ justify-content:stretch; }
  .mk-band-cta .btn{ flex:1 1 100%; }
  .mk-bar-in{ flex-direction:column; align-items:flex-start; }
  .mk-bar .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   4. Toetsenbord en bewegingsvoorkeur.
   -------------------------------------------------------------------------- */
.mk-band a:focus-visible,
.mk-bar a:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:3px;
  border-radius:999px;
}
@media (prefers-reduced-motion:reduce){
  .mk-band *,
  .mk-bar *{ transition:none !important; animation:none !important; }
}

/* --------------------------------------------------------------------------
   5. HERO-TITEL — alleen als de titel langer is dan twee korte woorden.
      "GEILE NL / TRANSMEID XL" is 12 tekens op de tweede regel; met de
      oorspronkelijke maat (tot 104px) loopt die op elk formaat buiten de
      kolom. Deze klasse verlaagt alleen de maat, verder blijft alles gelijk.
      Staat op <h1 class="hero-title mk-hero-title rv">.
   -------------------------------------------------------------------------- */
.hero-title.mk-hero-title{
  font-size:clamp(30px, 7.2vw, 72px);
}
@media (max-width:900px){
  .hero-title.mk-hero-title{ font-size:clamp(28px, 9.6vw, 46px); }
}

/* --------------------------------------------------------------------------
   6. SPATIES IN DE HERO-TITEL
      De titel wordt door het bestaande script in losse letters geknipt, en
      elke letter krijgt display:inline-block. Een losse spatie krijgt dan
      geen breedte, waardoor "GEILE NL" als GEILENL op het scherm komt.
      white-space:pre geeft die spatie zijn breedte terug.
   -------------------------------------------------------------------------- */
.hero-title.mk-hero-title .ltr{ white-space:pre; }

/* --------------------------------------------------------------------------
   7. HARTJE onder de hero-tekst, op een eigen regel met wat lucht erboven.
   -------------------------------------------------------------------------- */
.hero-lead.mk-heart{
  margin-top:var(--s-2);
  font-size:1.5em;
  line-height:1;
}

/* --------------------------------------------------------------------------
   8. MOBIELE VANGRAIL
      Lange woorden zonder spatie (zoals NEDERLANDSTALIGE) duwen op een
      smal scherm de tekst buiten de kolom, waardoor blokken over elkaar
      heen lijken te lopen. Deze regels laten zulke woorden netjes afbreken.
   -------------------------------------------------------------------------- */
@media (max-width:620px){
  .head-xl,
  .hero-title,
  .manifest,
  .jr-post h2,
  .mk-band h2{
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
  }
  .wrap{ overflow-x:clip; }
}

/* --------------------------------------------------------------------------
   9. COMPACTER OP TELEFOON
      De secties hebben op mobiel bijna evenveel witruimte als op desktop,
      waardoor je heel lang moet scrollen tussen twee stukjes tekst door.
      Onder 620px wordt die ruimte ongeveer een derde kleiner, en koppen
      krijgen wat minder loze regelhoogte.
   -------------------------------------------------------------------------- */
@media (max-width:620px){
  .sec{ padding-block:clamp(44px,10vw,64px) !important; }
  .sec .take{ margin-bottom:10px; }
  .sec .head-xl{ margin-bottom:12px; line-height:1.02; }
  .sec .lead{ margin-bottom:14px; }
  .sec p + p{ margin-top:12px; }
  .mk-band{ padding-block:26px; }
  .mk-bar{ padding-block:18px; }
}

/* --------------------------------------------------------------------------
   10. MERKREGEL IN DE FOOTER + SCHEIDINGSLIJN OP JURIDISCHE PAGINA'S
       Build 20260818-h. TSChristineXXX is het publieke merk; Christine
       Producties blijft de juridische naam en staat daarom klein onder
       de merknaam in de footer, in plaats van als tweede merk door de
       site heen te lopen.
   -------------------------------------------------------------------------- */
.foot-legalname{
  margin-top:10px;
  font-size:var(--fs-label,.78rem);
  line-height:1.6;
  color:var(--muted,#8b8792);
  opacity:.9;
}
.foot-legalname b{ font-weight:600; color:inherit; }

.legal-rule{
  border:0;
  border-top:1px solid currentColor;
  opacity:.18;
  margin:34px 0 30px;
}


/* ============================================================
   V17 — BESTELLEN ZONDER JURIDISCHE MUUR
   Eén regel geruststelling in plaats van drie alinea's fijndruk.
   ============================================================ */

/* Geruststellingsrij onder de bestelintro (homepage) */
.pay-row{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 26px;
  padding:0;
}
.pay-row li{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 13px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  background:rgba(255,255,255,.5);
}

/* Betaalkeuze in de bestelsheet: zelfde ritme als de productkeuze */
#sheetPay{margin-bottom:14px}

/* Sprongmenu bovenaan de infopagina */
.info-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 30px;
}
.info-jump a{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  color:var(--text);
}
.info-jump a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Ankers niet onder een sticky rand laten vallen */
.legal-card h2[id]{scroll-margin-top:100px}

/* --------------------------------------------------------------------------
   V17b — OPENINGSBLOK
   Het over-mij-blok is nu de eerste sectie. Twee dingen moesten mee:
   het moet onder de vaste kopbalk vandaan komen, en de knoppen en cijfers
   die uit de oude hero komen stonden in donkere inkt op een donkere
   achtergrond.
   -------------------------------------------------------------------------- */
.about-first{
  padding-top:calc(82px + clamp(40px,6vw,84px));
}
@media (max-width:900px){
  .about-first{ padding-top:calc(72px + 26px); }
}

/* Knoppen en cijferrij op donkere ondergrond leesbaar houden */
.about-first .hero-proof{ border-top-color:rgba(255,255,255,.16); }
.about-first .hero-proof span{ color:rgba(255,255,255,.55); }
.about-first .hero-proof b{ color:#fff; }
.about-first .text-link{ color:var(--red-soft); }

/* Hartje op een eigen regel, net als eerst */
.about-first .mk-heart{
  margin-top:var(--s-2);
  font-size:1.5em;
  line-height:1;
}