/* KE Kaart-carrousel — pure CSS scroll-snap, geen JS. Alle waarden in rem/%. */

.ke-carousel{
  --ke-cols: 3;
  --ke-gap: 1.4rem;
  --ke-mobile-card: 84%;
  --ke-tablet-card: 46%;
  display: grid;
  grid-template-columns: repeat(var(--ke-cols), 1fr);
  gap: var(--ke-gap);
  /* smooth scroll for the arrow-navigation (werkt in echte browsers; geen snap-conflict want snap staat alleen op touch) */
  scroll-behavior: smooth;
}

/* ---- card ---- */
.ke-carousel .ke-card{
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: #FFFFFF;
  border: 1.5px solid #E7DFD5;
  border-radius: 1rem;
}
.ke-carousel .ke-card-media{
  width: 100%;
  height: 13.5rem;
  overflow: hidden;
  flex: 0 0 auto;
}
/* covers the lazy-load <picture> wrapper too */
.ke-carousel .ke-card-media > *,
.ke-carousel .ke-card-media picture{
  display: block;
  width: 100%;
  height: 100%;
}
/* Target the REAL <img> element (ke-card-img is op de <img> zonder Imagify, maar Imagify
   verplaatst die class naar de <picture>-wrapper). Daarom ook `.ke-card-media img`, en de
   uitsnede komt uit de CSS-variabele --ke-pos die op het .ke-card-media-vakje staat. */
.ke-carousel .ke-card-media img,
.ke-carousel .ke-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ke-pos, 50% 50%);
  display: block;
}
.ke-carousel .ke-card-body{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.4rem 1.5rem;
}
.ke-carousel .ke-card-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background: #E8F4F4;
  color: #007070;
  border-radius: 50%;
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
/* Typografie afgestemd op de bestaande conditie-kaarten */
.ke-carousel .ke-card-title{
  margin: 0;
  color: #192A3D;
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}
.ke-carousel .ke-card-text,
.ke-carousel .ke-card-text p{
  color: #4B5563;
  font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.55;
}
.ke-carousel .ke-card-text p{ margin: 0 0 .5rem; }
.ke-carousel .ke-card-text :last-child{ margin-bottom: 0; }

/* ---- carousel base (shared) ---- */
.ke-carousel.ke-is-carousel{
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 1.1rem;
  padding-bottom: .6rem;
  scrollbar-width: none;
}
.ke-carousel.ke-is-carousel::-webkit-scrollbar{ display: none; }
.ke-carousel.ke-is-carousel > .ke-card{
  flex: 0 0 var(--ke-mobile-card);
  max-width: var(--ke-mobile-card);
 }

/* ---- ALWAYS carousel ---- */
.ke-carousel.ke-mode-always{
  display: flex; grid-template-columns: none; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-padding-left: 1.1rem; padding-bottom: .6rem; scrollbar-width: none;
}
.ke-carousel.ke-mode-always::-webkit-scrollbar{ display: none; }
.ke-carousel.ke-mode-always > .ke-card{
  flex: 0 0 var(--ke-mobile-card); max-width: var(--ke-mobile-card);}
@media (min-width: 48rem){
  .ke-carousel.ke-mode-always > .ke-card{ flex: 0 0 var(--ke-tablet-card); max-width: var(--ke-tablet-card); }
}

/* ---- AUTO: grid on desktop, carousel on touch OR <=94rem (covers phones in desktop-mode ~1320px) ---- */
@media (hover: none) and (pointer: coarse), (max-width: 94rem){
  .ke-carousel.ke-mode-auto{
    display: flex; grid-template-columns: none; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1.1rem; padding-bottom: .6rem; scrollbar-width: none;
  }
  .ke-carousel.ke-mode-auto::-webkit-scrollbar{ display: none; }
  .ke-carousel.ke-mode-auto > .ke-card{
    flex: 0 0 var(--ke-mobile-card); max-width: var(--ke-mobile-card);  }
}
@media (min-width: 48rem) and (max-width: 94rem){
  .ke-carousel.ke-mode-auto > .ke-card{ flex: 0 0 var(--ke-tablet-card); max-width: var(--ke-tablet-card); }
}
@media (hover: none) and (pointer: coarse) and (min-width: 48rem){
  .ke-carousel.ke-mode-auto > .ke-card{ flex: 0 0 var(--ke-tablet-card); max-width: var(--ke-tablet-card); }
}

/* ---- navigation arrows: ONLY on non-touch (mouse) devices when the carousel is active ---- */
.ke-carousel-wrap{ position: relative; }
.ke-carousel-wrap .ke-arrow{
  position: absolute;
  top: calc(50% - 1.375rem);
  z-index: 5;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: #FFFFFF;
  color: #192A3D;
  box-shadow: 0 .25rem .9rem rgba(25, 42, 61, .18);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.ke-carousel-wrap .ke-arrow:hover{ background: #007070; color: #FFFFFF; }
.ke-carousel-wrap .ke-arrow svg{ width: 1.1rem; height: 1.1rem; }
.ke-carousel-wrap .ke-prev{ left: .25rem; }
.ke-carousel-wrap .ke-next{ right: .25rem; }
.ke-carousel-wrap .ke-arrow.ke-disabled{ opacity: 0; pointer-events: none; }

/* show on mouse/fine-pointer devices only */
@media (hover: hover) and (pointer: fine){
  .ke-carousel-wrap.ke-mode-always .ke-arrow{ display: flex; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 94rem){
  .ke-carousel-wrap.ke-mode-auto .ke-arrow{ display: flex; }
}

/* ---- scroll-snap ONLY on touch devices (nice swipe-align); desktop uses arrows + smooth scroll, no snap ---- */
@media (hover: none) and (pointer: coarse){
  .ke-carousel.ke-is-carousel,
  .ke-carousel.ke-mode-always,
  .ke-carousel.ke-mode-auto{ scroll-snap-type: x proximity; }
  .ke-carousel.ke-is-carousel > .ke-card,
  .ke-carousel.ke-mode-always > .ke-card,
  .ke-carousel.ke-mode-auto > .ke-card{ scroll-snap-align: center; }
}