.elementor-2082 .elementor-element.elementor-element-dc3e06c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2082 .elementor-element.elementor-element-df82e5b{--display:flex;}.elementor-2082 .elementor-element.elementor-element-2bc3346{--display:flex;}.elementor-2082 .elementor-element.elementor-element-5ea443a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2082 .elementor-element.elementor-element-766f9cf{--display:flex;}.elementor-widget-image .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-2082 .elementor-element.elementor-element-a1c431c img{width:100%;height:500px;object-fit:cover;object-position:center center;}.elementor-2082 .elementor-element.elementor-element-38997d8{--display:flex;--justify-content:flex-end;}.elementor-2082 .elementor-element.elementor-element-a8bc1a9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-2082 .elementor-element.elementor-element-92e2461 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2082 .elementor-element.elementor-element-92e2461{text-align:right;}.elementor-2082 .elementor-element.elementor-element-92e2461 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:300;color:#272727;}.elementor-2082 .elementor-element.elementor-element-2d4a44b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2082 .elementor-element.elementor-element-9cd1420 img{width:100%;height:323px;object-fit:cover;object-position:center center;}@media(min-width:768px){.elementor-2082 .elementor-element.elementor-element-766f9cf{--width:65%;}.elementor-2082 .elementor-element.elementor-element-38997d8{--width:35%;}}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-2082 .elementor-element.elementor-element-a1c431c img{height:340px;}.elementor-2082 .elementor-element.elementor-element-9cd1420 img{height:178px;}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-2082 .elementor-element.elementor-element-a1c431c img{height:301px;}.elementor-2082 .elementor-element.elementor-element-92e2461 > .elementor-widget-container{margin:0px 0px 30px 0px;}.elementor-2082 .elementor-element.elementor-element-9cd1420 img{height:245px;}}/* Start custom CSS for container, class: .elementor-element-dc3e06c *//* =========================================================
   PROJECT LISTING — PERFECTE ALIGNMENT + CITY-LIJN DESKTOP
   + MOBILE: CENTER CITY + TOP/BOTTOM LINES
   ========================================================= */

:root {
  --line-strong: rgba(0,0,0,0.6);
  --line-soft:   rgba(0,0,0,0.4);

  --row-gap-desktop: 72px;
  --row-gap-mobile:  32px;

  --concept-pull: 48px;

  /* City */
  --city-size-desktop: clamp(18px, 1.25vw, 24px);
  --city-size-mobile:  18px;

  --city-drop: 18px;
  --city-line-gap: 14px;

  --city-line-thickness: 1px;
  --city-line-reach: 400px;
}

/* =========================
   BASIS
   ========================= */
.project-item { margin-bottom: 140px; }
.project-frame { position: relative; }

/* =========================
   LAYOUT
   ========================= */
.project-row {
  display: flex;
  align-items: stretch;
  gap: var(--row-gap-desktop);
  position: relative;
  z-index: 0;
}

.project-main {
  flex: 0 0 65%;
  overflow: visible;
  position: relative;
  z-index: 3; /* main boven city-lijn */
}

.project-content {
  flex: 0 0 35%;
  max-width: 420px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  overflow: visible;
  position: relative;
  z-index: 2;
}

/* =========================
   JETENGINE AFWISSELING
   ========================= */
.jet-listing-grid__item:nth-child(even) .project-row {
  flex-direction: row-reverse;
}

/* =========================
   HORIZONTALE UITLIJNING CONTENT
   ========================= */
.jet-listing-grid__item:nth-child(odd) .project-content { margin-left: auto; }
.jet-listing-grid__item:nth-child(even) .project-content { margin-right: auto; }

/* =========================
   VERTICALE UITLIJNING
   ========================= */
.jet-listing-grid__item:nth-child(odd) .project-content { justify-content: flex-end; }
.jet-listing-grid__item:nth-child(even) .project-content { justify-content: flex-start; }

/* =========================
   VOLGORDE TEKST / CONCEPT
   ========================= */
.project-text { order: 1; }
.project-concept { order: 2; }

/* =========================
   TEKST
   ========================= */
.listing-tekst {
  max-width: 360px;
  will-change: opacity, transform;
  position: relative; /* city-lijn hangt hieraan */
  overflow: visible;
}

.listing-tekst h3 {
  margin: 0 0 8px 0;
  font-size: var(--city-size-desktop);
  line-height: 1.15;

  position: relative;
  top: var(--city-drop);
  z-index: 2; /* city boven lijn */
}

.listing-tekst p {
  line-height: 1.6;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

/* =========================
   TEKST UITLIJNING DESKTOP
   ========================= */
.jet-listing-grid__item:nth-child(odd) .listing-tekst {
  text-align: right;
  align-self: flex-end;
}

.jet-listing-grid__item:nth-child(even) .listing-tekst {
  text-align: left;
  align-self: flex-start;
}

/* =========================================================
   CITY-LIJN DESKTOP — loopt door tot OP main maar ligt ACHTER main foto
   ========================================================= */
.listing-tekst::after {
  content: "";
  position: absolute;
  top: calc(var(--city-drop) + 1.15em + var(--city-line-gap));
  height: var(--city-line-thickness);
  background: var(--line-strong);
  pointer-events: none;
  z-index: 1; /* onder tekst + onder main (main = z-index 3) */
}

/* odd: lijn naar links (in main links) */
.jet-listing-grid__item:nth-child(odd) .listing-tekst::after {
  right: 0;
  width: calc(100% + var(--row-gap-desktop) + var(--city-line-reach));
}

/* even: lijn naar rechts (in main rechts) */
.jet-listing-grid__item:nth-child(even) .listing-tekst::after {
  left: 0;
  width: calc(100% + var(--row-gap-desktop) + var(--city-line-reach));
}

/* =========================
   CONCEPT AFBEELDING — ONDERAAN UITLIJNEN DESKTOP
   ========================= */
.project-concept { margin-top: auto; }

.jet-listing-grid__item:nth-child(odd) .project-concept {
  align-self: flex-end;
  display: inline-flex;
}

.jet-listing-grid__item:nth-child(even) .project-concept {
  align-self: flex-start;
  display: inline-flex;
}

/* =========================
   BEELDEN
   ========================= */
.project-main img,
.project-concept img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================
   ZWART/WIT → KLEUR OP HOVER
   ========================= */
.project-main img,
.project-concept img {
  filter: grayscale(100%);
  transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-item:hover .project-main img,
.project-item:hover .project-concept img {
  filter: grayscale(0%);
}

/* =========================
   CONCEPT OVERLAP DESKTOP
   ========================= */
.jet-listing-grid__item:nth-child(odd) .project-concept {
  margin-left: calc(-1 * var(--concept-pull));
}

.jet-listing-grid__item:nth-child(even) .project-concept {
  margin-right: calc(-1 * var(--concept-pull));
}

/* =========================
   LIJNEN (bestaande frame-lijnen)
   ========================= */
.project-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.project-lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 1px;
  background: var(--line-strong);
}

.project-lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 180px;
  background: var(--line-strong);
}

.jet-listing-grid__item:nth-child(even) .project-lines::before { left: auto; right: 0; }
.jet-listing-grid__item:nth-child(even) .project-lines::after  { left: auto; right: 0; }

.project-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 55%;
  height: 1px;
  background: var(--line-soft);
  z-index: 0;
}

.jet-listing-grid__item:nth-child(even) .project-row::after {
  left: auto;
  right: 0;
}

/* =========================================================
   ✅ MOBILE — CENTER CITY TUSSEN 2 AFBEELDEN + TOP/BOTTOM LINES
   ========================================================= */
@media (max-width: 768px) {
  :root{
    --m-between-gap: 26px;  /* spacing main ↔ city ↔ concept */
    --m-line-offset: 14px;  /* afstand van lijnen tot block */
    --m-top-line: 86%;      /* bovenlijn lengte (links → bijna einde) */
    --m-bot-line: 78%;      /* onderlijn lengte (rechts → stuk links) */
  }

  .project-row {
    flex-direction: column;
    gap: var(--m-between-gap);
  }

  .project-main,
  .project-content {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Zorg dat alles mooi “in het midden” komt */
  .project-content {
    justify-content: center;
    align-items: center;
  }

  /* City exact tussen de 2 afbeeldingen */
  .listing-tekst {
    max-width: 100%;
    width: 100%;
    text-align: center !important;
    align-self: center !important;
    margin: 0;
  }

  .listing-tekst h3 {
    font-size: var(--city-size-mobile);
    top: 0;               /* mobile: geen drop (we centreren spacing met gap) */
    margin: 0;
  }

  /* Desktop city-lijn uit op mobile (je krijgt mobile top/bottom lijnen i.p.v.) */
  .listing-tekst::after {
    display: none !important;
  }

  /* Concept netjes onderaan (in column is dit gewoon “onder”) */
  .project-concept {
    margin: 0 !important;
    align-self: stretch;
    display: block;
  }

  /* Desktop lijnen uit op mobile */
  .project-lines,
  .project-row::after {
    display: none !important;
  }

  /* =========================
     MOBILE TOP/BOTTOM LINES (zoals jij beschrijft)
     ========================= */
  .project-frame {
    position: relative;
    overflow: visible;
  }

  /* BOVENLIJN: van links → stopt net voor het einde */
  .project-frame::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(-1 * var(--m-line-offset));
    height: 1px;
    width: var(--m-top-line);
    background: var(--line-strong);
    pointer-events: none;
  }

  /* ONDERLIJN: van rechts → tot een stuk links */
  .project-frame::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(-1 * var(--m-line-offset));
    height: 1px;
    width: var(--m-bot-line);
    background: var(--line-strong);
    pointer-events: none;
  }

  .project-item { margin-bottom: 96px; }
}/* End custom CSS */