/* Responsive layer for the redesigned static pages.
   The pages carry desktop-first INLINE styles (from the design references), so
   these media queries override the inline grids / nav / panels / type at
   breakpoints using attribute selectors + !important. Desktop is unchanged. */

/* ============ TABLET (<=1024px): 4-col -> 2-col ============ */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============ MOBILE (<=768px) ============ */
@media (max-width: 768px) {

  /* --- stack all multi-column content grids to a single column --- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.25fr auto 1fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 230px 1fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* --- bus-line schematic stations: single column, line + dot to the left --- */
  [style*="grid-template-columns: 1fr 56px 1fr"] {
    grid-template-columns: 28px 1fr !important;
    gap: 14px !important;
    text-align: left !important;
  }
  /* station text blocks: kill right-align, flip flex to left */
  [style*="grid-template-columns: 1fr 56px 1fr"] > div[style*="text-align: right"],
  [style*="grid-template-columns: 1fr 56px 1fr"] > div[style*="align-items: flex-end"] {
    text-align: left !important;
    align-items: flex-start !important;
    grid-column: 2 !important;
  }
  /* the annotation column + the dot column both flow into col 2/1 */
  [style*="grid-template-columns: 1fr 56px 1fr"] > div { grid-column: 2 !important; }
  [style*="grid-template-columns: 1fr 56px 1fr"] > div[style*="justify-content: center"] { grid-column: 1 !important; }
  /* move the vertical bus line to the left edge */
  [style*="left: 50%"][style*="width: 3px"] {
    left: 13px !important;
    transform: none !important;
  }

  /* --- NAV: wrap the top bar; links become a scrollable second row --- */
  nav > div:first-child {
    height: auto !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  nav > div:first-child > div {
    order: 3;
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
  }
  /* journey pill bar already scrolls; just tighten it */
  nav > div:nth-child(2) > div { justify-content: flex-start !important; }

  /* --- typography: scale fixed headings down --- */
  h1 { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(23px, 6.2vw, 30px) !important; line-height: 1.18 !important; }

  /* --- padding: trim big horizontal section padding --- */
  [style*="padding: 88px 24px"], [style*="padding: 96px 24px"], [style*="padding: 110px 24px"],
  [style*="padding: 72px 24px"], [style*="padding: 76px 24px"], [style*="padding: 64px 24px"],
  [style*="padding: 44px 48px"], [style*="padding: 48px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  [style*="padding: 44px 48px"] { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* --- wide product panels / mocks: let them scroll instead of clipping --- */
  [role="img"][aria-label] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* the hero browser-frame product screen */
  [style*="width: 1440px"] { max-width: none !important; }

  /* --- integrations oval: give it breathing room; chips can wrap tighter --- */
  [style*="aspect-ratio"] { min-height: 340px; }

  /* --- footer: stack the link columns --- */
  footer [style*="display: flex"][style*="gap: 48px"] { gap: 28px !important; }
}

/* ============ SMALL PHONE (<=430px): tighten further ============ */
@media (max-width: 430px) {
  h1 { font-size: clamp(28px, 9vw, 36px) !important; }
  nav > div:first-child > div { font-size: 12.5px !important; }
}