/* =========================================
   Content structuur
   Van toepassing op .blog-style elementen
========================================= */

/* Headings */
.blog-style h2 {
  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: 300;
}

/* Lists */
.blog-style ul {
  list-style: none;
  margin: 0 0 24px;
  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;
  }
}

/* =========================================
   Uitgelichte afbeelding
========================================= */

/* Desktop */
img.uitgelichte-afbeelding {
    width: 100%;
    height: 400px !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
    margin: 32px 0;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    img.uitgelichte-afbeelding {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        object-fit: cover;
        margin: 28px 0;
    }
}

/* Mobiel */
@media (max-width: 767px) {
    img.uitgelichte-afbeelding {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        object-fit: cover;
        margin: 24px 0;
    }
}

/* =========================================
   Content blokken - afbeelding + tekst
   Van toepassing op diensten en regio's
========================================= */

/* Desktop */
.content-blok {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 138px;
    align-items: stretch;
    margin: 48px 0;
}

.blok-tekst p {
    margin-bottom: 1.2em;
}

.blok-tekst p:last-child {
    margin-bottom: 0;
}

/* Afbeelding styling */
.blok-afbeelding img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 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: 36px 0;
        align-items: stretch;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .content-blok {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 28px 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;
    }
}