/**
 * Still Water Cabin comparison (Figma "M4 Signature · Cabin comparison", 10:6493 / 10:7600 /
 * 10:8704). White section, padding 104 on desktop.
 *
 * Desktop: label (12, muted) and title (h1, 16 apart) in 744 at the left; the line (body-lg,
 * muted) in 400 at the right, level with the bottom of the title. 40 under them the table,
 * 1200 wide: a 264 label column and three 312 cabin columns, each padded 12 at the sides.
 * Head row: photo 288 × 180 (radius 12), name (h3) 12 under it, rate (16/24 muted) 12 under
 * that, 20 under the row; the note bottom-left. Rows: 1px rule on top, padding 14; labels
 * small muted, values 16/24 ink (semibold in the price row). Buttons row: rule, the buttons
 * (secondary, 288) centred in 100 under 20. 40 under the table: the hint (body-lg, muted) and,
 * 24 to its right, the request button, both at the right.
 * Tablet: heading stacked (20); the table scrolls in its 770 frame without its buttons, which
 * form their own row (246 each, 16 apart) 40 under it; the hint at the left, the button at the
 * right. Phone: title h2, line 16/24; the table scrolls with its buttons; the hint, then the
 * button at full width, 24 apart.
 */

.sw-compare {
	--sw-compare-rule: var(--sw-line);
}

.sw-compare.sw-pad {
	padding-top: var(--sw-pad-t, 104px);
	padding-bottom: var(--sw-pad-b, 104px);
}

.sw-compare__head {
	display: grid;
	grid-template-columns: minmax(0, 744px) minmax(0, 400px);
	justify-content: space-between;
	align-items: end;
	gap: 20px 56px;
	margin-bottom: 40px;
}

.sw-compare__title .sw-eyebrow {
	margin-bottom: 16px;
}

.sw-compare__scroll {
	overflow-x: auto;
	scrollbar-width: none;
}

.sw-compare__scroll::-webkit-scrollbar {
	display: none;
}

.sw-compare__table {
	width: 1200px;
	max-width: none;
	border-collapse: collapse;
	table-layout: fixed;
	text-align: left;
}

.sw-compare__heads > :first-child {
	width: 264px;
}

.sw-compare__heads td,
.sw-compare__heads th {
	padding: 0 12px 20px;
	vertical-align: top;
}

.sw-compare__heads .sw-compare__note {
	padding-left: 0;
	vertical-align: bottom;
}

.sw-compare__col {
	font-weight: 400;
}

.sw-compare__photo {
	overflow: hidden;
	height: 180px;
	border-radius: var(--sw-radius);
	background: var(--sw-c-line);
}

.sw .sw-compare__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sw-compare__name {
	display: block;
	margin-top: 12px;
}

.sw-compare__rate {
	display: block;
	margin-top: 12px;
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

.sw-compare__row > * {
	padding: 14px 12px;
	border-top: 1px solid var(--sw-compare-rule);
	vertical-align: top;
}

.sw-compare__row > .sw-compare__label {
	padding: 14px 16px 14px 0;
	font-weight: 400;
}

.sw-compare__cell {
	color: var(--sw-heading);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

.sw-compare__row--strong .sw-compare__cell {
	font-weight: 600;
}

.sw-compare__actions > * {
	height: 121px;
	padding: 20px 12px 0;
	border-top: 1px solid var(--sw-compare-rule);
	vertical-align: middle;
}

.sw-compare__view {
	width: 100%;
}

/* Tablet buttons row (outside the table). */
.sw-compare__views {
	display: none;
}

.sw-compare__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	margin-top: 40px;
}

/* Tablet (834). */
@media (max-width: 1024px) {
	.sw-compare.sw-pad {
		padding-top: var(--sw-pad-t, var(--sw-section-pad));
		padding-bottom: var(--sw-pad-b, var(--sw-section-pad));
	}

	.sw-compare__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.sw-compare__actions {
		display: none;
	}

	.sw-compare__views {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		margin-top: 40px;
	}

	.sw-compare__foot {
		justify-content: space-between;
	}
}

/* Phone (390): the buttons go back into the scrolling table. */
@media (max-width: 767px) {
	.sw-compare__actions {
		display: table-row;
	}

	.sw-compare__views {
		display: none;
	}

	.sw-compare__text {
		font-size: var(--sw-fs-body);
		line-height: var(--sw-lh-body);
	}

	.sw-compare__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.sw-compare__hint {
		font-size: var(--sw-fs-body);
		line-height: var(--sw-lh-body);
	}

	.sw-compare__request {
		width: 100%;
	}
}