/* Keep the document inside the mobile viewport without blocking zoom or vertical scrolling. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

body > *,
main,
.site,
.site-content,
.wp-site-blocks {
	max-width: 100%;
}

img,
svg,
video,
canvas,
iframe,
input,
select,
textarea,
button {
	max-width: 100%;
}

pre,
table {
	max-width: 100%;
	overflow-x: auto;
}

p,
li,
a,
code {
	overflow-wrap: anywhere;
}

@media (max-width: 880px) {
	html,
	body {
		width: 100%;
	}

	.tga-shell,
	.tga-header__inner,
	.tga-section-heading,
	.tga-card-grid,
	.tga-category-grid,
	.tga-results-layout,
	.tga-detail-layout,
	.tga-detail-hero__grid,
	.tga-live-map-shell,
	.leaflet-container {
		min-width: 0;
		max-width: 100%;
	}

	/* The full-bleed story image used a 40px gutter while the mobile shell uses 28px. */
	.tga-story-band__visual {
		width: 100vw;
		max-width: 100vw;
		margin-right: calc((100% - 100vw) / 2);
		margin-left: calc((100% - 100vw) / 2);
	}

	.tga-saved-panel,
	.tga-save-toast {
		max-width: calc(100vw - 16px);
	}
}