/**
 * Panelen: de gekleurde vlakken waarin blokken staan.
 *
 * Een blok krijgt een paneelkleur via de thema-instelling "Blokkleuren"
 * (Uiterlijk → St. Joris Verhuur → Instellingen). Op een paneel wisselen de
 * tekst-, link- en knopkleuren automatisch mee, zodat het contrast klopt.
 *
 *   paneel--antraciet  donker, witte tekst, bruine "Lees meer"-knop
 *   paneel--groen      groen, donkere tekst, antraciet knop
 *   paneel--bruin      bruin, witte tekst, groene knop
 *   paneel--licht      wit, donkere tekst (standaard voor nieuwe blokken)
 *
 * Een blok kan op de voorpagina een andere kleur hebben dan op de andere
 * pagina's (derde kolom in de instelling).
 */
.paneel {
  position: relative;
  display: flow-root;
  padding: var(--paneel-padding) var(--paneel-padding) 0;
  color: var(--c-tekst);
  background: var(--paneel-bg);
}

/* Bloktitels: Big John 18px, zoals het origineel. */
.block__titel {
  font-family: var(--f-kop);
  font-size: var(--fs-blok);
  font-weight: 400;
  line-height: var(--lh-kop);
  margin: 0 0 var(--gap);
}

/* Elke kleur zet alle variabelen, zodat een blok op de voorpagina een andere
   kleur kan krijgen (paneel--voorpagina-<kleur>, zie stjoris_verhuur.theme). De
   voorpaginaregels zijn specifieker en winnen daar. */
.paneel--licht,
.is-voorpagina .paneel--voorpagina-licht {
  --paneel-bg: var(--c-wit);
  --c-tekst: var(--c-inkt);
  --c-link: #4d6b1c;
  --c-link-hover: var(--c-inkt);
  --c-kop: var(--c-inkt);
  --knop-bg: var(--c-groen);
  --knop-tekst: var(--c-inkt);
  --knop-bg-hover: var(--c-antraciet);
  --knop-tekst-hover: var(--c-wit);
}

.paneel--antraciet,
.is-voorpagina .paneel--voorpagina-antraciet {
  --paneel-bg: var(--c-antraciet);
  --c-tekst: var(--c-wit);
  --c-link: var(--c-wit);       /* zoals het origineel; titels in overzichten zijn groen */
  --c-link-hover: var(--c-groen);
  --c-kop: var(--c-wit);
  /* "Lees meer" bruin zoals het oude verhuurthema; aanwijzen wordt groen. */
  --knop-bg: var(--c-bruin);
  --knop-tekst: var(--c-wit);
  --knop-bg-hover: var(--c-groen);
  --knop-tekst-hover: var(--c-inkt);
}

.paneel--groen,
.is-voorpagina .paneel--voorpagina-groen {
  --paneel-bg: var(--c-groen);
  --c-tekst: var(--c-inkt);
  --c-link: var(--c-inkt);
  --c-link-hover: var(--c-antraciet);
  --c-kop: var(--c-inkt);
  --knop-bg: var(--c-antraciet);
  --knop-tekst: var(--c-wit);
  /* Aanwijzen: knop blijft antraciet, tekst wordt groen (zoals het origineel). */
  --knop-bg-hover: var(--c-antraciet);
  --knop-tekst-hover: var(--c-groen);
}

.paneel--bruin,
.is-voorpagina .paneel--voorpagina-bruin {
  --paneel-bg: var(--c-bruin);
  --c-tekst: var(--c-wit);
  --c-link: var(--c-wit);
  --c-link-hover: var(--c-wit);  /* groen op bruin is te weinig contrast */
  --c-kop: var(--c-wit);
  --knop-bg: var(--c-groen);
  --knop-tekst: var(--c-inkt);
  --knop-bg-hover: var(--c-groen-licht);
  --knop-tekst-hover: var(--c-inkt);
}

/* Formulierknoppen in een paneel (bijv. "Zoeken") volgen de paneelkleur,
   zodat een groene knop nooit op een groen paneel staat. */
.paneel input[type="submit"],
.paneel button,
.paneel .button {
  color: var(--knop-tekst);
  background: var(--knop-bg);
}

.paneel input[type="submit"]:hover,
.paneel button:hover,
.paneel .button:hover {
  color: var(--knop-tekst-hover);
  background: var(--knop-bg-hover);
}

.paneel .block__titel {
  color: var(--c-kop);
}

/* Links in panelen erven de paneelkleuren (tokens.css zet ze globaal). */
.paneel a {
  color: var(--c-link);
}

.paneel a:hover,
.paneel a:focus-visible {
  color: var(--c-link-hover);
}

/* Laatste element zonder ondermarge, anders wordt het paneel onderaan te hoog. */
.paneel .block__inhoud > :last-child {
  margin-bottom: var(--paneel-padding);
}

/* ── "Lees meer" / "Bekijk alles" (views more-link) ─────────────────────────
 * Een knop rechtsonder in het paneel, zoals op de huidige site, maar nu met
 * voldoende contrast en minimaal 44px hoog.
 */
.paneel .more-link {
  display: flex;
  justify-content: flex-end;
  margin: var(--s-2) calc(-1 * var(--paneel-padding)) 0;
}

/* Knop sluit aan op de rechteronderhoek van het paneel: eindigt het blok op
   een more-link (ook dieper genest, zoals bij views), dan geen ondermarge. */
.paneel .block__inhoud > :last-child:has(.more-link:last-child),
.paneel .block__inhoud > .more-link:last-child {
  margin-bottom: 0;
}

.paneel .more-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch);
  padding: 0.625rem;
  font-family: var(--f-kop);
  font-size: var(--fs-basis);
  color: var(--knop-tekst);
  background: var(--knop-bg);
  text-decoration: none;
  transition: background-color var(--overgang), color var(--overgang);
}

.paneel .more-link a:hover,
.paneel .more-link a:focus-visible {
  color: var(--knop-tekst-hover);
  background: var(--knop-bg-hover);
}