/* ============================================================
   Blockpulse — Global Responsive Fixes
   Site-wide tweaks layered on top of each page's own CSS.
   Scoped to small screens; desktop layouts untouched.
   ============================================================ */

/* ===== Cross-page typography consistency =====
   Force same display font + bold (no italic, no serif) on all titles
   across plateforme / solutions / ressources / entreprise pages. */
h1, h2, h3, h4,
.hero-title, .module-title, .pf-sticky-title,
.webinar-title, .pb-title, .guide-name, .exp-name, .obs-chart-name, .obs-pub-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif !important;
  font-style: normal !important;
}
h1, .hero-title, h2, .module-title { font-weight: 600 !important; }
h3, h4 { font-weight: 600 !important; }
/* Accent / emphasis spans inside titles → keep color but kill italic, force bold */
.hero-title em, .module-title em,
.webinar-title em, .pb-title em, .guide-name em,
.exp-name em, .obs-chart-name em, .obs-pub-title em,
h1 em, h2 em, h3 em, h4 em {
  font-style: normal !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}

/* Always: prevent accidental horizontal scroll
   Use overflow-x: clip (not hidden) so position:sticky descendants keep working.
   Fallback to hidden if clip unsupported. */
html, body { overflow-x: hidden; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Tablet (≤900px) */
@media (max-width: 900px) {
  .container,
  .cx { padding-left: 24px !important; padding-right: 24px !important; }

  /* Stats / pillars stack */
  .stats-row,
  .hero-pillars,
  .hero-quicknav { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  /* Generic grids of 3+ columns collapse to 2 */
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }

  /* Hero readability */
  h1, .hero-title { font-size: clamp(36px, 7vw, 56px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: clamp(26px, 5vw, 40px) !important; line-height: 1.15 !important; }

  /* Hero accent (Klein blue) — allow wrap so it doesn't overflow */
  .hero-title .accent { white-space: normal !important; }

  /* CTA row wraps */
  .cta-row { flex-wrap: wrap !important; gap: 10px !important; }
  .cta-row .btn,
  .cta-row .btn-primary,
  .cta-row .btn-secondary { width: auto; }

  /* Footer columns stack */
  .footer-grid,
  .footer-cols,
  footer .grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Tables get horizontal scroll wrapper if not already wrapped */
  .table-scroll, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Module heads: stack the 200px label above the body */
  .module-head { grid-template-columns: 1fr !important; gap: 12px !important; padding: 48px 0 24px !important; }
  .insight .container { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Platform card head */
  .pf-card-head { grid-template-columns: 1fr !important; gap: 8px !important; }
  .pf-body { grid-template-columns: 1fr !important; }

  /* KPI grids of 4 → 2 cols */
  .kpis { grid-template-columns: 1fr 1fr !important; }

  /* Hero side bands collapse */
  .hero-grid { grid-template-columns: 0 1fr 0 !important; border-left: 0 !important; border-right: 0 !important; }
  .hero-corner { display: none !important; }
  .hero-body { padding: 32px 24px !important; }
  .hero-inner { padding: 0 !important; }

  /* Status row */
  .status-row .container { flex-wrap: wrap; gap: 8px 14px; font-size: 11px; }
  .status-row .sep { display: none; }

  /* Sections and big paddings */
  .hero, section.hero { padding-top: 32px !important; padding-bottom: 56px !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Tickers: keep horizontal but hint scroll */
  .ticker { overflow-x: hidden; }

  /* Hero cells: smaller cells on mobile */
  .hero-cells { grid-auto-rows: 60px !important; }
  .hero-stripe { background-size: 60px 100% !important; }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
  .container,
  .cx { padding-left: 20px !important; padding-right: 20px !important; }

  h1, .hero-title { font-size: clamp(32px, 9vw, 44px) !important; }
  h2 { font-size: clamp(22px, 6.5vw, 32px) !important; }
  h3 { font-size: 18px !important; }

  /* Single column grids */
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .footer-grid, .footer-cols, footer .grid { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: 1fr !important; }

  /* Buttons full-width-ish on mobile if alone */
  .cta-row .btn-primary,
  .cta-row .btn-secondary { display: block; width: 100%; }
  .cta-row .btn-primary .face,
  .cta-row .btn-primary .invisible-sizer,
  .cta-row .btn-secondary .face,
  .cta-row .btn-secondary .invisible-sizer { width: 100%; }

  /* Hero cell smaller again */
  .hero-cells { grid-auto-rows: 48px !important; }
}

/* ============================================================
   MOBILE FIXES — Reflow fixed-px grids & overflowing widgets (≤900/600px)
   Added 2026-04-29 to fix iPhone display regressions across:
   about · pricing · prod-captable · prod-compliance · lab · resources
   ============================================================ */

/* Universal soft-wrap on long content (URLs, tokens, code) */
@media (max-width: 900px) {
  pre, code, .curl, .mono { white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: anywhere !important; max-width: 100% !important; }
}

@media (max-width: 900px) {
  /* HERO meta strips — fixed 120/200px columns no longer fit */
  .hero-meta { grid-template-columns: 1fr !important; gap: 8px !important; text-align: left !important; }
  .hero-meta .left, .hero-meta .center, .hero-meta .right { text-align: left !important; }

  /* HERO body splits with right-side card (1fr 360px → stack) */
  .hero-body { grid-template-columns: 1fr !important; gap: 32px !important; padding: 32px 0 48px !important; }
  .hero-card { max-width: 100% !important; }

  /* Lab: observatory & calendar rows — 4-col → stack */
  .obs-pub, .cal-row { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Lab: 4-col experiments grid → 1 col */
  .experiments { grid-template-columns: 1fr !important; }
  .exp { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .exp:last-child { border-bottom: 0 !important; }

  /* Lab: observatory (1.6fr 1fr) and ambassadors (1.4fr 1fr / 2col list) */
  .obs-grid, .amb-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .amb-list { grid-template-columns: 1fr !important; }
  .amb-item { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .amb-item:last-child { border-bottom: 0 !important; }
  .amb-text { padding-right: 0 !important; }

  /* Observatory padding too generous for mobile */
  .observatory { padding: 56px 0 !important; }

  /* Lab: Join flow (3-col) and application (1fr 1fr split with form) */
  .join-flow { grid-template-columns: 1fr !important; }
  .application { grid-template-columns: 1fr !important; }
  .application-text { padding: 32px 24px !important; }
  .application-form { padding: 32px 24px !important; }
  .application-form, .application-form * { max-width: 100% !important; }
  .application-form input, .application-form textarea, .application-form select { width: 100% !important; box-sizing: border-box !important; }

  /* About: timeline rows */
  .tl-row { padding: 14px 16px !important; }

  /* About: hero-grid (12px 1fr 12px) — kill side rails on mobile */
  .hero-grid { grid-template-columns: 1fr !important; }

  /* prod-captable.html — 6-col grid → 2 cols */
  .grid6 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* pricing.html — simulator panes shrink to viewport */
  .sim { grid-template-columns: 1fr !important; }
  .sim-cat, .sim-canvas { padding: 20px 16px !important; }
  .sim-canvas, .sim-volumes, .sim-summary { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .sim-volumes { margin: 0 !important; }
  .vol-cell { padding: 12px 16px !important; }

  /* pricing.html — calc grid (1fr 1fr 1.2fr) → stack */
  .calc-grid { grid-template-columns: 1fr !important; }
  .calc-cell { padding: 20px 16px !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .calc-cell:last-child { border-bottom: 0 !important; }
  .calc-input { font-size: 28px !important; }

  /* Tickers always clip on mobile */
  .ticker, .ticker-wrap { overflow: hidden !important; }
}

@media (max-width: 600px) {
  /* prod-captable.html — collapse to 1 col */
  .grid6 { grid-template-columns: 1fr !important; }

  /* prod-compliance.html — compare table */
  .compare-table { min-width: 0 !important; font-size: 12px !important; }

  /* General: tighten container padding */
  .container, .cx, .sw-container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Universal: marquee/track wrappers must clip their children */
.team-marquee-wrap, .ticker, .ticker-wrap, .marquee-wrap { overflow: hidden; }