/**
 * Mobile tuning — scoped fixes for zainsaeed.com (hybrid PHP + WP).
 * Load after main.css / home-landing.css.
 *
 * @package Zainsaeed
 */

/* -------------------------------------------------------------------------
   Sitewide — prevent horizontal scroll & text inflation
   ------------------------------------------------------------------------- */

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

img,
video,
iframe {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   Notched phones (requires viewport-fit=cover on meta viewport)
   ------------------------------------------------------------------------- */

@supports (padding: max(0px)) {
	.zs-header {
		padding-top: env(safe-area-inset-top, 0px);
	}

	.zs-drawer {
		padding-top: env(safe-area-inset-top, 0px);
	}
}

/* -------------------------------------------------------------------------
   Touch targets — header drawer & chrome
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.zs-header__burger {
		min-width: 44px;
		min-height: 44px;
	}

	.zs-drawer__close {
		min-width: 44px;
		min-height: 44px;
	}

	.zs-drawer__link,
	.zs-drawer__group-toggle {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.zs-drawer__sub a {
		min-height: 40px;
		display: flex;
		align-items: center;
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

/* -------------------------------------------------------------------------
   Hero & CTA spacing on small screens
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.zs-home-php .zs-home-hero-shell--editorial.ls-section--hero,
	.zs-home-php .zs-page-hero,
	.zs-labs-page .zs-labs-hero {
		padding-top: calc(var(--header-height) + var(--space-5)) !important;
		padding-bottom: var(--space-7) !important;
	}

	.zs-home-php .zs-home-hero__cta,
	.zs-labs-page .zs-labs-hero__cta {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: var(--space-3);
	}

	.zs-home-php .zs-home-hero__cta .button,
	.zs-labs-page .zs-labs-hero__cta .button {
		width: 100%;
		min-height: 44px;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}

	.zs-home-php .zs-home-trust-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.container {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	.zs-wpdev-benefits__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Mobile sticky CTA bar — safe-area clearance for page content
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	body:not(.zs-no-scroll):not(.zs-page-portfolio):not(.zs-page-portfolio-view) {
		padding-bottom: max(76px, calc(58px + env(safe-area-inset-bottom, 0px)));
	}

	body.zs-no-scroll {
		padding-bottom: 0;
	}
}

/* Full-viewport portfolio embed — hide bottom CTA bar (conflicts with iframe) */
@media (max-width: 768px) {
	body.zs-page-portfolio .zs-mobile-cta,
	body.zs-page-portfolio-view .zs-mobile-cta {
		display: none !important;
	}

	body.zs-page-portfolio,
	body.zs-page-portfolio-view {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* -------------------------------------------------------------------------
   Portfolio directory iframe — mobile scroll & overflow
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.site-main--portfolio .zs-portfolio-embed {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		min-height: calc(100dvh - var(--header-height) - env(safe-area-inset-bottom, 0px));
	}

	.site-main--portfolio .zs-portfolio-embed__frame {
		min-height: calc(100dvh - var(--header-height) - env(safe-area-inset-bottom, 0px));
		height: calc(100dvh - var(--header-height) - env(safe-area-inset-bottom, 0px));
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		touch-action: pan-y;
	}
}

@media (max-width: 640px) {
	.site-main--portfolio-view .zs-portfolio-view__frame-wrap,
	.site-main--portfolio-view .zs-portfolio-view__frame {
		min-height: calc(100dvh - var(--header-height) - 14rem - env(safe-area-inset-bottom, 0px));
		height: calc(100dvh - var(--header-height) - 14rem - env(safe-area-inset-bottom, 0px));
	}
}

/* -------------------------------------------------------------------------
   Labs / Next.js showcase
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.zs-labs-page .zs-labs-hero h1 {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
		max-width: none;
	}

	.zs-labs-page .zs-labs-trust {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.zs-labs-page .pulse-lab__toast {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		max-width: calc(100vw - 2rem);
		text-align: center;
	}
}