/**
 * MediaOne Widgets — "More Than a Typical Agency" comparison table (skin).
 *
 * Structure and the mobile card re-flow live in mow-table.css.
 *
 * The original table only overflowed by ~2px at 375px, so it was cramped rather
 * than clipped — but it shares the same failure mode as the Digimetrics table
 * and gets the same card layout on mobile.
 */

.mow-why {
	/* 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:
	   header 12px (text-xs), criteria cell 14px bold on white, no tint. */
	--mow-tbl-head-size: 12px;
	--mow-tbl-crit-size: 14px;
	--mow-tbl-crit-bg: #fff;
	--mow-tbl-them-bg: #fff;
	--mow-tbl-them-color: var(--mow-faint);
	--mow-tbl-border: 1px solid #f3f4f6;
	--mow-tbl-shadow: 0 20px 25px -5px rgba(0, 14, 62, 0.1);
}

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

.mow-why__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-why__title {
	font-weight: 900;
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
	line-height: 1.25;
	margin-top: 0.5rem;
}

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

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

/* Trust pills above the table. */
.mow-why__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mow-align);
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.mow-why__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--mow-blue);
	background: #fff;
	border: 1px solid #f3f4f6;
	box-shadow: 0 1px 3px rgba(0, 14, 62, 0.1);
}

.mow-why__pill svg {
	width: 0.875rem;
	height: 0.875rem;
	flex: 0 0 auto;
	fill: currentColor;
}

/* Unlike the Digimetrics table, this section's criteria column is sentence case
   at both sizes — matching the original. */
.mow-why .mow-table tbody th {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 700;
}

.mow-why__foot {
	margin-top: 2rem;
	text-align: var(--mow-align);
}

.mow-why__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 2rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, var(--mow-blue), var(--mow-denim));
	box-shadow: 0 10px 15px -3px rgba(0, 14, 62, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mow-why__cta:hover,
.mow-why__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 24px -6px rgba(0, 14, 62, 0.24);
	color: #fff;
}

.mow-why__cta svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

@media (min-width: 768px) {

	/* The wrapper carries the border in this section. Desktop only — on mobile
	   the cards have their own radius and shadow, and `overflow: hidden` here
	   would reintroduce the exact clipping this plugin exists to fix. */
	.mow-why .mow-table__scroll {
		border: 1px solid #f3f4f6;
		overflow: hidden;
	}

	/* Column widths from the original: w-1/4, w-5/12, w-1/3. */
	.mow-why .mow-table thead th:nth-child(1) {
		width: 25%;
	}

	.mow-why .mow-table thead th:nth-child(2) {
		width: 41.666667%;
	}

	.mow-why .mow-table thead th:nth-child(3) {
		width: 33.333333%;
	}

	/* "MediaOne ✓" header is gold; "Others ✗" is white at 60%. */
	.mow-why .mow-table thead th:nth-child(2) {
		color: var(--mow-yellow);
	}

	.mow-why .mow-table thead th:nth-child(3) {
		opacity: 0.6;
	}
}