/* ============================================
   Prijslijst — Elementor-templates 1336 (website), 4194 (lokale SEO), 4197 (Google Ads).
   De drie templates zijn identiek op twee details na (zie prijslijst--smal). Waarden uit post-1336/4194/4197.css,
   gemeten op /prijzen/, /lokale-seo/ en /google-ads/.
   ============================================ */


/* fa2e6a4: kolom, gap 24 (mobiel 50), kinderen links uitgelijnd */
.prijslijst {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
  width: 100%; min-width: 0;
}

/* 2d43a47: eyebrow + kop + intro, gap 14 */
.prijslijst__kop { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.prijslijst__titel { width: 100%; }
.prijslijst__titel em { color: #ee882d; }  /* inline kleur in de template (net iets anders dan het kit-oranje) */
.prijslijst__intro {
  width: 100%; max-width: 100%;
  font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0;
  color: var(--color-text);
}
/* Lokale SEO (4194): intro 37% breed op desktop en tablet */
.prijslijst--smal .prijslijst__intro { width: 37%; max-width: 37%; }

/* 3a91c0c: raster van 3 kaarten, gap 30, even hoog */
.prijslijst__kaarten {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; gap: 30px;
  align-items: stretch; justify-items: stretch; width: 100%;
}

/* Kaart (b981f42 / b4afa71 / 7be100b) */
.prijskaart {
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-width: 0; padding: 40px; border-radius: 14px;
  background-color: var(--color-white); color: var(--color-primary);
}
.prijskaart--donker { justify-content: flex-start; background-color: var(--color-primary); color: var(--color-white); }

/* Kop van de kaart: naam, bedrag, periode — lijn eronder */
.prijskaart__kop {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 20px; border-bottom: 1px solid #88888840;
}
.prijskaart__naam {
  margin: 0 0 15px;   /* widget-padding 15px onder de kop */
  font-family: var(--font-heading); font-size: 22px; font-weight: 800; line-height: 1.2em; letter-spacing: 0;
  color: inherit;
}
.prijskaart__bedrag {
  font-family: var(--font-heading); font-size: 40px; font-weight: 800; line-height: 1.12em; letter-spacing: -0.9px;
}
.prijskaart__periode {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; line-height: 1.7em; letter-spacing: 0;
  color: var(--color-grey);
}
/* "Op maat": naam als groot bedrag, geen prijs */
.prijskaart--maat .prijskaart__naam {
  margin: 0; font-size: 25px; line-height: 1.12em; letter-spacing: -0.9px;
}

/* Vinkjeslijst (icon list): 16px vinkje, 7px tussen items */
.prijskaart .icoonlijst {
  --icoon-maat: 16px; --icoon-box: 19.5px; --icoon-pad: 3.5px; --icoon-kleur: var(--color-accent); --ruimte: 7px;
  --tekst-font: var(--font-ui); --tekst-maat: var(--body-size); --tekst-gewicht: 400; --tekst-lh: var(--body-lh);
  --tekst-kleur: var(--color-primary);
}
.prijskaart--donker .icoonlijst { --tekst-maat: 15px; --tekst-gewicht: 500; --tekst-lh: 1.7em; --tekst-kleur: var(--color-white); }

/* Knop over de volle kaartbreedte; donker, behalve in de uitgelichte kaart */
.prijskaart__knop { display: flex; justify-content: center; width: 100%; background-color: var(--color-primary); }  /* tekst gecentreerd als flex-item, zoals Elementor (zelfde subpixelpositie) */
.prijskaart--donker .prijskaart__knop { background-color: var(--color-accent); }
@media (hover: hover) {
  .prijskaart__knop:hover { background-color: var(--color-accent-hover); color: var(--color-white); }
}

/* --------------------------------------------
   "Combineer met" (eigen HTML-widget in de template)
   -------------------------------------------- */
.combineer { width: 100%; margin-top: 56px; font-family: var(--font-ui); }
.combineer__label { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.combineer__lijn { flex: 1 1 0%; height: 1px; background: rgba(0, 0, 0, 0.08); }
.combineer__label-tekst {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-grey);
}
.combineer__raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.combineer__kaart {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 28px; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 14px;
  background: var(--color-white); text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
@media (hover: hover) {
  .combineer__kaart:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
}
.combineer__tekst { flex: 1 1 0%; }
.combineer__naam { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--color-primary); }
.combineer__tagline { margin-top: 4px; font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--color-accent); }
.combineer__punten { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.combineer__punten li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--color-text);
}
/* Het origineel gebruikt hier een Elementor-icoonfont (eicon-check) dat niet geladen wordt:
   een leeg element van 0×0 met 10px tussenruimte. Letterlijk overgenomen (zie notes/prijzen.md). */
.combineer__vink { flex-shrink: 0; margin-top: 5px; font-size: 13px; color: var(--color-accent); }
.combineer__prijs { flex-shrink: 0; text-align: right; }
.combineer__vanaf { margin-bottom: 2px; font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--color-grey); }
.combineer__bedrag { font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--color-primary); }
.combineer__periode { font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--color-grey); }

@media (max-width: 768px) {
  .combineer__raster { grid-template-columns: 1fr; }
  .combineer__kaart { flex-direction: column; }
  .combineer__prijs { text-align: left; }
}

@media (max-width: 767px) {
  .prijslijst { gap: 50px; align-self: center; }
  .prijslijst__intro { line-height: 1.2em; }
  .prijslijst--smal .prijslijst__intro { width: 100%; max-width: 100%; }
  .prijslijst__kaarten { grid-template-columns: 1fr; }
  .prijskaart__naam { font-size: 18px; line-height: 1.12em; }
  .prijskaart__bedrag { font-size: 32px; }
  .prijskaart__periode { font-size: 16px; line-height: 1.2em; }
  .prijskaart--maat .prijskaart__naam { font-size: 32px; }
  .prijskaart--donker .icoonlijst { --tekst-maat: 16px; --tekst-lh: 1.2em; }
}