/* ==========================================================================
   CadExtra Responsive Styles — Mobile-first
   Breakpoints: 480px | 768px | 1024px | 1440px
   ========================================================================== */

/* ─────────────────────────────────────────────
   Base (< 480px) — already handled in main.css
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   480px — Small mobile
   ───────────────────────────────────────────── */
@media (min-width: 480px) {
	.services-grid {
		grid-template-columns: 1fr;
	}

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

/* ─────────────────────────────────────────────
   768px — Tablet
   ───────────────────────────────────────────── */
@media (min-width: 768px) {
	/* Navigation: show desktop links, hide hamburger */
	.nav-links {
		display: flex;
	}

	.nav-hamburger {
		display: none;
	}

	/* Services: 2 column grid */
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* About: single column → two column */
	.about-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Contact: single column → two column */
	.contact-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Footer */
	.footer-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}

	/* Hero CTA: side by side */
	.hero-cta-group {
		flex-direction: row;
	}
}

/* ─────────────────────────────────────────────
   1024px — Desktop
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
	/* Services: 4 column */
	.services-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Footer: full grid */
	.footer-grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}

	/* About visual takes full height */
	.about-visual {
		min-height: 400px;
	}
}

/* ─────────────────────────────────────────────
   1440px — Wide desktop
   ───────────────────────────────────────────── */
@media (min-width: 1440px) {
	:root {
		--section-padding: 9rem;
	}
}

/* ─────────────────────────────────────────────
   Mobile overrides (max-width: 767px)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
	/* Show hamburger, hide desktop nav */
	.nav-links {
		display: none;
	}

	.nav-hamburger {
		display: flex;
	}

	/* Stack hero CTA buttons */
	.hero-cta-group {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-cta-group .btn {
		justify-content: center;
	}

	/* About: single column, visual below content */
	.about-grid {
		grid-template-columns: 1fr;
	}

	.about-visual {
		order: -1; /* visual on top */
		min-height: 280px;
	}

	.about-gear-cluster {
		max-width: 280px;
	}

	/* Contact: single column */
	.contact-grid {
		grid-template-columns: 1fr;
	}

	/* Footer: 2 column */
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}

	/* Footer bottom: stacked */
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/* Reduce gear canvas complexity hint (handled in JS) */
	.hero-canvas {
		opacity: 0.6;
	}

	/* About team cards: no gap */
	.about-team {
		gap: 0.625rem;
	}
}

/* ─────────────────────────────────────────────
   Very small (< 380px)
   ───────────────────────────────────────────── */
@media (max-width: 380px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.hero-headline {
		font-size: 2rem;
	}
}

/* ─────────────────────────────────────────────
   Touch / hover capability
   ───────────────────────────────────────────── */
@media (hover: none) {
	/* On touch devices, show card content without hover transforms */
	.service-card {
		transform: none !important;
	}

	.service-card__gear-deco {
		display: none;
	}
}

/* ─────────────────────────────────────────────
   High contrast mode
   ───────────────────────────────────────────── */
@media (forced-colors: active) {
	.hero-canvas,
	.footer-gear-decoration,
	.contact-gear-deco,
	.about-gear-cluster {
		display: none;
	}

	.btn--primary {
		border: 2px solid ButtonText;
	}
}