/*
 * Section: Comparison.
 *
 * Loaded only on pages carrying the `comparison` layout.
 *
 * Design: the `#vs-buying-leads` block in Local SEO Desktop.
 *
 * ---------------------------------------------------------------------------
 * NEUTRALITY IS A REQUIREMENT OF THIS SECTION, NOT A PREFERENCE.
 *
 * The block is persuasive because it is fair. Every rule below applies to both
 * options identically — there is not one selector in this file that targets a
 * single option, and there must never be. Specifically, do not add:
 *
 *   - tick / cross marks, or any icon that scores an option
 *   - green / red, or any colour pairing that reads as right and wrong
 *   - a "recommended" flag, heavier border, shadow or tint on one side
 *   - different type sizes between the two options
 *
 * The comp does none of these. The ✓/✕ treatment in the design system belongs
 * to the checklist component and must not migrate here.
 * ---------------------------------------------------------------------------
 */


.comparison__inner {
	gap: 1.625rem; /* 26 */
}

.comparison__header {
	max-width: 68ch;
}

.comparison__heading {
	line-height: 1.02;
	max-width: 20ch;
}

.comparison__intro > * {
	margin: 0;
	max-width: 68ch;
	line-height: 1.7;
}

.comparison__intro > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================ OPTIONS ==
 *
 * auto-fit collapses to one column when there is not room for two, so the
 * stacked mobile case needs no breakpoint and no assumption about how many
 * options there are. align-items: stretch is what makes both panels the same
 * height — which is itself part of the even-handedness.
 */

.comparison__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280 */
	gap: var(--sq-space-card-gap);
	align-items: stretch;
}

.comparison__option {
	display: flex;
	flex-direction: column;
	border: var(--sq-border-width) solid var(--sq-color-ink);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

.comparison__option-label {
	margin: 0;
	padding: 0.875rem 1.25rem; /* 14 20 */
	border-bottom: var(--sq-border-width) solid var(--sq-color-ink);
	font-family: var(--sq-font-display);
	font-size: 1.625rem; /* 26 */
	font-weight: var(--sq-weight-bold);
	line-height: 1.1;
	text-transform: uppercase;
}

/*
 * gives and costs share the card between them. flex: 1 1 auto on both is the
 * mechanism: whichever answer is shorter, neither block can shrink into a
 * footnote. The admission is as tall as the pitch.
 */
.comparison__facet {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--sq-space-2);
	padding: 1.25rem; /* 20 */
}

/*
 * The only distinction between the two blocks: a tint and a hairline. Applied
 * to the costs block on BOTH options, so it separates the two questions
 * rather than the two answers.
 */
.comparison__facet--costs {
	border-top: var(--sq-border-width-hair) solid var(--sq-color-hairline);
	background-color: var(--sq-color-surface-raised);
}

.comparison__facet-label {
	margin: 0;
	font-family: var(--sq-font-body);
	font-size: var(--sq-text-micro); /* 12 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	line-height: 1.5;
	text-transform: uppercase;
}

/* Neutral grey for the question everyone answers comfortably... */
.comparison__facet--gives .comparison__facet-label {
	color: var(--sq-color-support);
}

/*
 * ...and the accent for the one that takes nerve. Note this is on both
 * options: it marks the *question*, not a verdict on the answer.
 * --sq-color-orange-text rather than the fill orange, which fails AA at this
 * size on the tinted background.
 */
.comparison__facet--costs .comparison__facet-label {
	color: var(--sq-color-orange-text);
}

.comparison__facet-body > * {
	margin: 0;
	font-size: 1.0625rem; /* 17 */
	line-height: 1.65;
	text-wrap: pretty;
}

.comparison__facet-body > * + * {
	margin-top: var(--sq-space-3);
}


/* ============================================================ CLOSING ==
 *
 * Sits under both columns, attached to neither. The left rule marks it as the
 * resolution rather than a third option.
 */

.comparison__closing {
	padding-left: 1.125rem; /* 18 */
	border-left: 3px solid var(--sq-border);
	max-width: 68ch;
}

.comparison__closing > * {
	margin: 0;
	font-size: var(--sq-text-lead);
	font-weight: var(--sq-weight-medium);
	line-height: var(--sq-leading-relaxed);
	text-wrap: pretty;
}

.comparison__closing > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	.comparison__inner {
		gap: 1.75rem; /* 28 */
	}

	.comparison__facet {
		padding: 1.25rem 1.25rem 1.5rem;
	}
}