/* Make all directory buttons have rounded corners */
.directory-button {
  border-radius: 20px;
}

/* Verberg Gutenberg Spacer blocks op mobiel */
@media (max-width: 782px) {
  .wp-block-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

/* Button-tekst nooit afbreken: altijd horizontaal naast elkaar */
.wp-block-button__link,
.elementor-button,
.elementor-button-link,
button[type="button"],
button[type="submit"],
input[type="submit"] {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
}

/* Verwijder eventuele br-regels in buttons */
.wp-block-button__link br,
.elementor-button br,
.elementor-button-link br {
  display: none !important;
}
@media (max-width: 782px) {
  .mobile-visual-first.wp-block-columns,
  .mobile-visual-first.is-layout-flex {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .mobile-visual-first > .wp-block-column { flex-basis: 100% !important; }

  /* Draai 2 kolommen om: visual boven, tekst eronder */
  .mobile-visual-first > .wp-block-column:first-child { order: 2 !important; }
  .mobile-visual-first > .wp-block-column:last-child  { order: 1 !important; }

  /* Nauwkeuriger? Gebruik deze als je kolommen klassen gaf */
  .mobile-visual-first > .is-visual { order: 1 !important; }
  .mobile-visual-first > .is-text   { order: 2 !important; }
}
/* 3 kolommen: button altijd onderaan, zonder spacers */
.btn-bottom.wp-block-columns { align-items: stretch; }            /* gelijke kolomhoogte */
.btn-bottom .wp-block-column {
  display: flex; 
  flex-direction: column;                                         /* stapel binnen kolom */
}

/* duw Buttons-blok naar onderen */
.btn-bottom .wp-block-buttons,
.btn-bottom .wp-block-button { 
  margin-top: auto;                                               /* neemt resterende ruimte */
}

/* optioneel: zorg dat inhoud niet uitrekt als er weinig tekst is */
.btn-bottom .wp-block-column > *:not(.wp-block-buttons):last-child {
  margin-bottom: 0;
}
/* Desktop: brede hero, Mobiel: strakkere uitsnede */
.hero-cover { 
  aspect-ratio: 16 / 9;     /* desktop-breed */
  overflow: hidden;
}
.hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* vult, cropt netjes */
  object-position: center;   /* focuspunt */
  display: block;
}

@media (max-width: 782px) {
  .hero-cover {
    aspect-ratio: 4 / 5;     /* mobiel-uitsnede */
  }
}

/* Optionele focus-helpers als het onderwerp hoog/laag zit */
.hero-cover.focus-top img    { object-position: center 15%; }
.hero-cover.focus-bottom img { object-position: center 85%; }
/* HERO – breed op desktop, nette uitsnede op mobiel (werkt voor Featured Image, Image en Cover) */
@media (min-width: 783px){
  .hero-cover,
  .wp-block-post-featured-image.hero-cover,
  figure.wp-block-image.hero-cover,
  .wp-block-cover.hero-cover {
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
  }
}
@media (max-width: 782px){
  .hero-cover,
  .wp-block-post-featured-image.hero-cover,
  figure.wp-block-image.hero-cover,
  .wp-block-cover.hero-cover {
    aspect-ratio: 4 / 5 !important;    /* pas aan naar 1/1 of 3/4 indien nodig */
    overflow: hidden;
  }
}

/* IMG-varianten (Featured Image of Image-blok) */
.hero-cover img,
.wp-block-post-featured-image.hero-cover img,
figure.wp-block-image.hero-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* COVER-blok varianten (afbeelding als background of als image-background) */
.wp-block-cover.hero-cover {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.wp-block-cover.hero-cover .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
/* Header-items netjes in één rij */
.header-row {
  display: flex;                /* maak er een echte rij van */
  align-items: center;          /* verticaal centreren */
  gap: clamp(16px, 3vw, 40px);
}

/* Duw de CTA-knop helemaal naar rechts */
.header-row .header-cta {
  margin-left: auto;            /* pakt vrije ruimte rechts */
  display: flex;                /* behoudt flex voor knoppen */
  justify-content: flex-end;    /* knop rechts binnen eigen blok */
}

/* Zorg dat de knoptekst perfect gecentreerd in de knop staat */
.header-row .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Mobiel: vaak mooier om CTA te centreren onder/naast menu */
@media (max-width: 782px) {
  .header-row { gap: 16px; }          /* iets compacter */
  .header-row .header-cta {
    margin-left: 0;
    justify-content: center;          /* zet op 'right' als je rechts wil houden */
  }
}

/* DESKTOP: knoppen links uitlijnen */
@media (min-width: 768px) {
  .elementor-widget-button .elementor-button {
    display: inline-block;
    margin-left: 0;
    margin-right: auto;
  }
}

/* MOBIEL: knoppen centreren */
@media (max-width: 767px) {
  .elementor-widget-button .elementor-button {
    display: block;
    margin: 0 auto;
    text-align: center;
  }
}

@media (max-width: 768px){
.blog-section,
.blog-card,
.blog-wrapper{
   padding-top:40px !important;
   padding-bottom:40px !important;
   height:auto !important;
   min-height:auto !important;
}
.blog-card img{
   margin-top:20px;
}
}

@media (max-width: 768px) {
  .mobile-fix {
    min-height: auto !important;
    height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .mobile-fix .wp-block-group__inner-container {
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  .mobile-fix {
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}