/* ==========================================================================
   Droomwand — bibliotheek: categoriepagina's, zakelijke pagina's,
   voorbeeldenoverzicht en het detailontwerp (spec §9)
   Categoriepagina's ogen als atelier-portfolio, niet als een chiprij.
   ========================================================================== */

.library-page .page-kop {
	max-width: 40rem;
}

.seo-tekst {
	margin-top: var(--sp-11);
	padding-top: var(--sp-9);
	border-top: 1px solid var(--border);
	max-width: var(--max-smal);
}

/* --- Bibliotheekkaart: herkomstlabel over het beeld --- */
.library-card .card-pic {
	position: relative;
}

.library-card-herkomst {
	position: absolute;
	left: var(--sp-3);
	bottom: var(--sp-3);
}

/* --- Detailontwerp --- */
.library-single-grid {
	display: grid;
	gap: var(--sp-9);
}

/* Alleen de losse fallback-afbeelding (.card), niet de beelden in de
   mock-up: die wordt al door .mockup zelf afgerond met overflow:hidden, en
   een eigen radius op het behang zou binnen het wandvlak zichtbaar ronde
   hoeken geven. */
.library-single-beeld .card,
.library-single-beeld .card img {
	border-radius: var(--r-xl);
}

.library-single-beeld .card img {
	width: 100%;
	object-fit: cover;
}

.library-single-info h1 {
	margin-top: var(--sp-3);
}

.sfeerwoorden {
	margin-top: var(--sp-4);
}

.sfeerwoorden .chip {
	min-height: 2rem;
	padding-inline: var(--sp-3);
	font-size: var(--fs-xs);
	pointer-events: none;
}

.library-single-info .prose {
	margin-top: var(--sp-5);
}

.library-single-info .lead {
	margin-top: var(--sp-5);
	max-width: none;
}

.library-single-prijs {
	margin-top: var(--sp-7);
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--bg-elevated);
	box-shadow: inset 0 0 0 1px var(--border);
}

.library-single-prijs-bedrag {
	margin: var(--sp-1) 0 0;
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
}

@media (min-width: 64rem) {
	.library-single-grid {
		grid-template-columns: 1.2fr 1fr;
		align-items: start;
	}
}