/* ============================================
   Over ons (post-1615.css). De resultaten-carrousel is de gedeelde component.
   ============================================ */

/* --- Hero (9a57e5e): tekst 50% + foto 43%, rij die op tablet omslaat naar gecentreerd onder elkaar --- */
.over-hero { background-color: var(--color-primary); padding: 80px 0; }
.over-hero__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 72px; }
.over-hero__tekst { display: flex; flex-direction: column; justify-content: center; gap: 24px; flex: 0 0 auto; width: 50%; min-width: 0; }
.over-hero__titel {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--h-primary-size);
  font-weight: 800;
  line-height: var(--h-primary-lh);
  color: var(--color-white);
}
.over-hero__titel em { color: #ee8331; font-style: italic; }
.over-hero__intro {
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-white);
}
.over-hero__knoppen { display: flex; gap: 12px; margin: 0; }
.over-hero__foto { display: flex; flex-direction: column; flex: 0 0 auto; width: 43%; min-width: 0; }
.over-hero__foto img { display: block; width: 100%; height: 394px; object-fit: cover; object-position: center left; }

/* --- Waarom klanten voor ons kiezen (65ddc3b + HTML-widget "prob-grid") --- */
.over-aanpak { background-color: var(--color-cream); padding: 80px 0; }
.over-aanpak__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.over-aanpak__kaarten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-ui);
}
.over-kaart {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: var(--color-white);
  transition: transform 0.25s, box-shadow 0.25s;
}
@media (hover: hover) {
  .over-kaart:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.08) 0 12px 32px; }
}
.over-kaart__icoon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(238, 131, 49, 0.1);
  color: var(--color-accent);
  font-size: 20px;
}
.over-kaart__titel {
  margin: 0;
  font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.5;
  color: var(--color-primary);
}
.over-kaart__tekst { margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-grey); }

/* --- CTA met foto (3844b8f): tekst 48% + foto 58%, krimpen samen naar rato --- */
.over-cta { background-color: var(--color-primary); padding: 75px 0; }
.over-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 72px; }
.over-cta__tekst { display: flex; flex-direction: column; gap: 30px; flex: 0 1 48%; min-width: 0; }
.over-cta__sub {
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-white);
}
.over-cta__knop { margin: 0; }
.over-cta__foto { flex: 0 1 58%; min-width: 0; }
.over-cta__foto img { display: block; width: 100%; height: 351px; object-fit: cover; object-position: center center; }

/* --- Resultaten (9b0b096) --- */
.over-cases { background-color: var(--color-white); padding: 80px 0; }

@media (max-width: 1024px) {
  .over-hero { padding: 50px 30px 75px; }
}
@media (max-width: 768px) {
  .over-aanpak__kaarten { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .over-hero { padding: 30px 20px 60px; }
  .over-hero__inner { flex-direction: column; justify-content: center; align-items: flex-start; gap: 50px; }
  .over-hero__tekst { width: 100%; justify-content: flex-start; align-items: flex-start; }
  .over-hero__knoppen { width: 100%; }
  .over-hero__knoppen .knop { width: 100%; }
  .over-hero__foto { width: 100%; }
  .over-hero__foto img { height: 242px; }

  .over-aanpak { padding: 60px 20px; }
  .over-aanpak__inner { align-items: center; }

  .over-cta { padding: 50px 15px; }
  .over-cta__inner { flex-direction: column; align-items: center; }
  .over-cta__tekst, .over-cta__foto { flex: 0 0 auto; width: 100%; }
  .over-cta__knop .knop { display: block; width: 100%; }
  .over-cta__foto img { height: 219px; }

  .over-cases { padding: 60px 20px; }
}