/* ===================================================================
   CYBE T&T — RESPONSIVE
   Mobile-first: base styles in main.css/neumorphic.css target small
   screens implicitly via fluid units; these breakpoints adjust grids
   and density up to tablet/desktop, and collapse nav down to mobile.
   =================================================================== */

/* Tablet and below: collapse multi-column grids */
@media (max-width: 1024px) {
	.cybe-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

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

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

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

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

/* Mobile nav switch */
@media (max-width: 880px) {
	.cybe-nav {
		display: none;
	}

	.cybe-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.cybe-hero__content {
		padding: 28px;
	}

	.cybe-cta {
		padding: 40px 24px;
	}
}

/* Small tablet / large phone */
@media (max-width: 768px) {
	.cybe-grid--3,
	.cybe-grid--4,
	.cybe-grid--2 {
		grid-template-columns: 1fr;
	}

	.cybe-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 160px;
	}

	.cybe-gallery__item:nth-child(5n+1) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.cybe-section {
		padding: 64px 0;
	}

	.cybe-footer__top {
		grid-template-columns: 1fr;
	}

	.cybe-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.cybe-partners {
		justify-content: center;
		gap: 28px;
	}
}

/* Phone */
@media (max-width: 480px) {
	.cybe-container {
		padding: 0 18px;
	}

	.cybe-hero {
		min-height: 100vh;
	}

	.cybe-hero__title {
		font-size: 38px;
	}

	.cybe-btn {
		width: 100%;
	}

	.cybe-hero__actions {
		flex-direction: column;
	}

	.cybe-back-to-top,
	.cybe-tt-sticky-actions {
		right: 14px;
	}
}