/* =====================================================================
   HelloKidney.ai — Mobile Responsiveness Fixes
   ---------------------------------------------------------------------
   This file patches mobile-layout issues caused by inline grid/font
   styles on HTML elements (inline styles beat normal CSS, so !important
   is used deliberately and only inside mobile breakpoints).
   Load AFTER css/styles.css so these rules win cascade order.
   ===================================================================== */

/* --------- Global: prevent horizontal scroll on mobile --------- */
html, body {
  overflow-x: hidden;
}

/* =====================================================================
   BREAKPOINT: Tablet & down (≤ 1024px)
   ===================================================================== */
@media (max-width: 1024px) {

  /* Any 3+ column inline grid → 2 columns on tablets */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Asymmetric 2-col inline grids → single column */
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns: 1fr 400px"],
  [style*="grid-template-columns: 1fr 350px"],
  [style*="grid-template-columns: 1fr 380px"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Tame the largest display numbers / hero title */
  [style*="font-size: 6rem"] { font-size: 4rem !important; }
  [style*="font-size: 5rem"] { font-size: 3.25rem !important; }
  [style*="font-size: 4rem"] { font-size: 2.75rem !important; }
  [style*="font-size: 3.5rem"] { font-size: 2.5rem !important; }
  [style*="font-size: 3rem"] { font-size: 2.25rem !important; }

  /* CTA sections with big padding */
  section[style*="padding: 8rem"] { padding: 5rem 0 !important; }

  /* Hide "Request a Demo" button in header on tablet */
  .nav-btn {
    display: none !important;
  }
}

/* =====================================================================
   BREAKPOINT: Mobile (≤ 768px)
   ===================================================================== */
@media (max-width: 768px) {

  /* ---------- Containers & sections ---------- */
  .container,
  .header-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .section { padding: 3.5rem 0 !important; }

  /* ---------- Hero ---------- */
  .hero {
    min-height: auto !important;
    padding: 8rem 0 4rem !important;
    margin-top: 0 !important;
  }

  .hero-content {
    padding-top: 2rem !important;
  }

  .hero-title {
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem !important;
  }

  .hero-btn {
    width: 100%;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
  }

  /* ---------- Header "Request a Demo" button: hide on mobile ---------- */
  .nav-btn {
    display: none !important;
  }

  /* ---------- Our Solution section (dark) ---------- */
  .solution-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .solution-cards-grid > div {
    padding: 1.5rem !important;
  }
  .solution-cards-grid h3 {
    font-size: 1.25rem !important;
  }
  .solution-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .solution-cta-buttons .btn {
    width: 100%;
  }

  /* ---------- Page hero (inner pages) ---------- */
  .page-hero {
    margin-top: 0 !important;
    min-height: auto !important;
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
  }
  .page-hero-title { font-size: 1.75rem !important; }
  .page-hero-subtitle { font-size: 1rem !important; }

  /* Inner pages with inline hero sections (e.g. contact) */
  section:first-of-type[style*="padding: 8rem 0 5rem"] {
    padding: 7rem 0 3rem !important;
  }

  /* ---------- Section titles ---------- */
  .section-title,
  h2.section-title[style*="font-size: 2.5rem"] {
    font-size: 1.75rem !important;
  }

  h2[style*="font-size: 3rem"],
  h2[style*="font-size: 2.5rem"],
  h2[style*="font-size: 2rem"] {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* Break forced line-breaks inside headings on mobile */
  h1 br, h2 br, h3 br { display: none; }

  /* ---------- Collapse ALL inline multi-column grids to 1 col ---------- */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns: 2fr 3fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 400px"],
  [style*="grid-template-columns: 1fr 350px"],
  [style*="grid-template-columns: 1fr 380px"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* ---------- Inline font-size overrides ---------- */
  [style*="font-size: 6rem"] { font-size: 3rem !important; }
  [style*="font-size: 5rem"] { font-size: 2.5rem !important; }
  [style*="font-size: 4rem"] { font-size: 2.25rem !important; }
  [style*="font-size: 3.5rem"] { font-size: 2rem !important; }
  [style*="font-size: 3rem"] { font-size: 1.75rem !important; }
  [style*="font-size: 2.5rem"] { font-size: 1.5rem !important; }
  [style*="font-size: 2rem"] { font-size: 1.375rem !important; }
  [style*="font-size: 1.75rem"] { font-size: 1.25rem !important; }
  [style*="font-size: 1.5rem"] { font-size: 1.125rem !important; }
  [style*="font-size: 1.25rem"] { font-size: 1rem !important; }

  /* ---------- Review cards: don't force 380px width ---------- */
  .review-card {
    width: 85vw !important;
    max-width: 340px;
    padding: 1.5rem !important;
  }

  /* ---------- Generic inline padding on sections ---------- */
  section[style*="padding: 8rem"] { padding: 4rem 0 !important; }
  section[style*="padding: 8rem 0 5rem"] { padding: 5rem 0 3rem !important; }
  section[style*="padding: 6rem"] { padding: 3.5rem 0 !important; }
  section[style*="padding: 5rem 0"] { padding: 3rem 0 !important; }
  div[style*="padding: 5rem 3rem"] { padding: 2.5rem 1.5rem !important; }
  div[style*="padding: 4rem"] { padding: 2rem !important; }
  div[style*="padding: 3rem"] { padding: 1.5rem !important; }
  div[style*="padding: 2.5rem"] { padding: 1.5rem !important; }

  /* ---------- Contact page: form inputs full-width ---------- */
  #contactForm input,
  #contactForm select,
  #contactForm textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Contact info card: proper spacing when stacked */
  [style*="grid-template-columns: 1fr 400px"] > div:last-child {
    margin-top: 0.5rem;
  }

  /* ---------- Image/card heights that were fixed-rem ---------- */
  div[style*="height: 22rem"] { height: 16rem !important; }
  div[style*="height: 20rem"] { height: 15rem !important; }

  /* ---------- Mobile menu button: always visible ---------- */
  .mobile-menu-btn { display: block !important; }
  .nav-links { display: none !important; }

  /* ---------- Enterprise badges row: wrap nicely ---------- */
  div[style*="flex-wrap: wrap"][style*="gap: 2rem"] {
    gap: 1rem !important;
  }

  /* ---------- Footer ---------- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 2rem !important;
  }

  /* Inline footer grid (contact + other pages without .footer-grid class) */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  
  /* Footer bottom bar: stack on mobile */
  footer [style*="justify-content: space-between"][style*="flex-wrap"] {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  /* ---------- Forms ---------- */
  .form-grid { grid-template-columns: 1fr !important; }

  /* ---------- Tables and wide content ---------- */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* ---------- Images: never exceed viewport ---------- */
  img { max-width: 100% !important; height: auto !important; }
}

/* =====================================================================
   BREAKPOINT: Small phones (≤ 480px)
   ===================================================================== */
@media (max-width: 480px) {

  .container,
  .header-container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }

  .hero-title { font-size: 1.875rem !important; }
  .hero-subtitle { font-size: 0.95rem !important; }
  .section-title { font-size: 1.5rem !important; }
  .page-hero-title { font-size: 1.5rem !important; }

  [style*="font-size: 6rem"] { font-size: 2.5rem !important; }
  [style*="font-size: 5rem"] { font-size: 2.125rem !important; }
  [style*="font-size: 4rem"] { font-size: 2rem !important; }
  [style*="font-size: 3rem"] { font-size: 1.625rem !important; }
  [style*="font-size: 2.5rem"] { font-size: 1.375rem !important; }

  .btn,
  .hero-btn,
  .nav-btn {
    font-size: 0.9rem !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* Reduce huge paddings further */
  .section { padding: 2.5rem 0 !important; }
  section[style*="padding: 8rem"] { padding: 3rem 0 !important; }
  section[style*="padding: 6rem"] { padding: 2.5rem 0 !important; }

  /* Logo slightly smaller on tiny screens */
  .logo-img { max-height: 32px; }

  /* Footer fully stacked on small phones */
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* Contact hero title */
  h1[style*="font-size: 3.5rem"] { font-size: 1.75rem !important; }
}

/* =====================================================================
   Touch-friendly: larger tap targets on coarse pointers
   ===================================================================== */
@media (pointer: coarse) {
  .btn, .hero-btn, .nav-btn, .mobile-nav-link, a[href] button {
    min-height: 44px;
  }
}