/* Moved from partials/mobile-fixes.njk on 2026-10-23 (v66 refactor). Linked from that partial at the same spot. */
/* OCTET group pages, Forum 1080, coaching + advisory pages: the uppercase line under the hero eyebrow
   was set to never wrap, which pushed the whole hero (headline included) past the screen edge. */
@media (max-width: 700px) {
  .sp-hero-stat-line { white-space: normal; }
}

/* Circular "8 peer advisors" diagram (OCTET overview + group pages). The page CSS shrank the ring to 290px on phones
   but left the eight icons positioned for a 330px ring, so the diagram went lopsided and off-screen.
   Keep the 330px geometry and scale the whole diagram instead. */
@media (max-width: 640px) {
  .wb-ring { width: 330px; height: 330px; }
}
@media (max-width: 430px) { .wb-ring { zoom: 0.85; } }
@media (max-width: 370px) { .wb-ring { zoom: 0.8; } }
@media (max-width: 340px) { .wb-ring { zoom: 0.72; } }

/* Forum 1080: the three program cards (Cross-Board Sessions / Guest Experts / Consequential Issues) stack on phones. */
@media (max-width: 640px) {
  div[style*="repeat(3,1fr);gap:20px;margin-top:36px"] { grid-template-columns: 1fr !important; }
}

/* Meet John: the bio + credentials columns stack on phones instead of forcing a 600px-wide page. */
@media (max-width: 760px) {
  div[style*="grid-template-columns:1fr 300px"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  div[style*="grid-template-columns:1fr 300px"] > div[style*="padding-top:80px"] { padding-top: 0 !important; }
  div[style*="grid-template-columns:1fr 1fr;gap:64px"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  div[style*="grid-template-columns:1fr 1fr;gap:64px"] > * { min-width: 0; overflow-wrap: break-word; }
}
@media (max-width: 480px) {
  /* Meet John photo: sits above the bio on phones instead of squeezing the first lines into a thin column. */
  img[src*="meet-john-hero"][style*="float:left"] { float: none !important; display: block; margin: 4px 0 20px !important; }
}
@media (max-width: 360px) {
  /* Meet John "40+ years / … / 4 continents" stat row: tighter gap on the smallest phones. */
  div[style*="repeat(3,1fr);gap:24px;border-top"] { gap: 12px !important; }
}

/* Homepage + About: two-across audience cards were 2px too wide on small phones; single column on the smallest. */
@media (max-width: 400px) {
  .segment-grid { gap: 12px; }
}
@media (max-width: 340px) {
  .segment-grid { grid-template-columns: 1fr; }
}

/* "Book a Free Conversation" style buttons may wrap on the smallest phones instead of overflowing. */
@media (max-width: 360px) {
  .oc-cta-btn { white-space: normal; text-align: center; }
}