/* Global responsive safety net (mobile/tablet only).
   Intentionally scoped to max-width breakpoints to avoid desktop changes. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
}

@media (max-width: 1023.98px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Common content wrappers across pages */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Avoid giant headings on tablet/mobile */
  h1 {
    line-height: 1.2;
    word-break: break-word;
  }

  /* Generic fixed-height image blocks often overflow on small screens */
  .h-\[500px\],
  .h-\[450px\],
  .h-\[400px\],
  .h-\[380px\] {
    height: 320px !important;
  }

  /* Keep long navigation/button labels wrapped */
  a,
  button {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767.98px) {
  /* Section vertical rhythm on mobile */
  section.py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  section.py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  section.py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Main page titles */
  .text-6xl {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }
  .text-5xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  .text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  .text-3xl {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
  }

  /* Cards and forms spacing */
  .rounded-\[4rem\],
  .rounded-\[3rem\],
  .rounded-\[2\.5rem\] {
    border-radius: 1.25rem !important;
  }
  .p-10 {
    padding: 1.25rem !important;
  }
  .p-8 {
    padding: 1rem !important;
  }
  .p-6 {
    padding: 0.9rem !important;
  }

  /* Grid heavy pages */
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Keep CTA buttons full-width and tappable */
  .flex.sm\:flex-row {
    flex-direction: column !important;
  }
  .px-12.py-4,
  .px-10.py-4 {
    width: 100% !important;
    text-align: center !important;
  }

  /* Sticky sidebars can block content on small screens */
  .lg\:sticky {
    position: static !important;
  }
}

@media (max-width: 479.98px) {
  .text-2xl {
    font-size: 1.15rem !important;
  }
  .text-xl {
    font-size: 1.05rem !important;
  }
  .text-lg {
    font-size: 0.98rem !important;
  }

  .gap-12 {
    gap: 1.25rem !important;
  }
  .gap-10 {
    gap: 1rem !important;
  }
  .gap-8 {
    gap: 0.9rem !important;
  }
  .gap-6 {
    gap: 0.75rem !important;
  }
}