/* ===== Basis kaart (gedeeld) ===== */
.rovea-card{
  position:relative; display:block; border-radius:20px; overflow:hidden;
  background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rovea-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.12); }
.rovea-card-media{ position:absolute; inset:0 0 44px 0; background-size:cover; background-position:center; }
.rovea-card-title{
  position:absolute; left:0; right:0; bottom:0; min-height:44px; padding:6px 8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; color:#fff; line-height:1.2; font-size:14px;
  background:var(--cat-color,#0d47a1);
}

/* Eenvoudig fallback grid (onzichtbaar als je layout gebruikt) */
.rovea-grid{ --rovea-cols:4; display:grid; grid-template-columns:repeat(var(--rovea-cols),1fr); gap:18px; }
.rovea-grid .rovea-card::before{ content:""; display:block; padding-bottom:100%; }

/* ===== Basis kaart ===== */
.rovea-card{
  position:relative; display:block; border-radius:20px; overflow:hidden;
  background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.rovea-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.12); }
.rovea-card-media{ position:absolute; inset:0 0 44px 0; background-size:cover; background-position:center; }
.rovea-card-title{
  position:absolute; left:0; right:0; bottom:0; min-height:44px; padding:6px 8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; color:#fff; line-height:1.2; font-size:14px;
  background:var(--cat-color,#0d47a1);
}

/* ===== Eenvoudig fallback grid ===== */
.rovea-grid{ --rovea-cols:4; display:grid; grid-template-columns:repeat(var(--rovea-cols),1fr); gap:18px; }
.rovea-grid .rovea-card::before{ content:""; display:block; padding-bottom:100%; }

/* ===== 4×3 — 1 2 3 4 / 5 PHOTO 6 / 7 8 9 10 ===== */
.rovea-gridwelcome-alt{
  --tile-w:120px; --tile-h:120px; --gap:22px; --center-h:120px;
  --intro-color:#0d47a1; --photo-fit:cover; --photo-pos:center;

  display:grid;
  grid-template-columns: repeat(4, var(--tile-w));
  grid-template-rows: repeat(3, var(--tile-h));
  grid-template-areas:
    "pos1 pos2 pos3 pos4"
    "pos5 photo photo pos6"
    "pos7 pos8 pos9 pos10";
  gap:var(--gap);
  justify-content:center; align-items:center;
}
.rovea-gridwelcome-alt .pos1{ grid-area:pos1; }
.rovea-gridwelcome-alt .pos2{ grid-area:pos2; }
.rovea-gridwelcome-alt .pos3{ grid-area:pos3; }
.rovea-gridwelcome-alt .pos4{ grid-area:pos4; }
.rovea-gridwelcome-alt .pos5{ grid-area:pos5; }
.rovea-gridwelcome-alt .pos6{ grid-area:pos6; }
.rovea-gridwelcome-alt .pos7{ grid-area:pos7; }
.rovea-gridwelcome-alt .pos8{ grid-area:pos8; }
.rovea-gridwelcome-alt .pos9{ grid-area:pos9; }
.rovea-gridwelcome-alt .pos10{ grid-area:pos10; }
.rovea-gridwelcome-alt .photo{ grid-area:photo; width:calc(2 * var(--tile-w) + var(--gap)); height:var(--center-h); border-radius:12px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.08); }
.rovea-gridwelcome-alt .photo img{ width:100%; height:100%; object-fit:var(--photo-fit); object-position:var(--photo-pos); display:block; }

.rovea-gridwelcome-alt .rgw-intro .rovea-card-title{ background:var(--intro-color)!important; }
.rovea-gridwelcome-alt .rgw-intro{ position:relative; width:var(--tile-w); height:var(--tile-h); }
.rovea-gridwelcome-alt .rgw-intro .rgw-intro-body{
  position:absolute; inset:0 0 44px 0; padding:10px; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:13px; line-height:1.35;
}

@media (max-width:900px){ .rovea-gridwelcome-alt{ --tile-w:110px; --tile-h:110px; } }
@media (max-width:640px){
  .rovea-gridwelcome-alt{ --tile-w:100px; --tile-h:100px; display:flex; flex-direction:column; align-items:center; gap:16px; }
}
/* Responsive fix midden-afbeelding */
@media (max-width: 900px){
  .rovea-gridwelcome-alt{ --tile-w:110px; --tile-h:110px; }
  .rovea-gridwelcome-alt .photo{
    max-width: 100%;
    width: auto;
  }
}

@media (max-width: 640px){
  .rovea-gridwelcome-alt{
    --tile-w:100px; --tile-h:100px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
  .rovea-gridwelcome-alt .photo{
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }
  .rovea-gridwelcome-alt .photo img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}