:root {
  --cream: #f5f3e9;
  --orange: #c55302;
  --dark-orange: #833701;

}

/* Je gebruikt een algemeen CSS-bestand voor:
Typografie & Custom Fonts: Bijvoorbeeld specifieke styling voor je Google Font Marcellus (lettergrootte op mobiel, letterafstand, h1/h2 regels).
Layout-correcties & Spacing: Extra marges, specifieke hoogtes voor banners/herosecties, of custom kaarten (cards) die Bootstrap standaard niet heeft.
Complexere componenten: Header/Footer styling, animaties, custom hover-effecten op afbeeldingen of unieke knopvormen.  */




/* ========================================================= */
/* LET OP: CSS settings voor Custom thema: zie BASE.html */
/* ========================================================= */



/* Hero image area */
.hero {
  padding: 300px 0 0;
  position: relative;
  margin: 0 0 10px;
}



.hero-image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero__title {
  font-weight: 400;
  font-size: 5rem;
  line-height: 1.09;
  margin: 0;
  width: 100%;
  padding: 75px;
}




/* Ook voor smartphones */

.hero__container {
  width: 100%;
  padding: 30px 20px 100px;
  background-color: var(--orange);
  margin: 0 auto;
}


.hero__title {
  color: var(--white);
  font-weight: 400;
  font-size: 2.875rem;
  line-height: 1.09;
  margin: 0;
  width: 100%;
}


.hero-gradient-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: linear-gradient(0deg, #000 11.33%, rgb(0 0 0 / 0%) 100%);
}


 .detail__introduction{
  font-size: 1.625rem;
  line-height: 1.15;
  margin-top: 50px;
  margin-bottom: 65px;
} 


.index-header__title {
  font-weight: 400;
  font-size: 2.875rem;
  line-height: 1.09;
  margin-top: 30px;
}

.index-header__introduction {
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.15;
  margin-top: 20px;
  margin-bottom: 60px;
}





.homepage .promo {
  background:  var(--bs-primary);
  height: 100%;
  padding: 60px 40px;
  margin-top: 40px;
  margin-bottom: 100px;
}



.homepage .promo-text {
  color:  var(--bs-primary-text);
}


.homepage .hero {
  margin: 0;
  /* Mark */
  padding: 100px 0 30px;
}



















blockquote {
  border-left: 3px solid var(--orange);
  margin: 40px 0 30px;
  padding: 0 0 0 20px;
}

blockquote .text {

  margin: 0 0 30px;
  font-family: var(--font--primary);
  font-size: 1.625rem;
  line-height: 1.15;
}

blockquote .attribute-name {

  font-size: var(--font-md);
  line-height: 1.56;
  margin: 0;
  padding: 0;
}














.listing-card {
  margin-bottom: 40px;
}

.listing-card__meta {
  border-collapse: separate;
  border-spacing: 5px;
}

.listing-card__link {
  display: flex;
  flex-direction: row;
  padding-bottom: 30px;
  color: var(--orange);
  text-decoration-color: currentColor; /* Zorgt dat de streep exact de tekstkleur volgt */
  /* border-bottom: 1px solid var(--border-grey); */
}

.listing-card__contents {
  padding-top: 10px;
  padding-left: 25px;
}

.listing-card__title {
  color: var(--orange);
  margin-top: 0;
}

.listing-card__meta-category {
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.57;
  padding-right: 10px;
  vertical-align: top;
}

.listing-card__meta-content {
  color: var(--dark);
  font-size: 0.875rem;
  line-height: 1.57;
  vertical-align: top;
}

.listing-card__meta-row:last-child {
  margin-bottom: 0;
}

.listing-card__image {
  width: 100%;
  overflow: hidden;
  margin: 0;
  max-width: 100px;
  max-height: 110px;
}

.listing-card__image img {
  transition: transform ease 0.2s;
}

.listing-card:hover .listing-card__image img {
  transform: scale(1.05);
}

.listing-card:hover .listing-card__title {
  color: var(--dark-orange);
  text-decoration: underline;
}




.listing-card2 {
  display: flex;
  flex-direction: column;
  margin: 0 auto 50px;
  text-align: left;
}

.listing-card2:hover .listing-card2__image img {
  transform: scale(1.05);
}

.listing-card2:hover .listing-card2__title {
  color: var(--dark-orange);
}

.listing-card2__image {
  margin-bottom: 0;
  overflow: hidden;
}

.listing-card2__link {
  /* display: flex;
  flex-direction: row;
  padding-bottom: 30px; */
  color: var(--orange);
  text-decoration-color: currentColor; /* Zorgt dat de streep exact de tekstkleur volgt */
  /* border-bottom: 1px solid var(--border-grey); */
}

.listing-card2__image img {
  object-fit: cover;
  min-height: 210px;
  transition: transform 0.2s ease;
}

.listing-card2__title {
  color: var(--orange);
  font-size: 1.625rem;
  line-height: 1.15;
  margin-bottom: 10px;
  font-weight: 400;
  width: max-content;
  position: relative;
}

.listing-card2__title::before {
  content: '';
  bottom: 3px;
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--dark-orange);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.listing-card2:hover .listing-card2__title::before {
  opacity: 1;
}

.listing-card2__text {
  color: var(--dark);
  font-size: var(--font-sm);
  line-height: 1.5;
}







































.homepage .featured-cards__link {
  display: flex;
  flex-direction: row;
  justify-content: baseline;
  font-family: var(--font--primary);
  margin: 0 auto;
  width: max-content;
  font-size: var(--font-md);
  line-height: 1.28;
}

.homepage .featured-cards__chevron-icon {
  margin-left: 8px;
  width: 8px;
  height: 22px;
  transition: transform ease 0.1s;
}

.homepage .featured-cards__link:hover {
  text-decoration: underline;
}

.homepage .featured-cards__link:hover .featured-cards__chevron-icon {
  transform: translateX(5px);
}

.homepage .featured-cards__link:hover .featured-cards__chevron-icon path {
  fill: var(--dark-orange);
}


.child-list {
  list-style-type: none;
  padding-left: 0;
  padding-bottom: 40px;
}



/* #region -- Promo Section */
.homepage .promo-row {
/* Mark */
  padding: 40px 0 80px;
  /* background-color: var(--grey); */
}






/* Maak alle opsommingen in rich text groter */
.w-block-paragraph_block ul li {
    font-size: 1.25rem; /* Pas aan naar gewenste grootte (bijv. 24px of h3/h4 formaat) */
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-family: var(--bs-headings-font-family);
}





/* ----------------------------------------------------------- */
/* Voor desktop */
/* ----------------------------------------------------------- */
@media (min-width: 768px) {


    .container {
      max-width: 1400px;
      padding-left: 40px;
      padding-right: 40px;
    }




    .hero {
    padding: 250px 0 0;
    margin: 0;
  }

    .hero__container {
    background-color: transparent;
    max-width: 1400px;
    padding: 0 40px;
  }

  .hero__title {
    width: max-content;
    max-width: 100%;
    font-size: 6.25rem;
    line-height: 0.64;
    padding: 75px 65px;
    transform: translateY(50%);
  }

    .hero-gradient-mask {
    background: linear-gradient(90deg, #000 11.33%, rgb(0 0 0 / 0%) 100%);
  }

    .detail__introduction{
    font-size: 2rem;
    line-height: 1.31;
    margin-top: 160px;
} 

  .index-header__title {
    font-size: 6.25rem;
    line-height: 0.64;
    margin-top: 70px;
  }

  .index-header__introduction {
    font-size: 2rem;
    line-height: 1.31;
    margin-top: 40px;
    margin-bottom: 40px;
  }

 blockquote {
    border-left: 3px solid var(--orange);
    margin: 50px 0;
    padding: 0 40px;
  }

  blockquote .text {
    font-size: 2rem;
    line-height: 1.31;
  }

 .homepage .featured-cards {
    padding-right: 50px;
  }

  .homepage .featured-cards__link {
    font-size: 1.5rem;
    line-height: 30px;
    margin: unset;
  }

  .homepage .featured-cards__chevron-icon {
    width: 12px;
    height: 28px;
    align-self: center;
  }


  .child-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 30px;
    padding-bottom: 80px;
  }



  .homepage .promo-row {
    padding-top: 80px;
    margin-right: -45px;
  }




.listing-card__image {
    max-width: 180px;
    max-height: 180px;
  }

  .listing-card__contents {
    padding-left: 45px;
    padding-top: 30px;
  }

  .listing-card__meta-category,
  .listing-card__meta-content {
    font-size: var(--font-sm);
    line-height: 1.5;
  }



  /* Listing Card 2 specifieke stijlen */
  .listing-card2 {
    margin-bottom: 0;
  }

  .listing-card2__image {
    margin-bottom: 30px;
  }

  .listing-card2__image img {
    min-height: 320px;
  }

  .listing-card2__title {
    font-size: 2rem;
    line-height: 1.31;
    margin-bottom: 20px;
  }

  .listing-card2__text {
    font-size: var(--font-md);
    line-height: 1.55;
  }
  

}