.subpage-intro,
.subpage-situations{
	background:#fff;
	padding:5rem 0;
}
.subpage-image-cut{
    position:absolute;
    right:-1px;
    top:-2px;
    width:130px;
    height:calc(100% + 4px);
    background:var(--light);

    clip-path:polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}

/* =========================
   INTRO
========================= */

.subpage-intro-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:2.5rem;
	align-items:center;
}

.subpage-intro-text{
	max-width:760px;
}

.subpage-intro-text h1{
	margin-bottom:1.4rem;
}

.subpage-intro-text>p{
	color:#626868;
	line-height:1.75;
}

.subpage-lead{
	font-size:clamp(1rem,1.3vw,1.17rem);
}

.subpage-benefits{
	display:grid;
	grid-template-columns:1fr;
	gap:.75rem;
	margin:2rem 0;
}

.subpage-benefits span{
	font-weight:700;
}

.subpage-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.9rem 1.25rem;
	background:var(--lime);
	color:#000;
	font-weight:700;
	border-radius:7px;
	box-shadow:5px 5px 0 #000;
	transition:.2s ease;
}

.subpage-button:hover{
	transform:translate(-2px,-2px);
	box-shadow:7px 7px 0 #000;
}


/* small attention block */

.subpage-highlight{
	background:#111;
	color:#fff;
	padding:2rem;
	border-radius:18px;
}

.subpage-highlight>p{
	color:var(--teal);
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing:.1em;
	font-weight:700;
	margin-bottom:.8rem;
}

.subpage-highlight h2{
	font-size:clamp(1.55rem,2.5vw,2.3rem);
	margin-bottom:1rem;
}

.subpage-highlight span{
	color:#aaa;
	line-height:1.6;
}



/* =========================
   IMAGE SECTION
========================= */

.subpage-service{
	display:grid;
	grid-template-columns:1fr;
	background:var(--light);
}

.subpage-service-image{
	position:relative;
	min-height:420px;
	overflow:hidden;
}

.subpage-service-image img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/*
	This element creates the diagonal edge.
	On mobile it is hidden because image/text are stacked.
*/
.subpage-image-cut{
	display:none;
}


.subpage-service-content{
	display:flex;
	align-items:center;
	padding:4rem 1rem;
}

.subpage-service-inner{
	width:100%;
	max-width:590px;
	margin:auto;
}

.subpage-service-inner h2{
	margin-bottom:1.4rem;
}

.subpage-service-inner>p{
	color:#626868;
	line-height:1.8;
	margin-bottom:1.2rem;
}


.subpage-service-list{
	margin-top:2rem;
	border-top:1px solid #d4dada;
}

.subpage-service-list>div{
	display:flex;
	flex-direction:column;
	gap:.2rem;
	padding:.9rem 0;
	border-bottom:1px solid #d4dada;
}

.subpage-service-list strong{
	color:#222;
}

.subpage-service-list span{
	color:#6d7373;
	font-size:.9rem;
	line-height:1.5;
}



/* =========================
   THIRD SECTION
========================= */
.subpage-situations{
	background:#fff;
	padding:5rem 0;
}

.subpage-section-head{
	max-width:760px;
	margin-bottom:3rem;
}

.subpage-section-head>p:last-child{
	color:#666;
	line-height:1.75;
	margin-bottom:0;
}


/* 4 rövid szolgáltatási pont */

.subpage-service-overview{
	display:grid;
	grid-template-columns:1fr;
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
}

.subpage-service-overview>div{
	display:flex;
	flex-direction:column;
	gap:.35rem;
	padding:1.3rem 0;
	border-bottom:1px solid var(--border);
}

.subpage-service-overview>div:last-child{
	border-bottom:0;
}

.subpage-service-overview strong{
	font-size:1.05rem;
	color:#111;
}

.subpage-service-overview span{
	color:#6a7070;
	font-size:.92rem;
	line-height:1.5;
}


/* Alsó szöveges blokk */

.subpage-extra-areas{
	margin-top:4rem;
	padding:2.5rem;
	background:var(--light);
	border-radius:20px;
	display:grid;
	grid-template-columns:1fr;
	gap:1.5rem;
}

.subpage-extra-title h2{
	margin-bottom:0;
}

.subpage-extra-text{
	display:flex;
	align-items:center;
}

.subpage-extra-text p{
	color:#626868;
	line-height:1.8;
	margin:0;
}


@media screen and (min-width:768px){

	.subpage-service-overview{
		grid-template-columns:repeat(2,1fr);
	}

	.subpage-service-overview>div{
		padding:1.4rem;
	}

	.subpage-service-overview>div:nth-child(odd){
		border-right:1px solid var(--border);
	}

	.subpage-service-overview>div:nth-last-child(-n+2){
		border-bottom:0;
	}

	.subpage-extra-areas{
		grid-template-columns:1fr 1fr;
		gap:4rem;
		padding:3rem;
	}

}


@media screen and (min-width:1100px){

	.subpage-situations{
		padding:6.5rem 0;
	}

	.subpage-service-overview{
		grid-template-columns:repeat(4,1fr);
	}

	.subpage-service-overview>div{
		border-bottom:0;
		border-right:1px solid var(--border);
		padding:1.5rem;
	}

	.subpage-service-overview>div:first-child{
		padding-left:0;
	}

	.subpage-service-overview>div:last-child{
		border-right:0;
		padding-right:0;
	}

}

@media screen and (min-width:768px){

	.subpage-intro{
		padding:6rem 0;
	}

	.subpage-intro-grid{
		grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);
		gap:4rem;
	}

	.subpage-benefits{
		grid-template-columns:1fr 1fr;
	}


	/* -------------------------
	   HALF PAGE IMAGE
	------------------------- */

	.subpage-service{
		position:relative;
		grid-template-columns:50% 50%;
		min-height:700px;
		overflow:hidden;
	}

	.subpage-service-image{
		min-height:100%;
		overflow:visible;
	}

	.subpage-service-image img{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		object-fit:cover;
	}


	/*
		FERDE HATÁR

		Ez egy világosszürke háromszög,
		ami ráül a kép jobb szélére.

			  IMAGE     / TEXT
			            /
			           /
	*/

	.subpage-image-cut{
		display:block;
		position:absolute;
		z-index:2;

		top:-2px;
		right:-1px;

		width:110px;
		height:calc(100% + 4px);

		background:var(--light);

		clip-path:polygon(
			100% 0,
			100% 100%,
			0 100%
		);
	}


	.subpage-service-content{
		padding:5rem 3rem;
	}


	.subpage-situation-grid{
		grid-template-columns:1fr 1fr;
		column-gap:3rem;
	}


	.subpage-bottom-text{
		grid-template-columns:1fr 1fr;
		gap:4rem;
		align-items:start;
	}

}



/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width:1100px){

	.subpage-intro,
	.subpage-situations{
		padding:6.5rem 0;
	}

	.subpage-service{
		min-height:760px;
	}


	/*
		Nagyobb ferdeség desktopon.
		Ha még látványosabbra akarod,
		emeld 140px / 160px környékére.
	*/
	.subpage-image-cut{
		width:130px;
	}


	.subpage-service-content{
		padding-top:6rem;
		padding-bottom:6rem;

		padding-left:5rem;

		padding-right:max(
			3rem,
			calc((100vw - var(--content)) / 2)
		);
	}


	.subpage-situation-grid{
		grid-template-columns:repeat(4,1fr);
		column-gap:0;
	}

	.subpage-situation-grid article{
		padding:1.5rem;
		border-right:1px solid var(--border);
	}

	.subpage-situation-grid article:first-child{
		padding-left:0;
	}

	.subpage-situation-grid article:last-child{
		padding-right:0;
		border-right:0;
	}

}