/* Vloershop Core — kennisbankartikelen onder de productpagina.
 *
 * Thema-onafhankelijk, net als recent.css: dezelfde kleuren en hetzelfde
 * lettertype hardgecodeerd, zodat het blok ook klopt als het thema wisselt.
 * Bewust rustiger dan de productkaarten eromheen: dit is een zijpad, geen
 * tweede aanbod. */

.vs-artikeltips {
    width: 100%;
    margin: 32px 0 0;
    padding: 28px 0;
    background: #f7f8fb;
    border-top: 1px solid #e4e7f2;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Zelfde maat als .vs-recent-band eronder (1500 en 20px lucht), anders
   springt dit blok zichtbaar naar binnen ten opzichte van de rest van de
   pagina. De gekleurde band eromheen loopt wel door tot de rand. */
.vs-artikeltips__binnen {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.vs-artikeltips__kop {
    margin: 0 0 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #324696;
}

.vs-artikeltips__lijst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-artikeltip__link {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e4e7f2;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vs-artikeltip__link:hover,
.vs-artikeltip__link:focus-visible {
    border-color: #324696;
    box-shadow: 0 2px 10px rgba(50, 70, 150, 0.1);
}

.vs-artikeltip__titel {
    font-weight: 600;
    font-size: 0.975rem;
    line-height: 1.35;
    color: #324696;
}

.vs-artikeltip__tekst {
    font-size: 0.875rem;
    line-height: 1.45;
    color: #5b6178;
}

@media (max-width: 600px) {
    .vs-artikeltips { padding: 22px 0; }
    .vs-artikeltips__lijst { gap: 10px; }
    .vs-artikeltip__link { padding: 13px 15px; }
}