/* === Full width container (fallback als thema alignments beperkt) === */
.ces-snippets-wrap.alignfull{
  width:100%;
}
@supports(not (width:100dvw)){
  /* optionele ultra-full bleed variant; alleen gebruiken als je container niet echt full-width raakt:
  .ces-snippets-wrap.alignfull{ width:100vw; margin-left:50%; transform:translateX(-50%); }
  */
}

/* === Grid: 3 op een rij desktop, 2 tablet, 1 mobiel === */
.ces-snippets-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.25rem; /* ~20px */
}
@media (max-width: 1024px){
  .ces-snippets-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ces-snippets-grid{ grid-template-columns:1fr; }
}

/* === Kaart-opmaak identiek aan carousel (maar nu in grid) === */
.splide-news .swiper-post{ 
  display:block; 
  text-decoration:none; 
  color:inherit;
}

/* Afbeelding 16:9, altijd */
.splide-news .image-wrapper{
  overflow:hidden; 
  border-radius:6px; 
  aspect-ratio:16/9;      /* forceer 16:9 container */
  background:#f6f6f6;
}
.splide-news .image-wrapper img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  object-position:center; 
  transition:transform .3s ease; 
  display:block;
}
.splide-news .image-wrapper:hover img{ transform:scale(1.05); }

/* 1) Alleen domeinregel */
.splide-news .post-meta{
  padding:.6rem .6rem .2rem; 
  display:flex; 
  align-items:center; 
  gap:.35rem; 
  flex-wrap:wrap;
}
.splide-news .post-source{
  font-size:.8rem; 
  color:#666; 
  line-height:1.2;
}

/* 2) Titel zonder onderstreping (geen <a> binnen titel) */
.splide-news .post-title{
  font-size:.95rem; 
  font-weight:700; 
  color:var(--wp--preset--color--primary, #2B8DB1); 
  margin:.4rem .6rem .2rem; 
  line-height:1.25; 
  text-align:left;
}

/* 3) Excerpt: kleine zwarte tekst, geen onderstreping */
.splide-news .post-excerpt{
  font-size:.9rem; 
  color:#111;          /* standaard zwart */
  line-height:1.5; 
  text-align:left; 
  margin:0 .6rem .6rem;
  text-decoration:none;
}

/* (optioneel) iets strakker op grote schermen */
@media (min-width:1280px){
  .splide-news .post-title{ font-size:1rem; }
  .splide-news .post-excerpt{ font-size:.92rem; }
}
/* 1. Haal alle onderstrepingen weg binnen de klikbare kaart */
.splide-news .swiper-post,
.splide-news .swiper-post * {
  text-decoration: none !important;
}

/* 2. Padding links en rechts van 15% */
.ces-snippets-wrap.alignfull {
  width: 100%;
  padding-left: 15vw;
  padding-right: 15vw;
  box-sizing: border-box;
}

/* === Filterbar netjes horizontaal === */
.ces-snippets-filter{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-end;
  margin-bottom:1.5rem;
}

/* Inputs en selects in nette blokjes */
.ces-snippets-filter .field label{
  font-size:.85rem;
  font-weight:600;
  margin-bottom:.2rem;
  color:#333;
}
.ces-snippets-filter select,
.ces-snippets-filter input[type="date"]{
  padding:.35rem .5rem;
  border:1px solid #ccc;
  border-radius:.4rem;
  font-size:.9rem;
  min-width:10rem;
}

/* Button stijl: blauw, wit, afgeronde hoekjes */
.ces-snippets-filter button{
  background:var(--wp--preset--color--primary, #2B8DB1);
  color:#fff;
  padding:.45rem 1.2rem;
  border:none;
  border-radius:.5rem;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
}
.ces-snippets-filter button:hover{
  background:#246f8c; /* iets donkerder blauw bij hover */
}

/* Filterbalk: horizontaal, knop helemaal rechts, top-alignment */
.ces-snippets-filter{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.25rem;
  align-items:flex-start;           /* ↑ uitlijnen aan de bovenkant */
  margin-bottom:30px;               /* 30px witruimte naar de grid */
  width:100%;
  box-sizing:border-box;
}
.ces-snippets-filter .field{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:12rem;
}
.ces-snippets-filter select,
.ces-snippets-filter input[type="date"]{
  padding:.35rem .5rem;
  border:1px solid #ccc;
  border-radius:.4rem;
  font-size:.9rem;
}
.ces-snippets-filter select[multiple]{ min-height:8rem; }

/* Knop rechts uitlijnen */
.ces-snippets-filter .actions{
  margin-left:auto;           /* duwt de actions helemaal naar rechts */
  align-self:flex-start;      /* top-alignment */
  display:flex;
}
.ces-snippets-filter .actions button{
  background:var(--wp--preset--color--primary, #2B8DB1);
  color:#fff;
  padding:.45rem 1.2rem;
  border:none;
  border-radius:.5rem;        /* 0.5rem hoekjes */
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
  white-space:nowrap;
}
.ces-snippets-filter .actions button:hover{
  background:#246f8c;
}

/* Responsive: op smalle schermen de knop onder de velden, rechts uitgelijnd */
@media (max-width: 720px){
  .ces-snippets-filter{
    gap:.75rem 1rem;
  }
  .ces-snippets-filter .actions{
    margin-left:0;
    width:100%;
    justify-content:flex-end; /* rechts uitlijnen */
  }
  
}
/* Extra witruimte boven de hele snippet grid */
.ces-snippets-grid{
  margin-top:40px;   /* ruimte boven de grid */
  row-gap:2.5rem;    /* meer verticale afstand tussen rijen */
}

/* Extra spacing binnen elk kaartje */
.splide-news .swiper-post{
  padding-bottom:1rem; /* witruimte onderaan elke kaart */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.splide-news .post-meta{ margin-bottom:.5rem; }
.splide-news .post-title{ margin-bottom:.5rem; }
.splide-news .post-excerpt{ margin-bottom:.25rem; }