/**
 * Styles for the WP-ImmoMakler elements in Enfold's Avia Layout Builder.
 *
 * The elements render their own markup rather than the skin's templates, so
 * none of the skin's `.immomakler`-scoped Bootstrap applies here. Everything
 * these elements need is in this file, kept deliberately plain so a theme's
 * own typography and colours come through.
 */

.immomakler-enfold-definition-list {
	display: grid;
	grid-template-columns: var(--immomakler-enfold-label-width, 40%) minmax(0, auto);
	margin: 0;
	container-type: inline-size;
}

.immomakler-enfold-definition-list dt {
	grid-column: 1;
	margin: 0;
	padding: 5px 3px;
	font-weight: 600;
	text-align: start;
}

.immomakler-enfold-definition-list dd {
	grid-column: 2;
	margin: 0;
	padding: 5px 3px;
	text-align: var(--immomakler-enfold-value-align, start);
}

.immomakler-enfold-definition-list dt,
.immomakler-enfold-definition-list dd {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/*
 * Two columns need room. Dropped into a third of a page -- a sidebar of
 * contact details, say -- the label column squeezes the value into an
 * unreadable ribbon, so below this width the rows stack instead.
 */
@container (max-width: 22rem) {

	.immomakler-enfold-definition-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.immomakler-enfold-definition-list dt,
	.immomakler-enfold-definition-list dd {
		grid-column: 1;
		text-align: start;
	}

	.immomakler-enfold-definition-list dt {
		padding-block-end: 0;
	}

	.immomakler-enfold-definition-list dd {
		padding-block-start: 0;
	}
}

.immomakler-enfold-definition-list--plain {
	display: block;
}

.immomakler-enfold-definition-list--plain > div {
	margin: 0;
	padding: 5px 3px;
	text-align: var(--immomakler-enfold-value-align, start);
}

.immomakler-enfold-definition-list--bordered dt,
.immomakler-enfold-definition-list--bordered dd,
.immomakler-enfold-definition-list--bordered > div {
	border-block-end: 1px solid var(--immomakler-enfold-border-color, rgba(0, 0, 0, 0.1));
}

.immomakler-enfold-features {
	list-style: none;
	margin: 0;
	padding: 0;
}

.immomakler-enfold-features--list {
	display: grid;
	grid-template-columns: repeat(var(--immomakler-enfold-feature-columns, 1), minmax(0, 1fr));
	column-gap: 1.5em;
}

.immomakler-enfold-features--inline {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
}

/*
 * Two classes deep on purpose: Enfold's own `.entry-content-wrapper li` sets a
 * left margin (and an inline-end one in RTL) that a single-class rule loses to.
 * These lists carry their own icons, so the indent is not wanted.
 */
.immomakler-enfold-features .immomakler-enfold-features__item,
.immomakler-enfold-linklist .immomakler-enfold-linklist__item,
.immomakler-enfold-videos .immomakler-enfold-videos__item {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin: 0;
	margin-inline: 0;
	padding: 3px 0;
}

.immomakler-enfold-features__icon {
	flex: 0 0 auto;
}

.immomakler-enfold-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.immomakler-enfold-linklist--inline {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
}

.immomakler-enfold-description > p:first-child {
	margin-block-start: 0;
}

.immomakler-enfold-description > p:last-child {
	margin-block-end: 0;
}

.immomakler-enfold-map {
	--immomakler-enfold-map-height: 350px;
}

.immomakler-enfold-map .immomakler-map,
.immomakler-enfold-map .immomakler-map-iframe,
.immomakler-enfold-map iframe {
	height: var(--immomakler-enfold-map-height);
}

.immomakler-enfold-videos {
	list-style: none;
	display: grid;
	gap: 1em;
	margin: 0;
	padding: 0;
}

.immomakler-enfold-videos .immomakler-enfold-videos__item {
	display: block;
}

.immomakler-enfold-tours {
	list-style: none;
	display: grid;
	gap: 1em;
	margin: 0;
	padding: 0;
}

.immomakler-enfold-tours .immomakler-enfold-tours__item {
	display: block;
	margin: 0;
	margin-inline: 0;
	padding: 0;
}

.immomakler-enfold-tours__frame {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.immomakler-enfold-excerpt,
.immomakler-enfold-status {
	margin: 0;
}

.immomakler-enfold-contact-photo {
	display: flex;
	justify-content: var(--immomakler-enfold-photo-align, flex-start);
	margin: 0;
	padding: 0;
}

.immomakler-enfold-contact-photo img {
	inline-size: 100%;
	max-inline-size: var(--immomakler-enfold-photo-max-width, 100%);
	block-size: auto;
	aspect-ratio: var(--immomakler-enfold-photo-ratio, auto);
	border-radius: var(--immomakler-enfold-photo-radius, 0);
	object-fit: cover;
	object-position: center center;
}