/* =========================================
   Content structuur
   Van toepassing op .blog-style elementen
========================================= */
/* Headings */
.blog-style h2 {
	font-size: 32px !important;
	line-height: 1.2em !important;
  margin: 32px 0 16px;
}
/* Paragraaf spacing */
.blog-style p {
  margin-bottom: 1.2em;
}
.blog-style p:last-child {
  margin-bottom: 0;
}
/* Intro
   Alle paragrafen vóór de eerste h2 worden bold.
   Paragrafen na een h2 gaan terug naar font-weight 300.
*/
.blog-style p {
  font-weight: 700;
}
.blog-style h2 ~ p {
  font-weight: 500;
}
/* Lists */
.blog-style ul {
  list-style: none;
  margin: 0 0 24px;
  font-weight: 500;
  padding-top: 20px;
  padding-left: 0;
}
.blog-style ul li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 24px;
}
/* Tablet */
@media (max-width: 1024px) {
  .blog-style h2 {
    margin: 24px 0 12px;
  }
  .blog-style ul li {
    margin-bottom: 10px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .blog-style h2 {
    margin: 20px 0 10px;
  }
  .blog-style ul li {
    margin-bottom: 8px;
  }
}

/* =========================================
   Afbeeldingen in content
   Gedeelde vormgeving, afwijkende hoogte
========================================= */
/* Basis - beide types */
img.uitgelichte-afbeelding,
img.content-afbeelding {
    width: 100%;
    object-fit: cover;
    display: block;
    margin: 32px 0;
    border-radius: 11px;
}
/* Desktop hoogte */
img.uitgelichte-afbeelding {
    height: 520px !important;
    max-height: 520px !important;
}
img.content-afbeelding {
    height: 400px !important;
    max-height: 400px !important;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    img.uitgelichte-afbeelding,
    img.content-afbeelding {
        margin: 28px 0;
    }
    img.uitgelichte-afbeelding {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
    img.content-afbeelding {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
    }
}
/* Mobiel */
@media (max-width: 767px) {
    img.uitgelichte-afbeelding,
    img.content-afbeelding {
        margin: 24px 0;
    }
    img.uitgelichte-afbeelding {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }
    img.content-afbeelding {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
    }
}

/* =========================================
   SEO-pagina's - afbeeldingen volledig tonen
   Vaste hoogte + cover knipt screenshots af
   Full width, hoogte schaalt mee met de verhouding
========================================= */
.single-seo-pagina img.uitgelichte-afbeelding,
.single-seo-pagina img.content-afbeelding {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain;
    margin: 32px 0;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .single-seo-pagina img.uitgelichte-afbeelding,
    .single-seo-pagina img.content-afbeelding {
        margin: 28px 0;
    }
}
/* Mobiel */
@media (max-width: 767px) {
    .single-seo-pagina img.uitgelichte-afbeelding,
    .single-seo-pagina img.content-afbeelding {
        margin: 24px 0;
    }
}

/* =========================================
   Content blokken - afbeelding + tekst
   Van toepassing op diensten
========================================= */
/* Desktop */
.content-blok {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 138px;
    align-items: stretch;
    margin: 140px 0;
}
.blok-tekst p {
    margin-bottom: 1.2em;
}
.blok-tekst p:last-child {
    margin-bottom: 0;
}
.content-blok:last-of-type {
  margin-bottom: 0;
}
/* Afbeelding styling */
.blok-afbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 11px;
}
/* Afbeelding links (standaard) */
.content-blok.afbeelding-links .blok-afbeelding {
    order: 1;
}
.content-blok.afbeelding-links .blok-tekst {
    order: 2;
}
/* Afbeelding rechts */
.content-blok.afbeelding-rechts .blok-afbeelding {
    order: 2;
}
.content-blok.afbeelding-rechts .blok-tekst {
    order: 1;
}
/* Geen afbeelding = tekst pakt volle breedte */
.content-blok:has(.blok-afbeelding:empty) {
    grid-template-columns: 1fr;
}
.content-blok:has(.blok-afbeelding:empty) .blok-afbeelding {
    display: none;
}
/* Tablet */
@media (max-width: 1024px) {
    .content-blok {
        gap: 56px;
        margin: 48px 0;
        align-items: stretch;
    }
}
/* Mobile */
@media (max-width: 767px) {
    .content-blok {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 32px 0;
    }
    .blok-afbeelding img {
        height: 220px;
    }
    .content-blok.afbeelding-links .blok-afbeelding,
    .content-blok.afbeelding-rechts .blok-afbeelding {
        order: 1;
    }
    .content-blok.afbeelding-links .blok-tekst,
    .content-blok.afbeelding-rechts .blok-tekst {
        order: 2;
    }
}