/* Syncore Projects - responsive styles.
   Tablet (~1100, ~900) and mobile (~640) behaviour. */

@media (max-width: 1100px) {
	.sp-grid-5 {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.sp-footer-top {
		grid-template-columns: 1fr 1fr;
	}

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

	.sp-brand-tag {
		display: none;
	}

	.sp-menu a {
		font-size: 12px;
		padding: 9px 9px;
	}

	.sp-nav {
		gap: 10px;
	}
}

@media (max-width: 900px) {
	.sp-nav-toggle {
		display: inline-flex;
	}

	.sp-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--sp-white);
		border-bottom: 1px solid var(--sp-line);
		box-shadow: var(--sp-shadow-md);
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 12px 24px 20px;
		display: none;
	}

	.sp-header .sp-nav.is-open {
		display: flex;
	}

	.sp-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.sp-menu a {
		display: block;
		font-size: 14px;
		padding: 12px 6px;
		border-bottom: 2px solid transparent;
	}

	.sp-menu .current-menu-item > a {
		border-bottom-color: var(--sp-blue);
	}

	.sp-nav .sp-btn {
		justify-content: center;
		margin-top: 10px;
	}

	.sp-integrated-inner,
	.sp-image-text-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sp-spotlight {
		grid-template-columns: 1fr !important;
	}

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

	.sp-h1 {
		font-size: 36px;
	}

	.sp-h2 {
		font-size: 28px;
	}

	.sp-display {
		font-size: 42px;
	}

	.sp-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.sp-grid-5,
	.sp-grid-4,
	.sp-grid-3,
	.sp-grid-2,
	.sp-steps,
	.sp-stats-grid {
		grid-template-columns: 1fr;
	}

	.sp-header-inner {
		min-height: 54px;
		gap: 12px;
	}

	.sp-brand {
		max-width: 240px;
	}

	.sp-brand-logo {
		width: 108px;
	}

	.sp-nav-cta {
		display: none;
	}

	.sp-hero-home {
		min-height: 480px;
		padding: 70px 0;
	}

	.sp-hero-page {
		padding: 56px 0;
	}

	.sp-hero-sub-lg {
		font-size: 17px;
	}

	.sp-section {
		padding: 60px 0;
	}

	.sp-challenge {
		padding: 72px 0;
	}

	.sp-stats {
		margin-top: 0;
	}

	.sp-images-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.sp-footer-top {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.sp-footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-display {
		font-size: 34px;
	}

	.sp-h1 {
		font-size: 30px;
	}

	.sp-h2 {
		font-size: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}