/* Bestaande blog- en Masonry-opmaak. */
.blog-post {
max-width:none;
margin:0;
height:auto!important;
border-radius:18px;
padding:25px 28px;
background:#fff;
border:3px dashed rgba(55,178,77,.35);
box-shadow:0 4px 12px rgba(0,0,0,.12)}
.blog-post-title {
font-size:1.35rem;
font-weight:700;
color:#146a2c}
.blog-meta {
font-size:.85rem;
color:#555;
margin-bottom:10px}
.blog-image,.blog-video {
width:100%;
height:auto;
border-radius:14px;
margin-top:12px;
display:block}
.like-btn {
cursor:pointer;
user-select:none}
.blog-post a {
color:#146a2c;
font-weight:600;
text-decoration:underline}
.blog-post a:hover {
opacity:.85}
.lp-card {
display:block;
text-decoration:none!important;
border:2px solid rgba(27,140,47,.22);
background:rgba(27,140,47,.05);
border-radius:14px;
padding:12px 14px;
transition:transform .08s ease,background .15s ease}
.lp-card:hover {
background:rgba(27,140,47,.08);
transform:translateY(-1px)}
.lp-card-inner {
display:flex;
gap:12px;
align-items:flex-start}
.lp-ico {
width:36px;
height:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(27,140,47,.12);
color:#146a2c;
flex:0 0 auto}
.lp-ico i,.lp-ico img {
display:block}
.lp-title {
display:block;
font-weight:800;
color:#146a2c;
line-height:1.15}
.lp-desc {
display:block;
color:#2b2b2b;
font-weight:600;
margin-top:2px}
.lp-url {
display:block;
color:#666;
font-size:.85rem;
margin-top:4px;
word-break:break-all}
.lp-badge {
display:inline-block;
margin-left:8px;
font-size:.75rem;
padding:2px 8px;
border-radius:999px;
background:#1b8c2f;
color:#fff;
vertical-align:middle}
.blog-post img.blog-image {
width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
display:block!important}
.blog-post .carousel-item img.blog-image {
height:auto!important;
max-height:none!important;
object-fit:contain!important}
.read-more {
margin-left:.35rem;
font-weight:600;
text-decoration:none}
.read-more:hover {
text-decoration:underline}
.masonry-grid {
position:relative;
margin-left:-12px;
margin-right:-12px}
.masonry-grid:not(.is-masonry-ready) {
display:grid;
grid-template-columns:1fr}
.masonry-grid:not(.is-masonry-ready) .masonry-sizer {
display:none}
.masonry-grid:not(.is-masonry-ready) .masonry-item {
width:auto}
.masonry-sizer,.masonry-item {
width:100%}
@media (min-width:992px) {
.masonry-grid:not(.is-masonry-ready) {
grid-template-columns:repeat(2,minmax(0,1fr))}
.masonry-sizer,.masonry-item {
width:50%}
}
.masonry-item {
box-sizing:border-box;
padding-left:12px;
padding-right:12px;
padding-bottom:24px}
@media (min-width:992px) {
.masonry-item.masonry-featured {
width:100%!important}
}
.featured-post .blog-post-title {
font-size:1.55rem}

/* Homepagekaarten, kalender en responsieve opmaak. */
  .homepage-top-grid{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:18px;
    align-items:stretch;
  }

  .homepage-top-grid.single-card{
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-card {
    background:#ffffffcc;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
    height: 100%;
  }

  .calendar-card{
    border:1px solid rgba(55,178,77,.22);
    position:relative;
    overflow:hidden;
  }

  .calendar-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at top right, rgba(255,214,0,.28), transparent 36%),
      radial-gradient(circle at bottom left, rgba(55,178,77,.22), transparent 34%);
    pointer-events:none;
  }

  .calendar-card > *{
    position:relative;
    z-index:1;
  }

  .calendar-card-title{
    color:#1f7a1f;
    font-size:1.65rem;
    font-weight:900;
    margin:10px 0 4px;
  }

  .inschrijven-card .calendar-card-title{
    margin-top:14px;
  }

  .homekaart-extra-list{
    display:grid;
    gap:12px;
    margin:16px 0;
  }

  .homekaart-extra-item{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(25,135,84,.16);
    border-left:5px solid #198754;
    border-radius:13px;
    padding:13px 14px;
    color:#243024;
  }

  .homekaart-extra-title{
    color:#1f7a1f;
    font-weight:900;
    margin:.35rem 0 .4rem;
  }

  .homekaart-extra-text{
    font-weight:600;
    line-height:1.55;
  }

  .inschrijven-card-list{
    display:grid;
    gap:9px;
    margin:16px 0;
  }

  .inschrijven-card-list-item{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(25,135,84,.14);
    border-radius:13px;
    padding:10px 12px;
    color:#243024;
  }

  .inschrijven-card-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:16px;
  }


  .inschrijven-training-block{
    background:rgba(234,247,234,.88);
    border:1px solid rgba(25,135,84,.16);
    border-left:5px solid #198754;
    border-radius:14px;
    padding:14px;
    margin-top:14px;
  }

  .inschrijven-training-title{
    color:#1f7a1f;
    font-weight:900;
    margin-bottom:8px;
  }

  .inschrijven-training-start{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(25,135,84,.13);
    border-radius:12px;
    padding:10px 12px;
    font-size:.94rem;
    margin-bottom:12px;
  }

  .inschrijven-training-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .inschrijven-training-period{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(25,135,84,.12);
    border-radius:12px;
    padding:11px;
  }

  .inschrijven-training-period h3{
    color:#198754;
    font-size:.98rem;
    font-weight:900;
    margin:0 0 8px;
  }

  .training-mini-list{
    display:grid;
    gap:7px;
  }

  .training-mini-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
    border-top:1px solid rgba(25,135,84,.10);
    padding-top:7px;
    color:#243024;
    font-size:.9rem;
  }

  .training-mini-row:first-child{
    border-top:0;
    padding-top:0;
  }

  .training-mini-group{
    font-weight:700;
    line-height:1.25;
  }

  .training-mini-hour{
    font-weight:900;
    white-space:nowrap;
    text-align:right;
  }

  .training-mini-hour.is-highlighted{
    background:#fff200;
    color:#111;
    border-radius:5px;
    padding:1px 6px;
  }

  .calendar-range{
    color:#555;
    font-weight:700;
    font-size:.9rem;
  }

  .calendar-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:16px;
  }

  .calendar-date{
    color:#198754;
    font-weight:900;
    font-size:.95rem;
    margin-top:2px;
  }

  .calendar-match{
    display:grid;
    grid-template-columns:74px minmax(0, 1fr);
    gap:12px;
    text-decoration:none;
    color:inherit;
    background:rgba(255,255,255,.86);
    border:1px solid rgba(25,135,84,.15);
    border-radius:14px;
    padding:12px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }

  .calendar-match:hover{
    color:inherit;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,.10);
    border-color:rgba(25,135,84,.30);
  }

  .calendar-time{
    align-self:start;
    background:linear-gradient(135deg, #1f7a1f, #39b54a);
    color:#fff;
    border-radius:12px;
    padding:8px 6px;
    font-weight:900;
    text-align:center;
    white-space:nowrap;
  }

  .calendar-reeks{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    color:#666;
    font-size:.88rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
  }

  .calendar-teams{
    color:#172217;
    font-size:1.03rem;
    font-weight:800;
    line-height:1.25;
    margin-top:3px;
  }

  .calendar-teams span{
    color:#198754;
    margin:0 4px;
  }

  .calendar-meta{
    color:#666;
    font-size:.88rem;
    margin-top:5px;
  }

  .calendar-footer-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:16px;
    color:#198754;
    font-weight:900;
    text-decoration:none;
  }

  .calendar-footer-link:hover{
    text-decoration:underline;
  }

  .blog-post{
    background:#ffffffcc;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius:12px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);
    overflow:hidden;
    padding: 20px;
    height: 100%;
  }

  .featured-post{
    padding: 24px;
  }

  .homepage-blog-card{
    border:1px solid rgba(255,214,0,.35);
  }

  .blog-post-title a{
    color: #1f7a1f;
    text-decoration: none;
    font-weight: 800;
  }

  .blog-post-title a:hover{
    text-decoration: underline;
  }

  .blog-meta{
    color:#666;
    font-size:.92rem;
    margin: 8px 0 14px;
  }

  .blog-image,
  .blog-video{
    width:100%;
    border-radius:12px;
    display:block;
    margin-top: 10px;
  }

  .blog-image{
    height:auto;
    object-fit:cover;
  }

  .carousel{
    margin-top: 10px;
  }

  .carousel-inner{
    border-radius:12px;
    overflow:hidden;
  }

  .read-more{
    color:#198754;
    font-weight:700;
    text-decoration:none;
  }

  .read-more:hover{
    text-decoration:underline;
  }

  .like-btn{
    border-radius:10px;
    font-weight:700;
  }

  .pagination-wrap{
    text-align:center;
    margin-top: 28px;
  }

  .pagination-wrap .btn{
    border-radius:10px;
    font-weight:700;
  }

  .pagination-label{
    display:inline-block;
    margin: 0 10px;
    color:#555;
    font-weight:600;
  }

  @media (max-width: 992px) {
    .homepage-top-grid{
      grid-template-columns: 1fr;
    }

  }

  @media (max-width: 768px) {
    .blog-post,
    .featured-post,
    .calendar-card{
      padding: 18px;
    }

    .calendar-match{
      grid-template-columns:64px minmax(0, 1fr);
      gap:10px;
      padding:10px;
    }

    .calendar-card-title{
      font-size:1.45rem;
    }


    .inschrijven-training-grid{
      grid-template-columns:1fr;
    }

    .training-mini-row{
      flex-direction:column;
      gap:3px;
    }

    .training-mini-hour{
      text-align:left;
      white-space:normal;
    }
  }