/* ===== Responsive Fixes ===== */

/* --- Global: prevent horizontal overflow --- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* --- Mobile-first fixes (up to 640px) --- */
@media (max-width: 639px) {
  /* Reduce oversized headings */
  .text-5xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }   /* 30px */
  .text-6xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }     /* 36px */
  .text-7xl { font-size: 2.5rem !important; line-height: 2.75rem !important; }     /* 40px */
  .text-8xl { font-size: 2.75rem !important; line-height: 3rem !important; }       /* 44px */

  /* Reduce large section padding */
  .py-32 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-16 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .p-8 { padding: 1rem !important; }
  .p-10 { padding: 1.25rem !important; }
  .p-12 { padding: 1.5rem !important; }

  /* Reduce large gaps */
  .gap-8 { gap: 1rem !important; }
  .gap-12 { gap: 1.5rem !important; }
  .gap-16 { gap: 2rem !important; }

  /* Reduce large margins */
  .mb-16 { margin-bottom: 2rem !important; }
  .mb-12 { margin-bottom: 1.5rem !important; }
  .mt-16 { margin-top: 2rem !important; }
  .mt-12 { margin-top: 1.5rem !important; }
  .my-16 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

  /* Tab buttons: reduce min-width so they fit on small screens */
  .min-w-\[180px\] { min-width: 120px !important; }

  /* Nav dropdown: cap at screen width */
  .nav-dd-panel { min-width: 0 !important; max-width: 90vw !important; }

  /* Hero section: reduce height on mobile */
  .h-screen { height: 70vh !important; }

  /* Cards / large width containers */
  .max-w-7xl, .max-w-6xl, .max-w-5xl { max-width: 100% !important; }

  /* Container horizontal padding */
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Grid: force single column on small screens */
  .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .grid-cols-5 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  /* Flex wrap on small screens */
  .flex-nowrap { flex-wrap: wrap !important; }

  /* Space between items */
  .space-x-4 > * + * { margin-left: 0 !important; }

  /* Images */
  img { max-width: 100%; height: auto; }

  /* Footer grid */
  footer .grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  /* About This Business card layout - stack sidebar and content */
  .w-full.lg\:w-1\/5 { width: 100% !important; }
  .w-full.lg\:w-4\/5 { width: 100% !important; }

  /* Fix text overflow */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Reduce decorative blur elements */
  .blur-3xl { display: none !important; }
}

/* --- Small tablets (640px - 767px) --- */
@media (min-width: 640px) and (max-width: 767px) {
  .text-6xl { font-size: 2.75rem !important; line-height: 3rem !important; }
  .text-7xl { font-size: 3rem !important; line-height: 3.25rem !important; }
  .text-8xl { font-size: 3.25rem !important; line-height: 3.5rem !important; }

  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  .gap-8 { gap: 1.25rem !important; }
}

/* --- Tablets (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .text-7xl { font-size: 3.5rem !important; line-height: 3.75rem !important; }
  .text-8xl { font-size: 4rem !important; line-height: 4.25rem !important; }

  .py-32 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* --- Missing Tailwind responsive utilities --- */
@media (min-width: 1024px) {
  .lg\:w-1\/5 { width: 20% !important; }
  .lg\:w-4\/5 { width: 80% !important; }
}