/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* Realisaties overzicht: foto's in kleur. Bij hover schuift een zwart titelbalkje
   (naam + plaats) in en verschijnt (indien ingesteld) een tweede foto. */
.elementor-element-5dab481 > .e-con-inner,
.elementor-element-ebed9a2 > .e-con-inner,
.elementor-element-8f6f267 > .e-con-inner{ position:relative; overflow:hidden; }
.duet-real-label{ position:absolute; top:24px; left:0; z-index:2; max-width:100%; box-sizing:border-box; background:#000; padding:8px 16px; text-transform:uppercase; letter-spacing:.5px; line-height:1.25; opacity:0; transform:translateX(28px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; }
.duet-real-label .elementor-shortcode{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
/* Op de home- en gerelateerde-grid (listing 1890) staat het label onderaan, zodat het niet met de sectiekop botst. */
.elementor-element-ebed9a2 .duet-real-label,
.elementor-element-8f6f267 .duet-real-label{ top:auto; bottom:24px; }
.duet-real-label .titel{ overflow-wrap:anywhere; }
.elementor-element-5dab481:hover .duet-real-label,
.elementor-element-5dab481:focus-within .duet-real-label,
.elementor-element-ebed9a2:hover .duet-real-label,
.elementor-element-ebed9a2:focus-within .duet-real-label,
.elementor-element-8f6f267:hover .duet-real-label,
.elementor-element-8f6f267:focus-within .duet-real-label{ opacity:1; transform:translateX(0); }
.duet-real-label .titel{ color:#fff; font-size:18px; font-weight:500; }
.duet-real-label .plaats{ color:rgba(255,255,255,.8); font-size:11px; font-weight:400; }
/* Touch-toestellen (tablet en telefoon) kennen geen hover: toon daar meteen het labeltje. */
@media (max-width:767px), (hover:none){
	.duet-real-label{ opacity:1; transform:none; }
}

/* Dienst na verkoop: hero-foto volledig in beeld op tablet en mobiel (geen witrand, niets afgesneden). */
@media (max-width:1024px){
	.elementor-element-80e9bbf img{ height:auto !important; }
}

/* ==========================================================================
   Home-slider uit de JetEngine-repeater [duet_home_slider]
   Bootst de look van de bestaande Elementor-carousel na en is volledig responsief.
   ========================================================================== */
.duet-home-slider{ position:relative; width:100%; }
.duet-home-slider .swiper{ width:100%; overflow:hidden; }
.duet-home-slider .swiper-slide{ height:auto; }
/* Vóór Swiper initialiseert al de eerste 2 foto's naast elkaar tonen (geen flits van 1 grote foto). */
.duet-home-slider .swiper:not(.swiper-initialized){ overflow:hidden; }
.duet-home-slider .swiper:not(.swiper-initialized) .swiper-wrapper{ display:flex; flex-wrap:nowrap; }
.duet-home-slider .swiper:not(.swiper-initialized) .swiper-slide{ flex:0 0 calc(50% - 10px); margin-right:20px; }
.duet-home-slider .swiper-slide img.duet-slide-img{
	display:block;
	width:100%;
	height:75vh;
	object-fit:cover;
	object-position:center center;
	margin:0;
}
@media (max-width:1024px){
	.duet-home-slider .swiper-slide img.duet-slide-img{ height:50vh; }
}
@media (max-width:767px){
	.duet-home-slider .swiper-slide img.duet-slide-img{ height:40vh; }
}

/* Vierkante paginatiestippen, rechtsboven (zoals de bestaande carousel). */
.duet-home-slider .swiper-pagination{
	position:static;
	margin-top:18px;
	width:100%;
	text-align:right;
	padding-right:4px;
}
.duet-home-slider .swiper-pagination-bullet{
	display:inline-block;
	width:28px;
	height:10px;
	border-radius:0;
	background:#d5d5d5;
	opacity:1;
	margin:0 5px !important;
}
.duet-home-slider .swiper-pagination-bullet-active{
	background:#000000;
}

/* Geen pijlen: navigatie enkel via de vierkante stippen. */

/* Teamkaarten: volledige bio standaard verborgen, uitklapbaar via "Lees meer".
   De korte intro (.duet-team-intro) blijft altijd zichtbaar. */
/* Eerste alinea van de bio blijft altijd zichtbaar; de rest klapt open via "Lees meer". */
.duet-team-bio p:not(:first-of-type){ display:none; }
.duet-team-card-open .duet-team-bio p:not(:first-of-type){ display:block; }
/* Geen "Lees meer" als er maar één alinea is (bv. de vacaturekaart). */
.elementor-element-teamcard1:not(:has(.duet-team-bio p + p)) .duet-team-toggle{ display:none; }
/* "Lees meer" als subtiele tekstlink i.p.v. een opvallende kaderknop, met wat ruimte erboven. */
.duet-team-toggle{ margin-top:16px; }
.duet-team-toggle .elementor-button,
.duet-team-toggle .elementor-button:visited{
	background-color:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	padding:0 !important;
	color:#000 !important;
	font-size:14px;
	font-weight:500;
	letter-spacing:.2px;
	text-transform:none !important;
	text-decoration:underline;
	text-underline-offset:3px;
}
.duet-team-toggle .elementor-button:hover{ opacity:.6; }

/* ==========================================================================
   Juridische pagina's (algemene voorwaarden, privacybeleid, cookiebeleid)
   Rendert via de post-content widget "jur10003" in het juridische sjabloon.
   Enkel de koppen-hiërarchie en de witruimte, om de lange tekst leesbaar
   en overzichtelijk te maken. Elementor kan koppen binnen post-content niet
   afzonderlijk stylen, vandaar hier in CSS.
   ========================================================================== */
.elementor-element-jur10003 .elementor-widget-container{ --jur-rule:#000; }

/* Hoofdstukken: duidelijk afgezet met ruimte erboven en een lijn. */
.elementor-element-jur10003 h2{
	margin:3.2em 0 .6em;
	padding-top:1.6em;
	border-top:2px solid var(--jur-rule);
	font-size:29px;
	font-weight:500;
	line-height:1.25;
	letter-spacing:-.01em;
}
/* Het eerste hoofdstuk niet naar beneden duwen en geen lijntje bovenaan. */
.elementor-element-jur10003 h2:first-child{
	margin-top:0;
	padding-top:0;
	border-top:0;
}

/* Onderdelen binnen een hoofdstuk. */
.elementor-element-jur10003 h3{
	margin:2em 0 .35em;
	font-size:20px;
	font-weight:500;
	line-height:1.3;
}

/* Derde niveau (bv. Betalingstermijn, Schadevergoeding): rustig sublabel. */
.elementor-element-jur10003 h4{
	margin:1.5em 0 .3em;
	font-size:14px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
}

/* Adem tussen de alinea's en lijsten. */
.elementor-element-jur10003 p{ margin:0 0 1.1em; }
.elementor-element-jur10003 ul{ margin:0 0 1.1em; padding-left:1.2em; }
.elementor-element-jur10003 li{ margin-bottom:.55em; }
.elementor-element-jur10003 li:last-child{ margin-bottom:0; }

@media (max-width:767px){
	.elementor-element-jur10003 h2{ font-size:24px; margin-top:2.6em; padding-top:1.3em; }
	.elementor-element-jur10003 h3{ font-size:18px; }
}

/* Realisatie-overzicht: vast, altijd zichtbaar slogan-blokje rechtsonder tegen de
   rand van de foto, in dezelfde stijl als het hover-labeltje (.duet-real-label). */
.duet-real-slogan{
	position:absolute; right:0; bottom:44px; z-index:2;
	max-width:85%; box-sizing:border-box;
	background:#000; padding:8px 16px;
	text-transform:uppercase; letter-spacing:.5px; line-height:1.25;
	pointer-events:none;
}
.duet-real-slogan .titel{ color:#fff; font-size:18px; font-weight:500; display:block; }
@media (max-width:767px){
	.duet-real-slogan{ bottom:30px; }
	.duet-real-slogan .titel{ font-size:15px; }
}

/* Realisatie-overzicht: optionele hover-foto. Staat er een 'hover_foto' ingesteld,
   dan vervaagt die bij hover in kleur over de (grijze) hoofdfoto. */
/* De absolute positie op de widget-wrapper (Elementor-widgets zijn position:relative),
   niet op de img zelf, anders vult de img zijn eigen 0px-hoge wrapper. */
.duet-real-hover{
	position:absolute; inset:0; z-index:1;
	opacity:0; transition:opacity .5s ease;
	pointer-events:none;
}
.duet-real-hover-img{
	position:absolute; inset:0; display:block; width:100%; height:100%;
	object-fit:cover; filter:none !important;
}
.elementor-element-5dab481:hover .duet-real-hover,
.elementor-element-5dab481:focus-within .duet-real-hover{ opacity:1; }
/* De lege shortcode-wrapper mag geen ruimte innemen. */
.duet-real-card > .elementor-widget-shortcode:empty{ display:none; }

/* Header: exact één menu per schermgrootte tonen (voorkomt dubbele hamburger op
   tabletbreedte). 6765a7f = horizontaal (desktop), 6f3a91e = hamburger (mobiel/tablet). */
@media (max-width:1024px){
	.elementor-element-6765a7f{ display:none !important; }
}
@media (min-width:1025px){
	.elementor-element-6f3a91e{ display:none !important; }
}

/* Realisatie-overzicht: foto's vierkant op mobiel (i.p.v. vaste 600px hoogte). */
@media (max-width:767px){
	.elementor-element-69c0f0a img{
		width:100% !important;
		height:auto !important;
		aspect-ratio:1 / 1;
		object-fit:cover;
	}
}

/* Hover-foto ook op de home-portfolio en de "Bekijk meer realisaties"-grid. */
.elementor-element-ebed9a2:hover .duet-real-hover,
.elementor-element-ebed9a2:focus-within .duet-real-hover,
.elementor-element-8f6f267:hover .duet-real-hover,
.elementor-element-8f6f267:focus-within .duet-real-hover{ opacity:1; }

/* Realisatie-single: wat meer ruimte boven de projecttekst (onder de galerij). */
.elementor-element-bescdyn1{ margin-top:40px; }

/* De witte 'schijn'-overlay bovenaan beelden (.hero-overlay::before uit de kit) overal weg. */
.hero-overlay::before{ background:none !important; content:none !important; }

/* Hover-overlay strikt binnen elke realisatiekaart houden (ook bij full-width
   containers zonder .e-con-inner): anders wordt de overlay te hoog en loopt hij
   over de titel. */
.elementor-element-5dab481,
.elementor-element-ebed9a2,
.elementor-element-8f6f267{ position:relative; overflow:hidden; }

/* Geen hover-zoom op de realisatiekaarten (die hebben al de foto-wissel, mogen niet
   van formaat veranderen). De zoom op andere beelden blijft behouden. */
.elementor-element-5dab481:hover img,
.elementor-element-ebed9a2:hover img,
.elementor-element-8f6f267:hover img{ transform:none !important; }

/* Home "Van advies en ontwerp..."-sectie: meer ruimte onder de titel, zodat de
   foto en tekst lager beginnen (hoofd niet tegen de titel). */
.elementor-element-785cb1e{ margin-bottom:40px; }

/* "Bekijk meer realisaties" (related grid, enkel op de realisatie-single):
   zwart-wit, bij hover dezelfde foto in kleur (geen tweede foto). */
.single-realisatie .elementor-element-ebed9a2 .duet-real-hover,
.single-realisatie .elementor-element-8f6f267 .duet-real-hover{ display:none !important; }
.single-realisatie .elementor-element-ebed9a2 img,
.single-realisatie .elementor-element-8f6f267 img{ filter:grayscale(100%); transition:filter .5s ease; }
.single-realisatie .elementor-element-ebed9a2:hover img,
.single-realisatie .elementor-element-8f6f267:hover img{ filter:grayscale(0) !important; }

/* De tweede foto (hover) moet exact op de basisfoto vallen. Kolom 2 en 4 (listing
   1896, kaart 8f6f267) hebben een padding-top voor de versprongen look; de overlay
   staat absoluut op de padding-box en zou die ruimte er bovenop meepakken. We
   schuiven de overlay met diezelfde --padding-top mee (0px op mobiel), zodat hij
   samenvalt met de foto en niet buiten het kader komt. */
.home .elementor-element-ebed9a2 .duet-real-hover,
.home .elementor-element-8f6f267 .duet-real-hover{ top: var(--padding-top, 0px); }

/* Teampagina: de groepsfoto op mobiel in zijn eigen verhouding, niet bijgesneden.
   Elementor kan de afbeeldingshoogte niet per schermgrootte op "auto" zetten. */
@media (max-width:767px){
	.elementor-element-e919c8d img{ height:auto !important; }
}

/* Home "Projecten die spreken": op mobiel een swipe-slider (JetEngine Scroll Slider
   staat aan voor mobiel). Aanvulling die JetEngine niet kan: de volgende kaart piept
   ernaast, kaarten vallen op hun plaats bij het swipen, geen scrollbalk. */
@media (max-width:767px){
	.elementor-element-08b8fe8 .jet-listing-grid__scroll-slider{ scroll-snap-type:x mandatory; scrollbar-width:none; }
	.elementor-element-08b8fe8 .jet-listing-grid__scroll-slider::-webkit-scrollbar{ display:none; }
	.elementor-element-08b8fe8 .jet-listing-grid__scroll-slider-wrap-mobile > .jet-listing-grid__item{ flex:0 0 82%; max-width:82%; scroll-snap-align:start; }
}

/* Projectgalerij op mobiel (sjabloon 1395, galerij 727437d): gewone stapeling
   in plaats van de masonry-berekening. Op mobiel is er toch maar één kolom, en de
   hoogte die het galerijscript uitrekent, viel op iPhone (Safari) te groot uit,
   met een lege strook onder de laatste foto als gevolg. Elementor heeft hier geen
   instelling voor. */
@media (max-width:767px){
  .elementor-element-727437d .e-gallery-masonry{ padding-bottom:0 !important; margin-bottom:0 !important; height:auto !important; display:flex; flex-direction:column; flex-wrap:nowrap; gap:var(--vgap, 30px); }
  .elementor-element-727437d .e-gallery-masonry .e-gallery-item{ position:static !important; width:100% !important; margin:0 !important; }
}

/* Tekstblokken: geen alinea-marge na de laatste alinea. Anders telde elk tekstblok
   14px extra op bij de tussenruimte eronder, waardoor afstanden na tekst groter
   waren dan na een foto of knop. De oude correcties van -10px op losse
   tekstblokken zijn tegelijk weggehaald. */
.elementor-widget-text-editor .elementor-widget-container > :last-child{ margin-bottom:0; }