/* Basis, overgenomen uit de hoofdsite zodat de tegels er identiek uitzien */
*{box-sizing:border-box}
body,html{position:relative;margin:0;padding:0;font-family:"Roboto",sans-serif;color:#424c55;background:#fff}
a{text-decoration:none;color:inherit}
a:focus{outline:none}
h1,h2,h3,h4,h5{margin:0}
ul{margin:0;padding:0}
ul li{list-style-type:none}
img{max-width:100%}
.container{width:1500px;max-width:calc(100% - 40px);margin:0 auto}
.btn{display:inline-block;padding:0 35px;font-size:18px;font-weight:500;line-height:60px;color:#fff;height:60px;border-radius:3px;background:#27292c;transition:all ease-in-out .2s}
.btn:hover{opacity:.85}
.btn--small{padding:0 22px;height:44px;line-height:44px;font-size:16px}

/* Titeltypografie; de hoofdsite gebruikt hier niveau-grotesk, dat is een
   Typekit-font en niet gelicentieerd voor dit domein, dus Roboto 500 */
.reviews-page__intro h1{font-size:clamp(28px,4vw,45px);font-weight:500;line-height:1.15;color:#27292c}
.reviews-page__intro p{font-size:18px;font-weight:300;line-height:1.6}

/* Kop en voet van deze landingspagina */
.site-header{border-bottom:1px solid #eceff2}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.site-header__logo{display:block;line-height:0}.site-header__logo img{display:block;height:56px;width:auto}@media(max-width:700px){.site-header__logo img{height:44px}}
.site-footer{padding:40px 0;border-top:1px solid #eceff2;font-size:15px;color:#8a93a1}
.site-footer a{text-decoration:underline}

/* Paginering, overgenomen uit style.css van de hoofdsite */
.pagination{margin-top:100px;display:flex;justify-content:center;align-items:center}
@media(max-width:1000px){.pagination{margin-top:50px}}
@media(max-width:700px){.pagination{flex-direction:column;align-items:center}}
.pagination__prev,.pagination__next{font-size:18px;font-weight:500;color:#6b7481}
.pagination__prev{margin-right:40px}
.pagination__next{margin-left:40px}
@media(max-width:700px){.pagination__prev{margin-right:0}.pagination__next{margin-left:0}}
.pagination__numbers{display:flex;margin:0;padding:0;align-items:center}
@media(max-width:700px){.pagination__numbers{margin:30px 0}}
.pagination__numbers li{list-style-type:none}
.pagination__numbers li:not(:last-child){margin-right:10px}
.pagination__numbers li a{padding:10px 20px;font-size:18px;font-weight:500;color:#6b7481;border-radius:3px;transition:all ease-in-out .2s}
.pagination__numbers li a.active,.pagination__numbers li a:hover{background:#27292c;color:#fff}
.pagination__dots{display:block;position:relative;top:-5px;padding:0 5px;font-size:18px;line-height:1;color:#8a93a1}


/* Reviewtegels, scores en filters, 1-op-1 uit assets/scss/_reviews2025.scss van de hoofdsite */
.review-tile{display:flex;flex-direction:column;height:100%;padding:25px;border-radius:10px;background:#f5f7f9}.review-tile__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.review-tile__logo{width:28px;height:28px;-o-object-fit:contain;object-fit:contain}.review-tile__stars{display:flex;gap:2px}.review-tile__star{color:#b4c0d3;font-size:21px;line-height:1}.review-tile__star.is-filled{color:#ffb400}.review-tile__title{margin-bottom:8px;font-weight:600;color:#222e44}.review-tile__text{flex:1;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.6}.review-tile__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;font-size:13px;color:#8a93a1}.review-tile__author{font-weight:600}@media(max-width: 1250px){}@media(max-width: 1250px){}@media(max-width: 1000px){}.reviews-page{padding:40px 0 80px}.reviews-page__intro{max-width:700px;margin-bottom:30px}.reviews-page__intro h1{margin-bottom:15px}.reviews-page__anchor{scroll-margin-top:20px}.reviews-page__stats{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:60px}.reviews-page__filters{display:flex;flex-wrap:wrap;gap:10px 60px;margin-bottom:60px}.reviews-page__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:30px}@media(max-width: 1150px){.reviews-page__grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 700px){.reviews-page__grid{grid-template-columns:1fr;gap:15px}}.reviews-page__empty{color:#8a93a1}.reviews-page .pagination{margin-top:60px}.reviews-page .pagination .pagination__numbers li a.active,.reviews-page .pagination .pagination__numbers li a:hover{background:#27292c;color:#fff}.reviews-page .pagination .pagination__numbers{align-items:center}.reviews-page .pagination .pagination__dots{display:block;position:relative;top:-5px;padding:0 5px;font-size:18px;line-height:1;color:#8a93a1}.reviews-stat{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:10px;background:#f5f7f9;color:inherit;transition:background .2s}a.reviews-stat:hover{background:#eceff2}.reviews-stat__logo{width:32px;height:32px;-o-object-fit:contain;object-fit:contain}.reviews-stat__details{display:flex;flex-direction:column}.reviews-stat__rating{font-weight:600;color:#222e44}.reviews-stat__count{font-size:13px;color:#8a93a1}.reviews-filter{display:flex;flex-wrap:wrap;gap:10px}.reviews-filter__item{padding:10px 20px;border-radius:3px;background:#f0f2f5;color:#6b7481;font-size:18px;font-weight:300;transition:all ease-in-out .2s}.reviews-filter__item:hover,.reviews-filter__item.is-active{background:#27292c;color:#fff}.reviews-pagination__item{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;border-radius:5px;background:#eceff2;color:#424c55}.reviews-pagination__item:hover{background:#b4c0d3}.reviews-pagination__item.is-active{background:#222e44;color:#fff}

/* --- Mobiel: filters zijwaarts scrollen, scoreblokken op volle breedte --- */
@media(max-width:700px){
    .reviews-page__stats{gap:10px;margin-bottom:40px}
    .reviews-stat{width:100%}
    .reviews-stat__details{flex:1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px}

    .reviews-page__filters{flex-direction:column;flex-wrap:nowrap;gap:15px;margin-bottom:40px}

    /* Op één regel houden en zijwaarts scrollen; de vervaging rechts laat zien
       dat er meer achter de rand staat */
    .reviews-filter{
        flex-wrap:nowrap;
        min-width:0;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .reviews-filter::-webkit-scrollbar{display:none}
    .reviews-filter__item{flex:0 0 auto}
}


/* --- Onderwerpen: de badges boven de reviews ---
   Zelfde familie als .reviews-filter, maar rond en met het aantal erachter,
   zodat meteen te zien is dat dit een andere soort filter is */
.reviews-topics{margin-bottom:60px}
.reviews-topics__title{margin-bottom:20px;font-size:clamp(20px,2.2vw,26px);font-weight:500;line-height:1.3;color:#27292c}
.reviews-topics__badges{display:flex;flex-wrap:wrap;gap:10px}
.reviews-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid #e3e7ec;border-radius:100px;background:#f5f7f9;color:#6b7481;font-size:16px;font-weight:400;line-height:1.4;transition:all ease-in-out .2s}
.reviews-badge:hover{border-color:#c9d0d9;background:#eceff2;color:#27292c}
.reviews-badge.is-active{border-color:#27292c;background:#27292c;color:#fff}
.reviews-badge__count{padding:1px 8px;border-radius:100px;background:#e3e7ec;color:#6b7481;font-size:13px;font-weight:500}
.reviews-badge:hover .reviews-badge__count{background:#dbe0e7}
.reviews-badge.is-active .reviews-badge__count{background:rgba(255,255,255,.18);color:#fff}

/* Aantal achter de introzin op een onderwerppagina */
.reviews-page__count{color:#8a93a1}

/* Op een onderwerppagina de woorden markeren waarom een review meetelt */
.review-tile mark{padding:0 2px;border-radius:2px;background:#ffeeba;color:inherit}

/* Mobiel: net als de filters hierboven op één regel houden en zijwaarts
   scrollen, anders staat er zes regels aan badges voor de eerste review */
@media(max-width:700px){
    .reviews-topics{margin-bottom:40px}
    .reviews-topics__title{margin-bottom:15px}
    .reviews-badge{padding:8px 14px;font-size:15px}

    .reviews-topics__badges{
        flex-wrap:nowrap;
        min-width:0;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .reviews-topics__badges::-webkit-scrollbar{display:none}
    .reviews-badge{flex:0 0 auto}
}