/*Styling for hero banner*/
/*************************/
section:nth-of-type(1) {
	background-color: var(--color-warm);
	position: relative;
}

section:nth-of-type(1)::before {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 42%;
	background: url("../images/cupped-hands.jpeg") center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
	mask-image: linear-gradient(to right, transparent 0%, #000 35%);
	pointer-events: none;
}

section:nth-of-type(1) > .container {
	position: relative;
	z-index: 1;
}

section:nth-of-type(1) div:first-child {
	flex: 0 0 60%;
	max-width: 60%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-32);
}

section:nth-of-type(1) div:first-child p {
	color: var(--color-secondary);
}

section:nth-of-type(1) img {
	display: none;
	width: var(--image-portrait-width); 
	height: var(--image-portrait-height); 
	border-radius: var(--radius-8); 

	object-fit: cover;
    object-position: 50% 0%;
    
	box-shadow: 8px 8px 8px rgba(0, 0, 0, .25); 
}





/*Styling for the about section*/
/*******************************/

/*About portrait image*/
section:nth-of-type(2) img:nth-child(1) { 
	width: var(--image-portrait-width); 
	height: var(--image-portrait-height); 
	border-radius: var(--radius-8); 

	object-fit: cover;
    object-position: 0% 0%;
    
	box-shadow: 8px 8px 8px rgba(0, 0, 0, .25); 
}


/*About section content*/
section:nth-of-type(2) div:nth-child(2) { 
	flex: 1; 
	display: grid; 
	gap: var(--space-18, 18px); 
}





/*Styling for the services section*/
/**********************************/
section:nth-of-type(3) h2 { 
	margin-bottom: var(--space-40); 
	text-align: center; 
}

section:nth-of-type(3) figure {
	display: block;
}


/*Service section textblock*/
section:nth-of-type(3) aside { 
	display: flex; 
	align-items: center; 
	position: relative; 
	z-index: 1; 
}

section:nth-of-type(3) aside article { 
	position: relative;
	flex: 1;
	min-height: 136px;
	padding: var(--space-40) var(--space-120) var(--space-40) var(--space-40); 
	border-radius: var(--radius-16); 
	background: var(--color-primary); 
}

section:nth-of-type(3) aside article h3 { 
	margin-bottom: var(--space-32);
}

section:nth-of-type(3) aside article p { 
	color: var(--color-secondary); 
	font-size: var(--font-size-small);
}


/*Logic for clicking and displaying the buttons*/
section:nth-of-type(3) aside > article {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-72px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

section:nth-of-type(3) aside:has(#service-tools:checked) > article:nth-of-type(1),
section:nth-of-type(3) aside:has(#service-eigen-kracht:checked) > article:nth-of-type(2),
section:nth-of-type(3) aside:has(#service-compassie:checked) > article:nth-of-type(3) {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition-delay: 520ms, 520ms, 520ms;
	animation: service-panel-enter 320ms 520ms both;
}

section:nth-of-type(3) aside:has(#service-eigen-kracht:checked) > article:nth-of-type(1),
section:nth-of-type(3) aside:has(#service-compassie:checked) > article:nth-of-type(1),
section:nth-of-type(3) aside:has(#service-tools:checked) > article:nth-of-type(2),
section:nth-of-type(3) aside:has(#service-compassie:checked) > article:nth-of-type(2),
section:nth-of-type(3) aside:has(#service-tools:checked) > article:nth-of-type(3),
section:nth-of-type(3) aside:has(#service-eigen-kracht:checked) > article:nth-of-type(3) {
	position: absolute;
	inset: 0;
}

section:nth-of-type(3) aside > div { --service-sphere-size: 14em; --service-offset-x: 9.6992em; --service-offset-y: 5.6em; --service-bottom-offset: 11.2em; --service-width: 23.6992em; --service-height: 25.2em; position: relative; flex: 0 0 var(--service-width); width: var(--service-width); height: var(--service-height); margin-left: -123px; font-size: 16px; }
section:nth-of-type(3) aside > div > input { position: absolute; opacity: 0; pointer-events: none; }
section:nth-of-type(3) aside > div > div,
section:nth-of-type(3) aside > div > menu { position: absolute; inset: 0; margin: 0; padding: 0; }
section:nth-of-type(3) aside > div > div > div { position: absolute; display: grid; width: var(--service-sphere-size); height: var(--service-sphere-size); place-items: center; border-radius: 50%; color: #000; font-size: 16px; font-weight: 700; text-decoration: underline; transition: left 320ms cubic-bezier(.2, .8, .2, 1), top 320ms cubic-bezier(.2, .8, .2, 1); }
section:nth-of-type(3) aside > div > div > div span { visibility: hidden; }
section:nth-of-type(3) aside > div > div > div:nth-child(1) { top: var(--service-offset-y); left: 0; background: #7fd6d6b3; }
section:nth-of-type(3) aside > div > div > div:nth-child(2) { top: 0; left: var(--service-offset-x); background: var(--color-eigen); }
section:nth-of-type(3) aside > div > div > div:nth-child(3) { top: var(--service-bottom-offset); left: var(--service-offset-x); background: var(--color-compassie); }
section:nth-of-type(3) aside > div > menu > label { position: absolute; z-index: 2; display: grid; width: var(--service-sphere-size); height: var(--service-sphere-size); place-items: center; cursor: pointer; font-size: 16px; font-weight: 700; text-decoration: underline; transition: left 320ms cubic-bezier(.2, .8, .2, 1), top 320ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease; }
section:nth-of-type(3) aside > div > menu > label:nth-child(1) { top: var(--service-offset-y); left: 0; }
section:nth-of-type(3) aside > div > menu > label:nth-child(2) { top: 0; left: var(--service-offset-x); }
section:nth-of-type(3) aside > div > menu > label:nth-child(3) { top: var(--service-bottom-offset); left: var(--service-offset-x); }
section:nth-of-type(3) aside > div > menu > label:hover,
section:nth-of-type(3) aside > div > menu > label:focus-visible { color: var(--color-heading); }

section:nth-of-type(3) aside:has(#service-tools:checked) > div > menu > label:nth-child(1),
section:nth-of-type(3) aside:has(#service-eigen-kracht:checked) > div > menu > label:nth-child(2),
section:nth-of-type(3) aside:has(#service-compassie:checked) > div > menu > label:nth-child(3) {
	opacity: 0;
	pointer-events: none;
}

section:nth-of-type(3) aside:has(#service-eigen-kracht:checked) > div > div > div,
section:nth-of-type(3) aside:has(#service-eigen-kracht:checked) > div > menu > label,
section:nth-of-type(3) aside:has(#service-compassie:checked) > div > div > div,
section:nth-of-type(3) aside:has(#service-compassie:checked) > div > menu > label {
	transition-delay: 180ms;
}

@keyframes service-panel-enter {
	from { opacity: 0; transform: translateX(-72px); }
	to { opacity: 1; transform: translateX(0); }
}

#service-eigen-kracht:checked ~ div:nth-of-type(1) > div:nth-child(1) { top: var(--service-bottom-offset); left: var(--service-offset-x); }
#service-eigen-kracht:checked ~ div:nth-of-type(1) > div:nth-child(2) { top: var(--service-offset-y); left: 0; }
#service-eigen-kracht:checked ~ div:nth-of-type(1) > div:nth-child(3) { top: 0; left: var(--service-offset-x); }
#service-eigen-kracht:checked ~ menu > label:nth-child(1) { top: var(--service-bottom-offset); left: var(--service-offset-x); }
#service-eigen-kracht:checked ~ menu > label:nth-child(2) { top: var(--service-offset-y); left: 0; }
#service-eigen-kracht:checked ~ menu > label:nth-child(3) { top: 0; left: var(--service-offset-x); }
#service-compassie:checked ~ div:nth-of-type(1) > div:nth-child(1) { top: 0; left: var(--service-offset-x); }
#service-compassie:checked ~ div:nth-of-type(1) > div:nth-child(2) { top: var(--service-bottom-offset); left: var(--service-offset-x); }
#service-compassie:checked ~ div:nth-of-type(1) > div:nth-child(3) { top: var(--service-offset-y); left: 0; }
#service-compassie:checked ~ menu > label:nth-child(1) { top: 0; left: var(--service-offset-x); }
#service-compassie:checked ~ menu > label:nth-child(2) { top: var(--service-bottom-offset); left: var(--service-offset-x); }
#service-compassie:checked ~ menu > label:nth-child(3) { top: var(--service-offset-y); left: 0; }





/*Different styling based on the width of the screen*/
/****************************************************/

/*Screen breakpoint 64em*/
@media (width < 64em) {
	section:nth-of-type(3) aside > div {
		--service-sphere-size: 12em;
		--service-offset-x: 8.3136em;
		--service-offset-y: 4.8em;
		--service-bottom-offset: 9.6em;
		--service-width: 20.3136em;
		--service-height: 21.6em;
	}

	/*Image styling for small screens*/
	section:nth-of-type(2) img:nth-child(1) { 
		width: var(--image-portrait-width-small); 
		height: var(--image-portrait-height-small); 
	}
}

/*Screen width breakpoint 48 em*/
@media (width < 48em) {
	section:nth-of-type(1) {
		position: relative;
		background-image: none;
	}

	section:nth-of-type(1)::before {
		content: "";
		position: absolute;
		inset: auto 0 0;
		width: 100%;
		height: 35%;
		background: url("../images/cupped-hands.jpeg") center / cover no-repeat;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
		pointer-events: none;
	}

	section:nth-of-type(1) > .container {
		position: relative;
		z-index: 1;
	}

	/*hero banner*/
	section:nth-of-type(1) > .container {
		padding-bottom: 12em;
	}

	section:nth-of-type(1) .button { 
		align-self: center; 
	}

	/*making sure the hero content takes up the full width on small screens*/
	section:nth-of-type(1) div:first-child {
		width: 100%;
		flex: 1;
		max-width: none;
	}


	/*About section*/
	section:nth-of-type(2) img:nth-child(1) { 
		width: var(--image-portrait-width); 
		height: var(--image-portrait-height); 

		align-self: center; 
		transform-origin: top center; 
	}


	/*Services section*/
	section:nth-of-type(3) aside article { 
		padding: var(--space-32) 0 var(--space-32) var(--space-32);
	}

	section:nth-of-type(3) figure > aside {
		display: grid; 
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32); 
	}

	section:nth-of-type(3) figure > aside > div {
		justify-self: center; 
		width: var(--service-width); 
		flex-basis: var(--service-width); 
		margin-left: 0; 
		margin-top: -4em; 
		transform: rotate(90deg); 
		transform-origin: center; 
	}

	section:nth-of-type(3) figure > aside > div > menu > label {
		transform: rotate(-90deg);
	}
}