/* ==== Pagina zelf nooit horizontaal schuiven ==== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==== Ultra ads slider op de voorpagina - basis tot 991px ==== */
@media (max-width: 991px) {

  /* Buitenste view nooit breder dan het scherm en geen lekkende overflow */
  .view-id-ultra_ads.view-display-id-block_3 {
    max-width: 100%;
    overflow: hidden;
  }

  /* De view-content wordt de 'slider track' */
  .view-id-ultra_ads.view-display-id-block_3 .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    gap: 1rem;
    padding: 0 1rem;
  }

  /* Kaart-opmaak (randje, wit vlak, centreren) */
  .view-id-ultra_ads.view-display-id-block_3 .view-content > .views-row {
    scroll-snap-align: start;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px;
    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Logo netjes gecentreerd en gelijk */
  .view-id-ultra_ads.view-display-id-block_3 .view-content > .views-row img {
    display: block;
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Scrollbar verbergen (optioneel) */
  .view-id-ultra_ads.view-display-id-block_3 .view-content {
    scrollbar-width: none;
  }
  .view-id-ultra_ads.view-display-id-block_3 .view-content::-webkit-scrollbar {
    display: none;
  }
}

/* ==== Breedte van de slides per schermbreedte ==== */

/* Alle schermen tot 768px: ongeveer 1,5 advertentie zichtbaar */
@media (max-width: 767.98px) {
  .view-id-ultra_ads.view-display-id-block_3 .view-content > .views-row {
    flex: 0 0 calc(100% / 1.5);
  }
}

/* Tablets tot 991px: ongeveer 2,5 advertentie zichtbaar */
@media (min-width: 768px) and (max-width: 991.98px) {
  .view-id-ultra_ads.view-display-id-block_3 .view-content > .views-row {
    flex: 0 0 calc(100% / 3.5);
  }
}

/* ==== Boven 991px: dit block/slider helemaal verbergen ==== */
@media (min-width: 992px) {
  .view-id-ultra_ads.view-display-id-block_3 {
    display: none;
  }
}
/* ==== Ultra ads slider in schepen_verkoop - t/m 991px ==== */
@media (max-width: 991px) {

  /* Buitenste view nooit breder dan het scherm */
  .view-id-ultra_ads.view-display-id-block_2 {
    max-width: 100%;
    overflow: hidden;
  }

  /* De view-content wordt de 'slider track' */
  .view-id-ultra_ads.view-display-id-block_2 .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    gap: 1rem;
    padding: 0 1rem;
  }

  /* Elke views-row is één slide – zelfde kaart-layout als nu */
  .view-id-ultra_ads.view-display-id-block_2 .view-content > .views-row {
    flex: 0 0 calc(100% / 1.5);  /* 1,5 advertentie op mobiel */
    scroll-snap-align: start;

    /* De rand / achtergrond zoals je nu hebt komt van
       .s2b-ultra-ads-wrapper .views-row – laat die CSS gewoon staan */
  }

  /* Logo netjes gecentreerd – stijlen voor layout laat je zoals je nu hebt */
  .view-id-ultra_ads.view-display-id-block_2 .view-content > .views-row img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Scrollbar verbergen (optioneel) */
  .view-id-ultra_ads.view-display-id-block_2 .view-content {
    scrollbar-width: none;
  }
  .view-id-ultra_ads.view-display-id-block_2 .view-content::-webkit-scrollbar {
    display: none;
  }
}

/* Tablets tot 991px: 4,5 advertenties zichtbaar (zoals je op front wilde) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .view-id-ultra_ads.view-display-id-block_2 .view-content > .views-row {
    flex: 0 0 calc(100% / 3.5);
  }
}