/* Force mobile sections to stay visible */
@media (max-width: 767px) {
  /* Tailwind md:hidden should render on mobile */
  .md\:hidden {
    display: block !important;
    visibility: visible !important;
  }

  /* If upstream CSS inverted hidden logic, unhide main content on phones */
  main .hidden:not(.sr-only) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure responsive-only utilities still show on mobile */
  main .md\:block { display: block !important; }
  main .md\:flex { display: flex !important; }
  main .md\:grid { display: grid !important; }

  /* Safety net: never hide the main content on small screens */
  main {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Stack content vertically on mobile instead of side-by-side */
  main > div[style*="background-image"],
  main > div[style*="background"] {
    flex-direction: column !important;
  }

  .flex-row {
    flex-direction: column !important;
  }

  .basis-3\/5,
  .basis-2\/5 {
    flex-basis: auto !important;
    width: 100% !important;
  }

  /* Remove padding from sides on mobile for full width */
  main > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove padding from container divs */
  .px-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Add spacing between sections */
  main > div {
    margin-bottom: 2rem !important;
  }

  /* Ensure content inside has proper padding on mobile */
  .px-8 > *,
  .px-8 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 768px) {
  .md\:hidden {
    display: none !important;
    visibility: hidden !important;
  }
}