/* ============================================================
   Mobile Normalize — consistente mobiele uitlijning & vlakken
   Wordt als LAATSTE geladen (na global + page CSS), zodat deze
   regels winnen qua source-order. Eén plek voor de mobiele
   padding-standaard over alle landingspagina's.

   Standaard op <=480px:
   - Zijmarge (gutter) van alle containers + hero = 16px
   - Binnen-padding van vlakken/cards = 24px 20px
   ============================================================ */

@media (max-width: 480px) {

  /* ── Gutter: hero gelijktrekken met de rest (rest = 16px via global.css) ── */
  .hero .oms-container,
  .hero .container,
  .hero > div > .oms-container,
  .hero > div > .container,
  .hero-inner,
  .cv2-hero .oms-container,
  .ov2-hero .oms-container,
  .ov2-hero-inner,
  .bg-hero .oms-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Geo-crosslinks (stad-pagina's): 1 kolom binnen de gutter, geen overflow */
  .oms-neighbours { padding-left: 16px; padding-right: 16px; max-width: 100%; }
  .oms-neighbours__list { grid-template-columns: 1fr; max-width: 100%; }

  /* ── Gedeelde card-/vlak-componenten → uniforme binnen-padding ── */
  .service-card,
  .ga-service-card,
  .oo-service-card,
  .seo-service-card,
  .ga-step,
  .seo-process-step,
  .seo-why-item,
  .testimonial-card,
  .hp-review-card,
  .cv2-sidebar-card,
  .om-intro-kanalen,
  .om-synergie-visual,
  .stad-intro-voordelen {
    padding: 24px 20px;
  }

  /* Secundaire content-cards die op 16-20px stonden → gelijk aan de rest.
     (Gedeelde classes over kennisbank/blog/branche/diensten-pagina's.)
     Bewust NIET: decoratieve mockups, tags/badges, zoekvelden, link-rijen. */
  .kb-related-card,
  .kb-highlight-box,
  .kb-info-box,
  .bg-card,
  .blog-card-body,
  .blog-related-card-body,
  .blog-info-box,
  .blog-tip-box,
  .blog-stat-card,
  .br-webeis-card,
  .br-case-metric,
  .br-card-sm,
  .included-card,
  .voordeel-card,
  .hp-why-stat-card {
    padding: 24px 20px;
  }
}