/* ============================================================
   DIENSTEN.CSS — navigatie-dropdown + diensten-pagina's
   Geladen ná app.css.
   ============================================================ */

/* ── Nav dropdown ─────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; background: none; border: none;
  color: rgba(255, 255, 255, 0.8); font-size: var(--font-size-sm);
  font-weight: 500; font-family: inherit; padding: var(--spacing-sm) 0;
}
.nav-dropdown__trigger:hover { color: #fff; }
.nav-dropdown__trigger svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.nav-dropdown:hover .nav-dropdown__trigger svg,
.nav-dropdown.is-open .nav-dropdown__trigger svg { transform: rotate(180deg); }

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 600px; max-width: 90vw;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 64px -18px rgba(0, 0, 0, 0.32);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 600;
}
.nav-dropdown__menu::before {
  content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 18px;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.ndi-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--color-text); transition: background 0.2s ease;
}
.ndi-link:hover { background: var(--color-light-bg); }
.ndi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--color-primary-dark);
}
.ndi-ic svg { width: 21px; height: 21px; }
.ndi-txt strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--color-text); }
.ndi-txt span { font-size: 12px; color: var(--color-text-gray); }
.ndi-all {
  grid-column: 1 / -1;
  margin-top: 6px; padding: 12px;
  text-align: center; font-weight: 700; font-size: 14px;
  color: var(--color-dark);
  background: var(--color-primary);
  border-radius: 12px;
  transition: background 0.2s ease;
}
.ndi-all:hover { background: var(--color-primary-dark); }

/* Mobiele diensten-accordion in het overlay-menu */
.mobile-nav .m-dienst-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; color: #fff;
  font-size: var(--font-size-xl); font-weight: 600; font-family: inherit; cursor: pointer;
}
.mobile-nav .m-dienst-toggle svg { width: 20px; height: 20px; transition: transform 0.25s ease; }
.mobile-nav .m-dienst-toggle.is-open svg { transform: rotate(180deg); }
.mobile-nav .m-dienst-panel {
  display: none; flex-direction: column; gap: 10px;
  margin-top: 6px; max-height: 44vh; overflow-y: auto; padding: 6px 0;
}
.mobile-nav .m-dienst-panel.is-open { display: flex; }
.mobile-nav .m-dienst-panel a { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.mobile-nav .m-dienst-panel a:hover { color: var(--color-primary); }

/* ── Diensten overzicht ───────────────────────────────────── */
.dienst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dienst-card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dienst-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dienst-card__img { position: relative; height: 190px; overflow: hidden; }
.dienst-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.dienst-card:hover .dienst-card__img img { transform: scale(1.06); }
.dienst-card__ic {
  position: absolute; left: 16px; bottom: 16px;
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--color-primary); color: var(--color-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.dienst-card__ic svg { width: 24px; height: 24px; }
.dienst-card__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.dienst-card__body h3 { font-size: 19px; margin-bottom: 8px; }
.dienst-card__body p { font-size: 14px; color: var(--color-text-gray); line-height: 1.6; flex: 1; margin-bottom: 16px; }
.dienst-card__link { font-weight: 600; font-size: 14px; color: var(--color-primary-dark); display: inline-flex; align-items: center; gap: 6px; }
.dienst-card__link svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.dienst-card:hover .dienst-card__link svg { transform: translateX(4px); }
@media (max-width: 1024px) { .dienst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dienst-grid { grid-template-columns: 1fr; } }

/* ── Dienst detail ────────────────────────────────────────── */
.svc-hero { position: relative; padding: clamp(96px, 11vw, 122px) 0 clamp(48px, 6vw, 64px);
  min-height: clamp(380px, 33vw, 520px); display: flex; align-items: center;
  overflow: hidden; isolation: isolate; color: #fff;
  background: var(--grad-dark, linear-gradient(155deg, #2d4179 0%, #1b2c54 100%)); }
.svc-hero > .container { width: 100%; }
.svc-hero__bg { position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-repeat: no-repeat; background-position: 50% 28%;
  /* Foto vult het hele vlak (cover = geen interne rand), dus nooit een
     scheidingslijn. De linkerkant vervaagt vloeiend naar 0 zodat het beeld
     naadloos overgaat in de blauwe achtergrond waar de tekst staat. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.6) 52%, #000 74%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.6) 52%, #000 74%);
  opacity: 0; animation: svc-hero-fade 2.2s ease forwards; }
@keyframes svc-hero-fade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-hero__bg { opacity: 1; animation: none; transform: none; }
}
.svc-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(13,27,42,0.55) 0%, rgba(13,27,42,0.2) 40%, rgba(13,27,42,0) 68%); }
.svc-hero__crumbs { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 14px; }
.svc-hero__crumbs a { color: rgba(255, 255, 255, 0.7); }
.svc-hero__crumbs a:hover { color: var(--color-primary); }
.svc-hero__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--color-primary); color: var(--color-dark); margin-bottom: 18px;
}
.svc-hero__ic svg { width: 28px; height: 28px; }
.svc-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 48px); margin-bottom: 14px; max-width: 640px;
  text-shadow: 0 2px 18px rgba(13, 27, 42, 0.55); }
.svc-hero p { color: rgba(255, 255, 255, 0.92); font-size: 18px; max-width: 560px;
  text-shadow: 0 1px 12px rgba(13, 27, 42, 0.6); }

/* ── Tekst-met-foto blok (foto links, tekst rechts) ───────── */
.svc-split { padding: clamp(44px, 6vw, 76px) 0; }
.svc-split__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px); align-items: stretch;
}
/* Fotovak is even hoog als de tekst en wordt volledig gevuld door de foto
   (geen lege ruimte). De foto's zijn qua verhouding dicht bij het kader
   gekozen, zodat er nauwelijks wordt bijgesneden. */
.svc-split__media {
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(150deg, #eef2fb 0%, #dfe6f4 100%);
  min-height: 260px;
}
.svc-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.svc-split__body h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 14px 0 16px; }
.svc-split__body p { color: var(--color-text); line-height: 1.8; margin-bottom: 14px; }
.svc-split__body .btn { margin-top: 10px; }
@media (max-width: 860px) {
  .svc-split__grid { grid-template-columns: 1fr; }
  .svc-split__media { min-height: 0; }
  .svc-split__media img { position: static; height: auto; }
}

.svc-body { padding: clamp(50px, 7vw, 84px) 0; }
.svc-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
.svc-main h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 16px; }
.svc-main h2:not(:first-child) { margin-top: 40px; }
.svc-main p { color: var(--color-text); line-height: 1.8; margin-bottom: 16px; }
.svc-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.svc-feature { display: flex; gap: 12px; align-items: flex-start; background: var(--color-light-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px; }
.svc-feature .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: var(--color-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.svc-feature span { font-size: 14px; line-height: 1.5; color: var(--color-text); }
@media (max-width: 560px) { .svc-features { grid-template-columns: 1fr; } }

.svc-aside { position: sticky; top: 96px; }
.svc-cta-box { background: linear-gradient(160deg, #0d1b2a, #11243a); color: #fff; border-radius: 18px; padding: 28px; box-shadow: var(--shadow-lg); }
.svc-cta-box h3 { color: #fff; font-size: 21px; margin-bottom: 8px; }
.svc-cta-box p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 18px; }
.svc-cta-box .btn { width: 100%; margin-bottom: 10px; }
.svc-cta-box .svc-phone { display: block; text-align: center; color: var(--color-primary); font-weight: 600; font-size: 15px; }
.svc-cta-mini { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; gap: 18px; }
.svc-cta-mini div strong { display: block; color: var(--color-primary); font-size: 20px; font-weight: 800; line-height: 1; }
.svc-cta-mini div span { font-size: 12px; color: rgba(255, 255, 255, 0.65); }
@media (max-width: 900px) { .svc-layout { grid-template-columns: 1fr; } .svc-aside { position: static; } }

.svc-other { background: var(--color-light-bg); padding: clamp(48px, 6vw, 72px) 0; }
.svc-other .section-header { text-align: center; margin-bottom: 32px; }