/**
 * Opmaak van de partnersectie.
 */

/* Elementor wikkelt shortcode-uitvoer in `.elementor-shortcode`, dat als direct
   kind van een flexbox met align-items:center staat. Die wrapper krimpt naar zijn
   inhoud, waardoor de sectie zou versmallen en herzentreren. Zelfde ingreep als in
   mobicar-expo. */
.elementor-shortcode:has(> .mobicar-partners) {
	width: 100%;
}

.mobicar-partners {
	--mcp-base: 52px;
	--mcp-cols: 5;
	--mcp-divider: var(--e-global-color-mobicar-divider, #e8ecf1);
	width: 100%;
	align-self: stretch;
	box-sizing: border-box;
	margin: 0;
	padding: 44px 0 40px;
	background-color: var(--e-global-color-mobicar-white, #ffffff);
	font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
	text-align: left;
}

.mobicar-partners-eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--e-global-color-mobicar-primary, var(--e-global-color-primary, #0092b7));
}

.mobicar-partners-title {
	margin: 0 0 6px;
	font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif;
	font-size: 34px;
	line-height: 1.1;
	color: var(--e-global-color-mobicar-ink, #36404c);
}

.mobicar-partners-rule {
	display: block;
	width: 56px;
	height: 4px;
	margin: 0 0 26px;
	border-radius: 999px;
	background-color: var(--e-global-color-mobicar-orange, var(--e-global-color-accent, #fcb315));
}

.mobicar-partners-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobicar-partners-item {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 calc(100% / var(--mcp-cols));
	min-width: 0;
	padding: 14px 18px;
	border-left: 1px solid var(--mcp-divider);
}

/* Eerste cel van elke rij krijgt geen linkerlijn. De aantallen volgen de
   kolomindeling hieronder: 5 op desktop, 3 op tablet, 2 op mobiel. Deze
   nth-child-regels zijn de reden dat het kolomaantal hier vastligt en niet via
   de shortcode instelbaar is: CSS kan een nth-child-stap niet uit een
   variabele halen, dus een ander aantal zou de lijnen op de verkeerde plek
   zetten. Wijzig je het aantal, wijzig dan deze drie regels mee.

   Desktop-only: zonder deze media query wint deze regel (specificiteit 0,0,2,0)
   het van de plaats-herstellende `.mobicar-partners-item { border-left: ... }`
   in de tablet- en mobielblokken hieronder (specificiteit 0,0,1,0), waardoor
   bij zes of meer partners item 6 zijn linkerlijn kwijtraakt op die breedtes. */
@media (min-width: 1025px) {
	.mobicar-partners-item:nth-child(5n + 1) {
		border-left: none;
	}

	/* Zesde partner en verder starten een tweede rij op desktop; die krijgt een
	   bovenlijn, net als de tablet- en mobielvarianten hieronder al doen. */
	.mobicar-partners-item:nth-child(n + 6) {
		border-top: 1px solid var(--mcp-divider);
	}
}

.mobicar-partners-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

a.mobicar-partners-link:hover,
a.mobicar-partners-link:focus-visible {
	transform: translateY(-3px);
}

a.mobicar-partners-link:focus-visible {
	outline: 2px solid var(--e-global-color-mobicar-orange, var(--e-global-color-accent, #fcb315));
	outline-offset: 4px;
	border-radius: 4px;
}

.mobicar-partners-logo {
	display: block;
	width: auto;
	max-width: 100%;
	/* --mcp-scale komt per logo uit de admin; 0.87 betekent 87% van de basishoogte. */
	max-height: calc(var(--mcp-base) * var(--mcp-scale, 1));
	object-fit: contain;
}

/* Tablet: 3 op een rij, de rest gecentreerd eronder. */
@media (max-width: 1024px) {
	.mobicar-partners {
		--mcp-base: 46px;
		--mcp-cols: 3;
	}
	.mobicar-partners-item:nth-child(3n + 1) {
		border-left: none;
	}
	.mobicar-partners-item:nth-child(n + 4) {
		border-top: 1px solid var(--mcp-divider);
	}
}

/* Mobiel: 2 op een rij; een overblijvende laatste neemt de volle breedte. */
@media (max-width: 767px) {
	.mobicar-partners {
		--mcp-base: 42px;
		--mcp-cols: 2;
		padding: 32px 0 28px;
	}
	.mobicar-partners-title {
		font-size: 26px;
	}
	.mobicar-partners-item:nth-child(2n + 1) {
		border-left: none;
	}
	.mobicar-partners-item:nth-child(n + 3) {
		border-top: 1px solid var(--mcp-divider);
	}
	.mobicar-partners-item:last-child:nth-child(odd) {
		flex-basis: 100%;
		border-left: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobicar-partners-link,
	a.mobicar-partners-link:hover,
	a.mobicar-partners-link:focus-visible {
		transition: none;
		transform: none;
	}
}