/**
 * Responsive layout tiers.
 *
 * This file used to carry ~1,500 lines of per-breakpoint token overrides across
 * 17 tiers, which scaled every size proportionally to the viewport. Sizing now
 * lives in base.css as fluid clamp() ramps, so only tokens that represent a
 * genuine *layout* decision — a discrete change that cannot be interpolated —
 * remain here.
 *
 * Anything you are tempted to add below should first be checked against
 * base.css: if the value can be expressed as a continuous ramp, it belongs
 * there instead.
 */

/* ---------------------------------------------------------------------------
 * Client logo marquee.
 *
 * The visible logo count is discrete, so the item width genuinely steps rather
 * than interpolating: 7 logos on wide desktop, then 6, 5 and 4.
 * ------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	:root {
		--sp-client-logos-logo-max-width: calc((100vw - var(--sp-client-logos-gap) * 5) / 6);
	}
}

@media (max-width: 1040px) {
	:root {
		--sp-client-logos-gap: clamp(42px, calc(130 / var(--spaciefy-artboard) * 100vw), 130px);
	}
}

@media (max-width: 992px) {
	:root {
		--sp-client-logos-logo-max-width: calc((100vw - var(--sp-client-logos-gap) * 4) / 5);
	}
}

@media (max-width: 640px) {
	:root {
		--sp-client-logos-logo-max-width: calc((100vw - var(--sp-client-logos-gap) * 3) / 4);
	}
}

/* ---------------------------------------------------------------------------
 * Hero service list.
 *
 * Tightens leading once the list stops sitting beside the heading.
 * ------------------------------------------------------------------------- */

@media (max-width: 992px) {
	:root {
		--sp-hero-service-lh: 1.5;
	}
}

/* ---------------------------------------------------------------------------
 * Contact page — layout-tier overrides only.
 * Typography and spacing scale via fluid tokens in base.css.
 * ------------------------------------------------------------------------- */

@media (max-width: 1560px) {
	:root {
		--sp-contact-column-gap: clamp(32px, calc(240 / var(--spaciefy-artboard) * 100vw), 240px);
	}
}

@media (max-width: 1440px) {
	:root {
		--sp-contact-column-gap: clamp(32px, calc(210 / var(--spaciefy-artboard) * 100vw), 210px);
	}
}

@media (max-width: 1360px) {
	:root {
		--sp-contact-column-gap: max(24px, calc(299 / var(--spaciefy-artboard) * 100vw - 100px));
		--sp-contact-content-max: clamp(280px, calc(675 / var(--spaciefy-artboard) * 100vw), 675px);
		--sp-contact-form-max: clamp(300px, calc(836 / var(--spaciefy-artboard) * 100vw), 836px);
	}
}

@media (max-width: 1200px) {
	:root {
		--sp-contact-column-gap: clamp(24px, calc(80 / var(--spaciefy-artboard) * 100vw), 80px);
		--sp-contact-content-max: clamp(320px, calc(780 / var(--spaciefy-artboard) * 100vw), 780px);
		--sp-contact-form-max: clamp(320px, calc(860 / var(--spaciefy-artboard) * 100vw), 860px);
	}
}

@media (max-width: 860px) {
	:root {
		--sp-contact-heading-max: 46%;
	}
}

@media (max-width: 768px) {
	:root {
		--sp-contact-heading-max: 360px;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile container width — 768px and below.
 *
 * Site containers are capped at 90% on phones. The base token can resolve
 * above that (96% or 100% − 30px), and a few section-specific container
 * tokens need the same ceiling.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	:root {
		--spaciefy-container-width: 90%;
		--sp-project-cta-container-width: 90%;
		--sp-blog-detail-layout-container: 90%;
	}
}