/* ==================================================
 * CRP PREMIUM FRAMEWORK – PROJECTENPAGINA + PROJECT ARCHIVE
 * Middelman Interieurbouw
 * Version: 3.1.0
 *
 * Doel:
 * - geconsolideerde stylesheet zonder oude override-lagen
 * - featured hero + nieuwste project
 * - dynamisch nieuwste project + overige projecten + filters
 * ================================================== */

.crp-projects-page,
.crp-projects-page *,
.crp-project-archive,
.crp-project-archive * {
  box-sizing: border-box;
}

/* ==================================================
 * GLOBALE SECTIEKOPPEN
 * ================================================== */

.crp-projects-section-head {
  max-width: 820px;
  margin: 0 0 76px;
}

.crp-projects-section-head--compact {
  margin-bottom: 58px;
}

.crp-projects-kicker,
.crp-project-archive-kicker,
.mi-project-page-label,
.mi-project-page-meta {
  display: block;
  color: var(--mi-light);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.crp-projects-kicker,
.crp-project-archive-kicker,
.mi-project-page-label {
  opacity: .58;
}

.crp-projects-kicker {
  margin-bottom: 20px;
}

.crp-projects-section-head h2 {
  margin: 0;
  color: var(--mi-light) !important;
  font-size: clamp(2.8rem, 4.8vw, 5.1rem);
  line-height: .96;
  letter-spacing: -.02em;
}

/* ==================================================
 * 2 + 4. AUTOMATISCHE PROJECTEN
 * ================================================== */

.crp-project-archive {
  width: 100%;
  color: var(--mi-light);
}

.crp-project-archive-list {
  display: flex;
  flex-direction: column;
  gap: clamp(84px, 8.5vw, 138px);
}

.crp-project-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 6vw, 94px);
  align-items: center;
  padding-bottom: clamp(68px, 7vw, 106px);
}

.crp-project-card.is-reverse {
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
}

.crp-project-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(233, 216, 183, .13);
}

.crp-project-card.is-reverse .crp-project-card-copy {
  order: 2;
}

.crp-project-card.is-reverse .crp-project-card-media {
  order: 1;
}

.crp-project-card-copy {
  max-width: 610px;
}

.crp-project-card-eyebrow {
  display: block;
  margin: 0 0 20px;
  color: var(--mi-light);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .52;
}

.crp-project-card:first-child .crp-project-card-eyebrow {
  opacity: .78;
}

.crp-project-card h2 {
  margin: 0 0 26px;
  color: var(--mi-light) !important;
  font-size: clamp(2.5rem, 4.15vw, 4.7rem);
  line-height: .97;
  letter-spacing: -.02em;
}

.crp-project-card h2 a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity .25s ease;
}

.crp-project-card h2 a:hover {
  opacity: .76;
}

.crp-project-card-copy p {
  max-width: 560px;
  margin: 0 0 31px;
  color: var(--mi-light);
  font-size: 1rem;
  line-height: 1.88;
  opacity: .72;
}

.crp-project-card-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(233, 216, 183, .32);
  color: var(--mi-light) !important;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: gap .25s ease, border-color .25s ease, opacity .25s ease;
}

.crp-project-card-link:hover {
  gap: 17px;
  border-color: var(--mi-light);
  opacity: .82;
}

/*
 * Bewust géén geforceerde aspect-ratio.
 * Staande én liggende foto's blijven volledig zichtbaar.
 */

.crp-project-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 30px;
  background: transparent;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .22);
  text-decoration: none !important;
  isolation: isolate;
}

.crp-project-card-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(.92) contrast(1.035);
  transition: transform .65s ease, opacity .65s ease, filter .65s ease;
}

.crp-project-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(43, 30, 20, .72),
      rgba(43, 30, 20, .08) 42%,
      transparent 70%
    );
  opacity: .32;
  transition: opacity .35s ease;
}

.crp-project-card-overlay {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  z-index: 2;
  color: var(--mi-light);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.crp-project-card-media:hover img {
  transform: scale(1.025);
  filter: saturate(.92) contrast(1.035) brightness(.88);
}

.crp-project-card-media:hover::after {
  opacity: .78;
}

.crp-project-card-media:hover .crp-project-card-overlay {
  opacity: 1;
  transform: translateY(0);
}

.crp-project-card-media:focus-visible,
.crp-project-card h2 a:focus-visible,
.crp-project-card-link:focus-visible {
  outline: 2px solid var(--mi-light);
  outline-offset: 5px;
}

.crp-projects-newest .crp-project-card {
  padding-bottom: 0;
}

.crp-projects-newest .crp-project-card::after {
  display: none;
}

.crp-projects-newest .crp-project-card-media {
  box-shadow:
    0 32px 82px rgba(0, 0, 0, .27),
    0 0 0 1px rgba(233, 216, 183, .08);
}

/* ==================================================
 * RESPONSIVE
 * ================================================== */

@media (max-width: 980px) {
  .crp-projects-section-head {
    margin-bottom: 52px;
  }

  .crp-project-card,
  .crp-project-card.is-reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .crp-project-card.is-reverse .crp-project-card-copy,
  .crp-project-card.is-reverse .crp-project-card-media {
    order: initial;
  }

  .crp-projects-manual .mi-project-page-item-reverse .mi-project-page-text {
    margin-left: 0;
  }

  .crp-project-card-copy {
    max-width: 760px;
  }
}

@media (max-width: 767px) {
  .crp-projects-section-head {
    margin-bottom: 40px;
  }

  .crp-projects-section-head h2 {
    font-size: clamp(2.35rem, 11vw, 3.55rem);
  }

  .crp-project-archive-list {
    gap: 64px;
  }

  .crp-project-card,
  .crp-project-card.is-reverse {
    gap: 26px;
  }

  .crp-project-card {
    padding-bottom: 58px;
  }

  .crp-project-card h2 {
    margin-bottom: 20px;
    font-size: clamp(2.2rem, 10.8vw, 3.35rem);
  }

  .crp-project-card-copy p {
    font-size: .96rem;
    line-height: 1.82;
  }

  .crp-project-card-media {
    border-radius: 22px;
  }

  .crp-project-card-overlay {
    right: 20px;
    bottom: 18px;
    left: 20px;
  }
}

/* ==================================================
 * TOEGANKELIJKHEID
 * ================================================== */

@media (prefers-reduced-motion: reduce) {
  .crp-project-card h2 a,
  .crp-project-card-link,
  .crp-project-card-media img,
  .crp-project-card-media::after,
  .crp-project-card-overlay {
    transition: none;
  }
}

/* ==================================================
 * DIVI 5 – PROJECTSECTIES
 * ================================================== */

.et_pb_section:has(.crp-projects-featured-hero),
.et_pb_section:has(.crp-projects-section-head),
.et_pb_section:has(.crp-project-archive) {
  background: var(--mi-dark) !important;
  color: var(--mi-light) !important;
}

.et_pb_section:has(.crp-projects-featured-hero) > .et_pb_row,
.et_pb_section:has(.crp-projects-section-head) > .et_pb_row,
.et_pb_section:has(.crp-project-archive) > .et_pb_row > .et_pb_row {
  width: 100% !important;
  max-width: 1680px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.crp-project-archive p:empty,
.et_pb_text_inner > p:has(+ .crp-project-archive):empty {
  display: none;
}

@supports not selector(:has(*)) {
  .crp-projects-featured-hero,
  .crp-project-archive {
    background: var(--mi-dark);
  }
}


/* ==================================================
 * FEATURED HERO + NIEUWSTE PROJECT
 * Definitieve geconsolideerde versie
 * ================================================== */

.crp-projects-featured-hero {
  display: grid;
  grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr);
  grid-template-rows: auto 1fr;

  width: 100%;
  min-height: 760px;

  column-gap: clamp(64px, 7vw, 120px);
  row-gap: 58px;

  align-items: stretch;

  color: var(--mi-light);
}

/* Intro linksboven */

.crp-projects-featured-hero__intro {
  grid-column: 1;
  grid-row: 1;
  align-self: start;

  max-width: 720px;
  padding-top: 8px;
}

.crp-projects-featured-hero .crp-projects-hero-copy,
.crp-projects-featured-hero .mi-project-page-head {
  max-width: 720px;
  margin: 0 !important;
}

html body #page-container .crp-projects-featured-hero .crp-projects-hero-label,
.crp-projects-featured-hero .mi-project-page-label {
  display: block !important;

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

  color: var(--mi-light) !important;

  font-family: var(--mi-body-font) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;

  opacity: .68 !important;
}

html body #page-container .crp-projects-featured-hero .crp-projects-hero-title {
  display: block !important;

  max-width: 720px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;

  color: var(--mi-light) !important;

  font-family: var(--mi-heading-font) !important;
  font-size: clamp(4.5rem, 6.25vw, 7.15rem) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: .91 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;

  opacity: 1 !important;
}

html body #page-container .crp-projects-featured-hero .crp-projects-hero-intro {
  display: block !important;

  max-width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--mi-light) !important;

  font-family: var(--mi-body-font) !important;
  font-size: 1.08rem !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;

  opacity: .8 !important;
}

/* Nieuwste project shortcode onderdeel laten worden van dezelfde hero-grid */

.crp-projects-featured-hero__project {
  display: contents;
}

.crp-projects-featured-hero__project .crp-project-archive,
.crp-projects-featured-hero__project .crp-project-archive-list,
.crp-projects-featured-hero__project .crp-project-card {
  display: contents;
}

/* Projectinformatie linksonder */

.crp-projects-featured-hero__project .crp-project-card-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: end;

  width: 100%;
  max-width: 620px;
  padding-bottom: 10px;
}

.crp-projects-featured-hero__project .crp-project-card-eyebrow {
  margin: 0 0 18px !important;
  color: var(--mi-light) !important;

  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;

  opacity: .58 !important;
}

.crp-projects-featured-hero__project .crp-project-card h2 {
  margin: 0 0 22px !important;

  color: var(--mi-light) !important;

  font-family: var(--mi-heading-font) !important;
  font-size: clamp(3rem, 4vw, 4.8rem) !important;
  font-weight: 600 !important;
  line-height: .96 !important;
  letter-spacing: -.025em !important;
}

.crp-projects-featured-hero__project .crp-project-card h2 a {
  color: inherit !important;
  font: inherit !important;
}

.crp-projects-featured-hero__project .crp-project-card-copy p {
  display: block !important;

  max-width: 560px;
  margin: 0 0 28px !important;

  color: var(--mi-light) !important;

  font-size: 1rem !important;
  line-height: 1.8 !important;

  opacity: .68 !important;
}

.crp-projects-featured-hero__project .crp-project-card-link {
  color: var(--mi-light) !important;
}

/* Hoge projectfoto rechts over beide rijen */

.crp-projects-featured-hero__project .crp-project-card-media {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;

  width: 100%;
  height: 100%;
  min-height: 760px;
  max-height: none;

  border-radius: 30px;
}

.crp-projects-featured-hero__project .crp-project-card-media img {
  width: 100%;
  height: 100%;
  min-height: 760px;
  max-height: none;

  object-fit: cover;
  object-position: center;
}

.crp-projects-featured-hero__project .crp-project-card::after {
  display: none !important;
}


/* ==================================================
 * FEATURED HERO – RESPONSIVE
 * ================================================== */

@media (max-width: 1100px) {
  .crp-projects-featured-hero {
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    column-gap: 52px;
    min-height: 680px;
  }

  .crp-projects-featured-hero__project .crp-project-card-media,
  .crp-projects-featured-hero__project .crp-project-card-media img {
    min-height: 680px;
  }
}

@media (max-width: 980px) {
  .crp-projects-featured-hero {
    display: flex;
    flex-direction: column;

    min-height: 0;
    gap: 42px;
  }

  .crp-projects-featured-hero__project {
    display: block;
  }

  .crp-projects-featured-hero__project .crp-project-archive,
  .crp-projects-featured-hero__project .crp-project-archive-list {
    display: block;
  }

  .crp-projects-featured-hero__project .crp-project-card {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .crp-projects-featured-hero__project .crp-project-card-media {
    order: 1;
    height: 560px;
    min-height: 560px;
  }

  .crp-projects-featured-hero__project .crp-project-card-media img {
    height: 560px;
    min-height: 560px;
  }

  .crp-projects-featured-hero__project .crp-project-card-copy {
    order: 2;
    align-self: auto;
    padding-bottom: 0;
  }

  html body #page-container .crp-projects-featured-hero .crp-projects-hero-title {
    max-width: 820px !important;
    font-size: clamp(3.8rem, 9vw, 5.7rem) !important;
  }
}

@media (max-width: 767px) {
  .crp-projects-featured-hero {
    gap: 34px;
  }

  html body #page-container .crp-projects-featured-hero .crp-projects-hero-title {
    font-size: clamp(3rem, 13vw, 4.4rem) !important;
    line-height: .94 !important;
  }

  html body #page-container .crp-projects-featured-hero .crp-projects-hero-intro {
    font-size: 1rem !important;
  }

  .crp-projects-featured-hero__project .crp-project-card-media,
  .crp-projects-featured-hero__project .crp-project-card-media img {
    height: 430px;
    min-height: 430px;
    border-radius: 22px;
  }

  .crp-projects-featured-hero__project .crp-project-card h2 {
    font-size: clamp(2.35rem, 11vw, 3.4rem) !important;
  }
}


/* ==================================================
 * TOEGANKELIJKHEID – FEATURED HERO
 * ================================================== */

@media (prefers-reduced-motion: reduce) {
  .crp-projects-featured-hero__project .crp-project-card-media img {
    transition: none;
  }
}

/* ==================================================
 * PROJECTFILTERS
 * ================================================== */

.crp-project-filters {
  width: 100%;
  margin: 0 0 clamp(72px, 7vw, 112px);
  color: var(--mi-light);
}

.crp-project-filters__head {
  max-width: 860px;
  margin-bottom: 38px;
}

.crp-project-filters__head h2 {
  margin: 0;
  color: var(--mi-light) !important;
  font-size: clamp(2.35rem, 4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.crp-project-filters__groups {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 32px;
  border-top: 1px solid rgba(233, 216, 183, .15);
}

.crp-project-filter-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.crp-project-filter-group legend {
  margin-bottom: 13px;
  color: var(--mi-light);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .55;
}

.crp-project-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.crp-project-filter-button {
  appearance: none;
  border: 1px solid rgba(233, 216, 183, .22);
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
  color: var(--mi-light);
  font: inherit;
  font-size: .82rem;
  line-height: 1.2;
  cursor: pointer;
  opacity: .72;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    opacity .2s ease,
    transform .2s ease;
}

.crp-project-filter-button:hover,
.crp-project-filter-button:focus-visible {
  border-color: rgba(233, 216, 183, .58);
  opacity: 1;
}

.crp-project-filter-button.is-active {
  border-color: var(--mi-light);
  background: var(--mi-light);
  color: var(--mi-dark);
  opacity: 1;
}

.crp-project-filter-button:active {
  transform: translateY(1px);
}

.crp-project-card[hidden] {
  display: none !important;
}

.crp-project-filter-empty {
  margin: 42px 0 0;
  color: var(--mi-light);
  font-size: 1rem;
  line-height: 1.7;
  opacity: .72;
}

.et_pb_section:has(.crp-project-filters) {
  background: var(--mi-dark) !important;
  color: var(--mi-light) !important;
}

.et_pb_section:has(.crp-project-filters) > .et_pb_row {
  width: 100% !important;
  max-width: 1680px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (max-width: 767px) {
  .crp-project-filters {
    margin-bottom: 64px;
  }

  .crp-project-filters__head {
    margin-bottom: 30px;
  }

  .crp-project-filter-options {
    gap: 8px;
  }

  .crp-project-filter-button {
    padding: 9px 13px;
    font-size: .78rem;
  }
}

/* ==================================================
 * PROJECTFILTERS – TWEE UITKLAPMENU'S
 * ================================================== */

.crp-project-filter-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(100%, 940px);
}

.crp-project-filter-select-group {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.crp-project-filter-select-label {
  color: var(--mi-light);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .68;
}

.crp-project-filter-select-wrap {
  position: relative;
}

.crp-project-filter-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--mi-light);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
  opacity: .72;
}

.crp-project-filter-select {
  width: 100%;
  min-height: 58px;
  appearance: none;
  border: 1px solid rgba(233, 216, 183, .28);
  border-radius: 4px;
  padding: 0 54px 0 20px;
  background: rgba(233, 216, 183, .035);
  color: var(--mi-light);
  font: inherit;
  font-size: .95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.crp-project-filter-select:hover,
.crp-project-filter-select:focus-visible {
  border-color: rgba(233, 216, 183, .66);
  background: rgba(233, 216, 183, .07);
  outline: none;
}

.crp-project-filter-select option {
  background: var(--mi-dark);
  color: var(--mi-light);
}

.crp-project-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 20px;
}

.crp-project-filter-reset {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(233, 216, 183, .34);
  padding: 0 0 4px;
  background: transparent;
  color: var(--mi-light);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .76;
}

.crp-project-filter-reset:hover,
.crp-project-filter-reset:focus-visible {
  border-color: var(--mi-light);
  outline: none;
  opacity: 1;
}

.crp-project-filter-status {
  color: var(--mi-light);
  font-size: .82rem;
  line-height: 1.5;
  opacity: .62;
}

.crp-project-filters--enhanced .crp-project-filter-options,
.crp-project-filters--enhanced .crp-project-filter-group {
  display: none !important;
}

@media (max-width: 767px) {
  .crp-project-filter-selects {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .crp-project-filter-select {
    min-height: 54px;
  }
}