/* =============================================================
   ContractorsLane — Responsive
   Mobile-first base lives in style.css; these are the
   tablet (=<1024 / 768) and mobile (=<640 / 390) overrides.
   ============================================================= */

/* ---------- Tablet & down (<= 1024px) ---------- */
@media (max-width: 1024px) {
	.cl-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
	.cl-hero__visual { max-width: 520px; margin-inline: auto; }
	.cl-hero__float--a { left: 0; }
	.cl-hero__float--b { right: 0; }

	.cl-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.cl-steps { grid-template-columns: 1fr; gap: 2rem; }
	.cl-steps__line { display: none; }

	.cl-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.cl-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Nav collapse (<= 1199px) ----------
   Nine menu items need a wide viewport; below this the nav
   folds into the hamburger drawer. */
@media (max-width: 1199px) {
	.cl-nav,
	.cl-header__cta .cl-btn--ghost { display: none; }
	.cl-nav-toggle { display: inline-flex; }

	.cl-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--cl-border);
		box-shadow: var(--cl-shadow-card);
		padding: 0.5rem 1.25rem 1.25rem;
	}
	.cl-nav.is-open .cl-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.cl-nav.is-open a {
		display: block;
		padding: 0.9rem 0.25rem;
		border-bottom: 1px solid var(--cl-gray-100);
		font-size: 1.05rem;
		color: var(--cl-text);
	}

	/* Submenus lay flat (indented) inside the drawer. */
	.cl-nav.is-open .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		border: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0 1.1rem;
		min-width: 0;
	}
	.cl-nav.is-open .menu-item-has-children > a::after { display: none; }
}

/* ---------- Tablet portrait (<= 768px) ---------- */
@media (max-width: 768px) {
	.cl-nav,
	.cl-header__cta .cl-btn--ghost { display: none; }
	.cl-nav-toggle { display: inline-flex; }

	/* Mobile nav drawer */
	.cl-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--cl-border);
		box-shadow: var(--cl-shadow-card);
		padding: 0.5rem 1.25rem 1.25rem;
	}
	.cl-nav.is-open .cl-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.cl-nav.is-open a {
		display: block;
		padding: 0.9rem 0.25rem;
		border-bottom: 1px solid var(--cl-gray-100);
		font-size: 1.05rem;
		color: var(--cl-text);
	}

	.cl-stats { grid-template-columns: 1fr; margin-top: -2rem; }
	.cl-grid--2 { grid-template-columns: 1fr; }
	.cl-geo { grid-template-columns: 1fr; }
	.cl-contact { grid-template-columns: 1fr; }

	.cl-section__head p { font-size: 1rem; }
	.cl-hero__sub { font-size: 1.15rem; }
	.cl-hero__desc { font-size: 1rem; }
}

/* ---------- Mobile (<= 640px) ---------- */
@media (max-width: 640px) {
	.cl-grid--3,
	.cl-grid--5 { grid-template-columns: 1fr; }

	.cl-footer__grid { grid-template-columns: 1fr; }
	.cl-footer__bottom { flex-direction: column; text-align: center; }

	.cl-field--row { grid-template-columns: 1fr; }

	.cl-hero__actions { flex-direction: column; align-items: stretch; }
	.cl-hero__actions .wp-block-button,
	.cl-hero__actions .wp-block-button__link { width: 100%; }

	.cl-cta-banner .cl-hero__actions .wp-block-button,
	.cl-cta-banner .cl-hero__actions .wp-block-button__link { width: 100%; }

	.cl-feature { flex-direction: column; }
	.cl-marquee__track { gap: 2.25rem; }
	.cl-marquee__item { font-size: 0.95rem; }
}

/* ---------- Fine tune 390px ---------- */
@media (max-width: 400px) {
	.cl-hero h1 { font-size: 2.4rem; }
	.cl-stat-card__num { font-size: 2.1rem; }
	.cl-hero__float { display: none; } /* keep hero tidy on the smallest screens */
}