/* Protech Solutions — mobile spacing polish (#14)
   Tightens only oversized vertical whitespace on phones while preserving
   the approved desktop composition and the premium breathing room. */
@media (max-width: 640px) {
  /* Main content sections on the long-form/home-style pages. Heroes and
     commerce intros keep their dedicated spacing rules from earlier tasks. */
  main > section:not(.hero):not(.commerce-hero):not(.page-intro):not(.guide):not(.groep) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Internal pages that begin directly below the fixed navigation still need
     enough top clearance; trim the old 150px+ gap without crowding the header. */
  main > section.guide:not(#aanvraag):not(#aanbod) {
    padding-top: 112px !important;
    padding-bottom: 64px !important;
  }

  /* Keep headings connected to the content they introduce. */
  .section-head {
    margin-bottom: 28px !important;
  }

  .section-head p {
    margin-top: 14px !important;
  }

  /* Fault/category pages had desktop-sized separation between successive
     groups. Keep clear grouping, but remove the extra scrolling distance. */
  section.groep {
    margin-bottom: 34px !important;
  }

  /* The footer should still feel separate, without a large empty tail. */
  body > footer {
    padding-top: 48px !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
  }

  body > footer .foot-top {
    gap: 24px !important;
    padding-bottom: 22px !important;
  }

  body > footer .foot-bottom {
    gap: 12px !important;
    padding-top: 15px !important;
  }
}

@media (max-width: 390px) {
  main > section:not(.hero):not(.commerce-hero):not(.page-intro):not(.guide):not(.groep) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  main > section.guide:not(#aanvraag):not(#aanbod) {
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }

  .section-head {
    margin-bottom: 24px !important;
  }
}

/* Preserve the dedicated Pricing tuning from task #10; this stylesheet loads
   later in the cascade, so keep its tighter rate-section values explicit. */
@media (max-width: 640px) {
  body.pricing-mobile-polish #rates {
    padding-top: 44px !important;
    padding-bottom: 54px !important;
  }

  body.pricing-mobile-polish #rates .section-head {
    margin-bottom: 24px !important;
  }
}