/* =========================================================
   Bedrijfskleding van 071 Clothing: de voorbeelden per logo (polo, trui, T-shirt, jas) en de stappen.
   Gebruikt op haeswijk-digital.nl (/bedrijfskleding en de startpagina) en op 071clothing.nl.
   De HTML komt uit kleding.bedrijfsvoorbeelden() in tools/kleding.py. Eigen kleuren, zodat het op beide sites werkt.
   ========================================================= */
.bk { --bk-inkt: #141414; --bk-zacht: #6b6760; --bk-lijn: rgba(20, 20, 20, 0.12); --bk-vlak: #f3efe7; --bk-rood: #c8102e; color: var(--bk-inkt); }
.bk__stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: bk; }
.bk__stappen li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bk-vlak); font-weight: 700; font-size: 0.92rem; line-height: 1.35; }
.bk__stappen b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bk-inkt); color: #fff; }
.bk__voorbeelden { display: grid; gap: 12px; }
.bk__voorbeeld { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bk__logo { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 18px; border-radius: 10px; background: var(--bk-achter, #141414); color: rgba(243, 239, 231, 0.78); text-align: center; }
.bk__logo img { width: 100%; max-width: 190px; height: auto; }
.bk__logo span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bk__stuk { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #f4f4f2; border: 1px solid var(--bk-lijn); }
.bk__stuk img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bk__stuk:hover img { transform: scale(1.05); }
.bk__stuk figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 0.8rem; font-weight: 800; color: var(--bk-inkt); }
.bk__punten { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.bk__punten li::before { content: "✓"; margin-right: 6px; color: var(--bk-rood); font-weight: 800; }
@media (max-width: 900px) {
    .bk__stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk__voorbeeld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bk__logo { grid-column: 1 / -1; padding: 22px; }
    .bk__logo img { max-width: 170px; }
}
@media (max-width: 540px) { .bk__stappen { grid-template-columns: 1fr; } }