/* ==========================================================================
   PREČO MY — štyri karty 280 × 360 px, rádius 26 px, každá druhá o 50 px
   nižšie; na mobile posuvník
   ========================================================================== */

.enp-why {
	padding-block: 80px 96px;
	overflow-x: clip;
}

.enp-why__slider {
	--enp-slider-gap: 46px;
}

.enp-why__slider .enp-slider__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: start;
	overflow: visible;
	padding-bottom: 50px;
}

.enp-why__slider .enp-slider__progress {
	display: none;
}

.enp-why__card {
	display: flex;
	flex-direction: column;
	min-height: 360px;
	padding: 20px;
	border: var(--enp-card-border);
	border-radius: var(--enp-radius-tile);
	background: var(--enp-white);
	transition:
		box-shadow 0.3s var(--enp-ease),
		transform 0.3s var(--enp-ease);
}

.enp-why__card:hover {
	box-shadow: var(--enp-shadow-lift);
}

.enp-why__card.is-offset {
	margin-top: 50px;
}

.enp-why__title {
	margin-top: 24px;
	max-width: 9.5em;
}

.enp-why__text {
	margin-top: 16px;
	color: var(--enp-text);
}

.enp-why__action {
	display: flex;
	justify-content: center;
	margin-top: -18px;
}

@media (max-width: 1199px) {
	.enp-why__slider {
		--enp-slider-gap: 24px;
	}
}

@media (max-width: 1023px) {
	.enp-why {
		padding-block: 64px;
	}

	.enp-why__slider {
		--enp-slide: min(290px, 76vw);
		--enp-slider-gap: 16px;
	}

	.enp-why__slider .enp-slider__track {
		display: flex;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--enp-gutter));
		padding-inline: var(--enp-gutter);
		padding-bottom: 8px;
		scroll-padding-inline: var(--enp-gutter);
	}

	.enp-why__slider .enp-slider__progress {
		display: block;
	}

	.enp-why__card.is-offset {
		margin-top: 0;
	}

	.enp-why__card {
		height: 100%;
	}

	.enp-why__action {
		margin-top: 28px;
	}
}