/**
 * acf/lvl-factbox. Oracle: section.case-content-meta (font-size --base-xs, inner wrap
 * padding --base-100 top/bottom, none at the sides) > .meta-columns (flex, gap 5rem;
 * column below 992; grid below 768) > .w-1000 + .meta--infobox (500px, border-top 1px;
 * rows .case--info-row with a 3px rule) > .case-content-meta-taglist (pills).
 * Both columns are size containers like the oracle (.meta-columns > div), so the fluid
 * label size (--lvl-fs-xs, cqw) follows the column width.
 */

.lvl-factbox {
	font-size: var(--lvl-fs-xs);
}

/* Size normal: body text size (oracle: the figma post's factbox outside .case-content-meta). */
.lvl-factbox--normal {
	font-size: inherit;
}

/* Padding on the inner element: .lvl-flow strips section padding in case/blog bodies. */
.lvl-factbox__columns {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 5rem;
	padding-block: var(--lvl-space-100);
}

.lvl-factbox__main,
.lvl-factbox__info {
	container-type: inline-size;
}

.lvl-factbox__main {
	width: 100%;
	max-width: var(--lvl-width-narrow);
}

/* Two classes: the theme's .lvl-eyebrow { margin: 0 } loads after block styles. */
.lvl-factbox .lvl-factbox__label {
	margin-bottom: 2rem;
}

.lvl-factbox__text > :first-child {
	margin-top: 0;
}

.lvl-factbox__text > :last-child {
	margin-bottom: 0;
}

.lvl-factbox__info {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-self: flex-start; /* own height, not the text column's (oracle .meta--infobox) */
	width: 31.25rem;
	max-width: 100%;
	margin: 0;
	border-top: 1px solid;
}

.lvl-factbox__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.56rem;
	padding-block: 1.4rem;
	border-bottom: 3px solid;
}

.lvl-factbox__desc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.56rem;
	width: 100%;
	margin: 0;
}

.lvl-factbox__note {
	font-size: var(--lvl-fs-xs);
}

.lvl-factbox__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lvl-fs-xs);
	width: 100%;
	margin: 0.625rem 0 0;
	padding: 0;
	list-style: none;
}

.lvl-factbox__tags li {
	display: flex;
}

/* Variant "Kleine Werte" (oracle GRS: values carry .case-content-meta, label and
   .meta-columns carry .mb-40). Values and label gap resolve in the column containers
   (12.8px / 26.24px at 1440); the 40px under the columns resolve on the viewport. */
.lvl-factbox--small-values .lvl-factbox__desc > :is(.lvl-factbox__link, .lvl-factbox__value) {
	font-size: var(--lvl-fs-xs);
}

.lvl-factbox--small-values .lvl-factbox__label {
	margin-bottom: var(--lvl-space-40);
}

.lvl-factbox--small-values .lvl-factbox__columns {
	padding-bottom: calc(var(--lvl-space-100) + var(--lvl-space-40));
}

.lvl-factbox__empty {
	padding: var(--lvl-space-40);
	border: 1px dashed currentColor;
}

@media (max-width: 991px) {
	.lvl-factbox__columns {
		flex-direction: column;
	}

	.lvl-factbox__info {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.lvl-factbox__columns {
		display: grid;
		grid-template-columns: minmax(12.5rem, 1fr);
		align-items: stretch;
		gap: 4rem 2rem;
	}
}

/* Image instead of label + text (case Thermochema: .w-1000 > img, natural ratio). */
.lvl-factbox__image {
	display: block;
	width: 100%;
	height: auto;
}