/* ═══════════════════════════════════════════════════════════════════════════
   WEBOGRAPHICS — MOBILE COMPACTION (S60, 2026-10-12)
   Phones only (≤767px). Pure CSS on top of the Bricks layout; nothing in the
   page structure changes. REVERT = remove the 'webo-mobile-compact' enqueue
   in functions.php (or delete this file) — the page is exactly as before.
   ═══════════════════════════════════════════════════════════════════════════ */
.webo-swipe-dots { display: none; }   /* outside phones the dots never show */
@media (max-width: 767px) {

  /* 1 · Performance — the right column repeats what follows further down
         (latest deployment + managed-care dashboard) */
  #perf-section .perf-right-col { display: none !important; }

  /* 2 · Swipe rows — services, hosting plans, deployments: one card at a time */
  #service-section .grid--3,
  #infra-section-v2 .grid--3,
  #deploy-section .flex-grid--3,
  #guarantee-section .guarantee-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 14px !important;
    padding: 4px 4px 6px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #service-section .grid--3::-webkit-scrollbar,
  #infra-section-v2 .grid--3::-webkit-scrollbar,
  #deploy-section .flex-grid--3::-webkit-scrollbar,
  #guarantee-section .guarantee-grid::-webkit-scrollbar { display: none; }
  #service-section .grid--3 > *,
  #infra-section-v2 .grid--3 > *,
  #deploy-section .flex-grid--3 > *,
  #guarantee-section .guarantee-grid > * {
    flex: 0 0 86% !important;
    max-width: 86% !important;
    min-width: 0;
    scroll-snap-align: center;
  }
  .webo-swipe-dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 4px; }
  .webo-swipe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(204,255,0,.25);
                            transition: width .25s ease, background .25s ease; cursor: pointer; }
  .webo-swipe-dots button.is-on { width: 22px; background: #ccff00; }
  body.light-mode .webo-swipe-dots button { background: rgba(21,92,55,.25); }
  body.light-mode .webo-swipe-dots button.is-on { background: #155C37; }

  /* 3 · Support — the live operator console is a desktop showpiece; the support
         drawer (tap GEOFFREY / the support buttons) stays one tap away */
  #support-operator-console .soc-panel { display: none !important; }   /* keep: Geoffrey header, status strip, the three support buttons */
  #support-operator-console .soc-centerpiece { display: flex !important; flex-direction: column !important; }
  #support-operator-console .soc-gc { order: -1; }   /* who reads it first, then status + what you can do */

  /* 4 · Guarantees — swipe row like the others (two narrow columns made the cards longer, not shorter) */

  /* 5 · Section menu (MCC palette) — solid background so the page doesn't show through */
  #mcc-palette-shell .mcc-palette, #mcc-palette-shell .mcc-pal, #mcc-palette-shell [class*="mcc-pal-panel"] {
    background-color: #0b0c0b !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body.light-mode #mcc-palette-shell .mcc-palette, body.light-mode #mcc-palette-shell .mcc-pal,
  body.light-mode #mcc-palette-shell [class*="mcc-pal-panel"] { background-color: #fbfaf5 !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .webo-swipe-dots button { transition: none; }
}


/* 6 · Borlabs cookie dialog — on mobile Chrome, 100vh includes the area under the address bar, so the dialog's top
       (its title) was hidden. Use the visible viewport height instead. */
@media (max-width: 767px) {
  #BorlabsCookieBox .brlbs-h-screen,
  #BorlabsCookieBox .brlbs-dialog-positioner { height: 100dvh !important; }
  #BorlabsCookieBox .brlbs-cmpnt-dialog { max-height: calc(100dvh - 24px) !important; }
}

/* 7 · "Performance is not a feature" — centred like the hero above it; the standards checklist stays left-aligned
       (a centred checklist is hard to scan) but sits as a centred block. */
@media (max-width: 767px) {
  #perf-section .perf-left-col { text-align: center !important; }
  #perf-section .perf-left-col > .text--technical,
  #perf-section .perf-left-col > .perf-statement__headline,
  #perf-section .perf-left-col > .brxe-text-basic { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
  #perf-section .perf-left-col .perf-standards { text-align: left !important; margin-left: auto !important; margin-right: auto !important; }
  #perf-section .perf-left-col .perf-hero-cta { align-items: center !important; text-align: center !important; }
}