/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — pagina "Prijzen"

   Laadt ná style.css. Zelfde rustige opzet als "Wie ben ik" en
   "Werkwijze".

   Eén ding is hier anders dan op de andere pagina's: er staan twee
   tabellen op. Die mogen op een smal scherm zijwaarts schuiven in
   hun eigen kader, maar de pagina zelf nooit. Vandaar telkens een
   omhulsel met overflow-x:auto in plaats van overflow op de tabel.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Hero ───────────────────────────────────────────── */
.pr-hero{
  position:relative; overflow:hidden;
  padding:clamp(7.5rem,15vh,10.5rem) 0 clamp(2.5rem,5vw,4rem);
}
.pr-hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1050px); aspect-ratio:1; left:50%; top:-46%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(245,37,31,.15), transparent 62%);
  filter:blur(32px);
}
.pr-hero .wrap{ position:relative; z-index:1; }
.pr-hero__titel{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.3rem,6.4vw,4.4rem); line-height:1.02; letter-spacing:-.03em;
  margin-top:.7rem; max-width:15ch;
}
.pr-hero__titel em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--ember); }
.pr-hero__lead{ color:var(--ash-2); max-width:58ch; margin-top:1.4rem; font-size:clamp(1rem,.4vw + .95rem,1.14rem); }

/* ── 2. De drie pakketten ──────────────────────────────── */
.pr-pakketten{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.4rem); }
.pr-pak{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ink-2); padding:clamp(1.5rem,3.2vw,2.2rem);
}
/* Het middelste pakket krijgt nadruk. Niet met een strikje "meest
   gekozen" erop: dat is een bewering die je niet kan waarmaken als je
   nog geen klanten hebt. Alleen een rand en een iets lichtere bodem. */
.pr-pak--uit{ border-color:var(--line-2); background:var(--ink-3); }
.pr-pak__naam{
  font-family:var(--f-display); font-weight:700; font-size:1.3rem;
  letter-spacing:-.02em;
}
.pr-pak__voor{ color:var(--ash-3); font-size:.9rem; margin-top:.2rem; }
.pr-pak__prijs{
  display:flex; align-items:baseline; gap:.4rem;
  margin:1.2rem 0 1.3rem; padding-top:1.2rem; border-top:1px solid var(--line);
}
.pr-pak__bedrag{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2rem,4vw,2.7rem); line-height:1;
  background:var(--grad-ember);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pr-pak__per{ color:var(--ash-3); font-size:.88rem; }
.pr-pak__lijst{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.55rem; }
.pr-pak__lijst li{
  position:relative; padding-left:1.35rem; font-size:.93rem; color:var(--ash-2);
}
.pr-pak__lijst li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:1.5px; background:var(--ember);
}
.pr-pak .btn{ margin-top:auto; }

/* ── 3. Tabellen ───────────────────────────────────────── */
.pr-tabelhoes{
  overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2);
}
.pr-tabel{ width:100%; border-collapse:collapse; min-width:640px; }
.pr-tabel th, .pr-tabel td{
  padding:.9rem 1.1rem; text-align:left; font-size:.92rem;
  border-bottom:1px solid var(--line);
}
.pr-tabel thead th{
  font-family:var(--f-display); font-weight:600; color:var(--ash);
  font-size:.86rem; letter-spacing:.04em;
  background:var(--ink-3);
  position:sticky; top:0;
}
.pr-tabel tbody tr:last-child th,
.pr-tabel tbody tr:last-child td{ border-bottom:0; }
.pr-tabel tbody th{ font-weight:500; color:var(--ash-2); }
.pr-tabel td{ color:var(--ash-2); }
/* Het vinkje staat in de accentkleur, het streepje in het flauwste grijs
   dat nog leesbaar is. Dat verschil moet je in een oogopslag zien, want
   deze tabel is het enige op de pagina dat de drie pakketten uit elkaar
   houdt. */
.pr-tabel .ja{ color:var(--ember); }
.pr-tabel .ja svg{ display:inline-block; vertical-align:middle; }
.pr-tabel .nee{ color:var(--ash-3); opacity:.55; }
.pr-tabel .nadruk{ color:var(--ash); font-weight:600; }

/* ── 4. Wat er altijd in zit ───────────────────────────── */
.pr-levert{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.7rem clamp(1.4rem,3vw,2.6rem); list-style:none; padding:0; margin:0;
}
.pr-levert li{
  position:relative; padding-left:1.6rem; color:var(--ash-2); font-size:.95rem;
}
.pr-levert li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:1.5px; background:var(--ember);
}

/* ── 5. Bouwkost ───────────────────────────────────────── */
.pr-bouw{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2vw,1.4rem); }
.pr-bouwkaart{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2); padding:clamp(1.3rem,3vw,1.8rem);
}
.pr-bouwkaart--uit{ border-color:var(--ember); background:var(--ink-3); }
.pr-bouwkaart__lbl{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ash-3); display:block; margin-bottom:.6rem;
}
.pr-bouwkaart__bedrag{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.4vw,2.2rem); line-height:1; color:var(--ash);
}
.pr-bouwkaart--uit .pr-bouwkaart__bedrag{
  background:var(--grad-ember);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pr-bouwkaart p{ color:var(--ash-3); font-size:.9rem; margin-top:.7rem; }

/* ── 6. Aanbrengen ─────────────────────────────────────── */
.pr-breng{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,2vw,1.4rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ink-2); padding:clamp(1.5rem,3.4vw,2.4rem);
}
.pr-breng__lbl{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ember); display:block; margin-bottom:.5rem;
}
.pr-breng h3{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.5rem;
}
.pr-breng p{ color:var(--ash-3); font-size:.93rem; }

/* ── 7. Kleine lettertjes ──────────────────────────────── */
.pr-voet{
  margin-top:1rem; color:var(--ash-3); font-size:.85rem; max-width:78ch;
  line-height:1.6;
}

/* ── 8. Slot ───────────────────────────────────────────── */
.pr-slot{ position:relative; overflow:hidden; text-align:center; }
.pr-slot__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(130vw,1100px); aspect-ratio:1; left:50%; top:-32%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(245,37,31,.14), transparent 62%);
  filter:blur(34px);
}
.pr-slot .wrap{ position:relative; z-index:1; }
.pr-slot h2{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.06;
}
.pr-slot h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--ember); }
.pr-slot p{ color:var(--ash-2); max-width:52ch; margin:1.1rem auto 0; }
.pr-slot__acties{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem; }

/* ── 9. Smaller ────────────────────────────────────────── */
@media (max-width:1000px){
  .pr-pakketten{ grid-template-columns:1fr; }
  .pr-bouw{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .pr-levert{ grid-template-columns:1fr; }
  .pr-breng{ grid-template-columns:1fr; }
}