/* Scoped to the homepage concept previews. */
#concepts .voorbeeld {
  background:var(--concept-bg);
  background:color-mix(in srgb,var(--concept-accent) 24%,var(--concept-bg));
  color:var(--concept-ink);
  border-top:5px solid var(--concept-accent);
}
#concepts .voorbeeld .knop {background:var(--concept-ink);color:var(--concept-bg)}
#concepts .concept-palette-label {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:18px;font-size:.75rem;color:var(--muted)}
#concepts [data-palette-name] {font-weight:600;color:var(--ink)}
#concepts .concept-swatches {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:8px}
#concepts .concept-swatch {
  appearance:none;box-sizing:border-box;position:relative;min-width:0;min-height:44px;padding:5px;
  border:2px solid transparent;border-radius:9px;background:transparent;cursor:pointer;
}
#concepts .concept-swatch::before {content:"";display:block;height:30px;border-radius:5px;background:linear-gradient(135deg,var(--swatch-accent) 0 72%,var(--swatch-bg) 72%);box-shadow:inset 0 0 0 1px #00000012}
#concepts .concept-swatch[aria-pressed="true"] {border-color:var(--ink)}
#concepts .concept-swatch:hover {background:var(--lijn)}
#concepts .concept-swatch:focus-visible {outline:2px solid var(--ink);outline-offset:2px}
#concepts .concept-swatch:disabled {cursor:default}

/* Use the available desktop width for three concepts per row. */
.lp #concepts > .wrap{max-width:1680px;padding-inline:clamp(16px,3vw,48px)}
#concepts .concepten{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#concepts .concept-structured .voorbeeld{border:12px solid var(--concept-ink);text-align:left;display:grid;grid-template-columns:1fr auto;align-items:end}
#concepts .concept-panorama .voorbeeld{border-top:0;border-bottom:38px solid var(--concept-accent);text-align:left}
#concepts .concept-gallery .voorbeeld{border:0;background:var(--concept-bg);text-align:right;padding-left:32%;box-shadow:inset 36px 0 var(--concept-accent)}
#concepts .concept-gallery .titel{font-family:Georgia,serif;font-style:italic}
#concepts .concept-monument .voorbeeld{border:0;background:var(--concept-accent);color:var(--concept-bg);text-align:left}
#concepts .concept-monument .titel{text-transform:uppercase;font-weight:900;letter-spacing:-.05em}
@media(max-width:1040px){#concepts .concepten{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:560px){#concepts .concepten{grid-template-columns:1fr;gap:16px}}