/**
 * Mobile-first breakpoint overrides.
 * sm: 480px · md: 768px · lg: 1024px · xl: 1280px
 */

/* ============ 480px — small phones up ============ */
@media (min-width: 480px) {
	.usp-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

/* ============ 768px — tablet up ============ */
@media (min-width: 768px) {
	.diensten-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.process-timeline {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.workflow-benefits {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.pricing-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pricing-card--featured {
		transform: translateY(-12px);
	}

	.site-footer__top {
		grid-template-columns: 1.1fr 2fr;
	}

	.contact-section__grid {
		grid-template-columns: 1fr 1.2fr;
	}

	.over-ons-section__grid {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

/* ============ 1024px — desktop up: the signature hero effect kicks in ============ */
@media (min-width: 1024px) {
	.site-header__nav {
		display: block;
	}

	.site-header__cta {
		display: inline-flex;
	}

	.site-header__toggle {
		display: none;
	}

	.mobile-menu {
		display: none;
	}

	.hero-scroll__grid {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 2rem;
	}

	.hero-scroll__sticky-col {
		display: block;
		order: 0;
		margin-bottom: 0;
		position: sticky;
		top: 0;
		align-self: start;
	}

	.hero-scroll__sticky {
		height: 100vh;
	}

	.hero-scroll__globe-wrap {
		width: min(46vw, 560px);
	}

	.hero-scroll__hud {
		display: block;
	}

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

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

	.flow-diagram {
		flex-direction: row;
		align-items: center;
		padding: 2.5rem;
	}

	.flow-diagram__node {
		flex: 1;
		padding: 0 1.25rem;
	}

	.flow-diagram__connector {
		width: auto;
		flex: 0 0 64px;
		height: 2px;
		margin: 0;
	}

	.flow-diagram__pulse {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		animation-name: flowPulseHorizontal;
	}

	.process-timeline {
		grid-template-columns: repeat(5, 1fr);
		gap: 1.25rem;
	}

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

@keyframes flowPulseHorizontal {
	0% {
		left: 0;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

/* ============ 1280px — wide desktop ============ */
@media (min-width: 1280px) {
	.hero-scroll__title {
		max-width: 16ch;
	}
}

/* ============ Fine pointer only: skip hover-glow scale on touch devices ============ */
@media (hover: none) {
	.diensten-card:hover,
	.portfolio-card:hover,
	.workflow-card:hover,
	.testimonial-card:hover,
	.btn--primary:hover,
	.btn--ghost:hover,
	.social-icon:hover {
		transform: none;
	}
}