.immovables-page {
	padding-bottom: 24px;
}

.immovables-page__hero-group {
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.immovables-page__map-button {
	display: flex;
	flex-direction: column;
}

/* immovable-card */
.immovable-card {
	--bg-color: var(--neutral-0000);

	padding: 20px;
	display: grid;
	gap: 20px;
	background-color: var(--bg-color);

	font-weight: var(--fw-400);
	font-size: 14px;
	line-height: 20px;
}
.immovable-card:hover,
.immovable-card:focus-visible {
	--bg-color: var(--neutral-0050);
}

.immovable-card__grid-group {
	--grid-group-gap: 8px;

	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--grid-group-gap);
}

.immovable-card__image {
	position: relative;
	height: 180px;
	border-radius: 4px;
	overflow: hidden;
}
.immovable-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.immovable-card__image:not(:has(img)) {
	background: url('../../images/placeholder.svg') no-repeat center center / 48px var(--neutral-0100);
}

.immovable-card__image small {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;

	padding: 4px 4px 0 0;
	background-color: var(--bg-color);
	border-top-right-radius: 4px;

	font-weight: var(--fw-400);
	font-size: 12px;
	line-height: 12px;
	color: var(--neutral-0600);
}
.immovable-card__image small::before,
.immovable-card__image small::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 4px;
	height: 4px;
	background: url('../../images/immovable-card-corner.svg') no-repeat center center;
}
.immovable-card__image small::after {
	inset: auto auto 0 100%;
}

.immovable-card__main {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.immovable-card__name {
	position: relative;
	width: 100%;
	display: flex;

	font-weight: var(--fw-600);
	font-size: 16px;
	line-height: 24px;
	color: var(--neutral-0900);
	white-space: nowrap;
	overflow: hidden;
}
.immovable-card__name::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 20px;
	background: linear-gradient(270deg, var(--bg-color) 0%, transparent 100%);
}
.immovable-card__name:hover,
.immovable-card__name:focus-visible {
	text-decoration: underline;
}

.immovable-card__meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--neutral-0600);
}

.immovable-card__info {
	--gradient-edge: var(--neutral-0000);
	--gradient-center: var(--neutral-0150);

	position: relative;
	padding-top: 8px;
	display: flex;
	color: var(--neutral-1000);
}
.immovable-card__info::before,
.immovable-card__address::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-image: linear-gradient(90deg, var(--neutral-0200) 0%, var(--neutral-0050) 100%);
}
.immovable-card__info > div + div {
	margin-left: 12px;
	padding-left: 13px;
	position: relative;
}
.immovable-card__info > div + div::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 1px;

	background: linear-gradient(var(--gradient-edge) 0%, var(--gradient-center) 50%, var(--gradient-edge) 100%);
}
.immovable-card__info dt {
	color: var(--neutral-0600);
}

.immovable-card__description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	color: var(--neutral-0800);
}

.immovable-card__address {
	position: relative;
	padding: 7px 0 0 20px;
	display: flex;
	flex-direction: column;
	background: url('../../images/immovable-card-address.svg') no-repeat left 9px;
	line-height: 18px;
	color: var(--neutral-0500);
}
.immovable-card__address b {
	font-weight: var(--fw-450);
	line-height: 20px;
	color: var(--neutral-0800);
}

.immovable-card__subscription {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.immovable-card__subscription span {
	display: flex;
	gap: 4px;
}
.immovable-card__subscription .button._contrast + span {
	padding-left: 24px;
	background: url('../../images/immovable-card-subscription.svg') no-repeat center left;
}

@media (max-width: 767.98px) {
	.immovable-card__description,
	.immovable-card .seller-info__name,
	.immovable-card .seller-info__rating,
	.immovable-card .seller-info__reviews {
		display: none;
	}

	.immovable-card .seller-info {
		margin-top: calc(-1 * var(--grid-group-gap));
		position: relative;
	}
	.immovable-card .seller-info__name-group {
		position: absolute;
		right: 0;
		bottom: 100%;
		padding: 4px 0 0 4px;
		background-color: var(--neutral-0000);
		border-top-left-radius: 4px;
	}
	.immovable-card .seller-info__name-group::before,
	.immovable-card .seller-info__name-group::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 100%;
		width: 4px;
		height: 4px;
		background: url('../../images/immovable-card-corner.svg') no-repeat center center;
		transform: rotate(-90deg);
	}
	.immovable-card .seller-info__name-group::after {
		inset: auto 100% 0 auto;
	}
}

@media (min-width: 768px) {

	/* immovable-card */
	.immovable-card {
		grid-template-columns: 220px 1fr;
	}

	.immovable-card__image {
		height: 220px;
	}

	.immovable-card__info {
		--gradient-edge: var(--contrast-0100);
		--gradient-center: var(--contrast-0600);

		padding: 8px 12px;
		background-color: var(--contrast-0100);
		box-shadow: inset 0 0 0 1px var(--contrast-0600);
		border-radius: 4px;
	}
	.immovable-card__info::before {
		content: none;
	}

	.immovables-page__pagination {
		padding-top: 16px;
	}
}

@media (min-width: 1140px) {
	.immovables-page__hero-group {
		padding-top: 2px;
		flex-direction: row;
	}
	.immovables-page__hero-group .immovables-hero {
		flex-grow: 1;
	}

	.immovables-page__map-button {
		position: relative;
		flex-shrink: 0;
		width: 264px;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		box-shadow: inset 0 0 0 1px var(--neutral-1000-012);
		overflow: hidden;
		background: url('../../images/immovables-map-button.jpg') no-repeat center center / 100%;
		transition: background 560ms cubic-bezier(0, 0.6, 0, 1);
	}

	.immovables-page__map-button:has(.button:hover),
	.immovables-page__map-button:has(.button:focus-visible) {
		background-size: calc(100% + 8px);
	}
	.immovables-page__map-button .button {
		position: static;
		background-color: var(--neutral-0000);
	}
	.immovables-page__map-button .button::after {
		content: '';
		position: absolute;
		inset: 0;
	}
	.immovables-page__map-button .button:hover {
		background-color: var(--bg-hover-color);
	}
	.immovables-page__map-button .button:focus {
		background-color: var(--bg-hover-color);
	}
	.immovables-page__map-button .button:active {
		background-color: var(--bg-active-color);
	}

	/* immovable-card */
	.immovable-card {
		grid-template-columns: 220px 1fr 244px;
	}
	.immovable-card__grid-group {
		display: contents;
	}
	.immovable-card__image {
		height: auto;
		grid-row: span 2;
	}
	.immovable-card__main {
		grid-column: 2;
		grid-row: 1 / 3;
		padding-right: 40px;
	}

	.immovable-card__subscription {
		flex-direction: column-reverse;
	}

	.immovables-page__pagination {
		justify-content: center;
	}
}