/* ============================================================
   CodeCrewSV — mobile responsiveness patches
   Loaded on every page. Desktop layout is unchanged; these rules
   only take effect at small viewport widths.
   ============================================================ */

/* Global guard: never let anything push the page wider than the
   screen (prevents the "zoom-out / white gap on the right" bug) --- */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
img, svg, video, iframe {
  max-width: 100%;
}

/* Tighten oversized section padding on phones ---------------- */
@media (max-width: 600px) {
  section[style*="padding:100px 0"],
  section[style*="padding:110px 0"],
  section[style*="padding:90px 0"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  /* Give content a little more width on narrow screens */
  [style*="padding:0 28px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Home hero: the tilted 3D "screens" grid is decorative and, on
   phones, it both overflows (iOS doesn't clip 3D children) and
   leaves a wall of empty space. Drop it and let the hero size to
   its text on small screens. Desktop keeps the full parallax. ---- */
@media (max-width: 760px) {
  .cc-hero {
    height: auto !important;
    min-height: 0 !important;
    perspective: none !important;
  }
  .cc-hero-inner {
    padding-top: 116px !important;
    padding-bottom: 56px !important;
  }
  .cc-hero [aria-hidden="true"] {
    display: none !important;
  }
}

/* Two-column splits stack into one column on phones ----------- */
@media (max-width: 820px) {
  .cc-founder,
  .cc-about-header,
  .cc-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  /* the contact sidebar should not stay pinned once stacked */
  .cc-contact-aside {
    position: static !important;
    top: auto !important;
  }
}