/**
 * MediaOne Widgets — Digimetrics comparison table (skin).
 *
 * Structure and the mobile card re-flow live in mow-table.css. This file is
 * only what makes this section look like itself.
 *
 * This is the section that started the project: the original table rendered
 * 687px wide inside a 375px viewport and was clipped by an overflow-hidden
 * ancestor. The main culprit was `white-space: nowrap` on the award badge.
 */

.mow-cmp {
	/* One value drives every alignment in this section — `text-align`,
	   `align-items` and `justify-content` all accept start/center/end, so the
	   alignment control writes this once and the whole block follows. */
	--mow-align: center;

	/* Skin overrides for the shared table. Values from the original stylesheet. */
	--mow-tbl-crit-bg: var(--mow-sky);
	--mow-tbl-crit-border: 2px solid rgba(33, 90, 239, 0.12);
}

.mow-cmp__inner {
	max-width: 56rem;
	margin-inline: auto;
}

.mow-cmp__head {
	display: flex;
	flex-direction: column;
	align-items: var(--mow-align);
	text-align: var(--mow-align);
	margin-bottom: 2.5rem;
}

.mow-cmp__label {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mow-blue);
	background: var(--mow-sky);
	padding: 5px 16px;
	border-radius: 100px;
	margin-bottom: 14px;
}

.mow-cmp__title {
	font-weight: 900;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	line-height: 1.25;
	margin-top: 0.75rem;
}

.mow-cmp__hl {
	color: var(--mow-orange);
}

.mow-cmp__sub {
	color: var(--mow-muted);
	line-height: 1.7;
	max-width: 42rem;
	margin: 0.75rem 0 0;
}

.mow-cmp__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #fffbeb, #fef3c7);
	border: 1px solid #f59e0b;
	color: #92400e;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 100px;
	/* Deliberately NOT nowrap — that single declaration is what forced the
	   original table to 687px. Restored only where there is room for it. */
	white-space: normal;
}

.mow-cmp__foot {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: var(--mow-align);
	justify-content: var(--mow-align);
	gap: 1rem;
}

.mow-cmp__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--mow-blue);
	text-decoration: none;
}

.mow-cmp__link svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentColor;
}

@media (min-width: 768px) {

	.mow-cmp .mow-table thead th:first-child {
		width: 15%;
	}

	.mow-cmp__badge {
		white-space: nowrap;
	}

	.mow-cmp__foot {
		flex-direction: row;
	}
}