/*!
 * CSS Logistics — Responsive Overrides
 * Loaded after main.css. Breakpoints follow the project spec:
 * 1920 / 1440 / 1280 / 1024 / 768 / 576 / 375 / 320.
 */

/* ---------- 1440px and below: tighten container a touch ---------- */
@media (max-width: 1440px) {
	:root { --container-max: 1100px; }
}

/* ---------- 1280px and below: industries 4→3 cols ---------- */
@media (max-width: 1280px) {
	.industries-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 1024px and below: nav starts collapsing, grids adapt ---------- */
@media (max-width: 1024px) {
	.wrap { padding: 0 24px; }
	.hero-inner { gap: 28px; }
	.stats-grid { padding: 28px 0; }
	section { --section-pad: 72px; padding: var(--section-pad) 0; }
	.why-inner { gap: 36px; }
}

/* ---------- 900px: header goes mobile, several grids to 2 cols ---------- */
@media (max-width: 900px) {
	.site-header { position: sticky; }
	.nav { position: relative; }
	.nav-links {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--white);
		flex-direction: column; align-items: stretch; gap: 0;
		border-top: 1px solid var(--line);
		max-height: 0; overflow: hidden;
		visibility: hidden;
		transition: max-height 0.25s ease, visibility 0s linear 0.25s;
	}
	.nav-links.is-open {
		max-height: 420px; overflow-y: auto; visibility: visible;
		transition: max-height 0.25s ease, visibility 0s;
		box-shadow: 0 16px 24px -18px rgba(22, 40, 61, 0.4);
	}
	.nav-links-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.nav-links a, .nav-links-list a {
		display: block; width: 100%; padding: 16px 24px; border-bottom: 1px solid var(--line); opacity: 1;
	}
	.nav-cta { display: none; }
	.burger { display: block; }
	.nav-links.is-open ~ .nav-cta { display: none; }

	.hero-inner { grid-template-columns: 1fr; padding: 44px 0 40px; text-align: left; }
	.hero-graphic, .hero-photo { max-width: 400px; margin: 0 auto; }

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

	.why-inner { grid-template-columns: 1fr; }
	.why-collage { margin-top: 40px; }

	.about-intro { grid-template-columns: 1fr; gap: 28px; }
	.mv-grid { grid-template-columns: 1fr; }

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

	.process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
	.process-steps::before { display: none; }

	.page-wrap.has-sidebar { grid-template-columns: 1fr; }
	.blog-grid { grid-template-columns: 1fr; }
}

/* ---------- 768px: stats + section padding ---------- */
@media (max-width: 768px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat { border-bottom: 1px solid var(--line); padding: 24px 12px; }
	.stat:nth-child(2n) { border-right: 0; }
	section { --section-pad: 56px; padding: var(--section-pad) 0; }
	.sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.about-photo { aspect-ratio: 4/3; }
	.why-points { grid-template-columns: 1fr; }
}

/* ---------- 576px and below: forms, cards, industries single col ---------- */
@media (max-width: 576px) {
	.wrap { padding: 0 20px; }
	.services-grid { grid-template-columns: 1fr; }
	.industries-grid { grid-template-columns: 1fr; }
	.field-row { grid-template-columns: 1fr; }
	.contact-left, .contact-right { padding: 36px 24px; }
	.footer-top { flex-direction: column; align-items: flex-start; }
	.footer-bottom { flex-direction: column; }
	.process-steps { grid-template-columns: 1fr; }
	.hero h1 { line-height: 1.05; }
}

/* ---------- 375px / 320px: smallest phones ---------- */
@media (max-width: 375px) {
	.wrap { padding: 0 16px; }
	.btn { padding: 11px 16px; font-size: 12px; }
	.hero-ctas { flex-direction: column; align-items: stretch; }
	.hero-ctas .btn { width: 100%; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.why-badge { left: 0; padding: 12px 16px; }
}

/* ---------- Track Shipment page ---------- */
@media (max-width: 640px) {
	.track-result { padding: 28px 22px; }
	.track-result__head { flex-direction: column; }
	.track-details { grid-template-columns: 1fr; }
	.track-progress { flex-wrap: wrap; row-gap: 18px; }
	.track-progress::before { display: none; }
	.track-progress__step { flex: 0 0 33%; }
	.track-form { flex-direction: column; }
	.track-form .btn { width: 100%; }
}

/* ---------- Ultra-wide: cap visual scale so the design doesn't stretch ---------- */
@media (min-width: 1920px) {
	:root { --container-max: 1280px; }
	.hero h1 { font-size: 72px; }
}