/* Werken bij / vacaturepagina's – losse sjieke kolommen en verfijnde CTA */

.tg-jobs-feature-row{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.tg-jobs-feature-card{
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid rgba(34,54,88,.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(22,35,63,.055) !important;
  overflow: hidden !important;
  min-height: 100% !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.tg-jobs-feature-card:hover,
.tg-jobs-feature-card:focus-within{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(22,35,63,.075) !important;
  border-color: rgba(34,54,88,.16) !important;
}

.tg-jobs-feature-card,
.tg-jobs-feature-card > div,
.tg-jobs-feature-card > section,
.tg-jobs-feature-card > article,
.tg-jobs-feature-card > .elementor-element,
.tg-jobs-feature-card > .elementor-column-wrap,
.tg-jobs-feature-card > .elementor-widget-wrap,
.tg-jobs-feature-card > .elementor-element-populated,
.tg-jobs-feature-card > .e-con-inner,
.tg-jobs-feature-card .elementor-widget-wrap,
.tg-jobs-feature-card .elementor-element-populated,
.tg-jobs-feature-card .e-con-inner,
.tg-jobs-feature-card .elementor-widget-container{
  background: transparent !important;
}

.tg-jobs-feature-card .elementor-widget-wrap,
.tg-jobs-feature-card .elementor-element-populated,
.tg-jobs-feature-card .elementor-widget-container,
.tg-jobs-feature-card .e-con-inner,
.tg-jobs-feature-card .e-con,
.tg-jobs-feature-card .elementor-column,
.tg-jobs-feature-card .elementor-widget,
.tg-jobs-feature-card .elementor-inner-column{
  border-color: transparent !important;
  box-shadow: none !important;
}

.tg-jobs-feature-card .elementor-widget-wrap,
.tg-jobs-feature-card .elementor-element-populated,
.tg-jobs-feature-card .e-con-inner{
  height: 100% !important;
}

.tg-jobs-feature-card .elementor-divider,
.tg-jobs-feature-card hr,
.tg-jobs-feature-card .elementor-widget-divider{
  margin-top: 0 !important;
}

.tg-jobs-feature-card h1,
.tg-jobs-feature-card h2,
.tg-jobs-feature-card h3,
.tg-jobs-feature-card h4,
.tg-jobs-feature-card h5,
.tg-jobs-feature-card h6{
  color: #445a7a !important;
}

.tg-jobs-feature-card p,
.tg-jobs-feature-card li,
.tg-jobs-feature-card span,
.tg-jobs-feature-card div{
  color: #7a879d;
}

.tg-jobs-feature-card ul,
.tg-jobs-feature-card ol{
  margin-bottom: 0 !important;
}

.tg-jobs-feature-card li + li{
  margin-top: 10px !important;
}

/* CTA's – alleen gouden rand, rustige hover */
.tg-jobs-cta-wrap{
  display: inline-flex !important;
}

.tg-jobs-cta,
.tg-jobs-cta:visited,
.tg-jobs-cta .elementor-button-text,
.tg-jobs-cta span,
.tg-jobs-cta i,
.tg-jobs-cta svg,
.tg-jobs-cta-wrap .elementor-button,
.tg-jobs-cta-wrap .elementor-button:visited,
.tg-jobs-cta-wrap .elementor-button-text,
.tg-jobs-cta-wrap .elementor-button span,
.tg-jobs-cta-wrap .elementor-button i,
.tg-jobs-cta-wrap .elementor-button svg{
  color: #C9A24B !important;
  fill: #C9A24B !important;
  stroke: #C9A24B !important;
}

.tg-jobs-cta,
.tg-jobs-cta-wrap .elementor-button,
.tg-jobs-cta-wrap .elementor-button-link{
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #C9A24B !important;
  box-shadow: none !important;
}

.tg-jobs-cta,
.tg-jobs-cta-wrap .elementor-button,
.tg-jobs-cta-wrap .elementor-button-link,
.tg-jobs-cta-wrap .elementor-button-content-wrapper{
  transition: background-color .22s ease, color .22s ease, border-color .22s ease !important;
}

.tg-jobs-cta:hover,
.tg-jobs-cta:focus-visible,
.tg-jobs-cta-wrap .elementor-button:hover,
.tg-jobs-cta-wrap .elementor-button:focus-visible,
.tg-jobs-cta-wrap .elementor-button-link:hover,
.tg-jobs-cta-wrap .elementor-button-link:focus-visible{
  background: #C9A24B !important;
  background-color: #C9A24B !important;
  border-color: #C9A24B !important;
}

.tg-jobs-cta:hover,
.tg-jobs-cta:focus-visible,
.tg-jobs-cta:hover .elementor-button-text,
.tg-jobs-cta:focus-visible .elementor-button-text,
.tg-jobs-cta:hover span,
.tg-jobs-cta:focus-visible span,
.tg-jobs-cta:hover i,
.tg-jobs-cta:focus-visible i,
.tg-jobs-cta:hover svg,
.tg-jobs-cta:focus-visible svg,
.tg-jobs-cta-wrap .elementor-button:hover,
.tg-jobs-cta-wrap .elementor-button:focus-visible,
.tg-jobs-cta-wrap .elementor-button:hover .elementor-button-text,
.tg-jobs-cta-wrap .elementor-button:focus-visible .elementor-button-text,
.tg-jobs-cta-wrap .elementor-button:hover span,
.tg-jobs-cta-wrap .elementor-button:focus-visible span,
.tg-jobs-cta-wrap .elementor-button:hover i,
.tg-jobs-cta-wrap .elementor-button:focus-visible i,
.tg-jobs-cta-wrap .elementor-button:hover svg,
.tg-jobs-cta-wrap .elementor-button:focus-visible svg,
.tg-jobs-cta-wrap .elementor-button-link:hover,
.tg-jobs-cta-wrap .elementor-button-link:focus-visible{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

@media (max-width: 1024px){
  .tg-jobs-feature-row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  .tg-jobs-feature-row > .tg-jobs-feature-card:last-child:nth-child(odd){
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px){
  .tg-jobs-feature-row{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .tg-jobs-feature-card{
    border-radius: 18px !important;
  }
}

/* v4.0 – compacte vacature-samenvattingen op één regel */
.tg-vacancy-summary-one-line{
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
@media (max-width: 767px){
  .tg-vacancy-summary-one-line{
    white-space: normal !important;
  }
}


/* v5.9 – vacaturekaarten iets breder, overige Werken-bij-opmaak behouden */
@media (min-width: 1025px){
  .tg-jobs-feature-row{
    width: calc(100% + 72px) !important;
    max-width: none !important;
    margin-left: -36px !important;
    margin-right: -36px !important;
    gap: 20px !important;
  }
}


/* v6.0 – vacaturekaarten exact gelijk uitgelijnd */
@media (min-width: 1025px){
  .tg-jobs-feature-card .tg-vacancy-role-title{
    min-height: 92px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.08 !important;
  }

  .tg-jobs-feature-card .tg-vacancy-role-tagline{
    min-height: 50px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  .tg-jobs-feature-card .tg-vacancy-summary-one-line{
    min-height: 44px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.5 !important;
  }

  /* De drie kaarten krijgen identieke interne bovenruimte en CTA-lijn */
  .tg-jobs-feature-card > .elementor-element-populated,
  .tg-jobs-feature-card > .elementor-column-wrap,
  .tg-jobs-feature-card > .e-con-inner,
  .tg-jobs-feature-card > .elementor-widget-wrap{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
}


/* v6.1 – tekst in de drie vacaturekaarten exact gelijk ritmeren */
@media (min-width: 1025px){
  .tg-jobs-feature-card{
    display: flex !important;
    flex-direction: column !important;
  }

  .tg-jobs-feature-card .tg-vacancy-role-title{
    min-height: 96px !important;
    margin: 0 0 12px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.10 !important;
  }

  .tg-jobs-feature-card .tg-vacancy-role-tagline{
    min-height: 56px !important;
    margin: 0 0 14px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  .tg-jobs-feature-card .tg-vacancy-summary-one-line{
    min-height: 52px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.55 !important;
  }

  /* Ook niet-gemarkeerde samenvattingsregels op dezelfde hoogte forceren */
  .tg-jobs-feature-card p{
    text-align: center !important;
  }
}


/* v6.2 – vacatureteksten echt op gelijke hoogtes via JS-metingen */
@media (min-width: 1025px){
  .tg-jobs-feature-card .tg-vacancy-role-title,
  .tg-jobs-feature-card .tg-vacancy-role-tagline,
  .tg-jobs-feature-card .tg-vacancy-summary-one-line{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* v6.3 – teksten in vacaturekaarten exact op dezelfde horizontale lijnen */
@media (min-width: 1025px){
  .tg-jobs-feature-card .tg-vacancy-title-slot{
    min-height: 104px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .tg-jobs-feature-card .tg-vacancy-tagline-slot{
    min-height: 58px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .tg-jobs-feature-card .tg-vacancy-summary-slot{
    min-height: 54px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .tg-jobs-feature-card .tg-vacancy-title-slot > *,
  .tg-jobs-feature-card .tg-vacancy-tagline-slot > *,
  .tg-jobs-feature-card .tg-vacancy-summary-slot > *{
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .tg-jobs-feature-card .tg-vacancy-role-title,
  .tg-jobs-feature-card .tg-vacancy-role-tagline,
  .tg-jobs-feature-card .tg-vacancy-summary-one-line{
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* v6.4 – titel, gouden regel en info exact in vaste gelijke tekstvakken */
@media (min-width: 1025px){
  .tg-jobs-feature-card .tg-vacancy-role-title{
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 1.08 !important;
  }

  .tg-jobs-feature-card .tg-vacancy-role-tagline{
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 1.45 !important;
  }

  .tg-jobs-feature-card .tg-vacancy-summary-one-line{
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  /* eventuele Elementor-marges rond deze drie teksten volledig neutraliseren */
  .tg-jobs-feature-card .tg-vacancy-title-slot,
  .tg-jobs-feature-card .tg-vacancy-tagline-slot,
  .tg-jobs-feature-card .tg-vacancy-summary-slot{
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* v6.6 – FIX vacature-overzicht
   Alleen de drie rolkaarten (Monteur / Inspecteur / Projectleider).
   Belangrijk: géén display:flex op Elementor-widgetcontainers; daardoor blijven
   titel, gouden ondertitel en witte infotekst netjes onder elkaar. */
@media (min-width: 1025px){
  .tg-vacancy-overview-card-v66 .tg-vacancy-overview-title-v66{
    display: block !important;
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.08 !important;
  }

  .tg-vacancy-overview-card-v66 .tg-vacancy-overview-tagline-v66{
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  .tg-vacancy-overview-card-v66 .tg-vacancy-overview-summary-v66{
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
}


/* v6.7 – Werken bij: grote contentafbeelding subtiel afronden */
body.tg-works-page .tg-works-rounded-image-wrap,
body.tg-works-page .tg-works-rounded-image-wrap .elementor-widget-container,
body.tg-works-page .tg-works-rounded-image-wrap figure,
body.tg-works-page .tg-works-rounded-image-wrap .wp-caption{
  border-radius: 32px !important;
  overflow: hidden !important;
}

body.tg-works-page img.tg-works-rounded-image{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 32px !important;
}

@media (max-width: 767px){
  body.tg-works-page .tg-works-rounded-image-wrap,
  body.tg-works-page .tg-works-rounded-image-wrap .elementor-widget-container,
  body.tg-works-page .tg-works-rounded-image-wrap figure,
  body.tg-works-page .tg-works-rounded-image-wrap .wp-caption,
  body.tg-works-page img.tg-works-rounded-image{
    border-radius: 22px !important;
  }
}


/* v6.8 – Werken bij: alleen de brede foto voorzien van melkachtige overlay */
body.tg-works-page .tg-works-rounded-image-wrap{
  position: relative !important;
  border-radius: 32px !important;
  overflow: hidden !important;
}

body.tg-works-page .tg-works-rounded-image-wrap::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,.24) !important;
  border-radius: 32px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body.tg-works-page .tg-works-rounded-image-wrap img.tg-works-rounded-image{
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 767px){
  body.tg-works-page .tg-works-rounded-image-wrap,
  body.tg-works-page .tg-works-rounded-image-wrap::after{
    border-radius: 22px !important;
  }
}

/* v8.0.4 – vacaturekaarten op tablet en klein laptopscherm: de samenvattingsregel mag over twee regels
   lopen. Op één regel paste hij tussen 768 en 1199 px niet in de kaart en stak hij eruit. */
@media (max-width: 1199px){
  .tg-vacancy-summary-one-line,
  .tg-jobs-feature-card .tg-vacancy-summary-one-line{
    white-space: normal !important;
  }
}