/**
 * Eckdaten-Übersicht — front end.
 *
 * The key figures above the Eckdaten table. Same approach as
 * `eckdaten.css`: every value is a custom property on `.sh-uebersicht`, so the
 * whole block can be retuned from Elementor's custom CSS without touching the
 * plugin:
 *
 *     .sh-uebersicht { --sh-uebersicht-value-size: 32px; }
 *
 * Type and colour match the Eckdaten table — the two sit directly above one
 * another on a property page and are read as one block. What differs is the
 * hierarchy: in the table the label and the value carry the same weight, here
 * the value is the thing being scanned and the label only says what it is.
 */

.sh-uebersicht {
	--sh-uebersicht-font: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--sh-uebersicht-columns: 2;
	--sh-uebersicht-column-gap: 40px;
	--sh-uebersicht-row-gap: 28px;

	--sh-uebersicht-label-size: 15px;
	--sh-uebersicht-label-weight: 400;
	--sh-uebersicht-label-color: #6f6a66;
	--sh-uebersicht-label-spacing: 0.04em;
	--sh-uebersicht-label-gap: 4px;

	--sh-uebersicht-value-size: 24px;
	--sh-uebersicht-value-size-mobile: 20px;
	--sh-uebersicht-value-weight: 300;
	--sh-uebersicht-value-color: #3a3a3a;
	--sh-uebersicht-value-line: 1.3;
	--sh-uebersicht-link-color: #8b6a58;

	--sh-uebersicht-rule: #dcdcdc;
	--sh-uebersicht-rule-width: 0;

	font-family: var(--sh-uebersicht-font);
	color: var(--sh-uebersicht-value-color);
	max-width: 100%;
}

/*
 * Dropped into containers this plugin does not control, exactly like the
 * table. A theme still on `content-box` would otherwise let the cell padding
 * push the grid wider than its column.
 */
.sh-uebersicht,
.sh-uebersicht * {
	box-sizing: border-box;
}

.sh-uebersicht .sh-uebersicht__grid {
	display: grid;
	grid-template-columns: repeat(var(--sh-uebersicht-columns), minmax(0, 1fr));
	column-gap: var(--sh-uebersicht-column-gap);
	row-gap: var(--sh-uebersicht-row-gap);
	margin: 0;
	padding: 0;
}

.sh-uebersicht .sh-uebersicht__cell {
	min-width: 0;
	padding-bottom: var(--sh-uebersicht-row-gap);
	border-bottom: var(--sh-uebersicht-rule-width) solid var(--sh-uebersicht-rule);
}

/*
 * `dt` and `dd` come with a browser indent and a theme margin apiece, and both
 * would break the column alignment the grid exists for.
 */
.sh-uebersicht .sh-uebersicht__label,
.sh-uebersicht .sh-uebersicht__value {
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.sh-uebersicht .sh-uebersicht__label {
	margin-bottom: var(--sh-uebersicht-label-gap);
	font-size: var(--sh-uebersicht-label-size);
	font-weight: var(--sh-uebersicht-label-weight);
	letter-spacing: var(--sh-uebersicht-label-spacing);
	color: var(--sh-uebersicht-label-color);
	hyphens: auto;
}

.sh-uebersicht .sh-uebersicht__value {
	font-size: var(--sh-uebersicht-value-size);
	font-weight: var(--sh-uebersicht-value-weight);
	line-height: var(--sh-uebersicht-value-line);
	color: var(--sh-uebersicht-value-color);
}

/* --------------------------------------------- markup inside a value -- */

/*
 * These values are short by contract — a word, a figure, a half sentence — but
 * they carry the same field allowlist as every other property field, because
 * `170 m<sup>2</sup>` is how the client writes m². A value pasted out of Word
 * can also arrive wrapped in a paragraph, and that paragraph's theme margin
 * would knock its cell out of line with its neighbours.
 */
.sh-uebersicht__value > :first-child {
	margin-top: 0;
}

.sh-uebersicht__value > :last-child {
	margin-bottom: 0;
}

.sh-uebersicht__value p {
	margin: 0;
}

.sh-uebersicht__value a {
	color: var(--sh-uebersicht-link-color);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sh-uebersicht__value strong,
.sh-uebersicht__value b {
	font-weight: 500;
}

.sh-uebersicht__value sup,
.sh-uebersicht__value sub {
	font-size: 0.65em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.sh-uebersicht__value sup {
	top: -0.5em;
}

.sh-uebersicht__value sub {
	bottom: -0.25em;
}

/* ------------------------------------------------------- responsive -- */

/*
 * Two columns survive a tablet; on a phone «Verkaufspreis» and its figure do
 * not share 170px with anything. Scoped to `--auto-stack`, which the shortcode
 * adds and the Elementor widget does not — the widget offers the column count
 * as a per-breakpoint control, and a fixed rule here would fight it.
 */
@media (max-width: 600px) {
	.sh-uebersicht--auto-stack {
		--sh-uebersicht-row-gap: 20px;
	}

	/*
	 * `grid-template-columns` rather than the `--sh-uebersicht-columns`
	 * variable, because the shortcode writes that variable as an inline style
	 * and an inline style wins against any stylesheet. This rule carries the
	 * same specificity as the one it overrides and simply comes after it.
	 */
	.sh-uebersicht--auto-stack .sh-uebersicht__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sh-uebersicht--auto-stack .sh-uebersicht__value {
		font-size: var(--sh-uebersicht-value-size-mobile);
	}
}

/* Editor-only, when there is no property or no Übersicht to show. */
.sh-uebersicht--placeholder {
	padding: 16px 20px;
	border: 1px dashed var(--sh-uebersicht-rule);
	color: var(--sh-uebersicht-label-color);
	font-size: 14px;
}

@media print {
	.sh-uebersicht__cell {
		break-inside: avoid;
	}
}