/* responsive.css — mobile layout fixes for the V2 static pages (vivid-coach.com).
   The dc-runtime pages are inline-styled with fixed multi-column grids that overflow
   or crush on phones. Every rule here lives behind a max-width media query, so
   desktop rendering is byte-for-byte unchanged. !important is required to override
   inline styles. Classes are authored in the *.dc.html templates; the runtime maps
   class -> className, so they survive hydration.
   879px matches the Nav's hamburger switch (innerWidth < 880 in Nav.dc.html), so
   the whole site enters "mobile mode" at one width. */

/* ---- Wide-to-single stacking: 3-column card grids, image+text feature grids ---- */
@media (max-width: 879px) {
  .vc-stack-md {
    grid-template-columns: 1fr !important;
  }
  /* Featured coach sections that put text before image in the DOM: show the
     portrait first when stacked, matching the image-first sections. */
  .vc-feat-rev > div:first-child {
    order: 2;
  }
  /* Coaches page stats row (30 / 1 free switch / Unlimited): stack vertically
     and drop the vertical divider bars that dangle when the row wraps. */
  .vc-stats {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .vc-stat-div {
    display: none !important;
  }
  /* Footer: brand block full-width on top, link columns two-up. */
  .vc-grid-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 24px !important;
  }
  .vc-grid-footer > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Homepage pricing teaser right cell: its desktop divider is a left border;
     stacked it becomes a top border. */
  .vc-price-cell {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 28px !important;
  }
}

/* ---- Narrow stacking: 2-column card grids and plan cards ---- */
@media (max-width: 720px) {
  .vc-stack-sm {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Phone-width tightening ---- */
@media (max-width: 640px) {
  /* Pricing Free-vs-Premium table: slimmer cell padding so all three columns
     breathe at 375px. */
  .vc-cmp > div {
    padding: 13px 12px !important;
  }
  /* Footer collapses to a single column so long links (the support email)
     never clip. */
  .vc-grid-footer {
    grid-template-columns: 1fr !important;
  }
}