/**
 * Table Block — front end.
 *
 * TinyMCE writes its own inline styles for anything set through Table
 * Properties, and inline styles always win over these rules. So this file only
 * supplies sensible defaults and the things TinyMCE has no concept of, such as
 * behaviour on small screens.
 */

.tblk {
	max-width: 100%;
	/* A grid or flex item will not shrink below its content without this, and
	   a wide table would then stretch the whole page. */
	min-width: 0;
	margin: 0 0 1.5em;
}

/*
 * Containment, at every width. A table wider than the space available scrolls
 * inside this box rather than pushing the page sideways.
 */
.tblk-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tblk table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: var(--tblk-font-size, inherit);
}

.tblk th,
.tblk td {
	padding: 10px 12px;
	border: 1px solid #d2d7e2;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.tblk th {
	background-color: #1a73e8;
	color: #fff;
	font-weight: 600;
}

.tblk th a {
	color: inherit;
}

.tblk caption {
	padding: 6px 0;
	color: #555d6b;
	font-size: 0.875em;
}

/* Optional treatments, driven by the block's sidebar toggles. */
.tblk--striped tbody tr:nth-child(even) > * {
	background-color: rgba(0, 0, 0, 0.035);
}

.tblk--compact th,
.tblk--compact td {
	padding: 6px 8px;
}

/* ------------------------------------------------------------------
 * Small screens
 *
 * The overrides below use !important on purpose. TinyMCE writes pixel widths
 * onto the table and its cells when you resize a column, and an inline style
 * cannot be beaten any other way. Those widths are what usually makes a table
 * overflow a phone screen.
 * --------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Fit to screen: ignore the stored widths and let the text wrap. */
	.tblk--m-fit table {
		width: 100% !important;
		min-width: 0 !important;
		table-layout: fixed;
	}

	.tblk--m-fit th,
	.tblk--m-fit td {
		width: auto !important;
		min-width: 0 !important;
		padding: 8px;
		font-size: 0.95em;
	}

	/* Stack: every cell becomes a full width block, one row per card. */
	.tblk--m-stack table,
	.tblk--m-stack thead,
	.tblk--m-stack tbody,
	.tblk--m-stack tfoot,
	.tblk--m-stack tr,
	.tblk--m-stack th,
	.tblk--m-stack td {
		display: block;
		width: 100% !important;
		min-width: 0 !important;
	}

	.tblk--m-stack table {
		table-layout: auto;
	}

	.tblk--m-stack tr {
		margin-bottom: 10px;
		border: 1px solid #d2d7e2;
		border-radius: 6px;
		overflow: hidden;
	}

	.tblk--m-stack tr:last-child {
		margin-bottom: 0;
	}

	.tblk--m-stack th,
	.tblk--m-stack td {
		border: 0;
		border-bottom: 1px solid #e6e9f0;
	}

	.tblk--m-stack tr > *:last-child {
		border-bottom: 0;
	}
}