/* ============================================================
   TBM Home Care · Responsive overrides
   Loaded after colors_and_type.css.
   Targets the inline-styled React components on mobile (≤ 900px).
   ============================================================ */

/* ---------- Tablet & mobile (≤ 900px) ---------- */
@media (max-width: 900px) {

  /* Header: hide desktop nav + CTA, show burger */
  .tbm-burger { display: inline-block !important; order: 3; }
  .tbm-header-cta { display: none !important; }
  .tbm-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0;
    right: 0;
    flex-direction: column !important;
    background: #ffffff !important;
    border-top: 1px solid #e3ebed;
    border-bottom: 1px solid #e3ebed;
    padding: 16px 24px !important;
    gap: 4px !important;
    box-shadow: 0 8px 24px rgba(15, 42, 50, 0.08);
  }
  .tbm-nav.tbm-nav-open { display: flex !important; }
  .tbm-nav a {
    padding: 14px 8px !important;
    border-bottom: 1px solid #f0f4f5 !important;
    font-size: 16px !important;
  }
  .tbm-nav a:last-child { border-bottom: none !important; }

  .tbm-header-inner { padding: 14px 20px !important; gap: 12px !important; position: relative; }
  .tbm-header-inner img { height: 64px !important; }

  /* Sections: tighter padding, stack everything */
  section[style*="padding: 96px 32px"],
  section[style*="padding: 80px 32px"] {
    padding: 56px 20px !important;
  }
  section[style*="padding: 80px 32px 96px"] {
    padding: 40px 20px 56px !important;
  }

  /* Generic: any inline grid template falls to 1 col */
  div[style*="grid-template-columns"],
  div[style*="gridTemplateColumns"],
  .tbm-grid-services,
  .tbm-grid-3,
  .tbm-cta-card,
  .tbm-footer-grid,
  .tbm-quem-grid,
  .tbm-quem-stats {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Force 1-col on ALL grid descendants in main content (catch-all) */
  main div[style*="display: grid"],
  section div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer keeps slightly tighter spacing */
  .tbm-footer-grid { gap: 32px !important; padding-bottom: 24px !important; }

  /* Hero CTA card padding */
  .tbm-cta-card {
    padding: 36px 28px !important;
    border-radius: 24px !important;
  }

  /* Generic horizontal flex with big gaps becomes wrap */
  div[style*="gap: 64px"],
  div[style*="gap: 48px"] {
    gap: 24px !important;
    flex-wrap: wrap !important;
  }

  /* Buttons row: full width on mobile, stack */
  div[style*="display: flex"][style*="gap: 12px"] > a,
  div[style*="display: flex"][style*="gap: 12px"] > button {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  /* Containers: max-width 100% */
  div[style*="max-width: 1200px"],
  div[style*="max-width: 1100px"],
  div[style*="max-width: 1000px"],
  div[style*="max-width: 900px"],
  div[style*="max-width: 800px"] {
    max-width: 100% !important;
  }

  /* Hero/Section paddings inside */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Tables/wide content: scroll if needed */
  table { display: block; overflow-x: auto; }
}

/* ---------- Phone-only (≤ 560px) ---------- */
@media (max-width: 560px) {
  /* Headings tighter */
  h1, .tbm-h1, .tbm-display { font-size: clamp(32px, 8vw, 42px) !important; }
  h2, .tbm-h2 { font-size: clamp(26px, 6.5vw, 34px) !important; }

  /* Form 2-col → 1-col */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats row centered */
  div[style*="margin-top: 64px"][style*="display: flex"] {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Quem somos: stats voltam para 2-col compactas */
  .tbm-quem-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}