/* mobile-fixes.css — patches loaded AFTER style.css.
   IMPORTANT: every rule here is scoped to small viewports so desktop padding
   from style.css is left fully intact. */

/* ---- 1. Hard overflow guard (safe on all viewports) ---- */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html,
  body { overflow-x: hidden; }
}

@media (max-width: 768px) {
  /* iOS safe-area awareness for notched devices — MOBILE ONLY */
  @supports (padding: max(0px)) {
    .site-header .container,
    .site-footer .container,
    .hero > .container {
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
    }
  }

  /* Quote veil staying inside the viewport on mobile */
  .quote-section .container::before {
    inset: -24px -16px;
  }

  /* Section glow clouds constrained on small screens */
  .whoweare-section::before,
  .quote-section::before,
  .news-section::before {
    max-width: 70vw;
    max-height: 70vw;
    left: -20%;
  }
  .whoweare-section::after,
  .quote-section::after,
  .news-section::after {
    max-width: 60vw;
    max-height: 60vw;
    right: -20%;
  }

  /* Align container--row gutters with header/footer gutters */
  .container--row {
    padding-inline: 24px;
  }

  /* Hero overflow guard */
  .hero { overflow-x: clip; }

  /* Long words don't push columns wider */
  .news__title,
  .news__excerpt,
  .news__date,
  .whoweare__stack p,
  .quote blockquote {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  /* Footer social icons sizing */
  .footer__social svg { width: 18px; height: 18px; }

  /* Vertical rhythm tuning */
  :root {
    --bgx-mobile-section-pad: 56px;
    --bgx-mobile-inner-gap: 24px;
  }

  .news__excerpt { min-height: 0 !important; }

  .quote-section,
  .quote-pad {
    padding-block: 0 !important;
    margin-block: 0 !important;
  }
  .quote-section > .container {
    padding-block: var(--bgx-mobile-section-pad) !important;
    margin-block: 0 !important;
  }
  .quote-section > .container > *:first-child,
  .quote-section figure,
  .quote-section blockquote { margin-block-start: 0 !important; }
  .quote-section > .container > *:last-child,
  .quote-section figcaption { margin-block-end: 0 !important; }
  .quote-section .container::before { inset: 0 -16px !important; }
}

/* Disable cursor-fx on touch devices (no viewport scope needed) */
@media (hover: none), (pointer: coarse) {
  html.bgx-cursor-on,
  html.bgx-cursor-on * { cursor: auto !important; }
}

/* ============================================================
   MOBILE PADDING UNIFORMITY (<=768px)
   Mission page: bring "Mission statement" and "Values" sections
   down to 56px top/bottom, matching every other section site-wide
   (they were 97px). Desktop keeps its 97px rhythm.
   ============================================================ */
@media (max-width: 768px) {
  .mission-statements {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .values-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ============================================================
   MOBILE — Our Mission / Our Vision clean stacked layout (<=768px)
   On mobile the grid collapses to a single column. We want, in order:
     1) Our Mission   2) glowing dot (in the MIDDLE)   3) Our Vision
   Both text blocks centered, with comfortable equal spacing, and the
   dot sitting exactly between the two statements (not above Mission).
   ============================================================ */
@media (max-width: 768px) {
  /* Single column, even vertical gaps between the three items */
  .mission-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    align-items: center !important;
    justify-items: center !important;
  }

  /* Put the dot back in natural source order = BETWEEN the two blocks */
  .mission-orb {
    order: 0 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  /* Both statements: full width, centered text, no desktop offsets */
  .mission-statement--mission,
  .mission-statement--vision {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
  .mission-statement--mission .mission-statement__eyebrow,
  .mission-statement--vision .mission-statement__eyebrow,
  .mission-statement--mission .mission-statement__body,
  .mission-statement--vision .mission-statement__body {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   MOBILE — Fix the hero ("partie 1") being cut off (<=768px)
   The two lead lines use white-space: nowrap on desktop, which makes
   them overflow off-screen on a narrow viewport. Allow wrapping and
   scale the font to fit the column.
   ============================================================ */
@media (max-width: 768px) {
  .mission-lead__line {
    white-space: normal !important;
    font-size: clamp(20px, 6.2vw, 27px) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }
}


/* ============================================================
   DESKTOP (>=769px) — aesthetic placement of Our Mission,
   Our Vision and the central glowing dot.
   Design goals (standard layout principles):
   - Both titles share the SAME baseline (top-aligned row)
   - Each paragraph is cleanly centered in its own column
     (remove the base stylesheet's pixel translateX / negative
     margins that make the text bleed off-center)
   - Vision mirrors Mission around the central dot, equal gaps
   - Mission keeps its original column — it is NOT moved
   ============================================================ */
@media (min-width: 769px) {
  /* Align the three grid items to the top so the two titles line up */
  .mission-grid {
    align-items: start !important;
  }
  /* Clean, centered text columns — drop the bleed offsets */
  .mission-statement--vision {
    transform: none !important;
  }
  .mission-statement--mission .mission-statement__body,
  .mission-statement--vision .mission-statement__body,
  .mission-statement--mission .mission-statement__eyebrow,
  .mission-statement--vision .mission-statement__eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* Center the glowing dot perfectly within the grid — both axes.
     Horizontal: the orb column already sits on page center (1fr auto 1fr).
     Vertical: the grid uses align-items:start (to align the two titles),
     so we override the orb only, stretching its column to full height and
     centering its contents, which lands the dot at the exact mid-height. */
  .mission-orb {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ============================================================
   CONNECT page (desktop >=769px) — vertically align the
   "Get in touch" eyebrow with the form labels NAME / EMAIL.
   Measured: eyebrow top=60, labels top=52 -> raise by 8px.
   ============================================================ */
@media (min-width: 769px) {
  .connect-left .connect-eyebrow {
    display: inline-block !important;
    position: relative !important;
    top: -8px !important;
  }
}