/* =========================================================
   TOPBAR (teller boven de lijst)
   ========================================================= */
.svcms-toonstudies__topbar{
display:flex;                 /* horizontale uitlijning */
align-items:center;           /* verticaal centreren */
justify-content:flex-start;   /* links uitlijnen */
margin-top:4px;
margin-bottom:14px;
}

/* wrapper rond bolletje + tekst */
.svcms-toonstudies__countwrap{
display:inline-flex;          /* compacte rij */
align-items:center;
gap:10px;                     /* ruimte tussen bol en tekst */
}

/* goud bolletje met aantal */
.svcms-toonstudies__countball{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;          /* perfect rond */
background:#E6B700;           /* goud */
color:#fff;                   /* wit getal */
font-weight:700;
font-size:0.95rem;
line-height:1;
}

/* tekst naast bolletje */
.svcms-toonstudies__counttext{
font-size:0.95rem;
opacity:.8;                   /* iets zachter */
}


/* =========================================================
   CONTROLS (sorteren + zoeken)
   ========================================================= */
.svcms-toonstudies__controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
flex-wrap:wrap;               /* netjes onder elkaar op mobiel */
margin-top:18px;
margin-bottom:34px;
}

/* sorteerknoppen */
.svcms-toonstudies__sort{
display:flex;
gap:12px;
flex-wrap:wrap;
}

/* zoekveld */
.svcms-toonstudies__search{
min-width:280px;              /* voorkomt te smal veld */
}


/* =========================================================
   LIJST (grid met bijbelstudies)
   ========================================================= */
.svcms-toonstudies__list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr)); /* 3 kolommen desktop */
column-gap:26px;
row-gap:6px;
margin-top:10px;
align-items:start;
}

/* individuele item wrapper */
.svcms-toonstudies__item{
margin:0;
padding:0;
min-height:0;
min-width:0;                  /* voorkomt dat tekst kolom oprekt */
}

/* klikbare titel */
.svcms-toonstudies__link{
display:block;                /* stabiel in grid */
margin:0;
padding:0;
line-height:1.15;
text-decoration:none;
white-space:normal;           /* mag afbreken */
overflow-wrap:break-word;     /* lange woorden breken */
word-break:normal;
min-width:0;
}


/* =========================================================
   FIX: globale link-onderstreping uitschakelen
   ========================================================= */
main a.svcms-toonstudies__link::before,
main a.svcms-toonstudies__link::after,
.sheet a.svcms-toonstudies__link::before,
.sheet a.svcms-toonstudies__link::after{
content:none !important;
display:none !important;
}


/* =========================================================
   LEGE STATUS
   ========================================================= */
.svcms-toonstudies__empty{
opacity:.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* tablet / mobiel: 2 kolommen */
@media (max-width:768px){
.svcms-toonstudies__search{
min-width:0;
width:100%;                   /* zoekveld volle breedte */
}

.svcms-toonstudies__list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:14px;
row-gap:4px;
}
}

/* kleine telefoons: 1 kolom */
@media (max-width:340px){
.svcms-toonstudies__list{
grid-template-columns:1fr !important;
row-gap:3px;
}
}