/* ==========================================================================
   responsive.css — Mobile-first fluid scaling
   The Figma frame is 1920px wide and built on rem, so the desktop layout
   scales proportionally by changing the root font-size:
     ≥1920px  → 16px  (1:1 with Figma)
     1200–1919 → 100vw / 120  (e.g. 1440 → 12px, 1280 → 10.67px)
   Below 1200px the two-column layouts stack and a fixed, readable root
   size is used instead.
   ========================================================================== */

/* ---------- Mobile (320–767) ---------- */
html {
  font-size: 12.8px; /* 20px design text → 16px */
}

.ws-page {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ws-topbar {
  height: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
}

.ws-logo img {
  width: 11.25rem;
  height: 2.2626rem;
}

.ws-stepper {
  margin-top: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.ws-stepper::-webkit-scrollbar {
  display: none;
}

.ws-stepper__list {
  grid-template-columns: repeat(6, minmax(7.5rem, 1fr));
  min-width: 48rem;
}

.ws-card {
  padding: 1.75rem 1.25rem;
  border-radius: 1.25rem;
}

.ws-card__band {
  height: 6.5rem;
}

.ws-card__title {
  font-size: 1.875rem;
  min-height: 3rem;
}

.ws-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ws-main-col,
.ws-side-col {
  width: 100%;
}

.ws-sticky {
  position: static;
}

.ws-footer {
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: 1.5rem 0;
  text-align: center;
}

.ws-footer__copy {
  padding-left: 0;
}

/* responsive utility hooks used in markup */
.stack-sm {
  flex-direction: column;
  align-items: stretch !important;
}

.grid-modules,
.grid-caps,
.grid-milestones {
  grid-template-columns: minmax(0, 1fr);
}

.wrap-sm {
  white-space: normal !important;
}

/* ---------- Large mobile (480+) ---------- */
@media (min-width: 480px) {
  .grid-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Tablet (768–1199) ---------- */
@media (min-width: 768px) {
  html {
    font-size: 13.6px;
  }

  .ws-page {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ws-stepper {
    overflow: visible;
  }

  .ws-stepper__list {
    min-width: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ws-stepper__item {
    font-size: 1rem;
  }

  .ws-card {
    padding: 2.25rem 2.5rem;
    border-radius: 1.5rem;
  }

  .ws-card__band {
    height: 7.25rem;
  }

  .ws-card__title {
    font-size: 2.25rem;
    min-height: 0;
  }

  .ws-footer {
    flex-direction: row;
    justify-content: space-between;
    height: 5.25rem;
    padding: 0;
    text-align: left;
  }

  .ws-footer__copy {
    padding-left: 0.1875rem;
  }

  .stack-sm {
    flex-direction: row;
    align-items: center !important;
  }

  /* Organization code has a hint paragraph under its input that Business
     email doesn't, making that column taller — centering the row (like
     every other two-up row here) pulls Business email's input down into
     the middle of that extra height instead of lining it up with
     Organization code's. */
  .stack-sm.align-top-row {
    align-items: flex-start !important;
  }

  /* Review step's "Selected Modules" row: the value is a long, wrapping
     comma list, so vertically centering the one-line label against it
     (like the other short-value rows above it) leaves no room for the
     label itself and forces it to wrap word-by-word instead. Top-align
     it against the first line of the list instead. */
  .stack-sm.review-modules-row {
    align-items: flex-start !important;
  }

  .grid-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-caps,
  .grid-milestones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wrap-sm {
    white-space: nowrap !important;
  }
}

/* ---------- Desktop (1200+) — Figma proportions ---------- */
@media (min-width: 1200px) {
  html {
    font-size: calc(100vw / 120);
  }

  .ws-page {
    padding-left: 0;
    padding-right: 0;
  }

  .ws-shell {
    width: 100rem;
  }

  .ws-topbar {
    height: 8.0625rem;
    padding-top: 3rem;
    padding-bottom: 2.75rem;
  }

  .ws-logo img {
    width: 15rem;
    height: 3.0168rem;
  }

  .ws-stepper {
    margin-top: 2.5rem;
  }

  .ws-stepper__item {
    font-size: 1.25rem;
  }

  .ws-card {
    padding: 2.25rem 3.5rem;
  }

  .ws-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .ws-main-col {
    width: 66rem;
    flex: none;
  }

  .ws-side-col {
    width: 32rem;
    flex: none;
  }

  .ws-sticky {
    position: sticky;
    top: 1.5rem;
  }
}

/* ---------- ≥1920px: lock to the 1:1 Figma scale ---------- */
@media (min-width: 1920px) {
  html {
    font-size: 16px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Review: card height matches plan panel on desktop ---------- */
@media (min-width: 1200px) {
  .ws-layout--stretch {
    align-items: stretch;
  }
}

/* ---------- Desktop-only no-wrap (Figma single-line text) ---------- */
@media (min-width: 1200px) {
  .nowrap-lg {
    white-space: nowrap;
  }
}