/*
 * Legacy page content.
 *
 * Pages carried over from the 2017 site lay themselves out with fixed-width
 * <table> elements and pixel-sized <iframe>s. On the Location page that put the
 * right half of the map past the edge of a phone screen — 571px of iframe in a
 * 390px viewport, unreachable and un-pannable, on the page whose whole job is
 * showing people where the community is.
 *
 * Constrain everything first, then stack the two-column layout on a phone so the
 * map gets the full width. The stacking is limited to tables that actually hold
 * an iframe, so real data tables elsewhere keep their columns; where `:has()` is
 * unsupported the content still fits, it just stays side by side.
 */

.entry table,
.entry iframe,
.entry img,
.entry embed,
.entry object {
	max-width: 100%;
}

.entry img { height: auto; }

@media only screen and (max-width: 767.98px) {
	.entry table:has(iframe),
	.entry table:has(iframe) tbody,
	.entry table:has(iframe) tr,
	.entry table:has(iframe) td {
		display: block;
		width: auto;
	}

	.entry table:has(iframe) td { padding: 0 0 1rem; }

	.entry table:has(iframe) iframe {
		width: 100%;
		height: 320px;
		border: 0;
	}
}