/* =========================================================
   MAURITS & MULDER
   STYLINGTIPS OVERZICHT
   ========================================================= */

#blog.blog-overview {
  --st-text: #2f2f2f;
  --st-muted: #777;
  --st-line: #e8e3dd;
  --st-soft: #f7f4f0;
  --st-green: #587461;
}


/* =========================================================
   PAGINATITEL
   ========================================================= */

#blog.blog-overview .m-t-80 {
  margin-top: 65px !important;
  margin-bottom: 18px;
}

#blog.blog-overview .page-title {
  margin-bottom: 45px !important;

  font-size: clamp(38px, 4vw, 54px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--st-text);
}


/* =========================================================
   MASONRY VAN LIGHTSPEED UITSCHAKELEN
   ========================================================= */

#blog.blog-overview .article-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;

  width: 100%;
  height: auto !important;

  position: static !important;
}

#blog.blog-overview .grid-sizer {
  display: none !important;
}

#blog.blog-overview .blog-element-wrapper {
  position: static !important;

  top: auto !important;
  left: auto !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   ALLE BLOG CARDS
   ========================================================= */

#blog.blog-overview .blog-element {
  height: 100%;
  margin: 0 !important;
}

#blog.blog-overview .blog-elem-wrapper {
  height: 100%;

  background: #fff;
  border: 1px solid var(--st-line);
  overflow: hidden;
}

#blog.blog-overview .blog-elem-wrapper > a:first-child {
  display: block;
  overflow: hidden;
}

#blog.blog-overview .blog-elem-wrapper img {
  display: block;

  width: 100%;
  max-width: none !important;

  aspect-ratio: 16 / 9;
  object-fit: cover;

  margin: 0 !important;

  transition: transform .45s ease;
}

#blog.blog-overview .blog-element:hover img {
  transform: scale(1.02);
}


/* =========================================================
   NORMALE BLOG CARDS
   ========================================================= */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.blog-elem-wrapper {
  display: flex;
  flex-direction: column;

  padding-bottom: 24px;
}


/* datum boven titel zetten */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.entry-date {
  order: 2;

  margin: 16px 20px 5px !important;

  font-size: 12px;
  line-height: 1.4;
  color: #888;
}


/* titel */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.blog-elem-wrapper > a:nth-of-type(2) {
  order: 3;

  margin: 0 20px;
  color: var(--st-text);
  text-decoration: none;
}

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
h3 {
  margin: 0 0 12px !important;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;

  color: var(--st-text);
}


/* excerpt */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.entry-content {
  order: 4;

  margin: 0 20px !important;

  font-size: 14px;
  line-height: 1.65;
  color: #666;
}


/* Als er een standaard knop staat */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.button {
  order: 5;

  align-self: flex-start;

  margin: 18px 20px 0 !important;
  padding: 0 0 3px !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #8e7d70 !important;

  color: var(--st-text) !important;

  font-size: 14px;
  font-weight: 400;

  text-decoration: none;
  box-shadow: none !important;
}


/* Cards zonder knop krijgen via de titellink toch een lees-indicatie */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.blog-elem-wrapper > a:nth-of-type(2)::after {
  content: "Lees artikel  →";

  display: block;
  width: max-content;

  margin-top: 18px;
  padding-bottom: 3px;

  border-bottom: 1px solid #8e7d70;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--st-text);
}


/* Als Lightspeed al een echte knop toont:
   dubbele CTA verbergen */

#blog.blog-overview
.blog-element-wrapper:not(.blog-element-wrapper-lg)
.blog-elem-wrapper:has(.button)
> a:nth-of-type(2)::after {
  display: none;
}


/* =========================================================
   EERSTE / UITGELICHTE ARTIKEL
   ========================================================= */

#blog.blog-overview .blog-element-wrapper-lg {
  grid-column: 1 / -1;
}

#blog.blog-overview
.blog-element-wrapper-lg
.blog-elem-wrapper {
  display: grid;

  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr);
  grid-template-rows: auto auto auto 1fr auto;

  column-gap: clamp(35px, 4vw, 65px);

  padding: 12px;
}


/* afbeelding links */

#blog.blog-overview
.blog-element-wrapper-lg
.blog-elem-wrapper > a:first-child {
  grid-column: 1;
  grid-row: 1 / 6;

  min-height: 440px;
}

#blog.blog-overview
.blog-element-wrapper-lg
.blog-elem-wrapper > a:first-child img {
  width: 100%;
  height: 100%;

  aspect-ratio: auto;
  object-fit: cover;
}


/* label UITGELICHT */

#blog.blog-overview
.blog-element-wrapper-lg
.blog-elem-wrapper::before {
  content: "UITGELICHT";

  grid-column: 2;
  grid-row: 1;

  align-self: end;

  margin: 32px 32px 13px 0;

  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 2.4px;
  color: #777;
}


/* titel */

#blog.blog-overview
.blog-element-wrapper-lg
.blog-elem-wrapper > a:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;

  align-self: start;

  margin-right: 32px;

  color: var(--st-text);
  text-decoration: none;
}

#blog.blog-overview
.blog-element-wrapper-lg h3 {
  margin: 0 0 10px !important;

  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.08;

  color: var(--st-text);
}


/* datum */

#blog.blog-overview
.blog-element-wrapper-lg
.entry-date {
  grid-column: 2;
  grid-row: 3;

  margin: 0 32px 18px 0 !important;

  font-size: 12px;
  color: #8a8a8a;
}


/* omschrijving */

#blog.blog-overview
.blog-element-wrapper-lg
.entry-content {
  grid-column: 2;
  grid-row: 4;

  margin: 0 32px 20px 0 !important;

  font-size: 15px;
  line-height: 1.65;
  color: #555;
}


/* Lees meer */

#blog.blog-overview
.blog-element-wrapper-lg
.button {
  grid-column: 2;
  grid-row: 5;

  justify-self: start;
  align-self: start;

  margin: 0 32px 30px 0 !important;
  padding: 0 0 4px !important;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #8e7d70 !important;

  color: var(--st-text) !important;

  font-size: 14px;
  font-weight: 400;

  text-decoration: none;
  box-shadow: none !important;
}


/* Tekst van knop aanpassen is met CSS niet betrouwbaar;
   visueel wel al goed */


/* =========================================================
   HOVER
   ========================================================= */

#blog.blog-overview
.blog-elem-wrapper > a:nth-of-type(2):hover h3 {
  color: var(--st-green);
}

#blog.blog-overview .button:hover {
  color: var(--st-green) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  #blog.blog-overview .article-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .blog-elem-wrapper {
    grid-template-columns: 1.1fr .9fr;
    column-gap: 35px;
  }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 750px) {

  #blog.blog-overview .m-t-80 {
    margin-top: 45px !important;
  }

  #blog.blog-overview .page-title {
    margin-bottom: 30px !important;
    font-size: 36px;
  }

  #blog.blog-overview .article-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .blog-elem-wrapper {
    display: flex;
    flex-direction: column;

    padding: 0 0 25px;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .blog-elem-wrapper > a:first-child {
    min-height: 0;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .blog-elem-wrapper > a:first-child img {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .blog-elem-wrapper::before {
    order: 2;

    margin: 22px 20px 8px;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .blog-elem-wrapper > a:nth-of-type(2) {
    order: 3;

    margin: 0 20px;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .entry-date {
    order: 4;

    margin: 8px 20px 16px !important;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .entry-content {
    order: 5;

    margin: 0 20px 20px !important;
  }

  #blog.blog-overview
  .blog-element-wrapper-lg
  .button {
    order: 6;

    margin: 0 20px !important;
  }

}