/* ==========================================================================
   AdM Diensten Manager
   Speelse dienstenopstelling
   ========================================================================== */

.adm-managed-services {
	--adm-service-gap: clamp(20px, 2.5vw, 30px);

	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));

	gap: var(--adm-service-gap);

	margin-top: clamp(46px, 5vw, 70px);
}

.adm-managed-service {
	position: relative;

	display: flex;
	flex-direction: column;

	grid-column: span 4;

	min-width: 0;
	min-height: 290px;

	padding: clamp(24px, 2.4vw, 32px);

	overflow: hidden;

	border:
		1px solid
		rgba(184, 117, 122, 0.2);

	background:
		rgba(255, 255, 255, 0.84);

	color: var(--adm-text, #3D3336);

	text-decoration: none;

	box-shadow:
		0 12px 32px
		rgba(61, 43, 47, 0.07);

	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background 180ms ease;
}

.adm-managed-service::before {
	position: absolute;

	top: -45px;
	right: -45px;

	width: 130px;
	height: 130px;

	border-radius: 50%;

	background:
		rgba(184, 117, 122, 0.08);

	content: "";

	pointer-events: none;
}

.adm-managed-service:hover,
.adm-managed-service:focus-visible {
	transform: translateY(-7px) rotate(-0.25deg);

	background: #FFFFFF;

	box-shadow:
		0 22px 48px
		rgba(61, 43, 47, 0.13);
}

/* Afwisselende, zachte vormen */

.adm-managed-service:nth-child(4n + 1) {
	border-radius: 34px 34px 90px 34px;
}

.adm-managed-service:nth-child(4n + 2) {
	border-radius: 90px 34px 34px 34px;
}

.adm-managed-service:nth-child(4n + 3) {
	border-radius: 34px 90px 34px 90px;
}

.adm-managed-service:nth-child(4n) {
	border-radius: 58px;
}


/* ==========================================================================
   Piramide / speelse plaatsing
   ========================================================================== */

/* 1 dienst */
.adm-managed-services--count-1 .adm-managed-service {
	grid-column: 5 / span 4;
}

/* 2 diensten */
.adm-managed-services--count-2 .adm-managed-service:nth-child(1) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-2 .adm-managed-service:nth-child(2) {
	grid-column: 7 / span 4;
}

/* 3 diensten: 1 boven, 2 onder */
.adm-managed-services--count-3 .adm-managed-service:nth-child(1) {
	grid-column: 5 / span 4;
}

.adm-managed-services--count-3 .adm-managed-service:nth-child(2) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-3 .adm-managed-service:nth-child(3) {
	grid-column: 7 / span 4;
}

/* 4 diensten: 2 x 2 */
.adm-managed-services--count-4 .adm-managed-service:nth-child(odd) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-4 .adm-managed-service:nth-child(even) {
	grid-column: 7 / span 4;
}

/* 5 diensten: 2 boven, 3 onder */
.adm-managed-services--count-5 .adm-managed-service:nth-child(1) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-5 .adm-managed-service:nth-child(2) {
	grid-column: 7 / span 4;
}

/* 6 diensten: drie per rij */
.adm-managed-services--count-6 .adm-managed-service {
	grid-column: span 4;
}

/* 7 diensten: 2 - 3 - 2 */
.adm-managed-services--count-7 .adm-managed-service:nth-child(1) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-7 .adm-managed-service:nth-child(2) {
	grid-column: 7 / span 4;
}

.adm-managed-services--count-7 .adm-managed-service:nth-child(3),
.adm-managed-services--count-7 .adm-managed-service:nth-child(4),
.adm-managed-services--count-7 .adm-managed-service:nth-child(5) {
	grid-column: span 4;
}

.adm-managed-services--count-7 .adm-managed-service:nth-child(6) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-7 .adm-managed-service:nth-child(7) {
	grid-column: 7 / span 4;
}

/* 8 diensten: 3 - 2 - 3 */
.adm-managed-services--count-8 .adm-managed-service:nth-child(4) {
	grid-column: 3 / span 4;
}

.adm-managed-services--count-8 .adm-managed-service:nth-child(5) {
	grid-column: 7 / span 4;
}


/* ==========================================================================
   Kleine variatie in hoogte / ritme
   ========================================================================== */

.adm-managed-service:nth-child(3n + 2) {
	transform: translateY(16px);
}

.adm-managed-service:nth-child(3n + 2):hover,
.adm-managed-service:nth-child(3n + 2):focus-visible {
	transform: translateY(9px) rotate(0.25deg);
}


/* ==========================================================================
   Kaartinhoud
   ========================================================================== */

.adm-managed-service__icon-wrap {
	display: grid;

	place-items: center;

	width: 56px;
	height: 56px;

	margin-bottom: 24px;

	border-radius: 50%;

	background:
		rgba(184, 117, 122, 0.14);

	color:
		var(--adm-pink-dark, #B8757A);
}

.adm-managed-service:nth-child(even)
.adm-managed-service__icon-wrap {
	border-radius: 18px 18px 34px 18px;
}

.adm-managed-service__icon {
	width: 27px;
	height: 27px;
}

.adm-managed-service__title {
	margin: 0 0 14px;

	color:
		var(--adm-heading, #2F2528) !important;

	font-family:
		var(--adm-serif, Georgia, serif);

	font-size:
		clamp(
			1.28rem,
			1.9vw,
			1.72rem
		);

	line-height: 1.12;
}

.adm-managed-service__description {
	margin: 0 0 24px;

	color:
		var(--adm-muted, #6D6064) !important;

	font-size: 0.94rem;
	line-height: 1.65;
}

.adm-managed-service__cta {
	margin-top: auto;

	color:
		var(--adm-pink-dark, #B8757A);

	font-size: 0.9rem;
	font-weight: 800;
}


/* ==========================================================================
   Donkere sectie
   ========================================================================== */

.adm-section--dark .adm-managed-service {
	background:
		rgba(255, 255, 255, 0.84);

	color:
		var(--adm-text, #3D3336);
}

.adm-section--dark .adm-managed-service__title {
	color:
		var(--adm-heading, #2F2528) !important;
}

.adm-section--dark .adm-managed-service__description {
	color:
		var(--adm-muted, #6D6064) !important;
}


/* ==========================================================================
   Overzichtspagina
   ========================================================================== */

.adm-managed-services--overview {
	margin-top: 0;
}

.adm-managed-services--overview .adm-managed-service {
	min-height: 300px;
}


/* ==========================================================================
   Lege status
   ========================================================================== */

.adm-services-empty {
	padding: 20px 24px;

	border-radius: 18px;

	background: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1000px) {

	.adm-managed-services {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.adm-managed-service,
	.adm-managed-services[class*="adm-managed-services--count-"]
	.adm-managed-service {
		grid-column: auto !important;

		min-height: 270px;
	}

	.adm-managed-service:nth-child(3n + 2) {
		transform: none;
	}

	.adm-managed-service:nth-child(3n + 2):hover,
	.adm-managed-service:nth-child(3n + 2):focus-visible {
		transform: translateY(-7px);
	}

}


/* ==========================================================================
   Mobiel
   ========================================================================== */

@media (max-width: 680px) {

	.adm-managed-services {
		grid-template-columns: 1fr;

		margin-top: 36px;
	}

	.adm-managed-service,
	.adm-managed-services[class*="adm-managed-services--count-"]
	.adm-managed-service {
		grid-column: auto !important;

		min-height: 0;

		border-radius: 30px !important;
	}

}