/* Mobile responsiveness for the inline-styled React layout.
   Inline styles override stylesheet rules, so these mobile overrides use
   !important to win. Class hooks are added on the grid containers in the
   component JSX (vel-split, vel-cards, vel-cards-4, vel-stats, vel-header…). */

/* ---- Tablet / large phone ---- */
@media (max-width: 900px) {
  /* Let single-column grid tracks actually shrink to the viewport.
     Grid/flex children default to min-width:auto and otherwise refuse to
     shrink below their content, which clips wide headlines & images. */
  .vel-split, .vel-cards, .vel-ws-body, .vel-stats { min-width: 0 !important; }
  .vel-split > *, .vel-cards > *, .vel-ws-body > *, .vel-stats > * { min-width: 0 !important; }
  .vel-split img, .vel-ws-body img, .vel-cards img { max-width: 100% !important; height: auto !important; }
  /* Safety net: never let fixed-width text blocks exceed their column. */
  .vel-split p, .vel-split h1, .vel-split h2, .vel-cards p, .vel-ws-body p { max-width: 100% !important; }

  /* Two-column content layouts (hero, manifesto, section headers, donate) */
  .vel-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .vel-split--end { align-items: start !important; }

  /* The right-hand text columns that were right-aligned read better left */
  .vel-split--end > *:last-child,
  .vel-meta-right { text-align: left !important; }

  /* Card grids → single column */
  .vel-cards { grid-template-columns: 1fr !important; }

  /* Footer link columns → two-up */
  .vel-cards-4 { grid-template-columns: 1fr 1fr !important; gap: 36px 32px !important; }

  /* Workshop expanded body (was 1fr / fixed 473px) → stack */
  .vel-ws-body { grid-template-columns: 1fr !important; row-gap: 24px !important; }

  /* Header: let the nav wrap to its own scrollable row */
  .vel-header { height: auto !important; flex-wrap: wrap !important;
                padding-top: 12px !important; padding-bottom: 12px !important;
                row-gap: 10px !important; }
  .vel-nav { order: 3; width: 100%;
             overflow-x: auto; -webkit-overflow-scrolling: touch;
             gap: 22px !important; padding-bottom: 2px; }
}

/* ---- Phones ---- */
@media (max-width: 560px) {
  .vel-stats { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .vel-cards-4 { grid-template-columns: 1fr 1fr !important; }

  /* Trim the big horizontal page padding on small screens */
  .vel-pad { padding-left: 20px !important; padding-right: 20px !important; }

  /* Tighten oversized vertical section padding */
  .vel-section-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
}