/* assets/dp-home-merken.css — compacte merkenslider op de homepage (snippets/dp-home-merken.rain, plannen/homepage-merken-plan.md)
   Donkere band zoals voorheen, maar lager en met grotere logo's. Eén rij; op mobiel veegbaar (scroll-snap), geen owl-carousel.
   Alle regels hangen onder #dphm. */

#dphm { background: #29384B; padding: 36px 0 40px; }
#dphm *, #dphm *::before, #dphm *::after { box-sizing: border-box; }
#dphm a { text-decoration: none; }
#dphm .dphm-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#dphm .dphm-h2 { margin: 0; color: #FFFFFF; font-size: 28px; font-weight: 800; line-height: 1.2; }
#dphm .dphm-alle { color: #70C067; font-size: 14px; font-weight: 700; white-space: nowrap; }
#dphm .dphm-alle:hover { color: #FFFFFF; text-decoration: underline; }

/* één rij: op desktop 6 naast elkaar, meer merken schuiven door */
#dphm .dphm-rij { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 80px) / 6); gap: 16px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#dphm .dphm-rij::-webkit-scrollbar { display: none; }
#dphm .dphm-rij li { margin: 0; padding: 0; scroll-snap-align: start; }
#dphm .dphm-rij li::before { display: none; }
#dphm .dphm-merk { display: flex; align-items: center; justify-content: center; height: 84px; padding: 12px 18px; background: #FFFFFF; border-radius: 10px; transition: transform .15s, box-shadow .15s; }
#dphm .dphm-merk:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
#dphm .dphm-merk img { display: block; width: auto; height: auto; max-width: 100%; max-height: 52px; object-fit: contain; }
#dphm .dphm-merk span { color: #29384B; font-size: 15px; font-weight: 800; text-align: center; }

@media (max-width: 991px) {
  #dphm .dphm-h2 { font-size: 24px; }
  #dphm .dphm-rij { grid-auto-columns: calc((100% - 48px) / 4); }
}

/* mobiel: laag blok, kop en "Alle merken" op één regel, ruim 2 logo's in beeld zodat je ziet dat je kunt vegen */
@media (max-width: 767px) {
  #dphm { padding: 20px 0 22px; }
  #dphm .dphm-kop { margin-bottom: 12px; }
  #dphm .dphm-h2 { font-size: 20px; }
  #dphm .dphm-alle { font-size: 13px; }
  #dphm .dphm-rij { grid-auto-columns: 40%; gap: 10px; margin-right: -15px; padding-right: 15px; scroll-padding-left: 0; }
  #dphm .dphm-merk { height: 64px; padding: 10px 12px; }
  #dphm .dphm-merk:hover { transform: none; box-shadow: none; }
  #dphm .dphm-merk img { max-height: 40px; }
}