
.sb-projects-pro{--sb-green:#217a63;--sb-dark:#2c3e50;--sb-soft:#f4f7f6;--sb-line:#e2e6e5;font-family:Arial,sans-serif;color:var(--sb-dark)}
.sb-projects-pro *{box-sizing:border-box}.sb-projects-pro .sb-container{padding:50px 20px;max-width:1780px;margin:0 auto}
.sb-title{display:flex;align-items:center;justify-content:center;gap:12px;font-size:32px;margin:0 0 18px;font-weight:700;text-align:center;line-height:1.2}
.sb-brush img{width:36px;height:auto;object-fit:contain;border-radius:6px;display:block}.sb-years{display:block;font-size:24px;margin-top:4px;color:var(--sb-green)}
.sb-intro{max-width:900px;margin:0 auto 28px;text-align:center;font-size:15px;line-height:1.7;color:#555}
.sb-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:0 auto 42px}.sb-filter{border:1px solid var(--sb-line);background:#fff;color:var(--sb-dark);border-radius:999px;padding:11px 18px;font-size:14px;cursor:pointer;transition:.2s}.sb-filter:hover,.sb-filter.is-active{background:var(--sb-green);border-color:var(--sb-green);color:#fff}
.sb-grid{display:grid;grid-template-columns:repeat(4,minmax(340px,1fr));gap:38px}.sb-card{background:#f8f8f8;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);transition:.3s;display:flex;flex-direction:column;height:100%}.sb-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(0,0,0,.12)}.sb-card img{width:100%;height:285px;object-fit:cover;display:block;background:#eee;transition:transform .4s ease}.sb-content{padding:22px;display:flex;flex-direction:column;flex-grow:1}.sb-label{font-size:11px;padding:4px 10px;margin-bottom:8px;background:#e0f4ec;color:var(--sb-green);border-radius:20px;display:inline-block;align-self:flex-start}.sb-card h3{font-size:24px;margin:0 0 8px;padding-left:8px;border-left:5px solid var(--sb-dark);color:var(--sb-dark)}.sb-date{font-size:13px;margin:0 0 8px;color:#666}.sb-desc{font-size:15px;line-height:1.8;margin:0 0 18px;line-height:1.5;color:#333}.sb-button{display:inline-block;margin-top:auto;align-self:flex-start;padding:13px 22px;background:var(--sb-dark);color:#fff!important;font-size:14px;border-radius:10px;text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.1)}.sb-button:hover{background:#1f2f40;color:#fff!important}.sb-hidden{display:none!important}
.sb-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:42px}.sb-page-btn{border:1px solid var(--sb-line);background:#fff;color:var(--sb-dark);min-width:42px;height:42px;border-radius:8px;cursor:pointer;font-weight:600}.sb-page-btn.is-active,.sb-page-btn:hover{background:var(--sb-green);border-color:var(--sb-green);color:#fff}.sb-page-label{font-size:14px;color:#555;margin-right:8px}
.sb-cta{max-width:900px;margin:55px auto 0;padding:28px 22px;background:var(--sb-soft);border:1px solid var(--sb-line);border-radius:10px;text-align:center}.sb-cta h2{font-size:24px;margin:0 0 10px;color:var(--sb-dark)}.sb-cta p{font-size:15px;line-height:1.6;margin:0 0 14px;color:#555}.sb-cta a{display:inline-block;background:var(--sb-green);color:#fff!important;padding:10px 22px;border-radius:6px;text-decoration:none;font-size:14px}
@media(max-width:1200px){.sb-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.sb-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.sb-projects-pro .sb-container{padding:34px 16px}.sb-title{flex-direction:column;font-size:26px}.sb-years{font-size:24px}.sb-grid{grid-template-columns:1fr}.sb-card img{height:285px}.sb-button{align-self:center;min-width:180px;text-align:center}.sb-page-label{width:100%;text-align:center;margin:0 0 4px}}

.sb-card img[src=""]{display:none}.sb-card:has(img[src=""]) .sb-content{min-height:260px}

.sb-card:hover img{transform:scale(1.03)}

@media(max-width:1400px){
.sb-grid{grid-template-columns:repeat(3,minmax(300px,1fr))}
}
@media(max-width:980px){
.sb-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}
}
@media(max-width:768px){
.sb-grid{grid-template-columns:1fr;gap:26px}
.sb-card img{height:260px}
}


/* v12 - mooier gecentreerd en rustiger op brede schermen */
.sb-projects-pro{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

.sb-projects-pro .sb-container{
  width:min(100%, 1520px);
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:32px;
  padding-right:32px;
}

.sb-projects-pro .sb-grid{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  align-items:stretch;
  grid-template-columns:repeat(4, minmax(280px, 1fr));
  gap:34px;
}

.sb-projects-pro .sb-card{
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

.sb-projects-pro .sb-title,
.sb-projects-pro .sb-intro,
.sb-projects-pro .sb-tools,
.sb-projects-pro .sb-pagination,
.sb-projects-pro .sb-cta{
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(min-width:1500px){
  .sb-projects-pro .sb-container{
    width:1480px;
  }
  .sb-projects-pro .sb-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media(max-width:1200px){
  .sb-projects-pro .sb-grid{
    grid-template-columns:repeat(3, minmax(260px, 1fr));
  }
}

@media(max-width:900px){
  .sb-projects-pro .sb-container{
    padding-left:20px;
    padding-right:20px;
  }
  .sb-projects-pro .sb-grid{
    grid-template-columns:repeat(2, minmax(240px, 1fr));
  }
}

@media(max-width:680px){
  .sb-projects-pro .sb-container{
    padding-left:16px;
    padding-right:16px;
  }
  .sb-projects-pro .sb-grid{
    grid-template-columns:1fr;
  }
}


/* v13 - force wide layout binnen smalle thema-containers */
.entry-content .sb-projects-pro,
.page-content .sb-projects-pro,
.wp-block-post-content .sb-projects-pro,
.sb-projects-pro{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.sb-projects-pro .sb-container{
  width:100% !important;
  max-width:1680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:48px !important;
  padding-right:48px !important;
}

.sb-projects-pro .sb-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(300px, 1fr)) !important;
  gap:42px !important;
  width:100% !important;
  max-width:1680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.sb-projects-pro .sb-card{
  width:100% !important;
  min-width:0 !important;
}

.sb-projects-pro .sb-card img{
  width:100% !important;
  height:300px !important;
  object-fit:cover !important;
}

.sb-projects-pro .sb-title,
.sb-projects-pro .sb-intro,
.sb-projects-pro .sb-tools{
  max-width:980px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:1400px){
  .sb-projects-pro .sb-grid{
    grid-template-columns:repeat(3, minmax(280px, 1fr)) !important;
    max-width:1240px !important;
  }
}

@media(max-width:1000px){
  .sb-projects-pro .sb-container{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .sb-projects-pro .sb-grid{
    grid-template-columns:repeat(2, minmax(240px, 1fr)) !important;
    gap:28px !important;
  }
}

@media(max-width:680px){
  .sb-projects-pro{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .sb-projects-pro .sb-container{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .sb-projects-pro .sb-grid{
    grid-template-columns:1fr !important;
  }
  .sb-projects-pro .sb-card img{
    height:260px !important;
  }
}


/* v14 - mobiele afbeeldingen volledig zichtbaar */
@media(max-width:680px){

  .sb-projects-pro .sb-card img{
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    background:#f5f5f5 !important;
    aspect-ratio:auto !important;
    border-bottom:1px solid rgba(0,0,0,.04);
  }

  .sb-projects-pro .sb-card{
    overflow:hidden;
  }

}

/* v14.1 - homepage shortcode: [beekelaar_projecten_home] */
.sb-projects-pro.sb-projects-home .sb-container{
  padding-top:42px !important;
  padding-bottom:42px !important;
}
.sb-projects-pro.sb-projects-home .sb-title{
  font-size:28px;
  margin-bottom:16px !important;
}
.sb-projects-pro.sb-projects-home .sb-intro{
  max-width:900px !important;
  margin-bottom:28px !important;
}
.sb-projects-pro.sb-projects-home .sb-grid{
  grid-template-columns:repeat(3, minmax(280px, 1fr)) !important;
  max-width:1180px !important;
  gap:24px !important;
}
.sb-projects-pro.sb-projects-home .sb-card{
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.07);
}
.sb-projects-pro.sb-projects-home .sb-card img{
  height:270px !important;
}
.sb-projects-pro.sb-projects-home .sb-content{
  padding:18px !important;
}
.sb-projects-pro.sb-projects-home .sb-card h3{
  font-size:20px !important;
}
.sb-projects-pro.sb-projects-home .sb-desc{
  font-size:14px !important;
  line-height:1.55 !important;
}
.sb-home-all{
  text-align:center;
  margin-top:var(--sb-home-button-top,52px);
  margin-bottom:0;
}
.sb-all-projects-btn{
  background:#004b87;
  color:#fff !important;
  padding:11px 24px;
  font-size:14px;
  border-radius:6px;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 3px 6px rgba(0,0,0,.1);
}
.sb-all-projects-btn:hover{
  background:#003d70;
  color:#fff !important;
}
@media(max-width:1000px){
  .sb-projects-pro.sb-projects-home .sb-grid{
    grid-template-columns:repeat(2, minmax(240px, 1fr)) !important;
  }
}
@media(max-width:680px){
  .sb-projects-pro.sb-projects-home .sb-grid{
    grid-template-columns:1fr !important;
  }
  .sb-projects-pro.sb-projects-home .sb-card img{
    height:auto !important;
  }
}

/* v14.3 clean - betere ruimte rond homepage knop en contact CTA */
.sb-projects-pro.sb-projects-home{
  margin-bottom:var(--sb-home-bottom,70px) !important;
}
.sb-contact-cta{
  margin:var(--sb-cta-top,60px) auto var(--sb-cta-bottom,70px) auto;
  padding:40px 20px;
  background:#f4f7f6;
  border-top:1px solid #ccc;
  text-align:center;
  font-size:15px;
  color:#333;
  border-radius:8px;
  max-width:900px;
  font-family:Arial,sans-serif;
}
.sb-contact-cta h2{
  font-size:18px;
  font-weight:bold;
  color:#2c3e50;
  margin:0 0 12px;
}
.sb-contact-cta p{
  margin:0 auto 18px;
  line-height:1.6;
  max-width:760px;
}
.sb-contact-cta .sb-contact-areas{
  font-size:13px;
  color:#777;
  margin:8px auto 16px;
  line-height:1.5;
}
.sb-contact-button{
  display:inline-block;
  margin-top:10px;
  background:#217a63;
  color:#fff !important;
  padding:12px 26px;
  font-size:15px;
  border-radius:6px;
  text-decoration:none;
  font-weight:500;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.sb-contact-button:hover{
  background:#1b6854;
  color:#fff !important;
}
.sb-contact-share{
  margin-top:20px;
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
@media(max-width:680px){
  .sb-contact-cta{
    margin-left:16px;
    margin-right:16px;
    padding:32px 18px;
  }
}
