/* Systems page responsive & adaptive (separate file) */

/* 1200px: desktops */
@media (max-width: 1200px) {
	.systems-section .section-header .section-title {
		font-size: 42px;
	}
	.systems-grid .system-card,
	.category-grid .category-card {
		padding: 28px;
	}
	.component-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 992px: tablets landscape */
@media (max-width: 992px) {
	.systems-section .section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.systems-section .section-header .section-title {
		font-size: 36px;
		max-width: 100%;
	}
	.systems-grid,
	.category-grid {
		flex-wrap: nowrap;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-top: 20px;
	}
	.systems-grid::-webkit-scrollbar,
	.category-grid::-webkit-scrollbar {
		display: none;
	}
	.systems-grid .system-card,
	.category-grid .category-card {
		flex: 0 0 35%;
		scroll-snap-align: start;
	}
	.component-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		margin: 20px 0 100px;
	}
	.obtional-components {
		flex-direction: column;
	}
	.obtional-components .filter-box {
		max-width: 100%;
	}
}

/* 768px: tablets portrait */
@media (max-width: 768px) {
	.systems-grid .system-card,
	.category-grid .category-card {
		padding: 24px;
		flex: 0 0 45%;
		max-width: 85%;
	}
	.systems-grid .system-card .system-button-item,
	.category-grid .category-card .system-button-item {
		width: 46px;
		height: 46px;
		padding: 12px;
	}
	.systems-grid .system-card .card-label,
	.category-grid .category-card .card-label {
		font-size: 22px;
	}
	.component-info .component-title {
		font-size: 22px;
		width: 100%;
	}
	.component-thumb .component-box {
		height: 240px;
	}
}

/* 576px: phones */
@media (max-width: 576px) {
	.systems-section .section-header .section-title {
		font-size: 30px;
	}
	.systems-grid .system-card,
	.category-grid .category-card {
		padding: 20px;
		border-radius: 20px;
        flex: 0 0 50%;
	}
	.component-list {
		grid-template-columns: 1fr;
	}
	.component-thumb .component-box {
		height: 200px;
	}
	.category-grid .category-card svg:not(.system-button-item svg) {
		width: 96px;
		height: 96px;
	}

	.hero-section-component::after {
        border-radius:  25px 25px 0px 0px !important;
    }

    .footer-side::after {
        border-radius: 0px 0px 25px 25px;
    }
}

/* 400px: very small phones */
@media (max-width: 440px) {
	.systems-grid .system-card,
	.category-grid .category-card {
		padding: 16px;
	}
	.component-info .component-title {
		font-size: 20px;
	}

	.systems-grid .system-button-item,
	.systems-grid .border-shapes ,
	.category-card .system-button-item,
	.category-card .border-shapes {
		display: none !important;
	}
}