/* ============================================
   Dienstpagina's /website-laten-maken/ (post-3442), /lokale-seo/ (post-2658) en /google-ads/ (post-1485):
   sectie-omhulsels. De inhoud zit in componenten (dienst-hero, kaart-slider, stappen, rekentool, …).
   Zijpadding op desktop is 0 (boxed 1240px); op tablet loopt de inhoud dus tot de rand, zoals in het origineel.
   ============================================ */

/* Gewone sectie: kicker, kop, (intro), inhoud onder elkaar, links uitgelijnd; mobiel gecentreerd */
.dienst-sectie { padding: 80px 0; background-color: var(--color-white); }
.dienst-sectie--creme { background-color: var(--color-cream); }
.dienst-sectie--donker { background-color: var(--color-primary); }
.dienst-sectie__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

.dienst-sectie__sub {
  width: 100%; max-width: 100%;
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-text);
}
.dienst-sectie__sub--45 { width: 45%; }
.dienst-sectie__sub--51 { width: 51%; }
.dienst-sectie__sub--grijs { color: #5f5f5f; }
.dienst-sectie__sub--kit-grijs { color: var(--color-grey); }
.dienst-sectie--donker .dienst-sectie__sub { color: var(--color-white); }

/* Rekentool-widget: 80% breed (Google Ads 100%) */
.dienst-sectie__rekentool { width: 80%; }
.dienst-sectie__rekentool--vol { width: 100%; }

/* Logorij (dd290d3) */
.dienst-logos { padding: 20px 0; background-color: var(--color-white); }
.dienst-logos__inner { display: flex; flex-direction: column; align-items: center; }

/* Branches (09f05d0) — zelfde opbouw als op de homepage */
.dienst-branches { padding: 80px 0; background-color: var(--color-white); }
.dienst-branches__inner { display: flex; align-items: center; gap: 70px; }
.dienst-branches__tekst { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; }
.dienst-branches__sub { font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--color-primary); }
.dienst-branches__kaarten { flex: 0 1 2062px; min-width: 0; } /* vaste basis = 2 × 1024px foto + 14px, zie pages/home.css */
@media (max-width: 768px) { .dienst-branches__kaarten { flex-basis: 1024px; } }

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

/* Prijslijst (0c60e4e / 671ebbd / 995ddb8): crème; website en Google Ads 75px, lokale SEO 80px; mobiel 50px 15px */
.dienst-prijzen { padding: 75px 0; background-color: var(--color-cream); }
.dienst-prijzen--80 { padding: 80px 0; }

/* Reviews (103da7b / 7cd1298 / 058353c) */
.dienst-reviews { padding: 80px 0; background-color: var(--color-primary); }
.dienst-reviews__inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; }

/* Over ons (c260f68 / e145389 / d0ffb4e) */
.dienst-over-ons { padding: 80px 0; background-color: var(--color-white); }
.dienst-over-ons > .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; }

/* Veelgestelde vragen (47396a4 / dca9551 / 8078f37) */
.dienst-faq { padding: 80px 0; background-color: var(--color-cream); }
.dienst-faq__inner { display: flex; flex-direction: column; gap: 24px; }
.dienst-faq__titel { color: #000; }

@media (max-width: 767px) {
  .dienst-sectie { padding: 60px 20px; }
  .dienst-sectie__inner { align-items: center; }
  .dienst-sectie--mob-start .dienst-sectie__inner { align-items: flex-start; gap: 20px; }
  .dienst-sectie__sub, .dienst-sectie__sub--45, .dienst-sectie__sub--51 { width: 100%; }
  .dienst-sectie__rekentool { width: 100%; }

  .dienst-logos { display: none; } /* elementor-hidden-mobile */

  .dienst-branches { padding: 60px 20px; }
  .dienst-branches__inner { flex-wrap: wrap; gap: 24px; }
  .dienst-branches__kaarten { width: 100%; }
  .dienst-branches .heading-2 { font-size: 32px; line-height: 1.2; }
  .dienst-branches__sub { font-size: 17px; line-height: 1.5; }

  .dienst-cases { padding: 60px 20px; }
  .dienst-cases .cases { padding: 0; } /* hier is de sectie zelf de container: geen extra geneste padding */
  .dienst-prijzen, .dienst-prijzen--80 { padding: 50px 15px; }
  .dienst-reviews { padding: 60px 20px; }
  .dienst-reviews__inner { gap: 20px; }
  .dienst-over-ons { padding: 60px 20px; }
  .dienst-over-ons > .container { align-items: flex-start; gap: 24px; }
  .dienst-faq { padding: 60px 20px; }
  .dienst-faq__inner { align-items: flex-start; }
}