@charset "UTF-8";

/**
 * Mobile overrides for TLE article bodies (editorial.ed_text).
 * Scoped to .tle-article-body so header/footer chrome is untouched.
 *
 * Do not set overflow-x: hidden on html/body — iOS Safari then drops
 * tap events on links. Clip overflow on the article wrapper only.
 */

.tle-article-body {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-x: clip;
	padding: 0 12px;
	box-sizing: border-box;
}

.tle-article-body *,
.tle-article-body *::before,
.tle-article-body *::after {
	box-sizing: border-box;
}

.tle-article-body table {
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.tle-article-body img {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.tle-article-body td,
.tle-article-body th {
	white-space: normal !important;
}

.tle-article-body a {
	position: relative;
	z-index: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Phone + tablet. Email tds use align="center"; that is ignored once
   cells become display:block, so restore centering here. */
@media (max-width: 1024px) {
	.tle-article-body,
	.tle-article-body p,
	.tle-article-body td,
	.tle-article-body th {
		text-align: center;
	}

	.tle-article-body table {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.tle-article-body table,
	.tle-article-body tbody,
	.tle-article-body thead,
	.tle-article-body tfoot,
	.tle-article-body tr,
	.tle-article-body td,
	.tle-article-body th {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		position: relative;
	}

	.tle-article-body td,
	.tle-article-body th {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}