/**
 * SerVee IT — mobile & touch only (max-width breakpoints).
 * Desktop layout is unchanged from layout.css + components.css + animations.css.
 */

/* Safe on all viewports */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.serveeit-site {
	overflow-x: clip;
}

/* Blocksy parent duplicate skip link */
body.serveeit-site a.skip-link.screen-reader-text:not(.serveeit-skip-link) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -------------------------------------------------------------------------
   Tablets & phones (≤1024px) — nav, forms, logo caps for in-app browsers
   ------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	body.serveeit-site #main-container {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	/* Portrait logo file must not expand to full viewport width (Instagram, etc.) */
	.serveeit-header__brand img,
	.serveeit-brand-logo {
		display: block !important;
		max-width: min(120px, 32vw) !important;
		max-height: 36px !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
	}

	.serveeit-footer__logo img,
	.serveeit-brand-logo--footer {
		display: block !important;
		max-width: 140px !important;
		max-height: 40px !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
	}

	.serveeit-header__inner {
		padding-left: max(0px, env(safe-area-inset-left, 0px));
		padding-right: max(0px, env(safe-area-inset-right, 0px));
	}

	.serveeit-field input,
	.serveeit-field select,
	.serveeit-field textarea {
		font-size: 16px;
		min-height: 48px;
	}

	.serveeit-field textarea {
		min-height: 140px;
	}

	.serveeit-nav__list a,
	.serveeit-nav__cta .serveeit-btn {
		display: flex;
		align-items: center;
		min-height: 48px;
		width: 100%;
		padding: 0.5rem 0.35rem;
		font-size: 0.9rem;
	}

	.serveeit-nav-toggle {
		min-width: 48px;
		min-height: 48px;
		touch-action: manipulation;
	}
}

/* -------------------------------------------------------------------------
   Phones (≤768px)
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.serveeit-container {
		width: min(100% - 1.5rem, var(--serveeit-max));
	}

	.serveeit-header__inner {
		width: min(100% - 1.5rem, calc(var(--serveeit-max) + 40px));
	}

	.serveeit-site h1.serveeit-glitch {
		font-size: clamp(1.45rem, 6.2vw, 2.6rem);
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
	}

	.serveeit-heading-match-hero,
	.serveeit-section__title {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.serveeit-hero {
		min-height: min(100svh, 880px);
		padding-top: clamp(5rem, 16vw, 7rem);
	}

	.serveeit-hero--short,
	.serveeit-page-hero.serveeit-hero--short {
		min-height: clamp(280px, 48svh, 480px);
	}

	.serveeit-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.serveeit-hero__actions .serveeit-btn {
		width: 100%;
		min-height: 48px;
	}

	.serveeit-web-hero {
		min-height: clamp(360px, 58svh, 640px);
		padding-top: clamp(4.5rem, 14vw, 6rem);
	}

	/* Web Design: background + inline videos must fill their frame on phones */
	.serveeit-web-hero--video .serveeit-hero__video-wrap,
	.serveeit-why--video .serveeit-hero__video-wrap {
		position: absolute;
		inset: 0;
		min-height: 100%;
	}

	.serveeit-web-hero--video .serveeit-hero__video,
	.serveeit-why--video .serveeit-hero__video {
		width: 100%;
		height: 100%;
		min-height: 100%;
		object-fit: cover;
	}

	video.serveeit-web-intro-img {
		width: 100%;
		min-height: 220px;
		max-height: min(56vh, 520px);
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.serveeit-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.serveeit-mini-stats {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.serveeit-pullquote {
		padding: 1.25rem;
	}

	.serveeit-media-row__text .serveeit-btn {
		width: 100%;
		min-height: 48px;
	}

	.serveeit-pain__cta .serveeit-btn {
		width: 100%;
	}

	.serveeit-contact-aside {
		padding: 1.25rem;
	}

	.serveeit-section__actions--center .serveeit-btn {
		width: 100%;
		max-width: 22rem;
	}

	.serveeit-price-card--featured {
		transform: none;
	}

	.serveeit-price-card .serveeit-btn {
		width: 100%;
		min-height: 48px;
	}

	.serveeit-footer__bar {
		padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
	}
}

/* -------------------------------------------------------------------------
   Narrow phones (≤480px)
   ------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
	.serveeit-stats__grid {
		grid-template-columns: 1fr;
	}

	.serveeit-eyebrow {
		letter-spacing: 0.18em;
		font-size: 0.72rem;
	}

	.serveeit-stat__label {
		font-size: 0.78rem;
	}
}

/* Touch devices only */
@media (hover: none) {
	.serveeit-card:hover,
	.serveeit-feature-card:hover {
		transform: none;
	}
}

@media (max-width: 1023.98px) {
	.serveeit-btn,
	.serveeit-nav a,
	.serveeit-card__link {
		touch-action: manipulation;
	}
}