/* Mobile-first base already lives in style.css via clamp()/auto-fit grids.
   Only three hard breakpoints exist, per the prototype's own handoff spec. */

/* ---- < 940px: nav collapses to the drawer ---- */
@media (max-width: 940px) {
  .pc-nav, .pc-header__actions { display: none !important; }
  .pc-burger { display: inline-flex !important; }
  .pc-topbar { display: none; }
}

/* ---- < 860px: two-column splits stack ---- */
@media (max-width: 860px) {
  .hero__grid,
  .grid-2,
  .clarity .lv-panel,
  .lifecycle__panel-head + .lifecycle__facets,
  .approach-path__body,
  .pc-footer__top {
    grid-template-columns: 1fr !important;
  }

  /* grid-auto's auto-fit can land on an odd column count (e.g. 3) for the viewport width, then
     strand the last card(s) alone in a part-empty final row. Pin it to 2 columns on tablet so a
     4-card set (or any set) always fills evenly, then to 1 column on mobile below. */
  .grid-auto { grid-template-columns: repeat(2, 1fr) !important; }
  .approach-path__detail { position: static; }
  /* The scrolling stage list (style.css) is a desktop-only convenience alongside the sticky
     detail card; on tablet/mobile the top icon rail is the only way to switch stages, and the
     detail panel (now full-width, static) covers the same content without the redundant list. */
  .approach-path__list { display: none; }
  .matrix { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); border-radius: 0; border-left: 0; border-right: 0; }
  .risk-curve__detail-helps { max-width: none; }

  /* Services accordion detail: on tablet/mobile, swipe through the three cards instead of
     stacking them into one long vertical read. */
  .services-list__detail {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .services-list__detail::-webkit-scrollbar { display: none; }
  .services-list__detail > div {
    flex: 0 0 min(85vw, 320px);
    scroll-snap-align: start;
    margin-right: 14px;
  }

  /* Lifecycle/approach stage rails: swipe through the stage pills in one row on tablet/mobile
     instead of wrapping them into a multi-row block. (.discipline-chips is nowrap/scrollable at
     all widths already, in style.css.) */
  .lifecycle__rail,
  .approach-path__rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .lifecycle__rail::-webkit-scrollbar,
  .approach-path__rail::-webkit-scrollbar { display: none; }

  /* The "Understand before building" clarity panel: on tablet/mobile show only a representative
     sample (~18) of the 30 concern tags per group, not the full set, to keep each group scannable
     at these widths. */
  .clarity__group .tag--overflow { display: none; }
}

/* ---- < 640px: 2-up grids go single-column ---- */
@media (max-width: 640px) {
  .pillars, .grid-3, .pc-form__grid, .grid-auto, .entry-points {
    grid-template-columns: 1fr !important;
  }
  .hero__stats { gap: 24px; }
  .services-list__detail { padding-left: 0 !important; }
  .services-list__cta { padding-left: 0 !important; }
  .risk-curve__ticks { font-size: 14px }
  .risk-curve__tick { font-size: 14px; padding: 4px 1px; display: flex; align-items: center; justify-content: center; gap: 4px; }
  .risk-curve__tick-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-divider); }
  .risk-curve__tick-num, .risk-curve__tick-label { display: none; }
  .risk-curve__tick.is-active .risk-curve__tick-dot { display: none; }
  .risk-curve__tick.is-active .risk-curve__tick-num,
  .risk-curve__tick.is-active .risk-curve__tick-label { display: inline; }
  .risk-curve__status { margin-left: 0; flex-basis: 100%; }
  .discipline-phases { grid-template-columns: 1fr 1fr; }
  .origin-plate__grid { grid-template-columns: 1fr; gap: 16px; }
  .origin-plate__journey { flex-wrap: wrap; justify-content: space-between; }
  .origin-plate__track { flex-basis: 100%; order: 3; margin-top: 4px; }
  .origin-plate__practice-card { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .pc-footer__bottom { flex-direction: column; align-items: flex-start; }
}