/* ============================================================
   aanbod — paginaspecifieke stijlen
   Gedeelde stijlen staan in /assets/css/main.css
   ============================================================ */

/* Tekst-accentkleuren (met bold — aanvulling op main.css text-* klassen) */

.txt-goud        { color: var(--goud);        font-weight: bold; }
.txt-geel        { color: var(--geel);        font-weight: bold; }
.txt-oker        { color: var(--oker);        font-weight: bold; }
.txt-lichtgroen  { color: var(--lichtgroen);  font-weight: bold; }
.txt-roze        { color: var(--roze);        font-weight: bold; }
.txt-petroleum   { color: var(--petroleum);   font-weight: bold; }
.txt-grijs       { color: var(--grijs); }


/* ============================================================
   Knoppen per categorie
   ============================================================ */

.btn-goud        { background-color: var(--goud);       color: var(--white); font-weight: bold; border-color: var(--goud); }
.btn-goud:hover  { background-color: var(--white);      color: var(--goud);  border-color: var(--goud); }

.btn-geel        { background-color: var(--geel);       color: var(--white); font-weight: bold; border-color: var(--geel); }
.btn-geel:hover  { background-color: var(--white);      color: var(--geel);  border-color: var(--geel); }

.btn-oker        { background-color: var(--oker);       color: var(--white); font-weight: bold; border-color: var(--oker); }
.btn-oker:hover  { background-color: var(--white);      color: var(--oker);  border-color: var(--oker); }

.btn-roze        { background-color: var(--roze);       color: var(--white); font-weight: bold; border-color: var(--roze); }
.btn-roze:hover  { background-color: var(--white);      color: var(--roze);  border-color: var(--roze); }

.btn-petroleum   { background-color: var(--petroleum);  color: var(--white); font-weight: bold; border-color: var(--petroleum); }
.btn-petroleum:hover { background-color: var(--white);  color: var(--petroleum); border-color: var(--petroleum); }

.btn-lichtgroen  { background-color: var(--lichtgroen); color: var(--white); font-weight: bold; border-color: var(--lichtgroen); }
.btn-lichtgroen:hover { background-color: var(--white); color: var(--lichtgroen); border-color: var(--lichtgroen); }

/* Light-varianten */

.btn-grijs-light      { background-color: var(--white); color: var(--grijs);       font-weight: bold; border-color: var(--grijs); }
.btn-grijs-light:hover { background-color: var(--grijs); color: var(--white);      border-color: var(--white); }

.btn-goud-light       { background-color: var(--white); color: var(--goud);        font-weight: bold; border-color: var(--goud); }
.btn-goud-light:hover { background-color: var(--goud);  color: var(--white);       border-color: var(--white); }

.btn-geel-light       { background-color: var(--white); color: var(--geel);        font-weight: bold; border-color: var(--geel); }
.btn-geel-light:hover { background-color: var(--geel);  color: var(--white);       border-color: var(--white); }

.btn-oker-light       { background-color: var(--white); color: var(--oker);        font-weight: bold; border-color: var(--oker); }
.btn-oker-light:hover { background-color: var(--oker);  color: var(--white);       border-color: var(--white); }

.btn-roze-light       { background-color: var(--white); color: var(--roze);        font-weight: bold; border-color: var(--roze); }
.btn-roze-light:hover { background-color: var(--roze);  color: var(--white);       border-color: var(--white); }

.btn-petroleum-light       { background-color: var(--white); color: var(--petroleum);   font-weight: bold; border-color: var(--petroleum); }
.btn-petroleum-light:hover { background-color: var(--petroleum); color: var(--white);   border-color: var(--white); }

.btn-lichtgroen-light       { background-color: var(--white); color: var(--lichtgroen); font-weight: bold; border-color: var(--lichtgroen); }
.btn-lichtgroen-light:hover { background-color: var(--lichtgroen); color: var(--white); border-color: var(--white); }


/* ============================================================
   Afbeeldingen in kaarten
   ============================================================ */

.img-overflow { overflow: hidden; }
.img-fit      { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   Testimonials carousel
   ============================================================ */

#testimonialCarousel .carousel-inner {
    min-height: 350px;
}

#testimonialCarousel .carousel-indicators [data-bs-target] {
    background-color: var(--grijs);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#testimonialCarousel .carousel-indicators .active {
    transform: scale(1.3);
}

#testimonialCarousel .carousel-indicators #car-btn-1.active { background-color: var(--roze); }
#testimonialCarousel .carousel-indicators #car-btn-2.active { background-color: var(--goud); }
#testimonialCarousel .carousel-indicators #car-btn-3.active { background-color: var(--oker); }

@media (min-width: 992px) {
    #testimonialCarousel p { font-size: 1.25rem; }
}


/* ============================================================
   Testimonial masonry grid
   ============================================================ */

.testimonial-masonry {
    column-count: 1;
    column-gap: 1.5rem;
}
@media (min-width: 768px)  { .testimonial-masonry { column-count: 2; } }
@media (min-width: 1200px) { .testimonial-masonry { column-count: 3; } }

.testimonial-masonry .card {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
}


/* ============================================================
   Academy pills
   ============================================================ */

.academy-pills li {
    background-color: #f2f5f9;
    color: var(--grijs);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.15s ease-in-out;
}

.academy-pills li:hover {
    background-color: #e9eef4;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

@media (max-width: 480px) {
    .academy-pills li { font-size: 0.9rem; padding: 0.35rem 0.8rem; }
}