/*
 * Pricing Comparison widget (desktop-first layout).
 *
 * A feature-label column plus up to five data columns, butted edge to edge with
 * no gutters, so each column reads as one continuous panel. Every row is the
 * same flex row of equally flexing cells, so columns line up without a grid —
 * which is what lets each row restack independently at <=960px.
 */

.redteam-pricing-comparison {
	/* No Kit global matches these three fills. */
	--redteam-pricing-comparison-ours-bg: #facacc;
	--redteam-pricing-comparison-other-bg: #d9cfcd;
	--redteam-pricing-comparison-other-head-bg: #6e4f4a;

	/* No theme token matches the design's 13.5 cell type. */
	--redteam-pricing-comparison-value-size: 14rem;

	--redteam-pricing-comparison-head-height: 51rem;
	--redteam-pricing-comparison-banner-overhang: 23rem;

	display: flex;
	flex-direction: column;

	/* Reserves the space the featured banner overhangs its row into. */
	padding-top: var(--redteam-pricing-comparison-banner-overhang);
}

.redteam-pricing-comparison__body {
	display: flex;
	flex-direction: column;
}

.redteam-pricing-comparison__row {
	display: flex;
	align-items: stretch;
}

.redteam-pricing-comparison__cell {
	flex: 1 1 0;
	min-width: 0;
	letter-spacing: 0.01em;
	overflow-wrap: break-word;
}

/* The design's 209:245 column ratio, expressed as flex-grow against a 0 basis. */
.redteam-pricing-comparison__cell--label {
	flex-grow: 0.853;
}

.redteam-pricing-comparison__cell-inner {
	position: relative;
	padding: var(--s4);
}

/*
 * Pseudo-element rather than a border, so the divider sits inset within the
 * cell's padding instead of running the column's full width.
 */
.redteam-pricing-comparison__cell-inner::before {
	content: '';
	position: absolute;
	inset: 0 var(--s4) auto;
	border-top: 1rem dashed var(--color-black-300, #555555);
}

/* No divider above the first row — it's the top edge of each panel. */
.redteam-pricing-comparison__body .redteam-pricing-comparison__row:first-child .redteam-pricing-comparison__cell-inner::before {
	content: none;
}

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

/*
 * Stretch keeps every header's bottom level (so column bodies start on the same
 * line) even when a brand name wraps to two lines. The featured banner earns its
 * extra height by overhanging upward instead, so it doesn't drag the rest along.
 */
.redteam-pricing-comparison__cell--head {
	display: flex;
	align-items: center;
	min-height: var(--redteam-pricing-comparison-head-height);
	font-size: var(--font-text-size, 18rem);
	line-height: 1.5;
}

/*
 * No header in the design for the feature column — this cell is just an
 * alignment spacer, unless an optional heading is set.
 */
.redteam-pricing-comparison__cell--head-title {
	display: flex;
	align-items: flex-end;
}

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

.redteam-pricing-comparison__cell--head-other {
	background-color: var(--redteam-pricing-comparison-other-head-bg);
	color: var(--color-white-200-base, #fffffd);
	border-start-start-radius: var(--s1);
	border-start-end-radius: var(--s1);
}

/*
 * The featured banner's shape is assets/masks/notch-pricing.svg (the exact
 * Figma path — clip-path: polygon() can't express its rounded corner and eased
 * diagonal). Mask sized `100%` (width only, auto height) anchored `left bottom`,
 * NOT `100% 100%`: auto height keeps the asset's true ratio instead of skewing
 * it with the column width, and bottom-anchoring avoids a hairline seam a
 * stretched mask leaves on a fractional pixel edge. Below ~4 data columns the
 * columns widen enough that this clips the shape's top instead — give the banner
 * an aspect-ratio + max-height if a narrower layout needs it.
 *
 * The negative margin is what makes it overhang: on a stretch row, cross size is
 * line-height minus margins, so -23 buys 23 of extra height going upward without
 * dragging the competitor bars along with it.
 */
.redteam-pricing-comparison__cell--head-ours {
	margin-top: calc(var(--redteam-pricing-comparison-banner-overhang) * -1);
	background-color: var(--color-red-200-base, #ed1b24);
	color: var(--color-white-200-base, #fffffd);
	mask-image: url('./../../assets/masks/notch-pricing.svg');
	mask-repeat: no-repeat;
	mask-position: left bottom;
	mask-size: 100%;
	-webkit-mask-image: url('./../../assets/masks/notch-pricing.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left bottom;
	-webkit-mask-size: 100%;
}

/* Regular weight, per the design — not the bolded column heads of the sibling widget. */
.redteam-pricing-comparison__column-label {
	margin-inline: var(--s4);
}

/*
 * Mask-driven logo (same technique as the Quote widget's quote mark), so it
 * renders white on the red banner regardless of the fills baked into the file.
 */
.redteam-pricing-comparison__logo {
	display: block;
	width: 165rem;
	height: 29rem;
	max-width: calc(100% - var(--s4) * 2);
	margin-inline: var(--s4);
	mask-image: var(--redteam-pricing-comparison-logo);
	mask-repeat: no-repeat;
	mask-position: left center;
	mask-size: contain;
	-webkit-mask-image: var(--redteam-pricing-comparison-logo);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	-webkit-mask-size: contain;
	background-color: var(--color-white, #ffffff);
}

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

.redteam-pricing-comparison__body .redteam-pricing-comparison__cell {
	color: var(--color-walnut-400, #3f2e2b);
}

/*
 * Scoped to __body: the header row's first cell shares this class (for its
 * flex-grow), and an unscoped background here would paint a pearl block above
 * the feature column that the design doesn't have.
 */
.redteam-pricing-comparison__body .redteam-pricing-comparison__cell--label {
	background-color: var(--color-pearl-100, #f5f2ee);
	font-size: var(--font-text-size, 18rem);
	line-height: 1.5;
}

.redteam-pricing-comparison__cell--ours {
	background-color: var(--redteam-pricing-comparison-ours-bg);
}

.redteam-pricing-comparison__cell--other {
	background-color: var(--redteam-pricing-comparison-other-bg);
}

.redteam-pricing-comparison__cell--ours,
.redteam-pricing-comparison__cell--other {
	font-size: var(--redteam-pricing-comparison-value-size);
	line-height: 1.7;
}

/* --- Panel corners -------------------------------------------------------- */

/* Square where the feature column butts the featured column, per the design. */
.redteam-pricing-comparison__body .redteam-pricing-comparison__row:first-child .redteam-pricing-comparison__cell--label {
	border-start-start-radius: var(--s1);
}

.redteam-pricing-comparison__body .redteam-pricing-comparison__row:last-child .redteam-pricing-comparison__cell {
	border-end-start-radius: var(--s1);
	border-end-end-radius: var(--s1);
}

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

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

/*
 * No mobile design exists. Six columns can't shrink into a readable strip and a
 * horizontal scroll would hide the comparison itself, so each feature becomes
 * its own stack: the feature label as a card, then one card per column, each
 * surfacing its own column label since the headers can no longer align to
 * anything.
 */
@media (width <= 960px) {

	.redteam-pricing-comparison {
		padding-top: 0;
	}

	.redteam-pricing-comparison__body {
		gap: var(--s5);
	}

	.redteam-pricing-comparison__row {
		flex-direction: column;
		gap: var(--s2);
	}

	.redteam-pricing-comparison__cell {
		flex: 0 0 auto;
	}

	.redteam-pricing-comparison__body .redteam-pricing-comparison__row .redteam-pricing-comparison__cell {
		border-radius: var(--s1);
	}

	.redteam-pricing-comparison__cell--head {
		display: none;
	}

	/*
	 * A value-less cell is an alignment spacer on desktop; stacked it's just an
	 * empty coloured box. Scoped to __body so the heading's cell survives.
	 */
	.redteam-pricing-comparison__body .redteam-pricing-comparison__cell:not(:has(.redteam-pricing-comparison__value)) {
		display: none;
	}

	.redteam-pricing-comparison__cell-inner {
		display: flex;
		flex-direction: column;
		gap: var(--s05);
		padding: var(--s3) var(--s4);
	}

	.redteam-pricing-comparison__cell-inner::before {
		content: none;
	}

	.redteam-pricing-comparison__cell--label .redteam-pricing-comparison__cell-inner {
		padding-block: var(--s2);
	}

	.redteam-pricing-comparison__body .redteam-pricing-comparison__cell--label {
		font-size: var(--font-text-size-tablet, 18rem);
		font-weight: 600;
	}

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

	/* Keeps our column reading as the featured one without its banner. */
	.redteam-pricing-comparison__cell--ours .redteam-pricing-comparison__cell-label {
		color: var(--color-red-200-base, #ed1b24);
		opacity: 1;
	}
}