/* Bosstad Tweewielers – logoslider hoofdmerken (.bs-logos), 2026-09-25 v2. Hoort bij bosstad-merken-slider.php. */
.bs-logos{position:relative;width:100%;font-family:var(--bs-font-body,Barlow,sans-serif);--bs-logos-gap:72px;--bs-logos-sec:90s;--bs-logos-scale:1}
/* licht paneel in de Bosstad-stijl: wit, dunne rand, ruime lucht */
.bs-logos__panel{position:relative;background:#fff;border:1px solid var(--bs-border,#E3E4E2);border-radius:4px;padding:34px 0}
.bs-logos__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:4px 4px 0 0;background:var(--bs-turquoise,#33C7B7);opacity:.9}
/* alleen de strip vervaagt aan de randen */
.bs-logos__viewport{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.bs-logos__track{display:flex;width:max-content;animation:bs-logos-move var(--bs-logos-sec) linear infinite;transform:translate3d(-50%,0,0)}
.bs-logos__row{display:flex;align-items:center;gap:var(--bs-logos-gap);padding-right:var(--bs-logos-gap);flex:0 0 auto}
/* vaste hoogte per rij, elk logo gecentreerd in zijn eigen vak; maat per logo uit --bs-logo-w/--bs-logo-h (gelijk visueel oppervlak) */
.bs-logos__item{display:flex;align-items:center;justify-content:center;height:56px;flex:0 0 auto;text-decoration:none;opacity:.55;filter:grayscale(1);transition:opacity .25s ease,filter .25s ease}
.bs-logos__item img{display:block;width:calc(var(--bs-logo-w,120px)*var(--bs-logos-scale));height:calc(var(--bs-logo-h,40px)*var(--bs-logos-scale));object-fit:contain}
.bs-logos__item:hover,.bs-logos__item:focus-visible{opacity:1;filter:none}
.bs-logos:hover .bs-logos__track,.bs-logos:focus-within .bs-logos__track{animation-play-state:paused}
/* van links naar rechts: de track start half verschoven en schuift naar 0 */
@keyframes bs-logos-move{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.bs-logos__more{margin:22px 0 0;text-align:right;font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.bs-logos__more a{color:var(--bs-teal,#0F8A7C);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease}
.bs-logos__more a:hover{border-bottom-color:currentColor}
@media(max-width:767px){.bs-logos{--bs-logos-gap:44px;--bs-logos-scale:.8}.bs-logos__panel{padding:24px 0}.bs-logos__item{height:46px}.bs-logos__more{text-align:left;margin-top:18px}}
@media(prefers-reduced-motion:reduce){.bs-logos__viewport{-webkit-mask-image:none;mask-image:none}.bs-logos__panel{padding:28px 24px}.bs-logos__track{animation:none;transform:none;width:auto;flex-wrap:wrap}.bs-logos__row{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:18px}.bs-logos__row[aria-hidden="true"]{display:none}}