/* =========================================================
   DEVELOPMENT UNIT COMPARISON
   ========================================================= */

.ca-unit-compare {
	margin: 3rem 0;
}

.ca-unit-compare__header {
	margin-bottom: 1.25rem;
}

.ca-unit-compare__eyebrow {
	margin-bottom: 0.35rem;

	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;

	color: #b65c15;
}

.ca-unit-compare__title {
	margin: 0;

	font-size: 2rem;
	line-height: 1.15;
	font-weight: 800;

	color: #0e1b31;
}

.ca-unit-compare__intro {
	margin: 0.65rem 0 0;

	font-size: 1rem;
	line-height: 1.55;

	color: #526079;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

.ca-unit-compare__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;

	margin-bottom: 1rem;
}

.ca-unit-compare__filter {
	padding: 0.55rem 0.9rem;

	border: 1px solid #d8dee8;
	border-radius: 999px;

	background: #fff;

	font-size: 0.82rem;
	font-weight: 700;

	color: #526079;

	cursor: pointer;

	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.ca-unit-compare__filter:hover {
	border-color: #b65c15;
	color: #b65c15;
}

.ca-unit-compare__filter.is-active {
	border-color: #0e1b31;
	background: #0e1b31;
	color: #fff;
}


/* ---------------------------------------------------------
   TABLE CONTAINER
   --------------------------------------------------------- */

.ca-unit-compare__table-wrap {
	overflow-x: auto;

	border: 1px solid #d8dee8;
	border-radius: 14px;

	background: #fff;
}

.ca-unit-compare__table {
	min-width: 760px;
}


/* ---------------------------------------------------------
   ROWS
   --------------------------------------------------------- */

.ca-unit-compare__row {
	display: grid;
	grid-template-columns:
		minmax(170px, 1.5fr)
		60px
		90px
		105px
		105px
		115px
		90px;

	align-items: center;
	gap: 0;

	min-height: 66px;

	padding: 0 1rem;

	border-bottom: 1px solid #e3e7ed;

	text-decoration: none;

	color: #0e1b31;

	transition:
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.ca-unit-compare__row:last-child {
	border-bottom: 0;
}

.ca-unit-compare__row:not(.ca-unit-compare__row--head):hover {
	background: #fffaf5;
	box-shadow: inset 3px 0 0 #b65c15;
}


/* Header row */

.ca-unit-compare__row--head {
	min-height: 42px;

	background: #f8fafc;

	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;

	color: #8995aa;
}


/* ---------------------------------------------------------
   RESIDENCE
   --------------------------------------------------------- */

.ca-unit-compare__residence {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ca-unit-compare__residence strong {
	font-size: 0.92rem;
	font-weight: 750;
	line-height: 1.3;

	color: #0e1b31;
}

.ca-unit-compare__residence span {
	font-size: 0.72rem;
	color: #8995aa;
}


/* ---------------------------------------------------------
   CELLS
   --------------------------------------------------------- */

.ca-unit-compare__row > div:not(.ca-unit-compare__residence) {
	font-size: 0.86rem;
	color: #526079;
}

.ca-unit-compare__price {
	font-weight: 800 !important;
	color: #0e1b31 !important;
}

.ca-unit-compare__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;

	font-size: 0.76rem !important;
	font-weight: 750;

	color: #b65c15 !important;
}

.ca-unit-compare__action span {
	font-size: 1rem;
}


/* ---------------------------------------------------------
   SHOW ALL
   --------------------------------------------------------- */

.ca-unit-compare__footer {
	display: flex;
	justify-content: center;

	margin-top: 1rem;
}

.ca-unit-compare__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;

	padding: 0.65rem 1rem;

	border: 1px solid #d8dee8;
	border-radius: 999px;

	background: #fff;

	font-size: 0.82rem;
	font-weight: 700;

	color: #526079;

	cursor: pointer;
}

.ca-unit-compare__toggle:hover {
	border-color: #b65c15;
	color: #b65c15;
}


/* ---------------------------------------------------------
   HIDDEN ROWS
   --------------------------------------------------------- */

.ca-unit-compare__row[hidden] {
	display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.ca-unit-compare__title {
		font-size: 1.75rem;
	}

	.ca-unit-compare__table {
		min-width: 720px;
	}

}


/* =========================================================
   MOBILE — STACKED COMPARISON ROWS
   ========================================================= */

@media (max-width: 700px) {

	.ca-unit-compare {
		margin: 2.5rem 0;
	}

	.ca-unit-compare__title {
		font-size: 1.55rem;
	}

	.ca-unit-compare__intro {
		font-size: 0.92rem;
	}

	.ca-unit-compare__table-wrap {
		overflow: visible;

		border: 0;
		border-radius: 0;

		background: transparent;
	}

	.ca-unit-compare__table {
		min-width: 0;
	}

	.ca-unit-compare__row--head {
		display: none;
	}

	.ca-unit-compare__row {
		display: grid;
		grid-template-columns: 1fr 1fr;

		gap: 0.7rem 1rem;

		min-height: 0;

		margin-bottom: 0.75rem;
		padding: 1rem;

		border: 1px solid #d8dee8;
		border-radius: 12px;

		background: #fff;
	}

	.ca-unit-compare__row:last-child {
		border-bottom: 1px solid #d8dee8;
	}

	.ca-unit-compare__row:not(.ca-unit-compare__row--head):hover {
		box-shadow: none;
	}

	.ca-unit-compare__residence {
		grid-column: 1 / -1;

		padding-bottom: 0.65rem;

		border-bottom: 1px solid #eef1f5;
	}

	.ca-unit-compare__residence strong {
		font-size: 1rem;
	}

	.ca-unit-compare__row > div[data-label]::before {
		content: attr(data-label);

		display: block;
		margin-bottom: 0.2rem;

		font-size: 0.66rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;

		color: #8995aa;
	}

	.ca-unit-compare__row > div[data-label] {
		font-size: 0.88rem;
		color: #0e1b31;
	}

	.ca-unit-compare__price {
		font-size: 1rem !important;
	}

	.ca-unit-compare__action {
		grid-column: 1 / -1;

		justify-content: flex-start;

		padding-top: 0.4rem;

		border-top: 1px solid #eef1f5;
	}

}