/* Muziekbingo (hulpmiddel 3). Bovenop basis.css en kaartenmaker.css (formulier, kop, thema's, Feestelijk en
   Zwart-wit komen daaruit). Hier: het raster met titels, het liedjesvel met QR-codes, en de printopmaak.
   Mobiel eerst; de kaart en het vel zelf zijn wit met zwarte tekst, ook in Feestelijk (alleen rand en kop in kleur).
   De vakjes hebben een vaste maat met overflow:hidden; browsertoets.mjs meet dat alle titels van de vier lijsten
   passen zonder dat er iets wegvalt en zonder een woord te breken. */

/* thema classic voor het liedjesvel (kaartenmaker.css zet de basiswaarden alleen op .km-kaart en .km-roeplijst).
   :where() geeft deze regel gewicht 0, zodat [data-km-thema="..."] uit kaartenmaker.css voorgaat. */
:where(.mb-liedjesvel){--km-letter:"Bricolage Grotesque",Arial,Helvetica,sans-serif;--km-rand:#1D0B30;--km-kop:#ffd23f;--km-kop-tekst:#1D0B30;--km-th:#1D0B30;--km-th-tekst:#fff}

/* ---------- raster met titels (scherm en papier) ---------- */
.mb-raster{table-layout:fixed}
.mb-raster td{padding:0;vertical-align:middle}
.mb-vak{display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#000;text-align:center}
.mb-titel{display:block;font-weight:700;line-height:1.12;overflow-wrap:break-word;max-width:100%}
.mb-artiest{display:block;font-weight:400;line-height:1.15;margin-top:.15em;overflow-wrap:break-word;max-width:100%}
.mb-raster td.vrij{font-weight:700}

/* voorbeeld op het scherm: de vakjes groeien mee met de tekst */
.mb-voorbeeld .mb-raster td{height:auto;font-size:inherit}
.mb-voorbeeld .mb-vak{min-height:clamp(54px,15vw,76px);padding:4px 3px;hyphens:auto;-webkit-hyphens:auto}
.mb-voorbeeld .mb-titel{font-size:clamp(11px,3.3vw,14px);overflow-wrap:anywhere}
.mb-voorbeeld .mb-artiest{font-size:clamp(9px,2.7vw,11px);overflow-wrap:anywhere}
.mb-voorbeeld .mb-5x5 .mb-titel{font-size:clamp(9px,2.6vw,12px)}
.mb-voorbeeld .mb-5x5 .mb-artiest{font-size:clamp(8px,2.2vw,10px)}
.mb-voorbeeld .mb-5x5 .mb-vak{min-height:clamp(48px,13vw,64px);padding:3px 2px}
.mb-voorbeeld .mb-raster td.vrij{font-size:clamp(20px,6vw,28px)}

/* ---------- printvak ---------- */
@media print{
  .mb-printvak .mb-vel{display:grid;width:100%;height:252mm;break-after:page;page-break-after:always;break-inside:avoid;overflow:hidden}
  .mb-printvak.mb-a4 .mb-vel{height:270mm}
  .mb-printvak .mb-vel:last-child{break-after:auto;page-break-after:auto}

  /* kaarten: 2 per vel, onder elkaar */
  .mb-kaartvel{grid-template-rows:1fr 1fr}
  .mb-kaartvel .km-kaart{align-self:center;justify-self:center;break-inside:avoid;page-break-inside:avoid}
  .mb-kaartvel .km-kaart-titel{font-size:14pt}
  .mb-kaartvel .km-kaart-naam{font-size:12pt;min-height:14pt}
  .mb-kaartvel .km-kaart-voet{font-size:8pt}
  .mb-4x4 .mb-raster td{width:44mm;height:21mm}
  .mb-4x4 .mb-vak{width:44mm;height:21mm;padding:0 1.6mm}
  .mb-5x5 .mb-raster td{width:35mm;height:17mm}
  .mb-5x5 .mb-vak{width:35mm;height:17mm;padding:0 1.1mm}
  .mb-4x4 .mb-raster td.vrij,.mb-5x5 .mb-raster td.vrij{font-size:22pt}
  /* lettergrootte naar de lengte van titel (mb-t1..3) en artiest (mb-a1..2), zie tekstKlasse() */
  .mb-4x4 .mb-t1 .mb-titel{font-size:13pt}
  .mb-4x4 .mb-t2 .mb-titel{font-size:11.5pt}
  .mb-4x4 .mb-t3 .mb-titel{font-size:10pt}
  .mb-4x4 .mb-a1 .mb-artiest{font-size:9pt}
  .mb-4x4 .mb-a2 .mb-artiest{font-size:8pt}
  .mb-5x5 .mb-t1 .mb-titel{font-size:10.5pt}
  .mb-5x5 .mb-t2 .mb-titel{font-size:9.5pt}
  .mb-5x5 .mb-t3 .mb-titel{font-size:8.5pt}
  .mb-5x5 .mb-a1 .mb-artiest{font-size:7.5pt}
  .mb-5x5 .mb-a2 .mb-artiest{font-size:6.5pt}

  /* liedjesvel: kop, dan 2 kolommen van 8 (nummer, vakje, QR-code, titel en artiest), van boven naar beneden */
  .mb-liedjesvel{grid-template-rows:auto 1fr auto;align-content:start;color:#000;font-family:Arial,Helvetica,sans-serif;text-align:left}
  .mb-liedjesvel .km-kaart-kop{text-align:center;margin:1mm 0 2mm}
  .mb-liedjesvel .km-kaart-titel{font-size:16pt}
  .mb-liedjesvel .km-kaart-naam{font-size:11pt;margin:.5mm 0 0}
  .mb-liedjesvel.km-feest .km-kaart-kop{padding:1.4mm 14%}
  .mb-liedjesvel .km-kaart-voet{font-size:8pt;text-align:center;margin-top:0}
  .mb-lv-kolommen{display:grid;grid-template-columns:1fr 1fr;column-gap:5mm;align-content:start}
  .mb-lv-kol{list-style:none;margin:0;padding:0;min-width:0}
  .mb-lv-item{display:grid;grid-template-columns:7mm 5.5mm auto minmax(0,1fr);align-items:center;column-gap:1.2mm;height:28.6mm;break-inside:avoid}
  .mb-lv-nr{font-size:12pt;font-weight:700;text-align:right;color:#000}
  .km-feest .mb-lv-nr{color:var(--km-th)}
  .mb-lv-vak{width:5mm;height:5mm;border:.4mm solid #000;border-radius:.6mm;background:#fff}
  .mb-qr{display:block}
  .mb-lv-tekst{min-width:0;max-height:26mm;overflow:hidden}
  .mb-lv-titel{display:block;font-size:11pt;font-weight:700;line-height:1.15;overflow-wrap:break-word}
  .mb-lv-artiest{display:block;font-size:9pt;line-height:1.2;margin-top:.8mm;overflow-wrap:break-word}

  /* alleen voor browsertoets.mjs: woorden niet breken, zodat een te lang woord als overloop te meten is */
  .mb-meten .mb-titel,.mb-meten .mb-artiest,.mb-meten .mb-lv-titel,.mb-meten .mb-lv-artiest{overflow-wrap:normal}
}