/* VVZ Sponsoren 1.3.52 - balsponsor banner.
   Eigen klassen (.vvz-bb*), dus losgekoppeld van de oude kaartregels in style.css en patch.css.
   De banner past zich aan de breedte van de plek aan (container queries), niet aan het scherm. */
.vvz-bb-wrap{container-type:inline-size;width:100%;min-width:0}
.vvz-bb{
  --bb-green:#0a5c34;--bb-green-m:#2fa14e;--bb-line:#dfe7e2;
  display:grid;grid-template-columns:19% 1fr 19% 27%;align-items:center;
  min-height:clamp(120px,19cqw,190px);box-sizing:border-box;position:relative;overflow:hidden;
  background:#fff;color:var(--bb-green);text-decoration:none;font-family:inherit;line-height:1.3;
  border:1.5px solid var(--bb-green);border-radius:clamp(14px,2.4cqw,22px);
  box-shadow:0 10px 30px -12px rgba(10,92,52,.35);
}
a.vvz-bb{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
a.vvz-bb:hover,a.vvz-bb:focus-visible{box-shadow:0 14px 34px -12px rgba(10,92,52,.5);transform:translateY(-2px)}
a.vvz-bb:focus-visible{outline:3px solid var(--bb-green-m);outline-offset:2px}
.vvz-bb *{box-sizing:border-box}
.vvz-bb__club{display:grid;place-items:center;padding:0 clamp(8px,2cqw,20px);min-width:0}
.vvz-bb__club img{display:block;width:clamp(56px,10cqw,104px);height:clamp(56px,10cqw,104px);object-fit:contain;max-width:100%}
.vvz-bb__ph{display:block;width:clamp(56px,10cqw,104px);height:clamp(56px,10cqw,104px);border-radius:50%;border:2px dashed #b9c9bf;background:#f3f7f4}
.vvz-bb__mid{display:grid;justify-items:center;gap:clamp(6px,1.2cqw,12px);padding:clamp(10px,2cqw,20px) 0;min-width:0;text-align:center}
.vvz-bb__label{font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(9px,1.45cqw,15px);white-space:nowrap;margin:0}
.vvz-bb__bar{width:clamp(50px,9cqw,90px);height:2px;background:var(--bb-green)}
.vvz-bb__logo{display:block;max-width:min(92%,clamp(160px,34cqw,360px));max-height:clamp(48px,9cqw,92px);width:auto;height:auto;object-fit:contain}
.vvz-bb__name{font-weight:700;font-size:clamp(11px,1.7cqw,17px);color:var(--bb-green);margin:0}
.vvz-bb__name--big{font-weight:800;font-size:clamp(20px,4cqw,40px);line-height:1.05;overflow-wrap:anywhere}
.vvz-bb__rule{width:92%;height:1px;background:var(--bb-line)}
.vvz-bb__meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(10px,2cqw,22px);font-weight:600;font-size:clamp(12px,2.2cqw,22px)}
.vvz-bb__meta span{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.vvz-bb__meta svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.vvz-bb__meta i{width:1px;height:1.2em;background:var(--bb-green);opacity:.6}
.vvz-bb__photo{align-self:stretch;position:relative;margin-left:-6%;min-width:0}
.vvz-bb__photo::before,.vvz-bb__photo::after,.vvz-bb__photo span{content:"";position:absolute;inset:0}
.vvz-bb__photo::before{background:var(--bb-green);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}
.vvz-bb__photo::after{background:var(--bb-green-m);clip-path:polygon(32% 0,45% 0,17% 100%,6% 100%)}
.vvz-bb__photo span{background:url(ball-banner.jpg) 50% 50%/cover no-repeat;clip-path:polygon(40% 0,100% 0,100% 100%,13% 100%)}

/* Smalle plek (telefoon, smalle kolom): clublogo's boven, sponsor in het midden, foto als strook onderaan */
@container (max-width:560px){
  .vvz-bb{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "m m" "p p";min-height:0;align-items:start}
  .vvz-bb__club--home{grid-area:a;justify-items:start;padding:16px 0 10px 18px}
  .vvz-bb__club--away{grid-area:b;justify-items:end;padding:16px 18px 10px 0}
  .vvz-bb__club img,.vvz-bb__ph{width:64px;height:64px}
  .vvz-bb__mid{grid-area:m;padding:0 12px 18px}
  .vvz-bb__label{font-size:10px;letter-spacing:.16em;white-space:normal}
  .vvz-bb__logo{max-width:80%;max-height:64px}
  .vvz-bb__name--big{font-size:26px}
  .vvz-bb__meta{font-size:14px;gap:12px}
  .vvz-bb__photo{grid-area:p;margin:0;height:84px}
  .vvz-bb__photo::before{clip-path:polygon(0 38%,100% 0,100% 100%,0 100%)}
  .vvz-bb__photo::after{clip-path:polygon(0 38%,100% 0,100% 28%,0 66%)}
  .vvz-bb__photo span{clip-path:polygon(0 66%,100% 28%,100% 100%,0 100%);background-position:40% 55%}
}
@media (prefers-reduced-motion:reduce){a.vvz-bb{transition:none}a.vvz-bb:hover{transform:none}}


/* Expandable overflow list for the row limit; native details needs no JavaScript. */
.vvz-ball-more{margin-top:18px;padding-top:14px;border-top:1px solid #dfe9e3}
.vvz-ball-more>summary{display:inline-flex;align-items:center;gap:12px;cursor:pointer;list-style:none;user-select:none}
.vvz-ball-more>summary.vvz-balls-link{display:inline-flex!important}
.vvz-ball-more>summary::-webkit-details-marker{display:none}
.vvz-ball-more>summary::marker{content:""}
.vvz-ball-more>summary b{display:inline-block;font-size:25px;font-weight:500;line-height:1;transition:transform .18s ease}
.vvz-ball-more[open]>summary b{transform:rotate(90deg)}
.vvz-ball-more .vvz-sponsor-cards{margin-top:16px}



/* VVZ Sponsoren 1.3.54 — ruimere, gelijke hoogte voor desktop-balsponsorbanieren.
   De kaart blijft onafhankelijk van de hoeveelheid sponsorinformatie even hoog.
   De compacte gestapelde mobiele weergave (container <= 560px) blijft ongewijzigd. */
@container (min-width: 561px) {
  .vvz-bb {
    height: clamp(176px, 18.5cqw, 190px);
    min-height: clamp(176px, 18.5cqw, 190px);
    max-height: 190px;
  }

  .vvz-bb__mid {
    min-height: 0;
    max-height: 100%;
    align-content: center;
    justify-content: center;
    gap: clamp(6px, .8cqw, 9px);
    padding: 12px 0;
    overflow: hidden;
  }

  .vvz-bb__logo {
    max-height: clamp(48px, 7.5cqw, 72px);
  }

  .vvz-bb__name {
    max-width: 100%;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .vvz-bb__name--big {
    font-size: clamp(19px, 3.2cqw, 32px);
    line-height: 1.08;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .vvz-bb__meta {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: clamp(9px, 1.2cqw, 14px);
    font-size: clamp(12px, 1.6cqw, 17px);
  }
}