/* =====================================================================
   BLS Sports - cijfers op de homepage: een rij in de hero en de sectie
   "Op het veld sinds 2005". Aparte laag bovenop stijl-2026.css.

   De sectie is donker en werkt met tegels, zodat de cijfers dragen in
   plaats van wegvallen. Blauw komt maar op een plek terug: de acht
   opgelichte stippen van de niveaustap. De rest is wit op inkt.
   ===================================================================== */

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===================== hero: drie cijfers onder de knoppen ===================== */
/* Eigen donker vlak: onder de knoppen houdt de verloop achter de kop op en
   staan de cijfers anders los op de foto's. */
.hero-cijfers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-3);margin:var(--s-7) auto 0;padding:var(--s-4) var(--s-3);
  max-width:540px;list-style:none;border-radius:var(--r);
  background:rgba(11,14,20,.72);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
@media (min-width:760px){.hero-cijfers{padding:var(--s-5) var(--s-4)}}
/* Subgrid houdt de drie getallen op een lijn, ook als "per seizoen" op een
   telefoon over twee regels loopt. */
.hc{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:2px;
  justify-items:center;text-align:center;min-width:0;
}
.hc .hc-pre{align-self:end}
.hc-pre,.hc-l{font-size:var(--t-2xs);line-height:1.35;color:var(--muted-d)}
.hc-pre{font-weight:var(--w-titel);letter-spacing:.08em;text-transform:uppercase}
.hc-n{
  font-size:clamp(22px,2.8vw,32px);font-weight:var(--w-display);color:#fff;
  line-height:1.1;letter-spacing:-.024em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hc-n small{font-size:.5em;font-weight:var(--w-titel);letter-spacing:0;color:var(--op-donker);margin-left:.25em}
.hc-l{color:var(--op-donker)}

/* ===================== sectie ===================== */
.cijfers-kop{max-width:62ch}
.cijfers-kop .lead{max-width:60ch}
.cijfers-kop h2 .jaar{color:#fff}

.cijfer-raster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);
  margin-top:var(--s-8);list-style:none;
}
@media (min-width:1080px){
  .cijfer-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
}

.tegel{
  position:relative;display:flex;flex-direction:column;gap:var(--s-2);min-width:0;
  padding:var(--s-4);border-radius:var(--r);
  background:var(--inkt-2);border:1px solid var(--inkt-3);
}
@media (min-width:480px){.tegel{padding:var(--s-5)}}
@media (min-width:760px){.tegel{padding:var(--s-6)}}
/* Op een smalle telefoon is een halve tegel ongeveer 110px breed; daar past
   "lidmaatschapsduur" (137px) niet in, en afbreken mag niet. Daar worden
   deze twee tegels een volle rij: cijfer links, label rechts. */
@media (max-width:479px){
  .tegel.rij{
    grid-column:1/-1;display:grid;grid-template-columns:7.2em minmax(0,1fr);
    column-gap:var(--s-4);row-gap:var(--s-2);align-items:center;
  }
  .tegel.rij .tegel-n{grid-row:1/3}
  .tegel.rij .balk{grid-column:2;margin-top:0}
  .tegel.rij .tegel-l{grid-column:2}
  .tegel.rij .tegel-n + .tegel-l{grid-row:1/3}
}

.tegel-n{
  font-size:clamp(30px,4.4vw,56px);font-weight:var(--w-display);color:#fff;
  line-height:1;letter-spacing:-.034em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tegel-n small{
  font-size:var(--t-sm);font-weight:var(--w-titel);letter-spacing:0;color:var(--muted-d);
}
.tegel-n small.voor{display:block;margin-bottom:6px}
.tegel-n small.na{margin-left:.35em}
/* Labels breken niet midden in een woord af, ze lopen hooguit door. */
.tegel-l{
  font-size:var(--t-sm);line-height:1.45;color:var(--op-donker);
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal;
}
.tegel-l sup{font-size:.72em;line-height:0;margin-left:1px}

/* Een teller loopt door; dat mag je zien. Een stip die rustig ademt. */
.tegel-live{
  display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding-top:var(--s-3);
  font-size:var(--t-2xs);line-height:1.4;color:var(--muted-d);
}
.tegel-live::before{
  content:"";width:7px;height:7px;margin-top:.35em;border-radius:50%;flex:none;background:var(--blauw-l);
  box-shadow:0 0 0 0 rgba(90,164,242,.5);
}
@media (prefers-reduced-motion:no-preference){
  .tegel-live::before{animation:adem 2.8s ease-in-out infinite}
}
@keyframes adem{
  0%,100%{box-shadow:0 0 0 0 rgba(90,164,242,.45)}
  50%{box-shadow:0 0 0 5px rgba(90,164,242,0)}
}

/* ---- De uitgelichte tegel: 8 van de 10 ---- */
.tegel.groot{grid-column:1/-1;justify-content:space-between;gap:var(--s-6)}
@media (min-width:1080px){.tegel.groot{grid-column:span 2;grid-row:span 2;padding:var(--s-7)}}
.tegel.groot .tegel-n{font-size:clamp(76px,11vw,148px);letter-spacing:-.05em}
.tegel.groot .tegel-n small{font-size:clamp(16px,1.6vw,22px);color:var(--op-donker)}
.tegel.groot .tegel-l{font-size:var(--t-lg);color:#fff;font-weight:var(--w-titel);max-width:24ch}

.stippen{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(6px,1vw,12px);max-width:460px}
/* Standaard staan stippen en balk gevuld: zo klopt het ook zonder JS of
   zonder beweging. cijfers.js zet "beweeg" op het raster; tot de sectie in
   beeld komt ("aan") staan ze dan leeg en lopen ze daarna een voor een vol. */
.stip{
  aspect-ratio:1;border-radius:50%;border:2px solid var(--inkt-3);background:transparent;
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
  transition-delay:calc(var(--i) * 90ms + 300ms);
}
.stip.vol{background:var(--blauw-l);border-color:var(--blauw-l)}
.beweeg:not(.aan) .stip.vol{background:transparent;border-color:var(--inkt-3)}

/* ---- 6 jaar: zes seizoenen die vollopen ---- */
.balk{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:var(--s-2)}
.balk i{
  display:block;height:6px;border-radius:3px;background:#fff;
  transition:background-color .45s var(--ease);transition-delay:calc(var(--i) * 110ms + 250ms);
}
.beweeg:not(.aan) .balk i{background:var(--inkt-3)}

/* ---- Feyenoord: tekst in plaats van een getal ---- */
.tegel.breed{grid-column:1/-1}
@media (min-width:1080px){.tegel.breed{grid-column:span 4;flex-direction:row;align-items:baseline;gap:var(--s-6)}}
.tegel.breed .tegel-pre{
  font-size:var(--t-2xs);font-weight:var(--w-titel);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-d);flex:none;
}
.tegel.breed .tegel-kop{
  font-size:clamp(22px,2.8vw,34px);font-weight:var(--w-display);line-height:1.15;
  letter-spacing:-.02em;color:#fff;
}

.cijfer-noten{margin-top:var(--s-6);list-style:none;display:grid;gap:var(--s-2)}
.cijfer-noten li{font-size:var(--t-2xs);line-height:1.55;color:var(--muted-d);max-width:var(--maat)}
.cijfer-noten sup{margin-right:4px}
.cijfer-noten .nb{white-space:nowrap}