/* Divi 5 na de Migrator: omgezette inhoud ziet eruit als vóór de omzetting
 * (Divi 5 met de Divi 4-inhoud). Alleen op pagina's met bodyklasse vt-d4.
 * Uitleg en herkomst per regel: mu-plugins/itmb/site/05-divi5-compat.php, punt 10. */

/* Sociale iconen: 8 px op de link, geen marge op het item, 8 px eronder. */
body.vt-d4 .et_pb_social_media_follow.et_block_module .et_pb_social_media_follow_network {
	margin-right: 0;
	margin-bottom: 8px !important;
}
body.vt-d4 .et_pb_social_media_follow.et_block_module .et_pb_social_media_follow_network a {
	margin-right: 8px;
}
body.vt-d4 .et_pb_social_media_follow.et_block_module .et_pb_social_media_follow_network:last-child a {
	margin-right: 0;
}

/* Contactformulier: zoals vóór de omzetting. Velden zweven naast elkaar met
 * 3% goot links (formulier 3% naar links), 3% eronder, knop rechts boven de
 * onderkant; halve velden worden onder 768 px heel. Veldkleuren: de
 * veldinstellingen van de module (wit 85%, #2b2b29) werden vóór de omzetting
 * niet toegepast; live staat de standaard #eee / #999 / gewicht 400. */
body.vt-d4 .et_pb_contact_form_container.et_flex_module {
	display: block;
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form.et_flex_module {
	display: block;
	margin-left: -3%;
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field {
	display: block;
	float: none;
	position: static;
	width: 100%;
	padding: 0 0 0 3%;
	margin-bottom: 3%;
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field.et_flex_column_12_24 {
	width: 50%;
	float: left;
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field.et_flex_column_24_24 {
	clear: both;
}
@media (max-width: 767px) {
	body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field.et_flex_column_12_24 {
		width: 100%;
	}
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field .input {
	width: 100%;
	background-color: #eee;
	color: #999;
	font-weight: 400;
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_pb_contact_field input.input {
	display: inline-block;
}
body.vt-d4 .et_pb_contact_form_container .et_pb_contact_form .et_contact_bottom_container {
	float: right;
	margin-left: 0;
	margin-top: -1.5%;
}

/* Blurb op telefoon: de standaardpreset ("Blurb Voorinstelling 1") zet titel,
 * tekst en icoon onder 768 px links. Vóór de omzetting won de eigen
 * uitlijning van de module (gecentreerd) op elke breedte. */
@media only screen and (max-width: 767px) {
	body.vt-d4 .et_pb_blurb.et_pb_text_align_center .et_pb_module_header,
	body.vt-d4 .et_pb_blurb.et_pb_text_align_center .et_pb_blurb_description,
	body.vt-d4 .et_pb_blurb.et_pb_text_align_center > .et_pb_blurb_content > .et_pb_main_blurb_image {
		text-align: center;
	}
	/* Icoongrootte: de presetwaarde voor telefoon (50 px) won vóór de omzetting
	 * van de eigen desktopwaarde van de module; in Divi 5 andersom. */
	body.vt-d4 .et_pb_blurb.preset--module--divi-blurb--default > .et_pb_blurb_content > .et_pb_main_blurb_image .et-pb-icon {
		font-size: 50px;
	}
}

/* Rij zonder goot (gutters1): ook gestapeld op telefoon/tablet geen 30 px
 * onder de kolom (Divi 4 zette alle kolommarges op 0). */
body.vt-d4 .et_pb_row.et_pb_gutters1 > .et_pb_column {
	margin-bottom: 0 !important;
}

/* Blograster (markup teruggezet naar Divi 4, zie punt 11): zelfde twee
 * correcties als divi5-compat.css voor Divi 4-inhoud. Laatste kaart per kolom
 * 30 px ondermarge; afbeeldingslink 30 px ondermarge (1 px per kaart). */
@media (min-width: 981px) {
	/* De gootklasse staat in Divi 5 op body (niet op de rij); specificiteit
	 * boven de 18,539%-regel van Divi. */
	body.vt-d4 .et_pb_column .et_pb_module .et_pb_blog_grid .column.size-1of3 .et_pb_post:last-child,
	body.vt-d4 .et_pb_column .et_pb_module .et_pb_blog_grid .column.size-1of2 .et_pb_post:last-child {
		margin-bottom: 30px;
	}
}
body.vt-d4 .et_pb_blog_grid_wrapper .et_pb_post .entry-featured-image-url {
	margin-bottom: 30px;
}

/* Nieuwsbrief: velden onder elkaar als blokken met 1em ruimte eronder
 * (Divi 4), niet als flexkolom met 15 px tussenruimte (Divi 5). */
body.vt-d4 .et_pb_newsletter_form .et_pb_newsletter_fields.et_flex_module {
	display: block;
}
body.vt-d4 .et_pb_newsletter_form p.et_pb_newsletter_field {
	padding-bottom: 1em;
}

/* Beelden onder 981 px: Divi 4 schreef voor elke beeldmodule zonder "volle
 * breedte forceren" img { width: auto } voor tablet en telefoon (Image.php,
 * max_height leeg ≠ 'none'). Dat geeft een andere afronding (311,97 i.p.v.
 * 312 px) en daarmee 1 px verschuiving eronder. Specificiteit gelijk aan die
 * van Divi 4 (0,2,1). Geen enkele module op virteam forceert volle breedte. */
@media only screen and (max-width: 980px) {
	:where(body.vt-d4) .et_pb_image .et_pb_image_wrap img {
		width: auto;
	}
}