/* ============================================================
   Vernast — Realisaties overzicht (lijst + zijfilter)
   Aanvullend op kelder.css + verslag.css
   ============================================================ */
.rl-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:44px;align-items:start;}
.rl-side{position:sticky;top:28px;display:grid;gap:20px;}
.rl-filter{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 20px;box-shadow:var(--shadow-sm);}
.rl-filter .tt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;}
.rl-filter .fl{display:grid;gap:6px;}
.rl-filter button{font-family:var(--font);cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:10px;padding:11px 13px;font-size:14px;font-weight:700;color:var(--ink);transition:background .2s,color .2s,box-shadow .2s;}
.rl-filter button svg{width:16px;height:16px;flex:none;color:var(--red);}
.rl-filter button .n{margin-left:auto;font-size:11.5px;font-weight:800;background:var(--bg-soft);color:var(--text-mid);border-radius:9999px;padding:3px 9px;min-width:26px;text-align:center;}
.rl-filter button:hover{background:var(--bg-soft);}
.rl-filter button.on{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(200,20,20,.3);}
.rl-filter button.on svg{color:#fff;}
.rl-filter button.on .n{background:rgba(255,255,255,.18);color:#fff;}
.rl-cta{background:linear-gradient(160deg,#8B1A2B,#6E1212);border-radius:var(--radius-lg);padding:24px 22px;color:#fff;box-shadow:0 14px 36px rgba(110,18,18,.35);}
.rl-cta h4{color:#fff;font-size:17px;margin:0 0 8px;}
.rl-cta p{color:rgba(255,255,255,.85);font-size:13.5px;line-height:1.6;margin:0 0 16px;}
.rl-cta .btn{width:100%;justify-content:center;}
.rl-count{font-size:13.5px;font-weight:700;color:var(--text-dim);margin:0 0 18px;}
.rl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;}
.rl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.rl-card image-slot{display:block;width:100%;height:200px;background:var(--bg-soft);border-radius:0;}
/* De kaarten renderen een echte <img>. Zonder vaste hoogte + object-fit toont
   elke foto op zijn eigen beeldverhouding (liggend vs. staand) -> ongelijke
   kaarthoogtes. Dit dwingt elke foto in hetzelfde formaat, netjes bijgesneden. */
.rl-card img{display:block;width:100%;height:230px;object-fit:cover;object-position:50% 50%;background:var(--bg-soft);}
@media (max-width:620px){.rl-card img{height:210px;}}
.rl-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;gap:10px;}
.rl-chips{display:flex;flex-wrap:wrap;gap:7px;}
.rl-chip{display:inline-flex;align-items:center;background:var(--red-soft);color:var(--red);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:9999px;}
.rl-card h3{font-size:17.5px;line-height:1.3;margin:0;}
.rl-card h3 a{color:inherit;}
.rl-card h3 a:hover{color:var(--red);}
.rl-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--red);}
.rl-go svg{width:15px;height:15px;transition:transform .2s;}
.rl-card:hover .rl-go svg{transform:translateX(4px);}
@media (max-width:1180px){.rl-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:960px){
  .rl-layout{grid-template-columns:1fr;gap:28px;}
  .rl-side{position:static;}
  .rl-filter .fl{display:flex;flex-wrap:wrap;}
  .rl-filter button{width:auto;border:1px solid var(--line);border-radius:9999px;padding:9px 16px;}
  .rl-cta{display:none;}
}
@media (max-width:620px){.rl-grid{grid-template-columns:1fr;}}