/* Sectie: pakketten (menukaart + aanvraag) */
.pricing { padding-block: calc(var(--section-gap) / 2); }
.pricing-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px; row-gap: 96px;
}

/* Linkerzone: kop */
.pricing-side { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 32px; }
.pricing-title { font-size: var(--step-l); font-weight: 300; }

/* De menukaart */
.pricing-menu {
  grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
  align-content: start;
}
.pricing-group-name { font-size: var(--step-m); font-weight: 400; letter-spacing: 0; line-height: 1.2; margin-bottom: 28px; }
.pricing-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.pricing-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: var(--step-m); line-height: 1.3; font-variant-numeric: tabular-nums;
}
.pricing-price { white-space: nowrap; text-align: right; }
.pricing-desc { font-size: var(--step-body); color: var(--muted); max-width: 36ch; margin-top: 4px; line-height: 1.5; }

/* Aanvraag: één vlak met zin en de twee contactacties */
.pricing-cta {
  grid-column: 1 / 13; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px;
  background: var(--surface); padding: clamp(24px, 4vw, 56px);
}
.pricing-cta-text { font-size: var(--step-m); line-height: 1.4; max-width: 40ch; }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pricing-mail { display: inline-flex; align-items: center; min-height: 48px; }

/* Tablet */
@media (max-width: 1023px) {
  .pricing-side { grid-column: 1 / 5; }
  .pricing-menu { grid-column: 6 / 13; grid-template-columns: 1fr; row-gap: 48px; }
  .pricing-cta { flex-direction: column; align-items: flex-start; }
}

/* Telefoon: eigen compositie, alles onder elkaar */
@media (max-width: 767px) {
  .pricing-grid { display: flex; flex-direction: column; gap: 0; }
  .pricing-side { gap: 24px; }
  .pricing-menu { display: flex; flex-direction: column; gap: 40px; margin-top: 48px; }
  .pricing-group-name { margin-bottom: 20px; }
  .pricing-line { font-size: var(--step-body); }
  .pricing-cta { gap: 24px; margin-top: 64px; margin-inline: calc(var(--margin) * -1); padding: 32px var(--margin); align-items: stretch; }
  .pricing-cta-text { font-size: var(--step-body); }
  .pricing-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .pricing-actions .btn { width: 100%; }
  .pricing-mail { justify-content: center; }
}