/*
 * Responsive overschrijvingen voor de Divi-kopie.
 * Wordt in elke pagina NA de bestaande stylesheets geladen.
 * De gegenereerde Divi-CSS (wp-content/et-cache, wp-content/themes) blijft ongewijzigd.
 *
 * Let op: Divi-klassen als .et_pb_text_3 zijn per pagina genummerd.
 * Regels voor één pagina zijn daarom beperkt met de body-klasse
 * (body.home = homepage, body.page-id-60 = beleggingsstrategie,
 * body.page-id-64 = het beleggingsteam).
 */

/* ------------------------------------------------------------------
 * 1. Menu: "Klantenportaal" mag niet naar een tweede regel vallen
 *    tussen de desktop-breakpoint (981px) en 1280px.
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 981px) and (max-width: 1279px) {
	body #page-container #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row {
		max-width: 92% !important;
	}
	.et_pb_menu_0_tb_header .et-menu {
		flex-wrap: nowrap;
		margin-left: -7px;
		margin-right: -7px;
	}
	.et_pb_menu_0_tb_header .et-menu > li {
		padding-left: 7px;
		padding-right: 7px;
	}
	.et_pb_menu_0_tb_header .et-menu > li > a {
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
 * Knoppen onder de openingstekst (homepage en beleggingsstrategie):
 * op telefoons is de rij 100% breed plus 30px marge links, wat
 * horizontaal scrollen gaf.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
	body.home #page-container .et_pb_section_0 .et_pb_row_1.et_pb_row,
	body.page-id-60 #page-container .et_pb_section_0 .et_pb_row_1.et_pb_row {
		width: auto !important;
	}
}

/* ------------------------------------------------------------------
 * 2. Homepage, "Een passende oplossing voor elk doel":
 *    kaarten even hoog en tekst nooit afgekapt.
 * ------------------------------------------------------------------ */
body.home .et_pb_row_6 > .et_pb_column {
	display: flex;
	flex-direction: column;
}
body.home .et_pb_row_6 > .et_pb_column > .et_pb_blurb {
	flex: 1 1 auto;
	height: auto;
	padding-bottom: 24px;
}

/* ------------------------------------------------------------------
 * 3. "Het Beleggingsteam" (desktopversie, homepage sectie 5).
 *    Divi plaatst de tekst over de foto met een vaste negatieve marge,
 *    die alleen op brede schermen klopt. Hier met grid: tekst ligt over
 *    de foto en de foto groeit mee met de tekst.
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 981px) {
	body.home .et_pb_section_5 .et_pb_column_12 {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}
	body.home .et_pb_column_12 > .et_pb_image_0,
	body.home .et_pb_column_12 > .et_pb_text_3 {
		grid-area: 1 / 1;
	}
	body.home .et_pb_column_12 > .et_pb_image_0 {
		margin: 0 !important;
		height: 100%;
	}
	body.home .et_pb_image_0 .et_pb_image_wrap {
		display: block;
		width: 100%;
		height: 100%;
	}
	body.home .et_pb_image_0 .et_pb_image_wrap img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	body.home .et_pb_section_5 .et_pb_text_3 {
		position: relative;
		z-index: 1;
		align-self: end;
		margin: 0 !important;
		padding: 120px 70px 40px;
		/* Donker verloop onder de tekst zodat die op elke breedte leesbaar blijft. */
		background: linear-gradient(to bottom, rgba(0, 26, 58, 0) 0, rgba(0, 26, 58, 0.55) 40%, rgba(0, 26, 58, 0.8) 100%);
	}
}

/* ------------------------------------------------------------------
 * 4. Kaart met Leo en Geert (desktopversie), op de homepage en op de
 *    pagina "Het beleggingsteam". Ook hier stonden namen, foto's en
 *    knoppen met vaste negatieve marges. Opnieuw opgebouwd met grid.
 *
 *    Volgorde van de elementen in de kolom (op beide pagina's gelijk):
 *    1 naam Leo, 2 "Over Leo", 3 Email, 4 foto Leo,
 *    5 naam Geert, 6 "Over Geert", 7 Email, 8 foto Geert.
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 981px) {
	:is(body.home .et_pb_section_5 .et_pb_row_7,
	    body.page-id-64 .et_pb_section_2 .et_pb_row_2) {
		display: flex;
		align-items: center;
	}
	/* Ruimte langs de vensterrand, zodat foto en kaart de rand niet raken. */
	:is(body.home #page-container .et_pb_section_5 .et_pb_row_7,
	    body.page-id-64 #page-container .et_pb_section_2 .et_pb_row_2).et_pb_row {
		max-width: min(1390px, calc(100% - 48px)) !important;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		align-self: center;
		padding-top: 0 !important;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > .et_pb_module {
		display: flex;
		align-items: center;
		align-self: stretch;
		width: auto;
		max-width: none;
		margin: 0 !important;
		background-color: #fff;
	}

	/* Foto */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(4), :nth-child(8)) {
		grid-column: 1;
		padding: 12px 14px 12px 17px;
		border-radius: 5px 0 0 5px;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) .et_pb_image_wrap {
		width: clamp(48px, 4.5vw, 64px);
	}
	/* Naam en functie */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(1), :nth-child(5)) {
		grid-column: 2;
		border-width: 0;
		border-radius: 0;
		padding: 12px 8px 12px 0;
		text-align: left;
	}
	/* Naam en functie springen via een inline style 80px in voor de oude,
	   overlappende foto; daarom is !important hier nodig. */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(1), :nth-child(5)) :is(h2, p) {
		padding-left: 0 !important;
	}
	/* "Over ..." */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(2), :nth-child(6)) {
		grid-column: 3;
		padding: 0 6px;
	}
	/* Email */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(3), :nth-child(7)) {
		grid-column: 4;
		padding: 0 17px 0 6px;
		border-radius: 0 5px 5px 0;
	}
	/* Rij per persoon, met ruimte tussen de twee kaarten */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :nth-child(-n+4) {
		grid-row: 1;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :nth-child(n+5) {
		grid-row: 2;
		margin-top: 17px !important;
	}
}

/* Smallere desktops: knoppen onder de naam, zodat niets buiten de kaart valt. */
@media only screen and (min-width: 981px) and (max-width: 1279px) {
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) {
		grid-template-columns: auto auto minmax(0, 1fr);
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(1), :nth-child(5)) {
		grid-column: 2 / 4;
		padding: 12px 17px 6px 0;
		border-radius: 0 5px 0 0;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(2), :nth-child(6)) {
		grid-column: 2;
		padding: 0 6px 12px 0;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(3), :nth-child(7)) {
		grid-column: 3;
		padding: 0 17px 12px 6px;
		border-radius: 0 0 5px 0;
	}
	/* Leo: rij 1-2, Geert: rij 3-4 */
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :nth-child(4) {
		grid-row: 1 / span 2;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :nth-child(1) {
		grid-row: 1;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(2), :nth-child(3)) {
		grid-row: 2;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :nth-child(8) {
		grid-row: 3 / span 2;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :nth-child(5) {
		grid-row: 3;
	}
	:is(body.home .et_pb_section_5 .et_pb_column_13,
	    body.page-id-64 .et_pb_section_2 .et_pb_column_3) > :is(:nth-child(6), :nth-child(7)) {
		grid-row: 4;
		margin-top: 0 !important;
	}
}