/* mooischilderen.nl — responsieve laag
   Het ontwerp is op 1440 px gemaakt en zet alle opmaak in style-attributen.
   Die wegen zwaarder dan een stylesheet, dus hier staat !important. Alleen
   op smalle schermen, op desktop verandert er niets. */

/* ---------- tablet en kleiner ---------- */
@media (max-width: 980px) {

  /* meerkoloms roosters worden één kolom */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: 1fr 1"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 1.25fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* smalle kolommetjes mogen wel naast elkaar blijven */
  [style*="minmax(170px"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }

  /* zijmarge terug van 32 naar 20 px */
  [style*="max-width: 1240px"],
  [style*="max-width: 1160px"],
  [style*="max-width: 1080px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* rijen mogen afbreken in plaats van uitpuilen */
  [style*="display: flex"] { flex-wrap: wrap !important; }

  /* meelopende kolommen zijn op mobiel eerder hinderlijk */
  [style*="position: sticky"] { position: static !important; }

  /* lucht tussen de secties inkorten */
  [style*="padding: 120px 32px"],
  [style*="padding: 104px 32px"],
  [style*="padding: 96px 32px"],
  [style*="padding: 88px 32px"],
  [style*="padding: 80px 32px"],
  [style*="padding: 70px 32px"] {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  [style*="padding: 88px 0px"] { padding-top: 54px !important; padding-bottom: 54px !important; }

  /* koppen schalen mee met het scherm */
  [style*="font-size: 66px"] { font-size: clamp(32px, 8vw, 66px) !important; }
  [style*="font-size: 58px"] { font-size: clamp(30px, 7.4vw, 58px) !important; }
  [style*="font-size: 46px"],
  [style*="font-size: 44px"] { font-size: clamp(27px, 6.4vw, 44px) !important; }
  [style*="font-size: 40px"] { font-size: clamp(25px, 6vw, 40px) !important; }
  [style*="font-size: 38px"] { font-size: clamp(24px, 5.6vw, 38px) !important; }
  [style*="font-size: 36px"] { font-size: clamp(23px, 5.4vw, 36px) !important; }

  /* beelden nooit breder dan hun kader */
  img { max-width: 100% !important; }

  /* formuliervelden over de volle breedte */
  input, select, textarea { max-width: 100% !important; width: 100% !important; }
}

/* ---------- telefoon ---------- */
@media (max-width: 620px) {
  [style*="minmax(170px"] { grid-template-columns: 1fr 1fr !important; }

  /* de tabbalken van dienst- en locatiepagina's mogen zijwaarts scrollen */
  [data-tabbalk] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  [data-tabbalk]::-webkit-scrollbar { display: none; }
  [data-tabbalk] > a { flex: none; }

  /* iets minder zijmarge, meer tekst per regel */
  [style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
}