.profile-page {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	grid-template-columns: 1fr;
}

.profile-section {
	width: 100%;
	border-radius: var(--wp--preset--spacing--xs);
	background-color: var(--wp--preset--color--neutral-100);
	padding: var(--wp--preset--spacing--lm);
	display: flex;
	flex-direction: column;
}

.profile-heading-wrapper {
	margin-top: var(--wp--preset--spacing--l);
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		transform: translateY(-56px);
		background: radial-gradient(50% 50% at 50% 50%, rgba(255, 77, 0, 0.24) 0%, rgba(255, 77, 0, 0) 100%);
		backdrop-filter: blur(100px);
	}
}

.profile-heading {
	padding-top: 0;
	--agent-photo-size: 198px;
	z-index: 1;
	position: relative;
	display: grid;
	grid-template-columns: auto 2fr 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--l);


	.agent-photo {
		margin-top: calc(-1 * var(--wp--preset--spacing--l));
		border: 6px solid var(--wp--preset--color--neutral-100);
		background: var(--wp--preset--color--neutral-100);
	}

	.agent-contact-details 		a {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.agent-bio {
	gap: var(--wp--preset--spacing--xs);
}

.profile-listings {
	grid-column: 1 / 2;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.listings {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.property-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0;
	padding: 0;
	min-height: 187px;
	text-decoration: none;

	.open-houses {
		margin-bottom: var(--wp--preset--spacing--xs);
		gap: var(--wp--preset--spacing--3-xs);
		flex-wrap: nowrap;
		align-items: stretch;
	}
}

.open-house-badge {
	padding: 6px var(--wp--preset--spacing--xs);
	background-color: #FBEAE2;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--accent-02);

	&:not(.more-open-houses) {
		width: fit-content;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	&.more-open-houses {
		padding: 6px;
		display: flex;
		align-items: center;
	}
}

.property-photo {
	aspect-ratio: 16 / 9;
	max-width: 40%;
	height: 100%;
	border-top-left-radius: var(--wp--preset--spacing--xs);
	border-bottom-left-radius: var(--wp--preset--spacing--xs);
	overflow: hidden;
	flex-shrink: 0;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.no-photo {
		background-color: var(--wp--preset--color--neutral-99);
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
	}
}

.property-details {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

.row.property-specs {
	gap: var(--wp--preset--spacing--sm);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--s);
}

.property-attribute {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3-xs);
}

.row.property-address {
	margin-top: var(--wp--preset--spacing--2-xs);
	gap: var(--wp--preset--spacing--3-xs);

	svg path[fill] {
		fill: var(--wp--preset--color--neutral-20);
	}

	svg path[stroke] {
		stroke: var(--wp--preset--color--neutral-20);
	}
}

.no-listings {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--sm);
	height: 100%;
}

.contact-form .contact-form-wrapper {
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--sm) - 6px);

	h2 {
		margin-bottom: calc(var(--wp--preset--spacing--3-xs) + 6px);
	}

	.wp-block-button {
		margin-top: calc(var(--wp--preset--spacing--3-xs) + 6px);
	}

	.wp-element-button {
		width: 100%;
	}
}



@media screen and (min-width: 1025px) {
	.profile-page {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto auto 1fr;

		&:not(:has(.agent-bio)) {
			grid-template-rows: auto 1fr;
		}
	}

	.profile-heading-wrapper {
		grid-column: 1 / 3;
	}

	.write-message-button {
		display: none;
	}

	.contact-form {
		grid-column: 2 / 3;
		grid-row: 2 / 4;
	}

	.profile-page:not(:has(.agent-bio)) .profile-listings {
		grid-row: 2 / 4;
	}
}

/* TABLET */

@media screen and (max-width: 1024px) {
	.profile-heading-wrapper {
		margin-top: var(--wp--preset--spacing--lm);

		&::after {
			transform: translateY(-40px);
		}
	}

	.profile-heading {
		grid-template-columns: auto 1fr;
		align-items: start;
		row-gap: var(--wp--preset--spacing--sm);

		.agent-info {
			margin-top: var(--wp--preset--spacing--l);
		}

		.agent-photo {
			grid-row: 1 / 4;
			grid-column: 1 / 2;
		}

		.agent-contact-details, .write-message-button {
			grid-column: 2 / 3;
		}
	}

	.write-message-button.wp-block-button[class*="is-style-ohp-button"][class*="-small"] .wp-element-button {
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--2-xl);
	}

	.property-details {
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	}

	.property-photo {
		aspect-ratio: 4 / 3;
		max-width: 250px;
	}
}

@media screen and (max-width: 767px) {
	.profile-heading {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--xs);

		.agent-info {
			margin-top: 0;
		}

		.agent-contact-details {
			margin-top: var(--wp--preset--spacing--2-xs);
		}
	}

	.write-message-button.wp-block-button[class*="is-style-ohp-button"][class*="-small"] ,
	.write-message-button.wp-block-button[class*="is-style-ohp-button"][class*="-small"] .wp-element-button {
		width: 100%;
	}

	.profile-listings {
		overflow: hidden;
	}

	.property-card {
		flex-direction: column;
		min-height: unset;

		.property-photo {
			height: auto;
			width: 100%;
			border-radius: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs) 0 0;
			aspect-ratio: 16 / 9;
			max-width: unset;
		}

		.property-price {
			justify-content: space-between;
		}
	}

	.property-details {
		width: 100%;
		padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
	}

	.row.property-specs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--wp--preset--spacing--xs);
		row-gap: var(--wp--preset--spacing--2-xs);
	}
}