/* ================================================================
   Koerstijd — Mobile responsive overrides (<=600px)
   Uses attribute selectors + !important to override JSX inline styles
   ================================================================ */

/* Make hamburger + drawer toggle work */
.kt-topnav-burger { display: none !important; }

@media (max-width: 720px) {
  /* Topnav: hide desktop pieces, show burger */
  .kt-topnav { padding: 12px 18px !important; }
  .kt-topnav-desktop { display: none !important; }
  .kt-topnav-burger { display: flex !important; }

  /* Reduce side padding on common section paddings */
  [style*="padding: 14px 56px"],
  [style*="padding: 16px 56px"],
  [style*="padding: 20px 56px"],
  [style*="padding: 24px 56px"],
  [style*="padding: 28px 56px"],
  [style*="padding: 32px 56px"],
  [style*="padding: 40px 56px"],
  [style*="padding: 48px 56px"],
  [style*="padding: 56px 56px"],
  [style*="padding: 60px 56px"],
  [style*="padding: 64px 56px"],
  [style*="padding: 72px 56px"],
  [style*="padding: 80px 56px"],
  [style*="padding: 96px 56px"],
  [style*="padding: 100px 56px"],
  [style*="padding: 120px 56px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Common shorthand "Apx Bpx" pads */
  [style*="padding:64px 56px"],
  [style*="padding:80px 56px"],
  [style*="padding:96px 56px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Vertical padding shrink for big hero sections */
  [style*="padding: 96px 56px"],
  [style*="padding: 100px 56px"],
  [style*="padding: 120px 56px"],
  [style*="padding: 80px 56px"] {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }

  /* All multi-col grids collapse to single column */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: 380px 1fr"],
  [style*="grid-template-columns: 400px 1fr"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 400px"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer often uses 4-col layout */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Scale down hero headings */
  h1 { font-size: clamp(32px, 9vw, 42px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(20px, 5vw, 26px) !important; }

  /* Specific big sizes used in landing */
  [style*="font-size: 72px"], [style*="font-size: 80px"],
  [style*="font-size: 88px"], [style*="font-size: 96px"],
  [style*="font-size: 64px"], [style*="font-size: 56px"] {
    font-size: clamp(34px, 10vw, 46px) !important;
  }
  [style*="font-size: 48px"], [style*="font-size: 44px"] {
    font-size: 30px !important;
  }
  [style*="font-size: 40px"], [style*="font-size: 36px"] {
    font-size: 26px !important;
  }

  /* Reduce huge fixed heights on map / hero / image blocks */
  [style*="height: 560px"], [style*="height: 600px"],
  [style*="height: 640px"], [style*="height: 720px"] {
    height: 320px !important;
  }
  [style*="height: 480px"], [style*="height: 500px"] {
    height: 280px !important;
  }
  [style*="min-height: 600px"], [style*="min-height: 640px"],
  [style*="min-height: 720px"], [style*="min-height: 800px"] {
    min-height: 0 !important;
  }
  [style*="min-height: 100vh"] { min-height: 0 !important; }

  /* Flex rows with big gaps -> wrap & smaller */
  [style*="display: flex"][style*="gap: 56px"],
  [style*="display: flex"][style*="gap: 48px"],
  [style*="display: flex"][style*="gap: 40px"],
  [style*="display: flex"][style*="gap: 32px"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* Filter chip rows: allow horizontal scroll instead of wrapping awkwardly */
  .kt-filter-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .kt-filter-row::-webkit-scrollbar { display: none; }
  .kt-filter-row > * { flex-shrink: 0 !important; }

  /* Modals / sheets full width */
  [style*="max-width: 520px"], [style*="max-width: 560px"],
  [style*="max-width: 600px"], [style*="max-width: 640px"] {
    max-width: 100% !important;
  }

  /* Reduce huge button padding on mobile if any */
  button[style*="padding: 18px 28px"],
  button[style*="padding: 20px 32px"],
  button[style*="padding: 16px 28px"] {
    padding: 14px 22px !important;
  }

  /* Tables / wide content blocks: allow horizontal overflow */
  table { display: block; overflow-x: auto; }

  /* Stats rows */
  [style*="grid-template-columns"][style*="repeat"] {
    gap: 16px !important;
  }

  /* Hero image columns: ensure images don't overflow */
  img, svg { max-width: 100% !important; }

  /* Reduce gap on big section grids */
  section [style*="gap: 56px"], section [style*="gap: 48px"],
  section [style*="gap: 64px"], section [style*="gap: 72px"] {
    gap: 24px !important;
  }

  /* Blog detail body: allow images & video to be full width */
  iframe { max-width: 100% !important; }

  /* Sticky sidebars become regular flow on mobile */
  [style*="position: sticky"][style*="top:"] {
    position: static !important;
  }

  /* Feedback widget pill — keep visible but slightly smaller */
  [class*="feedback"] { font-size: 14px !important; }

  /* Planner / Map screens: hide oversized map controls if any */
}

/* Even smaller phones */
@media (max-width: 380px) {
  [style*="padding-left: 20px"], [style*="padding-right: 20px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h1 { font-size: clamp(28px, 8.5vw, 36px) !important; }
}