/* Kunstuitleen Den Bosch — stijl voor de eigen paginablokken.
   Los bestand op de server, zodat WordPress de code niet aanpast. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600&family=Karla:wght@300;400;500&display=swap');

.ku-p {
  /* Koel galeriewit in plaats van crème: de kunst moet de kleur leveren,
     de pagina niet. Eén accent, diep groenblauw, museaal en rustig. */
  --wit: #ffffff;
  --muur: #f7f7f5;
  --inkt: #17171a;
  --grijs: #6b6b70;
  --lijn: #dedcd7;
  --diep: #14524f;

  --serif: 'Fraunces', Georgia, serif;
  --zakelijk: 'Karla', system-ui, sans-serif;

  font-family: var(--zakelijk);
  color: var(--inkt);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
}

.ku-p * { box-sizing: border-box; }
.ku-p h1, .ku-p h2, .ku-p h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}

/* Het WordPress-thema houdt de inhoud smal. Deze regel laat het blok
   uitbreken tot de volle schermbreedte, zodat de kunst de ruimte krijgt. */
.ku-p {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ku-p-binnen { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .ku-p-binnen { padding: 0 20px; } }

/* --- kop van de pagina --- */
/* Het themasjabloon laat ruimte staan waar de paginatitel stond. Die halen
   we hier weg, zodat de kop niet twee keer lucht boven zich krijgt. */
.ku-p { margin-top: -110px; }
.ku-p-kop { padding: 28px 0 64px; }
@media (max-width: 700px) { .ku-p { margin-top: -50px; } .ku-p-kop { padding: 20px 0 44px; } }
.ku-p-merk {
  font-family: var(--zakelijk);
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grijs); margin: 0 0 22px;
}
/* Het thema legt een grijs vlak achter de kopregels. Op wit papier komt de
   letter beter tot zijn recht, dus die achtergrond zetten we uit. */
.ku-p h1, .ku-p h2, .ku-p h3,
.ku-p h1 span, .ku-p h1 em, .ku-p h1 strong,
.ku-p-kop h1, .ku-p-kop h1 * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* De vaste maat staat er als reserve vóór clamp(): Safari 12 en oudere
   browsers kennen clamp() niet en houden dan de eerste regel aan. */
.ku-p-kop h1 { font-size: 56px; font-size: clamp(42px, 6.5vw, 76px); max-width: 15ch; }
.ku-p-kop h1 em {
  font-style: normal; color: var(--diep);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}
.ku-p-intro {
  max-width: 56ch; margin: 28px 0 0;
  font-size: 19px; color: #3a3a3e;
}

/* --- knoppen --- */
.ku-p-acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ku-p .ku-p-knop {
  display: inline-block;
  font-family: var(--zakelijk) !important;
  font-size: 16px !important; font-weight: 500 !important;
  padding: 14px 30px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  border: 1px solid var(--diep) !important;
  background: var(--diep) !important; color: #fff !important;
  transition: background .2s, color .2s;
}
.ku-p .ku-p-knop.leeg { background: transparent !important; color: var(--diep) !important; }
.ku-p .ku-p-knop:hover { background: var(--inkt) !important; border-color: var(--inkt) !important; color: #fff !important; }

/* --- de levende muur ---------------------------------------------------
   Werken gaan bij een kunstuitleen de deur uit en komen weer terug. Dat is
   het verschil met een galerie, en dat laat deze muur zien: om de paar
   seconden wisselt één werk voor een ander uit de eigen collectie. */
.ku-muur {
  display: grid; gap: 2px;
  grid-template-columns: repeat(8, 1fr);
  background: var(--lijn);
  border: 1px solid var(--lijn);
}
@media (max-width: 1100px) { .ku-muur { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 800px) { .ku-muur { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .ku-muur { grid-template-columns: repeat(3, 1fr); } }
/* aspect-ratio bestaat pas vanaf Safari 15. De padding-truc eronder houdt de
   tegel ook op oudere apparaten vierkant: 100% padding-top is even hoog als
   de tegel breed is. */
.ku-muur-vak {
  position: relative; overflow: hidden;
  padding-top: 100%; height: 0;
  background: var(--muur);
}
@supports (aspect-ratio: 1) {
  .ku-muur-vak { aspect-ratio: 1; padding-top: 0; height: auto; }
}
/* Een kunstwerk mag je niet bijsnijden: elk werk staat compleet in beeld,
   met wat lucht eromheen, als een passe-partout. */
.ku-muur-vak img {
  /* inset is een afkorting die Safari pas vanaf 14.1 kent; de vier kanten
     apart werken overal. */
  position: absolute; top: 7%; right: 7%; bottom: 7%; left: 7%;
  width: 86%; height: 86%; object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .7s ease;
}
.ku-muur-vak img.zichtbaar { opacity: 1; }
.ku-muur-bij {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; margin-top: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--grijs);
}
@media (prefers-reduced-motion: reduce) {
  .ku-muur-vak img { transition: none; }
}

/* --- secties --- */
/* Ruimte boven en onder elke sectie. Twee secties na elkaar geven samen het
   dubbele, dus dit getal telt zwaar mee in de rust van de pagina. */
.ku-p-sectie { padding: 48px 0; border-top: 1px solid var(--lijn); }
@media (max-width: 700px) { .ku-p-sectie { padding: 34px 0; } }
.ku-p-sectie.vlak { background: var(--muur); border-top: 0; }
.ku-p-oog {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--diep); margin: 0 0 12px;
}
.ku-p-sectie h2 { font-size: 28px; font-size: clamp(24px, 2.7vw, 31px); max-width: 24ch; }
.ku-p-sectie h2 + p { max-width: 60ch; margin: 14px 0 0; color: #3a3a3e; }

/* --- de drie regelingen --- */
.ku-p-drie {
  display: grid; gap: 2px; margin-top: 32px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--lijn); border: 1px solid var(--lijn);
}
@media (max-width: 820px) { .ku-p-drie { grid-template-columns: 1fr; } }
.ku-p-kaart { background: var(--wit); padding: 28px 28px 30px; }
.ku-p-sectie.vlak .ku-p-kaart { background: var(--wit); }
.ku-p-kaart h3 { font-size: 24px; margin-bottom: 10px; }
.ku-p-kaart p { margin: 0 0 16px; font-size: 16px; color: #3a3a3e; }
.ku-p-bedrag {
  font-family: var(--serif); font-size: 15px; color: var(--diep);
  border-top: 1px solid var(--lijn); padding-top: 14px; margin: 0;
}

/* --- praktisch --- */
.ku-p-praktisch { display: grid; gap: 36px; grid-template-columns: 1.2fr 1fr; margin-top: 28px; }
@media (max-width: 820px) { .ku-p-praktisch { grid-template-columns: 1fr; } }
.ku-p-praktisch h3 { font-size: 19px; margin-bottom: 12px; font-family: var(--zakelijk); font-weight: 500; }
.ku-p-tijden { list-style: none; padding: 0; margin: 0; }
.ku-p-tijden li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 9px 0; border-bottom: 1px solid var(--lijn);
  font-size: 16px;
}
.ku-p-tijden li span:first-child { color: var(--grijs); }
.ku-p a { color: var(--diep); }
.ku-p address { font-style: normal; font-size: 16px; line-height: 1.8; }

/* --- vergelijking van twee huurvormen -------------------------------------
   Twee kolommen naast elkaar: het verschil moet te zien zijn, niet te lezen. */
.ku-p-vergelijk {
  display: grid; gap: 2px; margin-top: 30px;
  grid-template-columns: 1fr 1fr;
  background: var(--lijn); border: 1px solid var(--lijn);
}
@media (max-width: 760px) { .ku-p-vergelijk { grid-template-columns: 1fr; } }
.ku-p-kolom { background: var(--wit); padding: 28px 28px 30px; }
.ku-p-kolom h3 { font-size: 20px; margin-bottom: 14px; }
.ku-p-kolom p { font-size: 16px; color: #3a3a3e; margin: 0 0 16px; }
.ku-p-groot {
  font-family: var(--serif); font-size: 40px; line-height: 1;
  color: var(--diep); margin: 0 0 16px !important;
}
.ku-p-groot span {
  display: block; font-family: var(--zakelijk);
  font-size: 15px; color: var(--grijs); margin-top: 8px;
}

/* --- opsomming voorwaarden --- */
.ku-p-punten { list-style: none; padding: 0; margin: 22px 0 0; max-width: 68ch; }
.ku-p-punten li {
  padding: 14px 0 14px 26px; border-bottom: 1px solid var(--lijn);
  position: relative; font-size: 16px;
}
.ku-p-punten li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 8px; height: 1px; background: var(--diep);
}

/* --- contactgegevens in drie kolommen --- */
.ku-p-contact {
  display: grid; gap: 48px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .ku-p-contact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ku-p-contact { grid-template-columns: 1fr; gap: 36px; } }
.ku-p-contact h3 {
  font-family: var(--zakelijk); font-weight: 500; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grijs);
  margin-bottom: 16px;
}
.ku-p-direct { margin: 0 0 6px; font-size: 19px; font-family: var(--serif); }
.ku-p-direct a { text-decoration: none; }
.ku-p-direct a:hover { text-decoration: underline; }

/* --- overzicht van kunstenaars --- */
.ku-k-balk {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px;
}
.ku-p .ku-k-zoek {
  font: inherit !important; font-size: 16px !important;
  padding: 11px 14px !important; flex: 1 1 260px; max-width: 380px;
  border: 1px solid var(--lijn) !important; border-radius: 3px !important;
  background: #fff !important; color: var(--inkt) !important;
}
.ku-k-telling { font-size: 14px; color: var(--grijs); }

.ku-k-letters {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-bottom: 28px; border-bottom: 1px solid var(--lijn); margin-bottom: 34px;
}
.ku-p .ku-k-letter {
  font: inherit !important; font-size: 14px !important;
  min-width: 34px; padding: 6px 9px !important;
  border: 1px solid transparent !important; border-radius: 2px !important;
  background: transparent !important; color: var(--grijs) !important;
  cursor: pointer;
}
.ku-p .ku-k-letter:hover { color: var(--inkt) !important; background: var(--muur) !important; }
.ku-p .ku-k-letter.is-actief {
  background: var(--diep) !important; color: #fff !important;
}

.ku-k-raster {
  display: grid; gap: 32px 24px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.ku-k-kaart { text-decoration: none !important; color: inherit; display: block; }
/* Vierkant, niet rond: in deze map staan werken van de kunstenaar, en van
   een schilderij wil je de hoeken niet afsnijden. Daarom ook 'contain'. */
.ku-k-beeld {
  position: relative; overflow: hidden;
  padding-top: 100%; height: 0;
  background: var(--muur); border: 1px solid var(--lijn);
}
@supports (aspect-ratio: 1) {
  .ku-k-beeld {
    aspect-ratio: 1; padding-top: 0; height: auto;
    display: flex; align-items: center; justify-content: center;
  }
}
.ku-k-beeld img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease;
}
@supports (aspect-ratio: 1) { .ku-k-beeld img { position: static; } }
.ku-k-kaart:hover .ku-k-beeld img { transform: scale(1.05); }
/* Zonder portret een initiaal: rustiger dan een leeg vlak of een grijs poppetje. */
.ku-k-geenfoto {
  font-family: var(--serif); font-size: 38px; color: var(--lijn);
}
.ku-k-naam { font-size: 16px; margin: 14px 0 2px; line-height: 1.3; }
.ku-k-aantal { font-size: 13px; color: var(--grijs); margin: 0; }
.ku-k-leeg { color: var(--grijs); grid-column: 1 / -1; padding: 40px 0; }