/* ──────────────────────────────────────────────────────
   GLOBAL MOBILE PASS — Simplafy
   Linked from every HTML page. React serializes inline
   styles in kebab-case, so all selectors below use kebab-case.
   Goal: collapse multi-col grids, prevent overflow, ease type
   on <=900px / <=560px / <=380px.
   ────────────────────────────────────────────────────── */

@media (max-width: 900px){
  html, body{ max-width:100vw !important; overflow-x:clip !important; }
  section, header, footer, main{ overflow-x:clip !important; }

  section{ padding-top:64px !important; padding-bottom:64px !important; }
  /* Hero (primeira section) precisa de padding suficiente para limpar o nav fixo (~81px) */
  main > section:first-child{ padding-top:104px !important; }

  /* Container — squeeze side padding */
  div[style*="max-width: 1240"],
  div[style*="max-width: 1180"],
  div[style*="max-width: 1120"],
  div[style*="max-width: 1080"],
  div[style*="max-width:1240"],
  div[style*="max-width:1180"],
  div[style*="max-width:1120"],
  div[style*="max-width:1080"]{
    padding-left:20px !important; padding-right:20px !important;
  }

  /* COLLAPSE multi-column inline grids */
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"]{
    grid-template-columns: 1fr 1fr !important;
  }
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns:repeat(2"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }
  /* Asymmetric tracks our codebase uses */
  div[style*="grid-template-columns: 1.1fr"],
  div[style*="grid-template-columns: 1.2fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns: 1fr 420px"],
  div[style*="grid-template-columns: 380px 1fr"],
  div[style*="grid-template-columns: 320px 1fr"],
  div[style*="grid-template-columns: 280px 1fr"],
  div[style*="grid-template-columns: 260px 1fr"],
  div[style*="grid-template-columns: 1fr 380px"],
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns: 1fr 280px"],
  div[style*="grid-template-columns: 180px 1fr 260px"],
  div[style*="grid-template-columns: 200px 1fr 280px"],
  div[style*="grid-template-columns: 240px 1fr"],
  div[style*="grid-template-columns: 1fr 240px"]{
    grid-template-columns: 1fr !important;
  }

  /* Flex rows that don't wrap — let them wrap */
  div[style*="flex-wrap: nowrap"]{ flex-wrap: wrap !important; }

  /* Min-widths that force overflow */
  div[style*="min-width: 440"],
  div[style*="min-width: 480"],
  div[style*="min-width: 520"],
  div[style*="min-width: 560"],
  div[style*="min-width: 600"],
  div[style*="min-width: 700"],
  div[style*="min-width: 760"],
  div[style*="min-width: 800"]{
    min-width: 0 !important;
  }
  div[style*="width: 500px"],
  div[style*="width: 520px"],
  div[style*="width: 600px"],
  div[style*="width: 700px"]{ width:100% !important; max-width:100% !important; }

  /* Side rails inside dashboard mockups */
  div[style*="grid-template-columns: 180px 1fr 260px"] > aside:first-child,
  div[style*="grid-template-columns: 180px 1fr 260px"] > aside:last-child,
  div[style*="grid-template-columns: 200px 1fr 280px"] > aside:first-child,
  div[style*="grid-template-columns: 200px 1fr 280px"] > aside:last-child{
    display:none !important;
  }

  /* Tables: scrollable */
  table{ display:block; width:100%; overflow-x:auto; }

  /* Tweaks panel pinned mobile */
  .tweaks-panel{
    left:12px !important; right:12px !important; width:auto !important;
    bottom:12px !important; max-height:65vh; overflow-y:auto;
  }

  /* Hero CTA rows — stack */
  .hero-ctas, [data-cta-row]{ flex-direction:column !important; align-items:stretch !important; gap:10px !important; }
  .hero-ctas > *, [data-cta-row] > *{ width:100% !important; min-width:0 !important; justify-content:center !important; }
}

@media (max-width: 560px){
  section{ padding-top:48px !important; padding-bottom:48px !important; }
  main > section:first-child{ padding-top:96px !important; }

  h1{ font-size:32px !important; line-height:1.06 !important; letter-spacing:-0.03em !important; }
  h2{ font-size:24px !important; line-height:1.12 !important; letter-spacing:-0.025em !important; }
  h3{ font-size:18px !important; line-height:1.22 !important; }
  p{ font-size:14.5px !important; line-height:1.55 !important; }

  div[style*="max-width: 1240"],
  div[style*="max-width: 1180"],
  div[style*="max-width: 1120"],
  div[style*="max-width: 1080"]{
    padding-left:16px !important; padding-right:16px !important;
  }

  /* Card paddings — large pads down to ~22px */
  div[style*="padding: 40px"],
  div[style*="padding: 48px"],
  div[style*="padding: 56px"],
  div[style*="padding: 64px"]{
    padding: 22px 18px !important;
  }
  div[style*="padding:40px"],
  div[style*="padding:48px"],
  div[style*="padding:56px"]{
    padding: 22px 18px !important;
  }

  /* Eyebrow labels */
  div[style*="letter-spacing: 0.14em"],
  div[style*="letter-spacing:0.14em"]{ font-size:11px !important; }

  /* Buttons full width */
  button[style*="min-width"], a[style*="min-width"]{ min-width:0 !important; }
}

@media (max-width: 380px){
  h1{ font-size:28px !important; }
  h2{ font-size:22px !important; }
  section{ padding-top:40px !important; padding-bottom:40px !important; }
  main > section:first-child{ padding-top:90px !important; }
}

/* ──────────────────────────────────────────────────────
   MOBILE UTILITY CLASSES — opt-in via className.
   Use .foo.foo doubled selector to beat global attribute
   selectors above (which have specificity 0,1,1).
   ────────────────────────────────────────────────────── */

@media (max-width: 720px){
  /* .m-carousel — turn a grid/flex container into horizontal snap carousel */
  .m-carousel.m-carousel{
    grid-template-columns:none !important;
    display:flex !important;
    flex-direction:row !important;
    gap:12px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-left:20px !important;
    padding:4px 20px 20px 20px !important;
    margin:0 -20px !important;
    scrollbar-width:none !important;
  }
  .m-carousel.m-carousel::-webkit-scrollbar{display:none}
  .m-carousel.m-carousel > *{
    flex:0 0 82% !important;
    scroll-snap-align:start !important;
    min-width:0 !important;
    height:auto;
  }
  .m-carousel-wide.m-carousel-wide > *{ flex:0 0 88% !important; }

  /* .m-stack-tight — for grids that should just stack 1 col w/ small gap */
  .m-stack-tight.m-stack-tight{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* .m-stack — same but wider gap */
  .m-stack.m-stack{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}