/* =========================
   Categorie buttons/tegels
   ========================= */

/* Default accentkleur – wordt overschreven door inline --accent vanuit PHP */
.rv-cat-buttons{ --accent:#4f46e5; }

/* Kop */
.rv-cat-head{ margin: 1.25rem 0 1rem; }
.rv-cat-title{ margin:0 0 .25rem; }
.rv-cat-desc{ color:#555; }

/* Grid: 1→2→3→4 kolommen */
.rv-cat-grid{
  display:grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width:640px){ .rv-cat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:900px){ .rv-cat-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1200px){ .rv-cat-grid{ grid-template-columns: repeat(4, 1fr); } }

/* ===== Tegel (vierkant) ===== */
.rv-btn-tile{
  --title-h: 3.2rem;               /* vaste hoogte van de titelbalk */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #eef0f3;
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 1 / 1;             /* altijd vierkant */
  transition: transform .12s ease, box-shadow .12s ease;
}
.rv-btn-tile:hover,
.rv-btn-tile:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  outline: none;
}

/* Afbeelding krijgt ALLE ruimte boven de titel */
.rv-btn-bg{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rv-btn-img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* volledig vullen (mag bijsnijden) */
  object-position: center;
  display: block;
}
/* Placeholder als er geen thumbnail is */
.rv-btn-ph{
  display:grid; place-items:center;
  width:100%; height:100%;
  font-size: clamp(2rem, 8vw, 3rem);
  color:#9aa3af;
}

/* Titelbalk onderaan */
.rv-btn-title{
  flex: 0 0 var(--title-h);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 18px 18px;
  line-height: 1.2;
  padding: 0 .5rem;
  word-break: break-word;
}

/* Paginatie */
.rv-cat-pagi{
  margin: 2rem 0;
  display:flex;
  justify-content:center;
}

/* Tegel titel = accentkleur van de categorie */
.rv-btn-title{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:600;
  line-height:1.2;
  padding:12px 14px;
  min-height:48px;
  background:var(--accent, #f59e0b); /* Accentkleur ipv blauw */
  color:#fff;
  margin-top:auto;
  transition: background .2s ease;
}

/* Hover: iets donkerder */
.rv-btn-tile:hover .rv-btn-title{
  filter:brightness(0.9);
}

/* Container van een tegel */
.rv-btn-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;   /* Zorgt dat de titelbalk niet 'uitsteekt' */
  background:#fff;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .16s ease, box-shadow .16s ease;
}
.rv-btn-tile:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.12); }

/* Afbeelding of placeholder bovenin */
.rv-btn-bg{
  position:relative;
  display:block;
  aspect-ratio: 16/11; /* vaste verhouding */
  background:#f3f4f6;
  flex:1 0 auto;
}
.rv-btn-img{ width:100%; height:100%; object-fit:cover; display:block; }
.rv-btn-ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:42px; opacity:.6; }

/* Titelbalk onderaan: krijgt accentkleur van categorie */
.rv-btn-title{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:600;
  line-height:1.2;
  padding:12px 14px;
  min-height:48px;
  background:var(--accent, #f59e0b); /* Accentkleur per categorie */
  color:#fff;
  margin-top:auto;   /* duwt de balk naar de onderkant */
  transition: filter .2s ease;
}
.rv-btn-tile:hover .rv-btn-title{ filter:brightness(0.9); }