/* pas-banden.css — de drie lopende banden op de maakpagina (pas-maak.php). Hoort bij pas-banden.js.
   Huisstijl: inkt, crème, goud; rechte hoeken overal. De banden lopen van rand tot rand van het scherm. */
html,body{overflow-x:clip}                                              /* de banden zijn schermbreed: geen schuifbalk onder de pagina */
/* VIJF KAZEN IN BEELD per band (Soffia, 19-09: "zie je veel en toch groot, dat is het doel"): elke kaas krijgt een vijfde
   van de schermbreedte (--pb-n, op een gsm drie: vijf naast elkaar worden daar postzegels). De tweede waarde in min() is
   een plafond op heel brede schermen, zodat de drie banden onder elkaar blijven passen. Meer of minder in beeld = --pb-n. */
.pb-banden{--pb-n:5;--pb-tussen:30px;--pb-w:min(calc(100vw / var(--pb-n) - var(--pb-tussen)),calc(26vh * 1.3));--pb-h:calc(var(--pb-w) / 1.3);margin:30px calc(50% - 50vw) 10px;padding:4px 0 2px;overflow:hidden}
.pb-band{margin-bottom:10px;max-height:calc(var(--pb-h) + 40px);transition:max-height .6s ease,opacity .5s ease,margin .6s ease}
.pb-band.klaar{max-height:0;opacity:0;margin-bottom:0;overflow:hidden}      /* alle families van deze band zijn rond: de band klapt dicht */
.pb-band.klaar .pb-baan{visibility:hidden}
.pb-baan{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.pb-baan::-webkit-scrollbar{display:none}
.pb-baan:focus-visible{outline:2px solid var(--goud);outline-offset:-2px}
.pb-spoor{display:flex;width:max-content;padding:12px 0 14px}
/* enkel de foto (Soffia, 19-09): geen kaartje, geen naam; de kaas zweeft op het fond en mag daardoor groot */
.pb-tegel{flex:none;width:var(--pb-w);height:var(--pb-h);margin-right:var(--pb-tussen);padding:0;font:inherit;cursor:pointer;background:none;border:0;border-radius:0;overflow:visible;
  transition:width .45s ease,margin .45s ease,opacity .3s ease,transform .18s ease}
.pb-tegel img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));pointer-events:none;user-select:none;transition:filter .18s ease}
.pb-tegel:hover,.pb-tegel:focus-visible{transform:translateY(-3px) scale(1.07);outline:none}
.pb-tegel:hover img,.pb-tegel:focus-visible img{filter:drop-shadow(0 0 14px rgba(224,179,78,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.pb-tegel:active{transform:scale(.94)}
/* weg = gekozen, of zijn familie is rond: de tegel klapt dicht en de band schuift aan */
.pb-tegel.weg{width:0;margin-right:0;opacity:0;pointer-events:none;overflow:hidden}

/* de vonken: een laag boven alles, die geen tik opvangt */
.pb-vonken{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.pb-vonken span{position:absolute;color:var(--goudl);text-shadow:0 0 8px rgba(224,179,78,.9);opacity:0;animation:pb-vonk .85s ease-out forwards;will-change:transform,opacity}
@keyframes pb-vonk{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(90deg)}}

/* het invulblok staat boven de banden. Wie naar de banden schuift, houdt de knop (met de teller) boven in beeld:
   niemand moet terug omhoog zoeken naar "Maak de kaaspas". De plakstrook .pk-plak draagt de knop en de melding; op de
   desktop is de strook zelf onzichtbaar en laat ze tikken door naar de banden (enkel de knop vangt ze op). */
#maak .pk-plak{position:sticky;top:64px;z-index:6;display:flex;pointer-events:none}
#maak .pk-plak>*{pointer-events:auto}
#maak .pk-knop#maakKnop{box-shadow:0 8px 24px rgba(0,0,0,.6)}
/* "← Terug" rechts op dezelfde rij (09-10, Soffia: "ga terug knop moet hier" — de regel onderaan is weg); dekkend, want
   bij het schuiven hangt hij boven de foto's van de banden */
#maak .pk-terug{margin-left:auto;background:rgba(13,12,10,.94);box-shadow:0 8px 24px rgba(0,0,0,.6)}
/* de kaas die ↓/↑ in de zoeklijst aanwijst (Enter kiest hem) */
.pk-resultaten button.pk-actief{border-color:var(--goud);background:rgba(201,162,39,.16)}
.pk-melding{display:none}                                                  /* "Florette toegevoegd": enkel op de gsm (hieronder) */
.pk-leeg{color:var(--gedempt);font-size:13.5px}                             /* "Nog geen kaas gekozen." */
/* de gekozen kazen lopen weer over meerdere regels (09-10, Soffia: "geen schuifbalk; na 20 kazen weet niemand nog wat erin
   staat"). Dat de banden dan onder je vinger zouden verspringen, vangt pas-maak.php op: groeit de rij na een tik op een
   band, dan schuift de pagina even veel mee. */
#maak .pk-chip{flex:none}

@media(max-width:600px){.pb-banden{--pb-n:3;--pb-tussen:14px}}

/* ── de gsm (gsm-audit 25-09): de gsm-laag (gsm/gsm.js) verbergt de eigen kop .pk-top en zet een vaste kop van --gsm-kop.
   De plakstrook hangt daar pal onder als een dekkende balk van rand tot rand, met de knop op volle breedte; de melding
   "Florette toegevoegd" hangt er even onder na een tik op een band (de banden zelf blijven zonder namen, Soffia 19-09).
   Minder verloren ruimte boven de banden: geen kicker (het woord staat al in de h1), padding 16 px, de lege chips-rij
   reserveert geen 46 px meer (pas bij een keuze, .pk-vol), de foutregel bestaat pas als er een fout is. ── */
@media (max-width:767px){
  body.gsm-kop #maak .pk-plak{top:var(--gsm-kop)}
  body.gsm-aan:not(.gsm-kop) #maak .pk-plak{top:0}
  body.gsm-aan #maak .pk-plak{display:flex;gap:8px;pointer-events:auto;margin:0 -16px;padding:8px 16px;background:rgba(13,12,10,.96);border-bottom:1px solid rgba(201,162,39,.28);box-shadow:0 8px 20px rgba(0,0,0,.45)}
  body.gsm-aan #maak .pk-knop#maakKnop{display:block;flex:1;min-width:0;min-height:48px;font-size:14px;letter-spacing:.08em;padding:13px 12px;box-shadow:none}
  body.gsm-aan #maak .pk-terug{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font-size:13px;letter-spacing:.08em;box-shadow:none}
  body.gsm-aan #maak .pk-melding{display:block;position:absolute;left:16px;right:16px;top:100%;margin-top:8px;padding:10px 14px;font-size:14px;line-height:1.3;text-align:center;
    color:var(--paper);background:rgba(21,18,15,.96);border:1px solid rgba(201,162,39,.6);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
  body.gsm-aan #maak .pk-melding.aan{opacity:1;transform:none}
  body.gsm-aan #maak .pk-melding.pk-melding-fout{color:#ff8a7a;border-color:rgba(255,138,122,.6)}
  body.gsm-aan .pk-main{padding:16px 16px 60px}
  body.gsm-aan .pk-kop .pk-kicker{display:none}
  body.gsm-aan #maak .pk-chips{height:auto;min-height:0}
  body.gsm-aan #maak .pk-chips.pk-vol{min-height:46px}
  body.gsm-aan .pk-leeg{font-size:14px}
  body.gsm-aan #maak .pk-fout:empty{display:none}
  body.gsm-aan .pb-banden{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.pb-tegel,.pb-band{transition:none}}
@media print{.pb-banden,.pb-vonken{display:none}}