/* =================================================================
   Arlope — Responsive
   Desktop 1200+ / Laptop 992-1199 / Tablet 768-991 / Mobile 480-767 / Small <480
   ================================================================= */

/* Laptop */
@media (max-width: 1199px) {
	:root { --section-padding: 84px 0; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet */
@media (max-width: 991px) {
	:root { --section-padding: 70px 0; --gap: 24px; }

	.primary-nav, .header-actions .btn { display: none; }
	.menu-toggle { display: flex; }

	.projects-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
	.value-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

	.about-split { grid-template-columns: 1fr; gap: 36px; }
	.about-split__media img { aspect-ratio: 16/10; }

	.project-detail, .single-layout, .contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.single-layout.no-sidebar { grid-template-columns: 1fr; }
	.project-specs { position: static; }

	.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }

	.section-head { flex-direction: column; align-items: flex-start; }
}

/* Mobile */
@media (max-width: 767px) {
	body { font-size: 16px; }
	:root { --section-padding: 56px 0; --header-height: 72px; }

	.container { padding: 0 18px; }

	.services-grid, .projects-grid, .blog-grid, .project-gallery { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr 1fr; }

	.hero { min-height: 90vh; }
	.hero__box { padding: 36px 26px; max-width: 100%; }
	.hero p { font-size: 1.05rem; }
	.hero__actions { width: 100%; }
	.hero__actions .btn { flex: 1; justify-content: center; }

	.project-hero { height: 60vh; min-height: 380px; }
	.project-hero__caption { bottom: 30px; }

	.footer-bottom { flex-direction: column; text-align: center; }
	.share-buttons { flex-wrap: wrap; }
}

/* Small mobile */
@media (max-width: 479px) {
	.footer-grid { grid-template-columns: 1fr; }
	.team-grid, .stats { grid-template-columns: 1fr; }
	.btn { width: 100%; justify-content: center; }
	.mobile-nav a { font-size: 1.5rem; }
	.arlope-whatsapp { width: 50px; height: 50px; }
}