/*
 * Transit & Flow mobile fit. Phones only (max-width 767px); desktop is untouched.
 * Fixes every element found pushing pages wider than the screen in the
 * Oct 2 2026 sitewide scan (327 URLs at 375px). Content is unchanged; only
 * how it reflows on a narrow screen.
 */
@media (max-width: 767px) {

	/* 1. Pricing and comparison tables (AI pricing snapshot boxes, guide tables).
	      tfmf.js labels each cell with its column heading and adds .tfmf-stack,
	      turning each row into a compact card. */
	.tf-ai-box {
		padding: 20px 16px 18px !important;
	}
	table.tf-ai-box-table.tfmf-stack,
	table.tf-table.tfmf-stack {
		display: block;
		width: 100%;
		border: 0;
		box-shadow: none;
		background: none;
		overflow: visible;
	}
	table.tfmf-stack > thead,
	table.tfmf-stack tr.tfmf-head {
		display: none !important;
	}
	table.tfmf-stack > tbody {
		display: block;
		width: 100%;
	}
	table.tfmf-stack tr {
		display: block;
		margin: 0 0 10px;
		padding: 12px 14px;
		background: #fff !important;
		border: 1px solid #D6E3EE;
		border-radius: 10px;
	}
	table.tfmf-stack tr.hl {
		border-color: #0092CD;
		box-shadow: inset 3px 0 0 #0092CD;
	}
	table.tfmf-stack td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 4px 0 !important;
		border: 0 !important;
		background: none !important;
		font-size: 14px;
		line-height: 1.45;
		text-align: right !important;
		color: #1F2D3D;
		overflow-wrap: anywhere;
	}
	table.tfmf-stack td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		max-width: 48%;
		text-align: left;
		font-size: 12.5px;
		font-weight: 600;
		color: #5B7186;
	}
	table.tfmf-stack td:first-child {
		display: block;
		text-align: left !important;
		font-size: 15px;
		font-weight: 700;
		color: #02264A;
		padding: 0 0 8px !important;
		margin: 0 0 4px;
		border-bottom: 1px solid #EEF2F6 !important;
	}
	table.tfmf-stack td:first-child::before {
		content: none;
	}
	/* Fallback if the script has not run: let headings wrap and tighten cells. */
	table.tf-ai-box-table:not(.tfmf-stack) th,
	table.tf-table:not(.tfmf-stack) th {
		white-space: normal !important;
	}
	table.tf-ai-box-table:not(.tfmf-stack) th,
	table.tf-ai-box-table:not(.tfmf-stack) td,
	table.tf-table:not(.tfmf-stack) th,
	table.tf-table:not(.tfmf-stack) td {
		padding: 8px 8px !important;
		font-size: 13px;
		overflow-wrap: anywhere;
	}

	/* 2. Long web addresses written out as link text in articles. */
	.elementor-widget-text-editor a,
	.elementor-widget-theme-post-content a {
		overflow-wrap: anywhere;
	}

	/* 3. Hand-built HTML sections with fixed multi-column grids (Service Areas,
	      Shop). Stack to one column on phones; two-up grids may shrink. */
	.elementor-widget-html [style*="grid-template-columns:repeat(3,1fr)"],
	.elementor-widget-text-editor [style*="grid-template-columns:repeat(3,1fr)"],
	.elementor-widget-html [style*="grid-template-columns:1.2fr 1fr"],
	.elementor-widget-text-editor [style*="grid-template-columns:1.2fr 1fr"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.elementor-widget-html [style*="grid-template-columns:1.2fr 1fr"][style*="padding:48px"] {
		padding: 28px 20px !important;
		gap: 28px !important;
	}
	.elementor-widget-html [style*="grid-template-columns:1fr 1fr"],
	.elementor-widget-text-editor [style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	/* Auto-fit grids whose minimum card width is wider than a small phone. */
	[style*="minmax(240px,1fr)"] {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
	}

	/* 4. Guide articles: cost cards and FAQ questions. */
	.tf-cost-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.tf-faq-q {
		white-space: normal !important;
		gap: 12px;
	}

	/* 5. Call-to-action banners with side-by-side buttons (Shop). */
	.elementor-widget-text-editor div[style*="display:flex"][style*="padding:32px 36px"] {
		padding: 24px 20px !important;
	}
	.elementor-widget-text-editor div[style*="display:flex;gap:12px;flex-shrink:0"] {
		flex-wrap: wrap !important;
		flex-shrink: 1 !important;
	}
}
@media (max-width: 360px) {
	.tf-cost-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}