/* ==========================================================================
   style-fix.css — build 20260825-b
   Wordt als laatste ingeladen, zodat deze regels altijd winnen.

   DEEL 1  Tekstoverloop. De oorzaak was niet één losse regel, maar drie
           dingen die samenvielen: grid- en flexkinderen krijgen standaard
           min-width:auto en kunnen dus NIET kleiner worden dan hun langste
           woord; "contact@christineproducties.nl" is één woord van dertig
           tekens zonder spatie; en het contactblok bleef tot 620px in twee
           kolommen staan. Op alles tussen ~620px en ~900px liep dat adres
           daardoor dwars door de kolom heen. Hieronder wordt dat structureel
           opgelost in plaats van per plek.

   DEEL 2  Opmaak voor het nieuwe, compactere samenwerkingsblok.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Geen horizontale scroll, nooit
   -------------------------------------------------------------------------- */
html{ max-width:100%; overflow-x:hidden; }
body{ max-width:100%; }
img,video,iframe,canvas,svg,table,pre{ max-width:100%; }


/* --------------------------------------------------------------------------
   2. DE KERNFIX — grid- en flexkinderen mogen krimpen
      Zonder min-width:0 rekt een kind zich op tot de breedte van zijn langste
      onbreekbare woord en duwt het de rest van de layout naar buiten.
   -------------------------------------------------------------------------- */
.wrap > *,
.about, .about-copy, .about-img,
.contact, .contact-l, .contact-r, .crow, .crow > *,
.form-layout, .form-layout > *,
.shero-grid, .shero-grid > *,
.libhero .wrap, .shero .wrap,
.bundle, .bundle > *,
.capture, .capture > *,
.mk-band-in, .mk-band-in > *,
.vp, .vp-body, .vp-media, .vp-top, .vp-top > *,
.info, .info > *,
.stats, .stat,
.routes, .route,
.vision, .vision > *,
.foot-grid, .foot-grid > *, .foot-col,
.sheet-lines, .sheet-lines > *,
.orderrail-in, .orderrail-in > *,
.feature-intro, .feature-intro > *,
.prod, .prod > *,
.performer-grid, .performer-card,
.form-two, .form-two > *,
.legal-card, .legal-main .wrap{
  min-width:0;
}


/* --------------------------------------------------------------------------
   3. Lange woorden breken af in plaats van uit te steken
      Geldt op ELKE schermbreedte, niet alleen onder 620px.
   -------------------------------------------------------------------------- */
p, li, dd, dt, td, th, label, summary, blockquote, figcaption, address,
h1, h2, h3, h4, h5, h6,
.lead, .intro, .note, .cnote, .form-note, .capture-note, .foot p,
.route-summary, .sheet-consent, .sheet-fine, .vp-desc, .mk-band-sub,
.commerce-notice p, .legal-card p, .legal-card li{
  overflow-wrap:break-word;
  word-break:normal;
}

/* E-mailadressen, telefoonnummers en video-ID's zijn één lang woord zonder
   spatie. Die mogen desnoods midden in afbreken — beter een afgebroken adres
   dan een adres dat over de knoppen heen valt. */
a[href^="mailto:"],
a[href^="tel:"],
a[href*="wa.me"],
.crow strong,
.shero-note strong,
.form-contact a,
.foot-col a,
.info strong,
.sheet-lines strong,
.legal-card a,
.legal-contact,
.legal-contact *,
.form-note strong,
.foot-legalname,
code, kbd, samp{
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* --------------------------------------------------------------------------
   4. Displaykoppen (Rubik Mono One) mogen afbreken
      Deze koppen zijn breed en staan vaak op één regel; op een smal scherm
      steken woorden als SAMENWERKING of VOORWAARDEN anders buiten beeld.
   -------------------------------------------------------------------------- */
.head-xl, .hero-title,
.libhero h1, .shero h1,
.contact-l h2,
.mk-band h2, .bundle h2, .capture h2, .sheet-card h2,
.performer-card h2, .jr-post h2, .manifest,
.legal-main h1, .legal-card h2{
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}


/* --------------------------------------------------------------------------
   5. Contactblok — stapelen zodra twee kolommen te smal worden
      Stond pas onder 620px in één kolom; daartussen zat precies het gat.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .contact{ grid-template-columns:1fr; }
}

/* Onder 520px past het labelkolommetje van 65px er niet meer naast: label
   boven de waarde. */
@media (max-width:520px){
  .crow{ grid-template-columns:1fr auto; row-gap:3px; }
  .crow small{ grid-column:1 / -1; }
}


/* --------------------------------------------------------------------------
   6. Footer — kolommen krijgen een echte minimumbreedte
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .foot-grid{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
}


/* --------------------------------------------------------------------------
   7. Bestelsheet — het akkoordvinkje is langer geworden
   -------------------------------------------------------------------------- */
.sheet-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.55;
}
.sheet-consent input{ flex:none; margin-top:3px; }
.sheet-consent span{ min-width:0; }


/* ==========================================================================
   DEEL 2 — SAMENWERKEN: info en formulier naast elkaar, compacter
   ========================================================================== */
.collab-sec .form-layout{
  gap:clamp(28px,4vw,52px);
  align-items:start;
}

/* De losse kaart met prijsblok is vervallen; dit is de linkerkolom. */
.collab-info{ align-self:start; }

.collab-info .head-xl{ margin-top:0; }

.collab-info .intro{ margin-bottom:18px; }

.collab-list{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  border-top:1px solid var(--line);
}
.collab-list li{
  position:relative;
  padding:10px 0 10px 22px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:1.6;
}
.collab-list li::before{
  content:"";
  position:absolute;
  left:2px; top:1.05em;
  width:7px; height:1px;
  background:var(--red-deep);
}

.collab-sub{
  margin:0 0 8px;
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red-deep);
}

.collab-info .form-contact{ margin-top:22px; }

/* Op tablet en telefoon onder elkaar, maar met minder tussenruimte dan
   voorheen zodat de pagina niet uit elkaar valt. */
@media (max-width:900px){
  .collab-sec .form-layout{ gap:26px; }
  .collab-list{ margin-bottom:20px; }
}