/* layer_arrangements — uitgelichte arrangement-band + de detailpagina. Variabelen met fallback,
   want niet elke site laadt variables.css.

   De kaart staat op --surface, en dat hoort ook: alle kleuren komen uit het CMS. Wat er mis
   kan gaan zit dus niet hier maar in de seed. SiteApp mapt de drie semantische rollen op vaste
   paletslots — ink=base_color1, accent=base_color2, surface=base_color3 — terwijl de CMS-velden
   alleen "Basis kleur 1..10" heten. Zet een thema daar een donkere merkkleur in base_color3, dan
   krijgt elke kaart een donkere achtergrond met --ink-tekst erop: donker op donker. Dat gebeurde
   met theme-newyork (#296A69), gemeld door Ronny op demo.nl, 2026-07-30. De fix zit in het
   thema-pack: base_color3 hoort een licht vlak te zijn. */

/* ── De band: beeld naast tekst, gestapeld leest een reeks lagen als een lijst ───────── */
.layer--arrangements .arrangement{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:1.5rem;align-items:center;background:var(--surface,#fff);border-radius:var(--radius,.5rem);
  overflow:hidden;box-shadow:var(--card-shadow,0 1px 4px rgba(0,0,0,.08))}
.layer--arrangements .arrangement__media{aspect-ratio:4/3;overflow:hidden;height:100%}
.layer--arrangements .arrangement__img{width:100%;height:100%;object-fit:cover;display:block}
.layer--arrangements .arrangement__body{padding:1.25rem 1.5rem 1.25rem 0;display:flex;
  flex-direction:column;gap:.4rem}
.layer--arrangements .arrangement__title{margin:0;font-size:1.25rem}
.layer--arrangements .arrangement__link{color:inherit;text-decoration:none}
.layer--arrangements .arrangement__link:hover{text-decoration:underline}
.layer--arrangements .arrangement__subtitle{margin:0;color:var(--muted,#777);font-size:.92em}
.layer--arrangements .arrangement__intro{margin:.2rem 0 0;color:var(--ink,#333);line-height:1.55}
.layer--arrangements .arrangement__foot{margin-top:.75rem;display:flex;align-items:center;
  gap:1rem;flex-wrap:wrap}
.layer--arrangements .arrangement__price{font-weight:700;color:var(--accent,#1e2a3a)}

/* Smal scherm: beeld boven de tekst, zoals de andere modules. */
@media (max-width:48rem){
  .layer--arrangements .arrangement{grid-template-columns:1fr}
  .layer--arrangements .arrangement__body{padding:1.1rem 1.25rem 1.35rem}
}

/* ── De detailpagina ─────────────────────────────────────────────────────────────────── */
.arrangement-detail__title{margin:0 0 .25rem}
.arrangement-detail__lead{margin:0 0 1rem;color:var(--muted,#777);font-size:1.05em}
.arrangement-detail__media{margin:0 0 1.25rem;border-radius:var(--radius,.5rem);overflow:hidden}
.arrangement-detail__img{width:100%;height:auto;display:block}
.arrangement-detail__intro{margin:0 0 1rem;font-size:1.05em;line-height:1.6;color:var(--ink,#333)}
.arrangement-detail__price{margin:0 0 1.25rem;font-weight:700;color:var(--accent,#1e2a3a)}
.arrangement-detail__text{line-height:1.65}
.arrangement-detail__text p{margin:0 0 1rem}