/**
 * TEAB Projektfakta – faktarutor för enskild projektsida.
 *
 * Hämtar fakta (område, ort, år, beställare, omfattning, entreprenadform, status)
 * från det aktuella projektet och visar dem som en ren spec-tabell. Self-contained
 * och scoped under .teab-projektfakta. Färger/typsnitt via CSS-variabler → temat.
 *
 * @package Teab_Moduler
 */

.teab-projektfakta {
	--_ink:    var(--teab-projektfakta-ink, var(--teab-text, #14201A));
	--_muted:  var(--teab-projektfakta-muted, var(--teab-muted, #5C6B61));
	--_accent: var(--teab-projektfakta-accent, var(--teab-accent, #008A2B));
	--_line:      var(--teab-projektfakta-line, color-mix(in srgb, var(--_ink) 16%, transparent));
	--_line-soft: var(--teab-projektfakta-line-soft, color-mix(in srgb, var(--_ink) 9%, transparent));
	--_surface:   var(--teab-projektfakta-surface, var(--teab-panel, #FFFFFF));

	--_font-ui:      var(--teab-projektfakta-font-ui, var(--font-ui, inherit));
	--_font-display: var(--teab-projektfakta-font-display, var(--font-display, var(--_font-ui)));

	--_cols: var(--teab-projektfakta-cols, repeat(auto-fit, minmax(190px, 1fr)));

	font-family: var(--_font-ui);
	color: var(--_ink);
}

.teab-projektfakta *,
.teab-projektfakta *::before,
.teab-projektfakta *::after { box-sizing: border-box; }

.teab-projektfakta--dark {
	--teab-projektfakta-ink: #EDF4EF;
	--teab-projektfakta-muted: rgba(237, 244, 239, 0.62);
	--teab-projektfakta-accent: var(--teab-accent-bright, #34AC5C);
	--teab-projektfakta-surface: var(--teab-panel, #161D17);
}

.teab-projektfakta__eyebrow {
	font-family: var(--_font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--_muted);
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.teab-projektfakta__eyebrow::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: var(--_accent);
}

.teab-projektfakta__heading {
	margin: 0 0 28px;
	font-family: var(--_font-display);
	font-weight: var(--teab-projektfakta-title-weight, 700);
	font-size: clamp(26px, 3vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--_ink);
}

.teab-projektfakta__grid {
	display: grid;
	grid-template-columns: var(--_cols);
	column-gap: 28px;
	border-bottom: 1px solid var(--_line);
}

.teab-projektfakta__item {
	padding: 15px 0;
	border-top: 1px solid var(--_line);
}
.teab-projektfakta__label {
	font-family: var(--_font-ui);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--_muted);
	font-weight: 600;
	margin-bottom: 6px;
}
.teab-projektfakta__value {
	font-family: var(--_font-ui);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
	color: var(--_ink);
}

.teab-projektfakta__empty {
	padding: 40px;
	border: 1px dashed var(--_line);
	color: var(--_muted);
	font-family: var(--_font-ui);
	text-align: center;
}

/* ============ VARIANT: Kompakt rad (etikett · värde, 2 kolumner) ============ */
.teab-projektfakta--kompakt .teab-projektfakta__grid {
	grid-template-columns: 1fr 1fr;
	column-gap: 52px;
	border-bottom: none;
}
.teab-projektfakta--kompakt .teab-projektfakta__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 13px 0;
	border-top: 1px solid var(--_line-soft);
}
.teab-projektfakta--kompakt .teab-projektfakta__item:nth-child(-n+2) { border-top: none; }
.teab-projektfakta--kompakt .teab-projektfakta__label {
	margin-bottom: 0;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: none;
}
.teab-projektfakta--kompakt .teab-projektfakta__value {
	font-size: 15px;
	text-align: right;
}

/* ============ VARIANT: Inramat (1px-hårlinjer + ram, som projektkorten) ============ */
.teab-projektfakta--inramat .teab-projektfakta__grid {
	gap: 1px;
	column-gap: 1px;
	background: var(--_line);
	border: 1px solid var(--_line);
}
.teab-projektfakta--inramat .teab-projektfakta__item {
	background: var(--_surface);
	padding: 20px 22px;
	border-top: none;
}

/* ============ VARIANT: Smal lista (sidokolumn, inline rader) ============ */
.teab-projektfakta--smal .teab-projektfakta__grid {
	display: block;
	max-width: 560px;
	border-bottom: none;
}
.teab-projektfakta--smal .teab-projektfakta__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 14px 0;
	border-top: none;
	border-bottom: 1px solid var(--_line-soft);
}
.teab-projektfakta--smal .teab-projektfakta__item:first-child { border-top: 1px solid var(--_line-soft); }
.teab-projektfakta--smal .teab-projektfakta__label {
	margin-bottom: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.teab-projektfakta--smal .teab-projektfakta__value {
	font-family: var(--_font-display);
	font-weight: var(--teab-projektfakta-title-weight, 700);
	font-size: 17px;
	letter-spacing: -0.01em;
	text-align: right;
}

/* ============ RESPONSIVT ============ */
@media (max-width: 600px) {
	.teab-projektfakta { --_cols: 1fr 1fr; }
	/* Kompakt: en kolumn på mobil, rätt linjer. */
	.teab-projektfakta--kompakt .teab-projektfakta__grid { grid-template-columns: 1fr; }
	.teab-projektfakta--kompakt .teab-projektfakta__item:nth-child(-n+2) { border-top: 1px solid var(--_line-soft); }
	.teab-projektfakta--kompakt .teab-projektfakta__item:first-child { border-top: none; }
}