Hoeijmakers. Verzekerd vooruit.

<?php
$ly_tekst_id = get_sub_field('ovz_anker');
if (!empty($ly_tekst_id)) :
    echo '<div id="' . esc_attr($ly_tekst_id) . '"></div>';
endif;

$selected_items = get_sub_field('ovz_overzicht');
$random_experts = is_array($selected_items) ? $selected_items : array();
shuffle($random_experts);

$grid_aantal_items = get_sub_field('ovz_aantal_items');
$class_name = '';
switch ($grid_aantal_items) {
    case '2': $class_name = 'twee-items'; break;
    case '3': $class_name = 'drie-items'; break;
    case '4': $class_name = 'vier-items'; break;
    default: $class_name = 'default-class';
}

$top_afstand = get_sub_field('ly_ovz_bovenruimte');
$class_name_top = '';
switch ($top_afstand) {
    case '0': $class_name_top = 'ge-top'; break;
    case '1': $class_name_top = 'k-top'; break;
    case '2': $class_name_top = 'm-top'; break;
    case '3': $class_name_top = 'gr-top'; break;
    default: $class_name_top = 'default-class';
}

$bottom_afstand = get_sub_field('ly_ovz_onderruimte');
$class_name_bottom = '';
switch ($bottom_afstand) {
    case '0': $class_name_bottom = 'ge-bottom'; break;
    case '1': $class_name_bottom = 'k-bottom'; break;
    case '2': $class_name_bottom = 'm-bottom'; break;
    case '3': $class_name_bottom = 'gr-bottom'; break;
    default: $class_name_bottom = 'default-class';
}

$section_background_color = get_sub_field('ly_ovz_cp');
$show_cta_block = get_sub_field('ly_ovz_cta_vak');
$show_line = get_sub_field('ly_ovz_lijn_boven_blok');
$svg_icon = '/wp-content/uploads/2025/05/pijl-hm-1.svg';
$svg_icon_white = '/wp-content/uploads/2025/05/pijl-hm-wit.svg';

if (!empty($random_experts)): ?>
<section class="brxe-section s-ovz <?php echo $class_name_top; ?> <?php echo $class_name_bottom; ?>" style="background-color: <?php echo esc_attr($section_background_color); ?>;">
    <div class="brxe-container c-ovz">
        <?php if ($show_line): ?><hr><?php endif; ?>
        <?php
        $titel = get_sub_field('ovz_titel', false);
        if (!empty($titel)): ?>
            <div class="ovz-team-titel ovz-titel">
                <?php echo wp_kses_post($titel); ?>
            </div>
        <?php endif; ?>

        <!-- Desktop grid -->
        <div class="bm-ovz-container <?php echo $class_name; ?>">
            <?php foreach ($random_experts as $related_item):
                $related_id = is_object($related_item) ? $related_item->ID : $related_item;
                $title = get_the_title($related_id);
                $mobile_featured_image = get_field('uitgelichte_afbeelding_mobiel', $related_id);
                $image = $mobile_featured_image['url'] ?? get_the_post_thumbnail_url($related_id) ?: 'https://placehold.co/200x200';
                $tags = get_the_terms($related_id, 'post_tag');
                $tag_list = $tags && !is_wp_error($tags) ? implode(', ', wp_list_pluck($tags, 'name')) : '';
                $telefoon = get_field('ex_telefoonnummer', $related_id);
                $email = get_field('ex_email', $related_id);
            ?>
            <a href="/contact" class="bm-ovz-block">
                <div class="bm-ovz-img-wrapper">
                    <img class="bm-ovz-img" src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
                    <div class="bm-ovz-hover-overlay">
                    <div class="bm-ovz-hover-inner">
    <!-- <h4 style="color:white;">Persoonlijk contact met onze expert</h4> -->
    <p><strong><span class='underline'>Mail</span> of <span class='underline'>bel</span> mij voor advies op maat</strong></p>
    <p class='bm-ovz-team-contact'>-</p>
    <?php if ($email): ?>
        <p class='bm-ovz-team-contact'><?php echo esc_html($email); ?></p>
    <?php endif; ?>
    <?php if ($telefoon): ?>
        <p class='bm-ovz-team-contact'><?php echo esc_html($telefoon); ?></p>
    <?php endif; ?>
</div>

                    </div>
                </div>
                <div class="bm-ovz-content">
                    <h3 class="bm-ovz-title"><?php echo esc_html($title); ?></h3>
                    <p class="bm-ovz-excerpt ter-cta">
                        <?php echo esc_html($tag_list); ?>
                        <span class="button-icon">
                            <img class="team-pijl" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart" width="24" height="13">
                        </span>
                    </p>
                </div>
            </a>
            <?php endforeach; ?>

            <?php if ($show_cta_block): ?>
            <a href="/contact" class="bm-ovz-block fixed-block ovz-team-cta-block">
                <div class="bm-ovz-img-wrapper"><h2>Kom in contact met onze experts</h2></div>
                <div class="bm-ovz-cta-content">
                    <span class="ovz-cta-icon">
                        <img class="team-pijl-cta" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart">
                    </span>
                </div>
            </a>
            <?php endif; ?>
        </div>

        <!-- Mobile/tablet GSAP-slider -->
        <div class="bm-ovz-slider-gsap-outer">
            <div class="bm-ovz-slider-gsap-track">
                <?php foreach ($random_experts as $related_item):
                    $related_id = is_object($related_item) ? $related_item->ID : $related_item;
                    $title = get_the_title($related_id);
                    $mobile_featured_image = get_field('uitgelichte_afbeelding_mobiel', $related_id);
                    $image = $mobile_featured_image['url'] ?? get_the_post_thumbnail_url($related_id) ?: 'https://placehold.co/200x200';
                    $tags = get_the_terms($related_id, 'post_tag');
                    $tag_list = $tags && !is_wp_error($tags) ? implode(', ', wp_list_pluck($tags, 'name')) : '';
                    $telefoon = get_field('ex_telefoonnummer', $related_id);
                    $email = get_field('ex_email', $related_id);
                ?>
                <div class="bm-ovz-slide">
                    <div class="bm-ovz-block overlay-open">
                        <div class="bm-ovz-img-wrapper">
                            <img class="bm-ovz-img" src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
                            <div class="bm-ovz-hover-overlay">
                                <div class="bm-ovz-hover-inner">
                                    <p><strong>Mail of bel mij voor advies op maat</strong></p>
                                    <?php if ($telefoon): ?>
                                        <p><?php echo esc_html($telefoon); ?></p>
                                    <?php endif; ?>
                                    <?php if ($email): ?>
                                        <p><?php echo esc_html($email); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <div class="bm-ovz-content">
                            <h3 class="bm-ovz-title"><?php echo esc_html($title); ?></h3>
                            <p class="bm-ovz-excerpt ter-cta">
                                <?php echo esc_html($tag_list); ?>
                                <span class="button-icon">
                                    <img class="team-pijl" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart" width="24" height="13">
                                </span>
                            </p>
                        </div>
                                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

/* Desktop: toon grid, verberg slider */
@media (min-width: 1025px) {
  .bm-ovz-container {
    display: grid;
  }

  .bm-ovz-slider-gsap-outer {
    display: none;
  }
}

/* Mobiel/tablet: verberg grid, toon slider */
@media (max-width: 1024px) {
  .bm-ovz-container {
    display: none;
   
  }

  .bm-ovz-slider-gsap-outer {
    display: block;
    overflow: hidden;
    width: 100%;
    position: relative;
  }

  .bm-ovz-slider-gsap-track {
    display: flex;
    gap: 16px;
    will-change: transform;
  }

  .bm-ovz-slide {
    flex: 0 0 auto;
    width: 75vw; /* of bijvoorbeeld 300px */
    padding: 2rem;
    border-radius: 8px;
  }
  
.bm-ovz-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.c-ovz{
   padding-right:0;
}

}

/* Swipe support (optioneel voor touch devices)
.splide__track {
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
}

.splide__slide {
  touch-action: pan-y;
  min-width: 0;
  box-sizing: border-box;
} */



/* Op desktop: overlay verschijnt bij hover */
@media (hover: hover) and (pointer: fine) {
  .bm-ovz-block:hover .bm-ovz-hover-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Verberg overlay standaard */
.bm-ovz-hover-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
}

/* Op mobiel: overlay wordt zichtbaar met JS door klasse .overlay-open */
.bm-ovz-block.overlay-open .bm-ovz-hover-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.underline{
  text-decoration: underline; 
}

.bm-ovz-team-contact{
  font-size:26px !important;
  font-weight: 400 !important;
}

.bm-ovz-slide{
  padding-left:0px;
  gap:16px;
}

document.querySelectorAll('.bm-ovz-block').forEach(block => {
  block.addEventListener('click', function(e) {
    if (window.matchMedia('(max-width: 1024px)').matches) {
      e.preventDefault();
      this.classList.toggle('overlay-open');
    }
  });
});

<?php
$ly_tekst_id = get_sub_field('ovz_anker');
if (!empty($ly_tekst_id)) :
    echo '<div id="' . esc_attr($ly_tekst_id) . '"></div>';
endif;

$selected_items = get_sub_field('ovz_overzicht');
$random_experts = is_array($selected_items) ? $selected_items : array();
shuffle($random_experts);

$grid_aantal_items = get_sub_field('ovz_aantal_items');
$class_name = '';
switch ($grid_aantal_items) {
    case '2': $class_name = 'twee-items'; break;
    case '3': $class_name = 'drie-items'; break;
    case '4': $class_name = 'vier-items'; break;
    default: $class_name = 'default-class';
}

$top_afstand = get_sub_field('ly_ovz_bovenruimte');
$class_name_top = '';
switch ($top_afstand) {
    case '0': $class_name_top = 'ge-top'; break;
    case '1': $class_name_top = 'k-top'; break;
    case '2': $class_name_top = 'm-top'; break;
    case '3': $class_name_top = 'gr-top'; break;
    default: $class_name_top = 'default-class';
}

$bottom_afstand = get_sub_field('ly_ovz_onderruimte');
$class_name_bottom = '';
switch ($bottom_afstand) {
    case '0': $class_name_bottom = 'ge-bottom'; break;
    case '1': $class_name_bottom = 'k-bottom'; break;
    case '2': $class_name_bottom = 'm-bottom'; break;
    case '3': $class_name_bottom = 'gr-bottom'; break;
    default: $class_name_bottom = 'default-class';
}

$section_background_color = get_sub_field('ly_ovz_cp');
$show_cta_block = get_sub_field('ly_ovz_cta_vak');
$show_line = get_sub_field('ly_ovz_lijn_boven_blok');
$svg_icon = '/wp-content/uploads/2025/05/pijl-hm-1.svg';
$svg_icon_white = '/wp-content/uploads/2025/05/pijl-hm-wit.svg';

if (!empty($random_experts)): ?>
<section class="brxe-section s-ovz <?php echo $class_name_top; ?> <?php echo $class_name_bottom; ?>" style="background-color: <?php echo esc_attr($section_background_color); ?>;">
    <div class="brxe-container c-ovz">
        <?php if ($show_line): ?><hr><?php endif; ?>
        <?php
        $titel = get_sub_field('ovz_titel', false);
        if (!empty($titel)): ?>
            <div class="ovz-team-titel ovz-titel">
                <?php echo wp_kses_post($titel); ?>
            </div>
        <?php endif; ?>

        <!-- Desktop grid -->
        <div class="bm-ovz-container <?php echo $class_name; ?>">
            <?php foreach ($random_experts as $related_item):
                $title = get_the_title($related_item->ID);
                $mobile_featured_image = get_field('uitgelichte_afbeelding_mobiel', $related_item->ID);
                $image = $mobile_featured_image['url'] ?? get_the_post_thumbnail_url($related_item->ID) ?: 'https://placehold.co/200x200';
                $tags = get_the_terms($related_item->ID, 'post_tag');
                $tag_list = $tags && !is_wp_error($tags) ? implode(', ', wp_list_pluck($tags, 'name')) : '';
            ?>
            <a href="/contact" class="bm-ovz-block">
                <div class="bm-ovz-img-wrapper">
                    <img class="bm-ovz-img" src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
                    <div class="bm-ovz-hover-overlay">
                        <div class="bm-ovz-hover-inner">
                            <p>Kom in contact voor advies op maat.</p>
                            <span class="button-icon">
                                <img class="team-pijl-wit" src="<?php echo esc_url($svg_icon_white); ?>" alt="pijl wit">
                            </span>
                        </div>
                    </div>
                </div>
                <div class="bm-ovz-content">
                    <h3 class="bm-ovz-title"><?php echo esc_html($title); ?></h3>
                    <p class="bm-ovz-excerpt ter-cta">
                        <?php echo esc_html($tag_list); ?>
                        <span class="button-icon">
                            <img class="team-pijl" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart" width="24" height="13">
                        </span>
                    </p>
                </div>
            </a>
            <?php endforeach; ?>

            <?php if ($show_cta_block): ?>
            <a href="/contact" class="bm-ovz-block fixed-block ovz-team-cta-block">
                <div class="bm-ovz-img-wrapper"><h2>Kom in contact met onze experts</h2></div>
                <div class="bm-ovz-cta-content">
                    <span class="ovz-cta-icon">
                        <img class="team-pijl-cta" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart">
                    </span>
                </div>
            </a>
            <?php endif; ?>
        </div>

        <!-- Mobile/tablet GSAP-slider -->
<div class="bm-ovz-slider-gsap-outer">
  <div class="bm-ovz-slider-gsap-track">
    <?php foreach ($random_experts as $related_item):
      $title = get_the_title($related_item->ID);
      $mobile_featured_image = get_field('uitgelichte_afbeelding_mobiel', $related_item->ID);
      $image = $mobile_featured_image['url'] ?? get_the_post_thumbnail_url($related_item->ID) ?: 'https://placehold.co/200x200';
      $tags = get_the_terms($related_item->ID, 'post_tag');
      $tag_list = $tags && !is_wp_error($tags) ? implode(', ', wp_list_pluck($tags, 'name')) : '';
    ?>
    <div class="bm-ovz-slide">
      <a href="/contact" class="bm-ovz-block">
        <div class="bm-ovz-img-wrapper">
          <img class="bm-ovz-img" src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
          <div class="bm-ovz-hover-overlay">
            <div class="bm-ovz-hover-inner">
              <p>Kom in contact voor advies op maat.</p>
              <span class="button-icon">
                <img class="team-pijl" src="<?php echo esc_url($svg_icon_white); ?>" alt="pijl wit" width="24" height="13">
              </span>
            </div>
          </div>
        </div>
        <div class="bm-ovz-content">
          <h3 class="bm-ovz-title"><?php echo esc_html($title); ?></h3>
          <p class="bm-ovz-excerpt ter-cta">
            <?php echo esc_html($tag_list); ?>
            <span class="button-icon">
              <img class="team-pijl" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart" width="24" height="13">
            </span>
          </p>
        </div>
      </a>
    </div>
    <?php endforeach; ?>
  </div>
</div>

    </div>
</section>
<?php endif; ?>

/* Desktop: toon grid, verberg slider */
@media (min-width: 1025px) {
  .bm-ovz-container {
    display: grid;
  }

  .bm-ovz-slider-gsap-outer {
    display: none;
  }
}

/* Mobiel/tablet: verberg grid, toon slider */
@media (max-width: 1024px) {
  .bm-ovz-container {
    display: none;
  }

  .bm-ovz-slider-gsap-outer {
    display: block;
    overflow: hidden;
    width: 100%;
    position: relative;
  }

  .bm-ovz-slider-gsap-track {
    display: flex;
    gap: 16px;
    will-change: transform;
  }

  .bm-ovz-slide {
    flex: 0 0 auto;
    width: 75vw; /* of bijvoorbeeld 300px */
    padding: 2rem;
    border-radius: 8px;
  }
}

/* Swipe support (optioneel voor touch devices) */
.splide__track {
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
}

.splide__slide {
  touch-action: pan-y;
  min-width: 0;
  box-sizing: border-box;
}

/* Verberg overlay standaard */
.bm-ovz-hover-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Op desktop: overlay verschijnt bij hover */
@media (hover: hover) and (pointer: fine) {
  .bm-ovz-block:hover .bm-ovz-hover-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Op mobiel: overlay wordt zichtbaar met JS door klasse .overlay-open */
.bm-ovz-block.overlay-open .bm-ovz-hover-overlay {
  opacity: 1;
  pointer-events: auto;
}

document.querySelectorAll('.bm-ovz-block').forEach(block => {
  block.addEventListener('click', function(e) {
    if (window.matchMedia('(max-width: 1024px)').matches) {
      e.preventDefault();
      this.classList.toggle('overlay-open');
    }
  });
});

<?php
$ly_tekst_id = get_sub_field("ovz_anker");
if (!empty($ly_tekst_id)):
    echo '<div id="' . esc_attr($ly_tekst_id) . '"></div>';
endif;

$selected_items = get_sub_field("ovz_overzicht");
$random_experts = is_array($selected_items) ? $selected_items : [];
shuffle($random_experts);

$max_display = 5;
$limited_experts = array_slice($random_experts, 0, $max_display);


$grid_aantal_items = get_sub_field("ovz_aantal_items");
$class_name = match ($grid_aantal_items) {
    "2" => "twee-items",
    "3" => "drie-items",
    "4" => "vier-items",
    default => "default-class"
};

$top_afstand = get_sub_field("ly_ovz_bovenruimte");
$class_name_top = match ($top_afstand) {
    "0" => "ge-top",
    "1" => "k-top",
    "2" => "m-top",
    "3" => "gr-top",
    default => "default-class"
};

$bottom_afstand = get_sub_field("ly_ovz_onderruimte");
$class_name_bottom = match ($bottom_afstand) {
    "0" => "ge-bottom",
    "1" => "k-bottom",
    "2" => "m-bottom",
    "3" => "gr-bottom",
    default => "default-class"
};

$section_background_color = get_sub_field("ly_ovz_cp");
$show_cta_block = get_sub_field("ly_ovz_cta_vak");
$show_line = get_sub_field("ly_ovz_lijn_boven_blok");
$svg_icon = "/wp-content/uploads/2025/05/pijl-hm-1.svg";

if (!empty($random_experts)): ?>
<section class="brxe-section s-ovz <?php echo $class_name_top; ?> <?php echo $class_name_bottom; ?>" style="background-color: <?php echo esc_attr($section_background_color); ?>;">
    <div class="brxe-container c-ovz">
        <?php if ($show_line): ?><hr><?php endif; ?>
        <?php if ($titel = get_sub_field("ovz_titel", false)): ?>
            <div class="ovz-team-titel ovz-titel">
                <?php echo wp_kses_post($titel); ?>
            </div>
        <?php endif; ?>

        <div class="bm-ovz-container <?php echo $class_name; ?>">
            <?php foreach ($random_experts as $related_item):
                $related_id = is_object($related_item) ? $related_item->ID : $related_item;
                $title = get_the_title($related_id);
                $mobile_featured_image = get_field("uitgelichte_afbeelding_mobiel", $related_id);
                $image = $mobile_featured_image["url"] ?? get_the_post_thumbnail_url($related_id) ?: "https://placehold.co/200x200";
                $tags = get_the_terms($related_id, "post_tag");
                $tag_list = $tags && !is_wp_error($tags) ? implode(", ", wp_list_pluck($tags, "name")) : "";

                $telefoon = get_field("ex_telefoonnummer", $related_id);
                $telefoon_link = get_field("ex_telefoonnummer_link", $related_id);
                $email = get_field("ex_email", $related_id);
                $email_link = get_field("ex_email_link", $related_id);
                ?>
            <div class="bm-ovz-block">
                <div class="bm-ovz-img-wrapper">
                    <img class="bm-ovz-img" src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
                    <div class="bm-ovz-hover-overlay">
                        <div class="bm-ovz-hover-inner">
                            <p class="hover-cta-text">
                                <?php if ($email_link): ?>
                                    <a class="underline" href="<?php echo esc_attr($email_link); ?>" title="Mail">Mail</a>
                                <?php else: ?>
                                    <span class="underline">Mail</span>
                                <?php endif; ?>
                                of
                                <?php if ($telefoon_link): ?>
                                    <a class="underline" href="<?php echo esc_attr($telefoon_link); ?>" title="Bel">bel</a>
                                <?php else: ?>
                                    <span class="underline">bel</span>
                                <?php endif; ?>
                                mij voor advies op maat
                            </p>
                            <?php if ($email && $email_link): ?>
                                <p class='bm-ovz-team-contact'>
                                    <a href="<?php echo esc_attr($email_link); ?>"><?php echo esc_html($email); ?></a>
                                </p>
                            <?php endif; ?>
                            <?php if ($telefoon && $telefoon_link): ?>
                                <p class='bm-ovz-team-contact'>
                                    <a href="<?php echo esc_attr($telefoon_link); ?>"><?php echo esc_html($telefoon); ?></a>
                                </p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="bm-ovz-content">
                    <h3 class="bm-ovz-title"><?php echo esc_html($title); ?></h3>
                    <p class="bm-ovz-excerpt ter-cta">
                        <?php echo esc_html($tag_list); ?>
                        <span class="button-icon">
                            <img class="team-pijl" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart" width="24" height="13">
                        </span>
                    </p>
                </div>
            </div>
            <?php endforeach; ?>

            <?php
            $cta_link = get_sub_field("ly_ovz_cta_link");
            $cta_title = $cta_link["title"] ?? '';
            $cta_url = $cta_link["url"] ?? '#';
            $cta_target = $cta_link["target"] ?? '_self';
            ?>

            <?php if ($show_cta_block && $cta_title && $cta_url): ?>
                <a href="<?php echo esc_url($cta_url); ?>" target="<?php echo esc_attr($cta_target); ?>" class="bm-ovz-block fixed-block ovz-team-cta-block">
                    <div class="bm-ovz-img-wrapper">
                        <h2><?php echo esc_html($cta_title); ?></h2>
                    </div>
                    <div class="bm-ovz-cta-content">
                        <span class="ovz-cta-icon">
                            <img class="team-pijl-cta"
                                 src="<?php echo esc_url($svg_icon); ?>"
                                 alt="pijl zwart"
                                 data-default-src="<?php echo esc_url($svg_icon); ?>"
                                 data-hover-src="/wp-content/uploads/2025/05/pijl-hm-1-wit.svg">
                        </span>
                    </div>
                </a>
            <?php endif; ?>
        </div>

                <!-- Mobile/tablet GSAP-slider -->
        <div class="bm-ovz-slider-gsap-outer">
            <div class="bm-ovz-slider-gsap-track">
                <?php foreach ($limited_experts as $related_item):
                    $related_id = is_object($related_item) ? $related_item->ID : $related_item;
                    $title = get_the_title($related_id);
                    $mobile_featured_image = get_field('uitgelichte_afbeelding_mobiel', $related_id);
                    $image = $mobile_featured_image['url'] ?? get_the_post_thumbnail_url($related_id) ?: 'https://placehold.co/200x200';
                    $tags = get_the_terms($related_id, 'post_tag');
                    $tag_list = $tags && !is_wp_error($tags) ? implode(', ', wp_list_pluck($tags, 'name')) : '';
                    $telefoon = get_field('ex_telefoonnummer', $related_id);
                    $email = get_field('ex_email', $related_id);
                ?>
                <div class="bm-ovz-slide">
                    <div class="bm-ovz-block overlay-open">
                        <div class="bm-ovz-img-wrapper">
                            <img class="bm-ovz-img" src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>">
                            <div class="bm-ovz-hover-overlay">
                                <div class="bm-ovz-hover-inner">
                                    <p><strong>Mail of bel mij voor advies op maat</strong></p>
                                    <?php if ($telefoon): ?>
                                        <p><?php echo esc_html($telefoon); ?></p>
                                    <?php endif; ?>
                                    <?php if ($email): ?>
                                        <p><?php echo esc_html($email); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <div class="bm-ovz-content">
                            <h3 class="bm-ovz-title"><?php echo esc_html($title); ?></h3>
                            <p class="bm-ovz-excerpt ter-cta">
                                <?php echo esc_html($tag_list); ?>
                                <span class="button-icon">
                                    <img class="team-pijl" src="<?php echo esc_url($svg_icon); ?>" alt="pijl zwart" width="24" height="13">
                                </span>
                            </p>
                        </div>
                                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>


    </div>
</section>

<?php endif; ?>

document.querySelectorAll('.bm-ovz-block').forEach(block => {
  block.addEventListener('click', function(e) {
    if (window.matchMedia('(max-width: 1024px)').matches) {
      e.preventDefault();
      this.classList.toggle('overlay-open');
    }
  });
});

document.addEventListener('DOMContentLoaded', function () {
    const hoverBlocks = document.querySelectorAll('.bm-ovz-block.fixed-block');

    hoverBlocks.forEach(block => {
        const icon = block.querySelector('.team-pijl-cta');
        if (!icon) return;

        const defaultSrc = icon.getAttribute('data-default-src');
        const hoverSrc = icon.getAttribute('data-hover-src');

        block.addEventListener('mouseenter', () => {
            icon.src = hoverSrc;
        });

        block.addEventListener('mouseleave', () => {
            icon.src = defaultSrc;
        });
    });
});