/* Carric — responsive layer.
   The site is built with inline styles, so these rules target the rendered
   (React-serialized, space-after-colon) inline patterns with !important.
   Desktop-first: base = desktop; overrides kick in at <=768px. */

/* Mobile nav controls: hidden on desktop by default */
.nav-burger { display: none; }
.nav-mobile { display: none; }

img, video { max-width: 100%; }

@media (max-width: 768px) {

  /* ---- Navigation: swap desktop row for hamburger ---- */
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .nav-mobile {
    display: flex !important;
    min-height: calc(100vh - 72px) !important;
    min-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
  }

  /* ---- Containers: tighten the 48px side gutters ---- */
  [style*="max-width: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---- Collapse every multi-column grid to a single column ---- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* ---- Homepage stakes list: undo desktop alternating padding/borders ---- */
  .stakes-grid {
    grid-template-columns: 1fr !important;
  }

  .stakes-grid > div,
  .stakes-item {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: start !important;
    padding: 24px 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  .stakes-grid > div > span:first-child,
  .stakes-number {
    width: 32px !important;
    margin-top: 4px !important;
    text-align: left !important;
  }

  .stakes-grid > div > p,
  .stakes-copy {
    margin: 0 !important;
  }

  /* ---- Scale down oversized display type ---- */
  [style*="font-size: 72px"] { font-size: 38px !important; }
  [style*="font-size: 64px"] { font-size: 36px !important; }
  [style*="font-size: 58px"] { font-size: 33px !important; }
  [style*="font-size: 56px"] { font-size: 32px !important; }
  [style*="font-size: 54px"] { font-size: 32px !important; }
  [style*="font-size: 52px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size: 44px"] { font-size: 28px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 32px"] { font-size: 25px !important; }
  [style*="font-size: 30px"] { font-size: 24px !important; }

  /* ---- Hero: trim the tall vertical padding ---- */
  [style*="padding: 128px 48px 116px"] { padding-top: 92px !important; padding-bottom: 60px !important; }
}