/* ==========================================================
   Afgeschuinde hoeken – overal op de site hetzelfde
   ========================================================== */
:root {
  --cut: 30px;
}

/* Basisvorm: linksboven + rechtsonder afgeschuind */
.cut,
.cut-btn .elementor-button {
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  border-radius: 0 !important;
}

/* Gespiegeld: rechtsboven + linksonder */
.cut.cut-flip,
.cut-btn.cut-flip .elementor-button {
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

/* Groottes */
.cut-sm {
  --cut: 12px;
}
.cut-md {
  --cut: 30px;
}
.cut-lg {
  --cut: 50px;
}

/* ==========================================================
   Post grid – flexbox, responsief
   ========================================================== */
.spg-grid {
  --cols: var(--cols-d, 3);
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

/* Voorkomt dat de Elementor-widget krimpt tot 0px breed
   (gebeurt in containers die niet op 'uitrekken' staan) */
.elementor-widget:has(.spg-grid) {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

/* Tablet */
@media (max-width: 1024px) {
  .spg-grid {
    --cols: var(--cols-t, 2);
  }
}

/* Mobiel */
@media (max-width: 600px) {
  .spg-grid {
    --cols: var(--cols-m, 1);
  }
}

/* Kaart: breedte = (100% - de gaten) gedeeld door het aantal kolommen */
.spg-card {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  position: relative;
  display: block;
  aspect-ratio: 258.7 / 400;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  overflow: hidden;
}

/* Wint van Elementor's globale class '.elementor .cut { aspect-ratio: auto }',
   anders wordt de kaart 0px hoog */
.spg-grid > .spg-card.cut {
  aspect-ratio: 258.7 / 400;
}

/* Donkere onderkant met titel en datum (tekst loopt nu wél door naar een nieuwe regel) */
.spg-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px calc(var(--cut) + 10px) 20px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: #fff;
}

.spg-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.spg-card__date {
  font-size: 12px;
  color: #ccc;
}

/* Klein hover-effect */
.spg-card {
  transition: transform 0.25s ease;
}
.spg-card:hover {
  transform: translateY(-4px);
}