/* Twee blokken onderaan de homepage: de beoordelingen en "Wie is Learnit".
   Eigen bestand, los ingeladen, zodat er geen css-build (npm run build:css) aan te
   pas hoeft te komen en PurgeCSS deze klassen niet kan wegpoetsen. Alles begint met
   hb- zodat het niets van de bestaande homepage-opmaak raakt.

   Wat hier stond: een EmbedSocial-widget die de reviews met javascript inspoot. Die
   feeds gaven niets meer terug -- geen foutmelding, gewoon niets -- dus onder de kop
   "Wat anderen zeggen over onze trainingen" gaapte een leeg vlak van een halve
   schermhoogte. En omdat het javascript was, zag Google de tekst nooit staan. */

/* ---- beoordelingen ---- */
.hb-scores {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px; margin: 6px 0 30px;
}
.hb-score {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e1e6ea; border-radius: 40px;
    padding: 9px 20px 9px 16px; text-decoration: none; color: #55616c; font-size: 15px;
    box-shadow: 0 2px 8px -4px rgba(19, 28, 37, .2);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hb-score:hover, .hb-score:focus {
    text-decoration: none; color: #55616c; border-color: #c3ccd4;
    box-shadow: 0 6px 16px -8px rgba(19, 28, 37, .4);
}
.hb-score b { font-size: 23px; font-weight: 700; color: #131c25; line-height: 1; }
.hb-score b small { font-size: 13px; font-weight: 400; color: #8a97a3; }
.hb-merk-sp { font-weight: 700; color: #e5581f; }
/* In de smalle kolom van de referentie-tab passen ze niet naast elkaar. */
.hb-scores-kolom { flex-direction: column; align-items: stretch; margin: 0; }
.hb-scores-kolom .hb-score { justify-content: flex-start; }

/* Trainers naast de cijfers op de reviewtab van een cursuspagina. Daar stond wel
   "Learnit als geheel" maar niet van wie je nou eigenlijk les krijgt. */
.hb-trainers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.hb-trainer {
    display: flex; align-items: center; gap: 11px; padding: 8px 12px;
    border: 1px solid #e1e6ea; border-radius: 30px; background: #fff;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hb-trainer:hover, .hb-trainer:focus {
    text-decoration: none; color: inherit; border-color: #c3ccd4;
    box-shadow: 0 6px 16px -8px rgba(19, 28, 37, .4);
}
.hb-trainer img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #e3e9ef; flex: none; }
.hb-trainer-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hb-trainer-tekst b { font-size: 15px; color: #131c25; }
.hb-trainer-tekst span { font-size: 13px; color: #7a8894; }

/* Sterren: een grijze rij met daaroverheen een gouden, afgeknipt op --vul. Het
   percentage rekent beoordelingen.py uit; een sjabloon kan niet rekenen. */
.hb-sterren { position: relative; display: inline-block; font-size: 17px; line-height: 1; white-space: nowrap; }
.hb-sterren::before { content: "\2605\2605\2605\2605\2605"; color: #dbe0e5; letter-spacing: 1px; }
.hb-sterren::after {
    content: "\2605\2605\2605\2605\2605"; color: #f5a623; letter-spacing: 1px;
    position: absolute; left: 0; top: 0; overflow: hidden; width: var(--vul, 0%);
}
.hb-sterren-klein { font-size: 13px; margin-left: auto; flex: none; }
/* Springest rekent tot tien, dus daar past een balk beter dan vijf sterren. */
.hb-balk { position: relative; display: inline-block; width: 74px; height: 6px; border-radius: 4px; background: #e4e8ec; }
.hb-balk::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--vul, 0%); border-radius: 4px; background: #e5581f; }

.hb-quotes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px; text-align: left;
}
.hb-quote {
    position: relative; margin: 0; padding: 30px 22px 18px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 4px rgba(19, 28, 37, .04), 0 18px 34px -24px rgba(19, 28, 37, .5);
}
/* Aanhalingsteken als watermerk; het citaat staat er gewoon overheen. */
.hb-quote::before {
    content: "\201C"; position: absolute; top: 2px; left: 16px;
    font-family: Georgia, "Times New Roman", serif; font-size: 60px; line-height: 1; color: #dde5ec;
}
.hb-quote blockquote {
    position: relative; margin: 0 0 15px; padding: 0; border: 0;
    font-size: 15px; line-height: 1.6; color: #2c3742;
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.hb-quote figcaption { display: flex; align-items: center; gap: 10px; border-top: 1px solid #eef1f4; padding-top: 13px; }
.hb-quote figcaption img, .hb-initiaal {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e3e9ef; flex: none;
}
.hb-initiaal { display: grid; place-items: center; font-weight: 700; color: #14608f; background: #e2eef6; font-size: 15px; }
.hb-quote-wie { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hb-quote-wie b { font-size: 15px; color: #131c25; }
.hb-quote-wie span { font-size: 13px; color: #7a8894; }
.hb-voet { margin: 26px 0 0; font-size: 15px; }
.hb-voet a { color: #14608f; }

/* ---- Wie is Learnit (sectie; de naam in een citaat heet hb-quote-wie) ----
   Was een blok gecentreerde tekst zonder vorm, onderaan de pagina geplakt. Dezelfde
   feiten, maar eerst vier cijfers die je in een oogopslag leest en dan pas het
   verhaal, zodat het eruitziet alsof het er hoort. */
.hb-wie {
    background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
    border-top: 1px solid #e4e9ee;
    padding: 56px 20px 60px; margin-top: 40px;
}
.hb-wie-binnen { max-width: 940px; margin: 0 auto; text-align: center; }
.hb-wie-binnen h2 { margin: 0 0 26px; }
.hb-feiten {
    list-style: none; margin: 0 0 28px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;
}
.hb-feiten li { display: flex; flex-direction: column; align-items: center; }
.hb-feiten b {
    font-size: 30px; font-weight: 700; color: #14608f; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hb-feiten span { font-size: 14px; color: #5d6b78; margin-top: 4px; line-height: 1.35; }
.hb-wie-tekst { max-width: 68ch; margin: 0 auto 26px; line-height: 1.65; color: #3c4b59; }
.hb-wie-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.hb-wie .hb-knop {
    display: inline-block; padding: 11px 22px; border-radius: 4px;
    background: #14608f; color: #fff !important; font-weight: 600; text-decoration: none;
    transition: background .15s ease;
}
.hb-wie .hb-knop:hover, .hb-wie .hb-knop:focus { background: #0f4c72; color: #fff !important; text-decoration: none; }
.hb-wie .hb-knop-licht { background: #fff; color: #14608f !important; border: 1px solid #c3ccd4; }
.hb-wie .hb-knop-licht:hover, .hb-wie .hb-knop-licht:focus { background: #f4f8fb; color: #14608f !important; border-color: #14608f; }

@media (max-width: 767px) {
    .hb-wie { padding: 40px 16px 44px; }
    .hb-feiten b { font-size: 25px; }
}