/* ============================================================================
 * Responsive — site-wide mobile polish.
 *
 * Loaded LAST in the CSS module chain so it can refine any component without
 * fighting specificity. Targets mobile (≤ 1023px) and small mobile (≤ 480px).
 *
 * Covers:
 *   - Section vertical spacing tightening
 *   - Typography downscaling for headings on small screens
 *   - Card padding and spacing
 *   - Button touch targets
 *   - Header brand mark / mobile drawer refinements
 *   - Trust strip / numbers / stats grid behaviour
 *   - FAQ accordion mobile padding
 *   - Footer columns + copyright row
 * ========================================================================== */

/* ── Tablet & mobile (≤ 1023px) ─────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Section vertical rhythm — tighter than desktop */
  .wb-section {
    padding-block: clamp(2.75rem, 7vw + 1rem, 4.5rem);
  }
  .wb-section--sm {
    padding-block: clamp(2rem, 5vw + 1rem, 3.5rem);
  }

  /* Section header — less reserved space, tighter title */
  .wb-section-header {
    margin-bottom: var(--wb-space-6);
    gap: var(--wb-space-2);
  }
  .wb-section-header__title {
    font-size: clamp(1.375rem, 4vw + 0.625rem, 2rem);
    line-height: 1.2;
  }
  .wb-section-header__lead {
    font-size: var(--wb-text-base);
    line-height: 1.6;
  }
  .wb-section-header__eyebrow {
    font-size: 10.5px;
  }
  .wb-section-header--inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wb-space-3);
  }

  /* Buttons — touch-friendly minimum height + tightened typography */
  .wb-btn {
    min-height: 42px;
    padding: 0.625rem 1.125rem;
  }
  .wb-btn--lg {
    min-height: 48px;
    padding: 0.875rem 1.375rem;
    font-size: var(--wb-text-sm);
  }
  .wb-btn--sm {
    min-height: 36px;
  }

  /* Cards — tighter padding */
  .wb-card {
    --wb-card-pad: var(--wb-space-5);
  }
  .wb-card--service,
  .wb-card--lg {
    --wb-card-pad: var(--wb-space-6);
  }
  .wb-card__title {
    font-size: var(--wb-text-lg);
  }
  .wb-card--lg .wb-card__title {
    font-size: var(--wb-text-xl);
  }

  /* Grids — gap tighter on small screens */
  .wb-grid {
    --wb-grid-gap: var(--wb-space-4);
  }
  .wb-grid--gap-md {
    --wb-grid-gap: var(--wb-space-4);
  }
  .wb-grid--gap-lg {
    --wb-grid-gap: var(--wb-space-5);
  }

  /* Splits — full stack, sensible gap */
  .wb-split {
    gap: var(--wb-space-7);
  }

  /* Trust strip — single-column on small mobile, neat 2x2 on slightly bigger */
  .wb-trust-strip__item {
    padding: var(--wb-space-4);
  }
  .wb-trust-strip__title {
    font-size: var(--wb-text-base);
  }

  /* By-the-numbers — tighter padding, smaller value */
  .wb-numbers__item {
    padding: var(--wb-space-4);
  }
  .wb-numbers__value {
    font-size: clamp(1.5rem, 5vw + 0.5rem, 2.25rem);
  }

  /* Infrastructure list items */
  .wb-infra__item {
    padding: var(--wb-space-3) var(--wb-space-4);
    font-size: var(--wb-text-sm);
  }
  .wb-infra__visual {
    padding: var(--wb-space-5);
  }

  /* Globe grid — slightly tighter */
  .wb-globe-grid__item {
    padding: var(--wb-space-4);
  }
  .wb-globe-grid__country {
    font-size: var(--wb-text-sm);
  }

  /* Stats row */
  .wb-stat__value {
    font-size: clamp(1.625rem, 5vw + 0.5rem, 2.5rem);
  }

  /* FAQ — tighter padding so questions don't feel cavernous */
  .wb-faq__q {
    padding: var(--wb-space-4) var(--wb-space-5);
    font-size: var(--wb-text-base);
  }
  .wb-faq__a-body {
    padding: 0 var(--wb-space-5) var(--wb-space-4);
    font-size: var(--wb-text-sm);
  }
  .wb-faq__q-icon { width: 16px; height: 16px; }

  /* CTA band — tighter */
  .wb-cta-band {
    padding: var(--wb-space-7) var(--wb-space-5);
    grid-template-columns: 1fr !important;
    gap: var(--wb-space-5);
  }
  .wb-cta-band__title {
    font-size: clamp(1.375rem, 4vw + 0.625rem, 2rem);
  }
  .wb-cta-band__actions .wb-btn {
    width: 100%;
  }

  /* Site header — tighter min-height */
  .wb-site-header__inner {
    min-height: 56px;
    padding-block: var(--wb-space-2);
  }
  .wb-site-header__brand img {
    height: 28px;
  }
  .wb-site-header__actions {
    display: none;
  }

  /* Footer — tighter top section */
  .wb-site-footer__top {
    padding-block: var(--wb-space-9);
    gap: var(--wb-space-6);
  }
  .wb-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wb-space-3);
  }

  /* Forms — full-width controls, comfortable typography for thumb input */
  .wb-input,
  .wb-textarea,
  .wb-select {
    font-size: 16px; /* prevents iOS Safari zoom on focus */
    padding: 0.75rem 0.875rem;
    min-height: 44px;
  }
  .wb-form-row--2,
  .wb-form-row--3 { grid-template-columns: 1fr; }
  .wb-form { gap: var(--wb-space-4); }
  .wb-fieldset { gap: var(--wb-space-2); }

  /* Mobile drawer — generous touch zones */
  .wb-mobile-nav__panel {
    padding: var(--wb-space-5) var(--wb-space-4) var(--wb-space-6);
  }
  .wb-mobile-nav .wb-nav__link {
    padding: var(--wb-space-3);
    font-size: var(--wb-text-base);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Modal — full screen-ish on mobile so dialogs are usable */
  .wb-modal__dialog {
    max-width: 100%;
    margin: var(--wb-space-3);
    border-radius: var(--wb-radius-lg);
  }
  .wb-modal__header,
  .wb-modal__body,
  .wb-modal__footer {
    padding: var(--wb-space-5);
  }

  /* Section split layouts — always stack on mobile */
  .wb-split,
  .wb-split--reverse,
  .wb-split--5-7,
  .wb-split--7-5 { grid-template-columns: 1fr; }
  .wb-split--reverse > :first-child { order: 0; }

  /* Infrastructure split — list grid back to 1 col on small mobile */
  .wb-infra__list { grid-template-columns: 1fr; }

  /* Body reading comfort */
  body {
    font-size: 15.5px;
    line-height: 1.6;
  }
}

/* ── Small mobile (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Container — bring padding to a sensible mobile minimum */
  :root {
    --wb-container-padding: 1rem;
  }

  /* Section spacing — minimum acceptable */
  .wb-section {
    padding-block: clamp(2.25rem, 6vw + 1rem, 3rem);
  }

  /* H1 / H2 scale further */
  .wb-section-header__title {
    font-size: clamp(1.25rem, 5vw + 0.25rem, 1.75rem);
  }

  /* Cards — single column always */
  .wb-grid--3,
  .wb-grid--4 {
    grid-template-columns: 1fr;
  }

  /* Trust strip — 1 col on very small screens */
  .wb-trust-strip__grid {
    grid-template-columns: 1fr;
    gap: var(--wb-space-3);
  }

  /* Numbers — 2 col, never 4 on tiny */
  .wb-numbers,
  .wb-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wb-space-4);
  }

  /* Globe grid — 1 col */
  .wb-globe-grid {
    grid-template-columns: 1fr;
  }

  /* Hero progress dots — center if buttons stacked */
  .wb-hero__progress {
    justify-content: center;
  }

  /* CTA band — even tighter */
  .wb-cta-band {
    padding: var(--wb-space-6) var(--wb-space-4);
  }

  /* Footer — single column entirely */
  .wb-site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--wb-space-7);
  }
}

/* ── Catch-all overflow guard ───────────────────────────────────────────── */
/* NOTE: do NOT apply `overflow-x: hidden` to html or body — it BREAKS
 * `position: sticky` on the hero pin-stage and can mis-anchor `position:
 * fixed` children like the bg-fx layer. Instead, clip overflow on the
 * specific containers most likely to cause horizontal scroll. */

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Hero on mobile must clip its own horizontal overflow so the absolutely
 * positioned floating cards (even when display:none) and 3D-transformed
 * window can never push the page wider than viewport.
 * `overflow: clip` does NOT establish a scroll container, so it doesn't
 * break sticky positioning further up the tree. */
@media (max-width: 1023px) {
  .wb-hero,
  .wb-hero__pin-stage,
  .wb-hero__visual,
  .wb-hero__content {
    max-width: 100%;
    overflow-x: clip;
  }
  /* Defence in depth: section-level clip for any rogue child that pushes wide */
  .wb-section,
  .wb-trust-strip,
  .wb-site-footer {
    overflow-x: clip;
  }

  /* Wrap long words / URLs that would otherwise force horizontal scroll */
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, span, a,
  .wb-card__title,
  .wb-card__body,
  .wb-section-header__title,
  .wb-section-header__lead {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Containers — never wider than viewport */
  .wb-container,
  .wb-container--xl,
  .wb-container--lg,
  .wb-container--md,
  .wb-container--sm,
  .wb-container--narrow {
    max-width: 100%;
  }

  /* Tables — wrap or scroll on small screens */
  table { display: block; overflow-x: auto; width: 100%; }
}