/* ============================================================
   A&M Responsive — global overrides
   Breakpoints:
   - mobile   ≤640px
   - tablet   641–1024px
   - laptop   1025–1440px (default, no overrides)
   - xl       ≥1441px

   IMPORTANT: React inline styles serialize to kebab-case in the DOM,
   so [style*="..."] selectors must match the kebab-case form
   (e.g. "grid-template-columns: 0.85fr 1.25fr") — NOT the camelCase
   JSX form. Values are NOT quoted in the serialized style string.
   ============================================================ */

/* =============== GLOBAL OVERFLOW GUARD (all viewports ≤1024px) =============== */
@media (max-width: 1024px) {
  /* Hard cap on body width to viewport — prevents any descendant overflow from
     widening the document. Combined with overflow-x: hidden, this ensures no
     horizontal scrollbar at the page level even if a deep child mis-sizes itself. */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* =============== TABLET (≤1024px) =============== */
@media (max-width: 1024px) {

  /* Catch-all: multi-fr-column grids collapse to single column on tablet. */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.25fr 0.75fr"],
  [style*="grid-template-columns: 0.75fr 1.25fr"],
  [style*="grid-template-columns: 0.85fr 1.25fr"],
  [style*="grid-template-columns: 0.85fr 1fr"],
  [style*="grid-template-columns: 1fr 260px"],
  [style*="grid-template-columns: 1fr 240px"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact page — main 2-col becomes 1-col, less top padding */
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 32px 32px 80px !important;
  }

  /* Methodology 3-col comparison */
  .method-compare-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Services: grid fallbacks */
  .sv-cta-grid { grid-template-columns: 1fr !important; }
  .sv-features { grid-template-columns: 1fr !important; }

  /* Constat: lock the page wrapper so children can't push it wider than viewport.
     Schemas (flow/ledger/wb) get horizontal scroll on tablet — they're complex
     diagrams whose layout matters more than fitting a narrow viewport. */
  .constat-page {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* On tablet: schemas allow horizontal scroll inside their wrapper */
  .constat-page section [style*="min-height: 520px"],
  .constat-page section [style*="min-height: 480px"] {
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  .constat-page .flow-grid,
  .constat-page .ledger-grid,
  .constat-page .wb-grid {
    min-width: 720px;
  }

  /* Generic: reduce section padding */
  section { padding-left: 32px !important; padding-right: 32px !important; }

  /* CRITICAL: same min-width: 0 fix in tablet — without this, multi-fr grids that collapse
     overflow when their grid children have long min-content (titles, paragraphs, tables). */
  [style*="grid-template-columns:"] > * {
    min-width: 0 !important;
  }

  /* Long titles must wrap properly on tablet too */
  h1, h2, h3 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* Cap grid containers to their parent on tablet */
  [style*="grid-template-columns:"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  [style*="grid-template-columns:"] > * {
    min-width: 0 !important;
  }

  /* Horizontal-scroll wrapper for wide diagrams */
  .h-scroll-on-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .h-scroll-on-mobile::after {
    content: "← glissez pour voir →";
    display: block;
    text-align: center;
    font: 400 11px/1 'JetBrains Mono', monospace;
    letter-spacing: .12em;
    color: rgba(18,20,26,.4);
    margin-top: 8px;
  }

}

/* =============== MOBILE (≤640px) =============== */
@media (max-width: 640px) {

  /* Multi-fr grids collapse to 1-col (same list as tablet, plus narrow utility grids with fixed-px col that should stack on mobile). */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.25fr 0.75fr"],
  [style*="grid-template-columns: 0.75fr 1.25fr"],
  [style*="grid-template-columns: 0.85fr 1.25fr"],
  [style*="grid-template-columns: 0.85fr 1fr"],
  [style*="grid-template-columns: 1fr 260px"],
  [style*="grid-template-columns: 1fr 240px"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 110px 1fr"],
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: 140px 1fr"],
  [style*="grid-template-columns: 160px 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 140px 1fr 140px"],
  [style*="grid-template-columns: 200px 80px 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* CRITICAL: when collapsing fr-grids to 1col on mobile, force grid items to allow shrinking
     below their min-content size (default min-width: auto in grid items causes overflow).
     Without this, long words / tight layouts in grid children push the parent wider than the viewport. */
  [style*="grid-template-columns:"] > * {
    min-width: 0 !important;
  }
  /* And the grid container itself: cap at 100% of its parent, no matter what its content asks for */
  [style*="grid-template-columns:"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Confidentiality clause article — Article# + icon row on top, content below */
  .confid-clause {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 32px 0 !important;
  }
  .confid-clause > div:nth-child(1) {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* Fluid typography — titles use clamp.
     Force overflow-wrap and word-break to avoid long words pushing the layout. */
  h1, h2, h3 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  h1 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.1 !important; }
  h3 { font-size: clamp(17px, 4.5vw, 22px) !important; line-height: 1.15 !important; }

  /* Section padding collapse */
  section { padding-left: 20px !important; padding-right: 20px !important; }
  body { font-size: 15px; }

  /* Make any oversized display text scale down */
  .display-xl, .display-lg { font-size: clamp(40px, 11vw, 72px) !important; line-height: 1.02 !important; }

  /* Horizontal-scroll wrapper activates on mobile — with hint */
  .h-scroll-on-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .h-scroll-on-mobile > * {
    min-width: 720px; /* force diagrams to keep their layout */
  }

  /* Constat — SchemaFlow: handled by SchemaFlowMobile JSX component (no CSS needed).
     Schema wrapper: collapse forced height so the mobile cards can flow naturally. */
  .constat-page section [style*="min-height: 520px"],
  .constat-page section [style*="min-height: 480px"] {
    overflow-x: visible !important;
    min-height: auto !important;
  }
  /* Other schemas (Ledger, future variants) still need fallback rules: */
  .constat-page .ledger-grid,
  .constat-page .wb-grid {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  /* Ledger table: allow horizontal scroll instead (table can't easily collapse) */
  table.ledger {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Hero signature separator: vertical → horizontal on mobile wrap */
  .exp-sig-separator {
    width: 100% !important;
    height: 1px !important;
    min-height: 0 !important;
    background: linear-gradient(to right, transparent, rgba(18,20,26,.15), transparent) !important;
  }

  /* Any element with inline padding > 48px gets reduced */
  [style*="padding: 80px"],
  [style*="padding: 100px"],
  [style*="padding: 120px"] {
    padding: 48px 20px !important;
  }

  /* Reduce gap on any flexbox with huge gaps */
  [style*="gap: 80"] { gap: 32px !important; }
  [style*="gap: 72"] { gap: 28px !important; }
  [style*="gap: 48"] { gap: 20px !important; }

  /* Buttons: full width on mobile for touch */
  button[type="submit"],
  .btn-primary, .btn-secondary,
  a[class*="btn"] {
    min-height: 44px;
  }

  /* Forms: full-width inputs */
  input, textarea, select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}

/* =============== XL (≥1441px) =============== */
@media (min-width: 1441px) {
  /* Nothing forced; the existing design scales up already. */
}