/* ==========================================================================
   Behandelingen & prijzen
   Gemeten op de live site (1440px venster):
     sectie      container 1140, padding 40px 0
     rijen       flex, 3 kaarten, gap 20px
     kaart       367 breed, padding 11,39px, kolom met 10px tussenruimte
     beeld       344x382
     titel       Inter Tight 24/600, links uitgelijnd
     tekst       Nunito 17/400, 14,4px marge onder
     prijs       Montserrat 18/500
     "Boek nu"   gewone tekstlink (Montserrat 18/400), geen knopvorm
   ========================================================================== */
.prijzen { padding-inline: var(--rand-zij); }
.prijzen > .container { padding-block: 40px; }

/* Gemeten: Inter Tight 40/600, links uitgelijnd */
.prijzen__kop {
  font-family: var(--font-kop);
  font-size: var(--tekst-h2-groot);
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--ruimte-md);
}

.prijzen__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-md);
}
/* Gemeten: 11,39px op desktop, 15,05 op tablet, 6,80 op mobiel. In het
   origineel is dat 1% respectievelijk 2% van de FLEX-container. Bij een grid
   rekent een procentuele padding tegen de kaart zelf, dus hier staan de
   percentages die op dezelfde pixels uitkomen: 3,1% van 367 = 11,38 en
   6,3% van 238 = 15,0. Op mobiel is de kaart even breed als de container,
   dus daar is 2% wél rechtstreeks juist. */
.prijzen__kaart {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-sm);
  padding: 3.1%;
}
/* Gemeten: 344x382, 208x231 en 326x363 — steeds dezelfde verhouding */
.prijzen__kaart img {
  width: 100%;
  height: auto;
  aspect-ratio: 344 / 382;
  object-fit: cover;
}
.prijzen__titel {
  padding: 5px 0;                 /* gemeten op de kopwidget */
  font-family: var(--font-kop);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.prijzen__oms {
  font-size: var(--tekst-body);
  line-height: 1.5;
  margin-bottom: 14.4px;              /* gemeten */
}
.prijzen__duur { display: inline-block; margin-top: var(--ruimte-sm); }
.prijzen__prijs {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}
/* Gemeten: een gewone tekstlink, niet als knop opgemaakt, en zonder
   onderstreping — Montserrat 18/400, zwart. */
.prijzen__boek {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kleur-zwart);
  text-decoration: none;
}
/* Gemeten: 14,4px onder de regel met "Boek nu" */
.prijzen__kaart > p:last-child { margin-bottom: 14.4px; }
@media (hover: hover) and (min-width: 1025px) {
  .prijzen__boek:hover { color: var(--kleur-bruin); }
}

@media (max-width: 1024px) {
  /* Gemeten: op tablet loopt het raster over de volle breedte (geen zijpadding,
     geen container van 1140) en blijft het DRIE kolommen — kaarten van 238px.
     Er stonden er twee, in een container van 678. */
  .prijzen { padding-inline: 0; }
  .prijzen > .container { max-width: none; }
  .prijzen__kaart { padding: 6.3%; }
}
@media (max-width: 767px) {
  /* Gemeten: 10px zijpadding, één kaart per rij, 20px ertussen */
  .prijzen { padding-inline: 10px; }
  .prijzen__raster { grid-template-columns: 1fr; gap: var(--ruimte-md); }
  .prijzen__titel { font-size: 22px; line-height: 22px; }
  .prijzen__kaart { padding: 2%; }
}