/**
 * MediaOne Widgets — shared comparison-table mechanics.
 *
 * The homepage has two "us vs them" tables. Both were unreadable on mobile:
 * wider than the viewport and clipped by an overflow-hidden wrapper. The fix is
 * the same for both, and it is fiddly enough (a visually-hidden thead whose
 * cells must also collapse, or they keep their full text width) that it lives in
 * one place rather than being copied.
 *
 * One DOM, two layouts: a real table from 768px up, labelled cards below it.
 *
 * Markup contract:
 *   <div class="mow-table__scroll">
 *     <table class="mow-table">
 *       <thead><tr><th scope="col">…</th> ×3</tr></thead>
 *       <tbody>
 *         <tr>
 *           <th scope="row">Criteria</th>
 *           <td data-label="Column 2 name">…</td>
 *           <td data-label="Column 3 name">…</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *
 * Skins set the --mow-tbl-* properties on the widget root; see
 * mow-digimetrics-compare.css and mow-compare.css.
 */

.mow-root {
	--mow-tbl-radius: 20px;
	--mow-tbl-shadow: 0 8px 40px rgba(0, 14, 62, 0.1);
	--mow-tbl-pad: 20px 24px;
	--mow-tbl-border: 1px solid #e5e7eb;

	--mow-tbl-head-bg: linear-gradient(135deg, var(--mow-deep), var(--mow-denim));
	--mow-tbl-head-color: #fff;
	--mow-tbl-head-size: 13px;

	--mow-tbl-crit-bg: transparent;
	--mow-tbl-crit-color: var(--mow-deep);
	--mow-tbl-crit-size: 12px;
	--mow-tbl-crit-border: none;

	--mow-tbl-body-size: 14px;
	--mow-tbl-us-bg: #fff;
	--mow-tbl-us-color: #1f2937;
	--mow-tbl-them-bg: #f9fafb;
	--mow-tbl-them-color: var(--mow-muted);
	--mow-tbl-hover: #f0f6ff;
}

/* Never overflow:hidden — that is what clipped the original tables. */
.mow-table__scroll {
	border-radius: var(--mow-tbl-radius);
}

.mow-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

/* Verdict marks. Decorative — the meaning is in the text beside them. */
.mow-table__win {
	color: #16a34a;
	font-weight: 700;
	margin-right: 4px;
}

.mow-table__lose {
	color: #ef4444;
	font-weight: 700;
	margin-right: 4px;
}

/* ── MOBILE (< 768px): each row becomes a labelled card ────────────────── */
@media (max-width: 767px) {

	.mow-table,
	.mow-table tbody,
	.mow-table tr,
	.mow-table tbody th,
	.mow-table td {
		display: block;
		width: 100%;
		text-align: left;
	}

	/* Visually hidden, still in the DOM for assistive tech. The cells collapse
	   too — otherwise each th keeps its full text width and measures past the
	   viewport, which is the exact symptom being fixed here. */
	.mow-table thead,
	.mow-table thead tr,
	.mow-table thead th {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mow-table tr {
		margin-bottom: 1rem;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 8px 30px rgba(0, 14, 62, 0.1);
		background: #fff;
	}

	/* Criteria becomes the card header. */
	.mow-table tbody th {
		padding: 0.875rem 1.25rem;
		font-size: var(--mow-tbl-crit-size);
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.09em;
		color: var(--mow-tbl-crit-color);
		background: var(--mow-tbl-card-head-bg, var(--mow-sky));
	}

	.mow-table td {
		padding: 1rem 1.25rem;
		font-size: var(--mow-tbl-body-size);
		line-height: 1.7;
	}

	.mow-table td:nth-child(2) {
		background: var(--mow-tbl-us-bg);
		color: var(--mow-tbl-us-color);
	}

	.mow-table td:nth-child(3) {
		background: var(--mow-tbl-them-bg);
		color: var(--mow-tbl-them-color);
		border-top: var(--mow-tbl-border);
	}

	/* Which column this cell came from. */
	.mow-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.375rem;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--mow-denim);
	}

	.mow-table td:nth-child(3)[data-label]::before {
		color: var(--mow-faint);
	}
}

/* ── DESKTOP (>= 768px): the original table ────────────────────────────── */
@media (min-width: 768px) {

	.mow-table__scroll {
		overflow-x: auto;
		box-shadow: var(--mow-tbl-shadow);
	}

	.mow-table {
		border-radius: var(--mow-tbl-radius);
		overflow: hidden;
	}

	.mow-table thead tr {
		background: var(--mow-tbl-head-bg);
	}

	.mow-table thead th {
		padding: var(--mow-tbl-pad);
		text-align: left;
		font-size: var(--mow-tbl-head-size);
		font-weight: 700;
		color: var(--mow-tbl-head-color);
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.mow-table tbody tr {
		border-bottom: var(--mow-tbl-border);
		transition: background 0.15s ease;
	}

	.mow-table tbody tr:last-child td {
		border-bottom: none;
	}

	.mow-table tbody tr:hover {
		background: var(--mow-tbl-hover);
	}

	.mow-table td,
	.mow-table tbody th {
		padding: var(--mow-tbl-pad);
		font-size: var(--mow-tbl-body-size);
		vertical-align: top;
		line-height: 1.7;
	}

	.mow-table tbody th {
		font-size: var(--mow-tbl-crit-size);
		font-weight: 800;
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 0.09em;
		color: var(--mow-tbl-crit-color);
		background: var(--mow-tbl-crit-bg);
		border-right: var(--mow-tbl-crit-border);
	}

	.mow-table td:nth-child(2) {
		color: var(--mow-tbl-us-color);
		background: var(--mow-tbl-us-bg);
	}

	.mow-table td:nth-child(3) {
		color: var(--mow-tbl-them-color);
		background: var(--mow-tbl-them-bg);
	}
}