/* VAPR Print Manager – elementet «VAPR materialer» (0.8.0, #23).
 * Fast stil på designvariablene (reserveverdier som Standard 1). Tåler 1–7 materialer. Ingen JavaScript.
 */
.vpm-mat {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.vpm-mat > li { margin: 0; padding: 0; }

/* --- Kort og stripe: sentrerte kort som brytes pent ---------------- */
.vpm-mat--kort,
.vpm-mat--stripe {
	--vpm-mat-kol: 4;
	--vpm-mat-gap: var(--space-m, 24px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vpm-mat-gap);
}
.vpm-mat--n1 { --vpm-mat-kol: 1; }
.vpm-mat--n2 { --vpm-mat-kol: 2; }
.vpm-mat--n3 { --vpm-mat-kol: 3; }
.vpm-mat--n4 { --vpm-mat-kol: 4; }
.vpm-mat--n5 { --vpm-mat-kol: 5; }
.vpm-mat--n6 { --vpm-mat-kol: 3; }
.vpm-mat--n7 { --vpm-mat-kol: 4; }

.vpm-mat--kort .vpm-mat__kort,
.vpm-mat--stripe .vpm-mat__kort {
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--vpm-mat-kol) - 1) * var(--vpm-mat-gap)) / var(--vpm-mat-kol));
	min-width: 0;
	/* Ett eller to materialer skal ikke bli kjempestore. */
	max-width: 360px;
}
.vpm-mat--kort .vpm-mat__kort { align-items: center; text-align: center; }
.vpm-mat--stripe .vpm-mat__kort { gap: var(--space-xs, 8px); text-align: center; }

.vpm-mat .vpm-mat__bilde {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-card, 0px);
}
.vpm-mat .vpm-mat__bilde--tom { background: var(--color-border, #e0e0e0); }

.vpm-mat--kort .vpm-mat__navn {
	margin: var(--space-xs, 8px) 0 0;
	font-size: var(--text-m, 18px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-text, #212121);
}
.vpm-mat--kort .vpm-mat__tekst {
	margin: var(--space-2xs, 4px) 0 0;
	font-size: var(--text-s, 14px);
	line-height: 1.6;
	color: var(--color-text-muted, #616161);
}
.vpm-mat--stripe .vpm-mat__navn {
	margin: 0;
	text-align: center; /* Alltid midtstilt under bildet (0.74.1, #88) – ikke valg i portalen. */
	font-size: var(--text-s, 14px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text, #212121);
}

@media (max-width: 991px) {
	.vpm-mat--n5 { --vpm-mat-kol: 3; }
}
@media (max-width: 767px) {
	.vpm-mat--kort,
	.vpm-mat--stripe { --vpm-mat-kol: 2; --vpm-mat-gap: var(--space-s, 16px); row-gap: var(--space-m, 24px); }
	.vpm-mat--kort.vpm-mat--n1,
	.vpm-mat--stripe.vpm-mat--n1 { --vpm-mat-kol: 1; }
}

/* --- Rader: Materialvalg-siden ------------------------------------- */
.vpm-mat--rader {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl, 80px);
}
.vpm-mat--rader .vpm-mat__rad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: var(--space-2xl, 80px);
	scroll-margin-top: calc(var(--header-height, 64px) + var(--space-m, 24px));
}
.vpm-mat--rader .vpm-mat__rad--uten-bilde { grid-template-columns: minmax(0, 1fr); }
.vpm-mat--rader .vpm-mat__rad:nth-child(even) .vpm-mat__bilde { order: 2; }
.vpm-mat--rader .vpm-mat__bilde { aspect-ratio: 4 / 3; }
.vpm-mat--rader .vpm-mat__innhold {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs, 8px);
	max-width: 34em;
}
.vpm-mat--rader .vpm-mat__navn {
	margin: 0;
	font-size: var(--text-l, 24px);
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-text, #212121);
}
.vpm-mat--rader .vpm-mat__kort-tekst {
	margin: 0;
	font-size: var(--text-s, 14px);
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-text, #212121);
}
.vpm-mat--rader .vpm-mat__tekst {
	font-size: var(--text-s, 14px);
	line-height: 1.7;
	color: var(--color-text-muted, #616161);
}
.vpm-mat--rader .vpm-mat__tekst p,
.vpm-mat--rader .vpm-mat__tekst ul { margin: 0 0 0.8em; }
.vpm-mat--rader .vpm-mat__tekst ul { padding-left: 1.3em; }
.vpm-mat--rader .vpm-mat__tekst > :last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.vpm-mat--rader { gap: var(--space-xl, 48px); }
	.vpm-mat--rader .vpm-mat__rad { grid-template-columns: minmax(0, 1fr); gap: var(--space-m, 24px); }
	.vpm-mat--rader .vpm-mat__rad:nth-child(even) .vpm-mat__bilde { order: 0; }
}