/*
 * Comparison Table widget (desktop-first layout).
 *
 * Three equal columns of individually rounded "chip" cells: the feature label
 * (white), our value (red, checkmark), the competing value (pearl, cross).
 * Columns line up across rows because every row is the same flex row of three
 * `flex: 1 1 0` cells with the same gap — no grid needed, which is what lets
 * the whole thing restack per-feature at <=960px (see the bottom of this file).
 */

.redteam-comparison-table {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

.redteam-comparison-table__body {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}

.redteam-comparison-table__row {
	display: flex;
	align-items: stretch;
	gap: var(--s2);
}

.redteam-comparison-table__cell {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s2) var(--s4);
	border-radius: var(--s1);
	font-size: var(--font-text-size, 18rem);
	line-height: 1.7;
	letter-spacing: 0.18rem;
}

.redteam-comparison-table__cell-body {
	min-width: 0;
}

/* --- Header row ----------------------------------------------------------- */

/*
 * The header carries no chip background, and its first cell sits flush left
 * (the heading aligns to the table's edge, not to the feature cells' padding).
 */
.redteam-comparison-table__row--head .redteam-comparison-table__cell {
	padding-block: 0;
	background: none;
}

/*
 * The heading sits flush to the table's left edge, but zeroing the padding on a
 * `flex: 1 1 0` cell would make it 2 × --s4 narrower than its neighbours (padding
 * counts toward the outer size the flex algorithm balances), shifting the two
 * column headers off the columns below them. Moving that same amount into
 * flex-basis keeps every cell's outer width identical.
 */
.redteam-comparison-table__cell--title {
	padding-inline: 0;
	flex-basis: calc(var(--s4) * 2);
}

/* `:root:root :is(h1..h6)` in style.css sets a top margin on every heading. */
.redteam-comparison-table__heading {
	margin: 0 !important;
	color: var(--color-black-500, #000000);
}

.redteam-comparison-table__column-label {
	font-weight: 600;
	color: var(--color-walnut-400, #3f2e2b);
}

.redteam-comparison-table__logo {
	display: block;
	width: auto;
	height: 33rem;
	max-width: 100%;
}

/* --- Body cells ----------------------------------------------------------- */

.redteam-comparison-table__cell--feature {
	background-color: var(--color-white, #fffffd);
	color: var(--color-walnut-400, #3f2e2b);
	font-weight: 600;
}

.redteam-comparison-table__cell--ours {
	background-color: var(--color-red-200-base, #ed1b24);
	color: var(--color-white, #fffffd);
}

.redteam-comparison-table__cell--other {
	background-color: var(--color-pearl-200-base, #f0ebe5);
	color: var(--color-black-300, #555555);
}

/*
 * Mask-driven icons (same technique as the Quote widget's quote mark), so the
 * glyph colour is one declaration and the shared theme SVGs can be reused
 * as-is regardless of the `fill` baked into them.
 */
.redteam-comparison-table__icon {
	flex-shrink: 0;
	width: var(--s4);
	height: var(--s4);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.redteam-comparison-table__icon--check {
	mask-image: url(../../assets/images/icon-checkmark.svg);
	-webkit-mask-image: url(../../assets/images/icon-checkmark.svg);
	background-color: var(--color-white, #fffffd);
}

.redteam-comparison-table__icon--cross {
	mask-image: url(../../assets/images/icon-cross.svg);
	-webkit-mask-image: url(../../assets/images/icon-cross.svg);
	background-color: var(--color-walnut-400, #3f2e2b);
}

/* Only surfaced by the stacked mobile layout below. */
.redteam-comparison-table__cell-label {
	display: none;
}

/* --- Stacked layout ------------------------------------------------------- */

/*
 * No mobile design exists for this component yet, so rather than shrink three
 * columns into an unreadable strip (or force a horizontal scroll, which hides
 * the comparison a reader is trying to make), each feature becomes its own
 * stack: the feature label, then our value, then the other value. The column
 * headers can't align to anything once stacked, so they're dropped and each
 * value cell surfaces its own column label instead.
 */
@media (width <= 960px) {

	.redteam-comparison-table {
		gap: var(--s4);
	}

	.redteam-comparison-table__body {
		gap: var(--s4);
	}

	.redteam-comparison-table__row {
		flex-direction: column;
		gap: var(--s05);
	}

	.redteam-comparison-table__cell--head-ours,
	.redteam-comparison-table__cell--head-other {
		display: none;
	}

	/*
	 * A value-less body cell is an alignment spacer on desktop; stacked it's just
	 * an empty coloured box. Scoped to __body so the heading's own cell (which
	 * holds no __value) survives.
	 */
	.redteam-comparison-table__body .redteam-comparison-table__cell:not(:has(.redteam-comparison-table__value)) {
		display: none;
	}

	.redteam-comparison-table__cell {
		align-items: flex-start;
	}

	.redteam-comparison-table__cell-body {
		display: flex;
		flex-direction: column;
	}

	.redteam-comparison-table__cell-label {
		display: block;
		font-size: var(--font-body-small-size-tablet, 14rem);
		font-weight: 600;
		line-height: 1.4;
		opacity: 0.75;
	}

	.redteam-comparison-table__icon {
		/* Keep the glyph on the first line of a wrapping value. */
		margin-top: 6rem;
	}

	.redteam-comparison-table__heading {
		width: 100%;
		text-align: center;
	}
}