/* ============================================================
   Carbonorm — Mobile responsive layer (v3)
   Robust: targets DOM structure + serialized inline styles
   Note: browsers normalize inline styles with a space after ":"
   (e.g. style="padding: 96px 48px;"). Selectors below use the
   *with-space* form to match Chrome/Safari/Firefox output, plus
   the no-space form as a defensive fallback.
   ============================================================ */

/* hide mobile burger by default (shown ≤768 below) */
.nav-burger { display: none !important; }

/* ---------- DEADLINE RIBBON — desktop layout shown by default ----------
   The ribbon (shared.jsx DeadlineRibbon, variations.jsx DeadlineBand) renders
   both a desktop block and a mobile ticker. Desktop hides the ticker; mobile
   hides the desktop block and animates the ticker as a single-line marquee. */
.deadline-ribbon-ticker { display: none; }

/* Workflow section — mobile-only tabs hidden on desktop */
.wf-tabs-mobile { display: none !important; }

/* ============ TABLET (≤1023px) ============ */
@media (max-width: 1023px) {
  /* :not(.bs-hero) — these nav rules must NOT hit the blog/guide PostHero
     <header class="bs-hero">, or it inherits the sticky bar styling and covers
     the real site header on scroll. */
  header:not(.bs-hero) {
    padding: 16px 28px !important;
    flex-wrap: nowrap !important;
    position: relative;
  }
  header:not(.bs-hero) > div:first-of-type { gap: 20px !important; }
  header nav { gap: 14px !important; }

  /* relax dense grids → 2col */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  /* on tablet, hero/insight side-by-side grids → single column (avoids horizontal scroll) */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  section { padding-left: 28px !important; padding-right: 28px !important; }
  /* prevent grid children from overflowing their column */
  section > *, section [style*="grid-template-columns"] > * { min-width: 0; }

  /* Tablet workflow — tighter padding around glass card, single column.
     Top-align (not center) + clear the sticky site header so the top step-tab
     strip stays visible instead of being clipped above the fold / under the nav. */
  .wf-glass-wrap { padding: 24px !important; align-items: flex-start !important; }
  .wf-glass {
    padding: 40px 32px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    min-height: auto !important;
  }
  .wf-title { font-size: 36px !important; }
  .wf-stages { min-height: 280px !important; }
  .wf-pipeline-desktop { display: none !important; }
  .wf-tabs-mobile { display: block !important; order: -1; }
}

/* ============ MOBILE (≤768px) ============ */
@media (max-width: 768px) {
  /* Use `clip` not `hidden` — `overflow:hidden` on html/body promotes the body to a scroll container,
     which breaks `position: sticky` further down the tree (workflow section). `clip` prevents horizontal
     overflow without creating a scroll container. */
  html, body { overflow-x: clip; }
  body { font-size: 15px !important; }

  /* ---------- HEADER ---------- */
  header:not(.bs-hero) {
    padding: 12px 16px !important;
    position: sticky; top: 0; z-index: 50;
    background: var(--color-snow-white);
    flex-wrap: nowrap !important; gap: 12px !important;
  }
  header:not(.bs-hero) > div:first-of-type {
    gap: 0 !important; flex: 1; min-width: 0;
  }
  header nav { display: none !important; }
  /* Hide desktop nav CTA cluster (Sign in + Start free audit pill) on mobile —
     burger handles it. Earlier rule used :last-of-type which targets the mega
     menu panel instead, so the CTA cluster was leaking onto mobile and
     overlapping the wordmark. */
  header .nav-desktop-cta { display: none !important; }
  /* Show burger */
  .nav-burger { display: inline-flex !important; align-items: center; margin-left: auto; }
  .nav-mobile-panel { z-index: 60; }

  /* ---------- DEADLINE RIBBON — single-line scrolling ticker ---------- */
  .deadline-ribbon-desktop { display: none !important; }
  .deadline-ribbon-ticker {
    display: block !important;
    overflow: hidden;
    padding: 12px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .deadline-ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: deadline-ticker 32s linear infinite;
    will-change: transform;
  }
  .deadline-ticker-track span {
    display: inline-block;
    padding-right: 56px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    color: inherit;
  }
  @keyframes deadline-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* Respect reduced-motion preferences — freeze the ticker for users who opt out */
  @media (prefers-reduced-motion: reduce) {
    .deadline-ticker-track { animation: none; }
  }

  /* ---------- ALL GRIDS → 1 COLUMN (broad fallback) ---------- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ---------- AI Showcase mapping grid — keep 3-col, scale compact ----------
     The broad rule above collapses every grid; these cards rely on a visual
     left→right mapping metaphor that must survive on mobile. We re-assert the
     3-col shape with a tighter middle (arrows) and smaller cell typography. */
  .ai-mapping-grid {
    grid-template-columns: 1fr 28px 1fr !important;
    gap: 0 !important;
  }
  .ai-mapping-grid .upload-cell {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
  }
  .ai-mapping-grid .mono { font-size: 9px !important; }

  /* ---------- AI Supplier Validation rows — keep 3-col, scale compact ---------- */
  .ai-validation-row {
    grid-template-columns: 64px 1fr 86px !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  .ai-validation-row .mono { font-size: 9.5px !important; }
  .ai-validation-row > span:nth-of-type(2) { font-size: 10.5px !important; }
  .ai-validation-row > span:last-of-type {
    min-width: 0 !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
  }

  /* ---------- ALL SECTIONS — tight padding ---------- */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ---------- INTERNAL LARGE PADDED CONTAINERS ---------- */
  [style*="padding: 96px"], [style*="padding:96px"],
  [style*="padding: 80px"], [style*="padding:80px"] {
    padding: 36px 22px !important;
  }
  [style*="padding: 64px"], [style*="padding:64px"],
  [style*="padding: 56px"], [style*="padding:56px"] {
    padding: 28px 20px !important;
  }
  [style*="padding: 48px"], [style*="padding:48px"] {
    padding: 24px 18px !important;
  }
  [style*="padding: 40px"], [style*="padding:40px"],
  [style*="padding: 36px"], [style*="padding:36px"],
  [style*="padding: 32px"], [style*="padding:32px"] {
    padding: 22px 18px !important;
  }

  /* ---------- HEADINGS — universal scale-down ---------- */
  h1 { font-size: clamp(28px, 9vw, 38px) !important; line-height: 1.0 !important; letter-spacing: -0.025em !important; }
  h2 { font-size: clamp(24px, 7.5vw, 30px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
  h3 { font-size: clamp(18px, 5.5vw, 22px) !important; line-height: 1.2 !important; }

  /* large quote/lead paragraphs */
  p[style*="font-size: 36"], p[style*="font-size:36"],
  p[style*="font-size: 32"], p[style*="font-size:32"],
  p[style*="font-size: 28"], p[style*="font-size:28"] {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  p[style*="font-size: 22"], p[style*="font-size:22"],
  p[style*="font-size: 19"], p[style*="font-size:19"],
  p[style*="font-size: 18"], p[style*="font-size:18"],
  p[style*="font-size: 17"], p[style*="font-size:17"] {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  /* Big mono numbers (deadline 56px, displays up to 88px) */
  span[style*="font-size: 88"], span[style*="font-size:88"],
  div[style*="font-size: 88"], div[style*="font-size:88"],
  span[style*="font-size: 72"], span[style*="font-size:72"],
  div[style*="font-size: 72"], div[style*="font-size:72"],
  span[style*="font-size: 64"], span[style*="font-size:64"],
  div[style*="font-size: 64"], div[style*="font-size:64"],
  span[style*="font-size: 56"], span[style*="font-size:56"] {
    font-size: 40px !important;
  }

  /* Missing font-size clamps */
  span[style*="font-size: 96"], div[style*="font-size: 96"],
  span[style*="font-size:96"], div[style*="font-size:96"] {
    font-size: 48px !important;
  }

  span[style*="font-size: 84"], div[style*="font-size: 84"],
  span[style*="font-size:84"], div[style*="font-size:84"] {
    font-size: 40px !important;
  }

  span[style*="font-size: 52"], div[style*="font-size: 52"],
  span[style*="font-size:52"], div[style*="font-size:52"] {
    font-size: 32px !important;
  }

  span[style*="font-size: 48"], div[style*="font-size: 48"],
  span[style*="font-size:48"], div[style*="font-size:48"] {
    font-size: 30px !important;
  }

  span[style*="font-size: 44"], div[style*="font-size: 44"],
  span[style*="font-size:44"], div[style*="font-size:44"] {
    font-size: 28px !important;
  }

  span[style*="font-size: 40"], div[style*="font-size: 40"],
  span[style*="font-size:40"], div[style*="font-size:40"] {
    font-size: 26px !important;
  }

  /* ---------- FLEX ROWS — wrap and stack (header excluded; keep nav on one line) ---------- */
  [style*="justify-content: space-between"]:not(header),
  [style*="justify-content:space-between"]:not(header) {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* CTA buttons — full width on mobile */
  .btn-primary, .btn-ghost, button.btn-primary, button.btn-ghost,
  a.btn-primary, a.btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
    box-sizing: border-box;
  }
  .btn-primary { padding: 16px 22px !important; font-size: 15px !important; }
  /* The header CTA button must NOT be full width (it sits in nav) */
  header .btn-primary, header a.btn-primary {
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  /* Parent of two CTA buttons → stack */
  div[style*="display: flex"][style*="gap: 24"]:has(> .btn-primary),
  div[style*="display:flex"][style*="gap:24"]:has(> .btn-primary),
  div[style*="display: flex"][style*="gap: 16"]:has(> .btn-primary),
  div[style*="display:flex"][style*="gap:16"]:has(> .btn-primary) {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 12px !important;
  }

  /* ---------- TRUST/MONO STRIP wrap ---------- */
  div[style*="margin-top: 48"][style*="display: flex"],
  div[style*="margin-top:48"][style*="display:flex"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* ---------- FORMS ---------- */
  form input, form textarea, form select { width: 100% !important; box-sizing: border-box; }
  form label { width: 100% !important; }
  form { padding: 20px !important; gap: 14px !important; }

  /* ---------- CTA form regulation selector — underline tabs on mobile ----------
     Desktop: pill buttons with radio + text. Mobile: minimal tab strip with an
     active underline. Native radio is visually hidden but kept focusable for
     keyboard / screen-reader access; the label click still toggles state.
     Uses :has(input:checked) for CSS-only active state — no React state needed. */
  .reg-options {
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border-bottom: 1px solid rgba(26,60,46,0.10);
  }
  .reg-option {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 10px 6px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    gap: 0 !important;
    font-size: 13px !important;
    color: var(--color-muted-text) !important;
    transition: color 160ms ease, border-color 160ms ease;
    margin-bottom: -1px; /* overlap container hairline so active border lines up */
  }
  .reg-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important; height: 1px !important;
    margin: 0 !important; padding: 0 !important;
  }
  .reg-option:has(input:checked) {
    color: var(--color-forest-green) !important;
    border-bottom-color: var(--color-forest-green) !important;
  }
  .reg-option:has(input:checked) span { font-weight: 600 !important; }

  /* ---------- TABLES ---------- */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* ---------- IMAGES & SVG ---------- */
  svg, img { max-width: 100% !important; height: auto !important; }
  /* Fixed-size brand lockup (nav + footer) must keep its dimensions — the broad
     rule above forces height:auto, collapsing the inline-sized lockup SVG to 0. */
  a[aria-label="Carbonorm"] svg { height: 30px !important; width: auto !important; max-width: none !important; }

  /* ---------- SIDEBAR STICKY — disable on mobile (guides / resources / blog) ---------- */
  .gl-side, .rl-side, .bs-aside {
    position: static !important;
  }

  /* ---------- CONTACT SECTION — mobile reorder ---------- */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 24px !important;
  }
  .contact-left  { order: 1; }
  .contact-grid > form,
  .contact-grid > div[style*="box-shadow"] { order: 2; }
  .contact-trusted {
    order: 3;
  }

  /* ---------- FOOTER ---------- */
  footer {
    padding: 48px 20px 32px !important;
  }
  footer > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    margin-bottom: 48px !important;
  }
  /* Logo + tagline: span full width, center */
  footer > div:first-child > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(252,252,247,0.10);
  }
  footer > div:first-child > div:first-child p {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Bottom bar: horizontal */
  footer > div.mono {
    flex-direction: row !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    font-size: 11px !important;
  }

  /* ---------- min-height reset ---------- */
  [style*="min-height: 280"], [style*="min-height:280"],
  [style*="min-height: 240"], [style*="min-height:240"],
  [style*="min-height: 200"], [style*="min-height:200"],
  [style*="min-height: 360"], [style*="min-height:360"] {
    min-height: auto !important;
  }

  /* ---------- border radius — soften XL ---------- */
  [style*="border-radius: 32"], [style*="border-radius:32"] { border-radius: 20px !important; }
  [style*="border-radius: 24"], [style*="border-radius:24"] { border-radius: 18px !important; }

  /* ---------- tweaks panel (defensive — should not appear in production) ---------- */
  .tweaks-panel, [class*="tweaks-panel"] {
    bottom: 12px !important; right: 12px !important; left: 12px !important;
    width: auto !important; max-width: none !important;
  }

  /* ---------- Glassy Workflow Section (scroll-pinned) ---------- */
  .wf-glass-wrap { padding: 16px 14px 20px !important; align-items: flex-start !important; }
  .wf-glass {
    padding: 24px 18px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    min-height: auto !important;
    border-radius: 18px !important;
  }
  .wf-title { font-size: 26px !important; line-height: 1.1 !important; margin: 8px 0 14px !important; }
  .wf-stages { min-height: 260px !important; }
  /* swap desktop pipeline for the mobile tab strip */
  .wf-pipeline-desktop { display: none !important; }
  .wf-tabs-mobile { display: block !important; order: -1; margin: -8px -4px 6px; }
  /* Slightly shorter scroll spacer on mobile to avoid an oppressive trap (3.2× vh instead of 4×) */
  .wf-section { height: 320vh !important; }

  /* ---------- Team page (/team) ---------- */
  .team-hero { padding: 56px 20px 32px !important; }
  .team-hero h1 { font-size: clamp(34px, 9vw, 44px) !important; line-height: 1.02 !important; margin: 18px 0 20px !important; }
  .team-hero p { font-size: 16px !important; }
  .team-grid-wrap { padding: 0 20px 72px !important; }
  .team-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* ---------- Book page (/contact/book) ---------- */
  .book-hero { padding: 48px 20px 16px !important; }
  .book-hero h1 { font-size: clamp(30px, 8vw, 40px) !important; line-height: 1.04 !important; }
  .book-hero p { font-size: 16px !important; }
  .book-embed { padding: 8px 16px 40px !important; }

  /* ---------- Sticky checklist pill ---------- */
  .checklist-pill {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .checklist-pill-link { padding: 13px 16px !important; }
  .checklist-pill-title { font-size: 13px !important; }
}

/* ============ TINY (≤380px) ============ */
@media (max-width: 380px) {
  section { padding-left: 14px !important; padding-right: 14px !important; }
  h1 { font-size: clamp(26px, 9vw, 32px) !important; }
  header:not(.bs-hero) { padding: 10px 14px !important; }
}