/* ═══════════════════════════════════════════════════════════════════════════
 * MOBILE LAYER — phones and small tablets only.
 *
 * THE ONE RULE: every selector in this file must sit inside a
 * `@media (max-width: …)` or `@media (hover: none)` block. Nothing here may
 * match at desktop widths. The laptop rendering is signed off and must stay
 * byte-identical, so this file adds a mobile layer rather than editing the
 * desktop stylesheets it sits on top of.
 *
 * Loaded LAST on all 46 pages. That ordering is deliberate and load-bearing:
 *  - it beats fx.css's ≤900px nav rail (which is what we replace with a drawer)
 *  - it beats legal.css's ≤760px `.nav-links{display:none}`, which otherwise
 *    leaves contact-us.html with no navigation at all on a phone
 *  - it beats about-us.html's 270-line inline copy of category-chrome.css
 *
 * Breakpoints are reused from the existing stylesheets, not invented:
 *   900px — fx.css's own navbar breakpoint (drawer boundary)
 *   700px — beckn.css's dominant collapse floor
 *   480px — category-chrome.css / legal.css's small-phone floor
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. GLOBAL ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* `clip`, not `hidden`: hidden would make these a scroll container and kill
     every `position:sticky` descendant (the resources sidebar, the legal TOC,
     the navbar itself). */
  html, body { overflow-x: clip; }

  /* fx.css only sets this at ≤640px, so anchor jumps between 641 and 900px
     land underneath the fixed header. */
  html { scroll-padding-top: 110px; }
}


/* ═══ 2. NAVIGATION — hamburger drawer ═══════════════════════════════════
 * Below 900px the nine nav links stop being a horizontal scroll rail (which
 * overflowed the 56px glass pill it lived in) and become a drawer hanging
 * below the pill. The drawer IS the existing `.nav-links` element restyled —
 * no duplicate menu markup, so the React navbar and the 45 static copies are
 * driven by exactly the same rules. The toggle button is injected by fx.js and
 * only ever exists below 900px.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .nav-burger {
    /* The pill is space-between: without the auto margin a third child would
       float to the centre, stranding the CTA between logo and burger. */
    order: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(27, 27, 27, .10);
    border-radius: 999px;
    background: rgba(27, 27, 27, .04);
    /* The pill is paper, not navy — the bars take the nav links' own ink. */
    color: var(--bkc-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar.nav-open .nav-burger { color: var(--bkc-ink); }

  /* Three bars from one element: the middle is the span, the outer two are its
     pseudo-elements. Collapses to an X when open. */
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), opacity .16s linear;
  }

  .nav-burger span { position: relative; }
  .nav-burger span::before,
  .nav-burger span::after { content: ""; position: absolute; left: 0; }
  .nav-burger span::before { top: -6px; }
  .nav-burger span::after { top: 6px; }

  .navbar.nav-open .nav-burger span { transform: rotate(45deg); }
  .navbar.nav-open .nav-burger span::before { transform: translateY(6px) rotate(-90deg); }
  .navbar.nav-open .nav-burger span::after { opacity: 0; }

  /* The pill goes back to one row: logo · burger · CTA. */
  .navbar .container { flex-wrap: nowrap; padding-top: 0; }

  /* ---- the drawer ---- */
  /* `.navbar .container` has backdrop-filter, which makes it the containing
     block for absolutely positioned descendants — so this anchors to the pill,
     not the viewport, and needs no JS placement. */
  .navbar .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 10;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    order: 0;
    max-height: calc(100vh - 96px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
    /* Same paper panel the dropdown already hangs off the pill (fx.css:800). */
    border: 1px solid var(--bkc-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .22);
    overscroll-behavior: contain;
  }

  .navbar.nav-open .nav-links { display: flex; }

  .navbar .nav-links > * + * { border-top: 1px solid var(--bkc-line); }

  .navbar .nav-links .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 12px;
    border-radius: 12px;
    font-size: 15px;
    white-space: normal;
  }

  /* The sliding underline reads as a stray rule in a vertical list; the drawer
     marks the current page with colour alone (fx.css already gives .active #fff). */
  .navbar .nav-links .nav-link::after { display: none; }

  /* The "ONDC Participants" dropdown expands inline inside the drawer instead
     of being a floating fixed panel. fx.js skips its placement pass here. */
  .navbar .nav-links .nav-drop { display: block; width: 100%; }

  .navbar .nav-links .nav-drop-menu {
    position: static;
    min-width: 0;
    max-width: none;
    margin: 0 0 6px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid var(--bkc-line);
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .navbar .nav-links .nav-drop-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
    white-space: normal;
  }
}


/* ═══ 3. HOMEPAGE ════════════════════════════════════════════════════════
 * The scroll-scrubbed story hero (WebGL India formation, 420vh of scrub, four
 * absolutely-stacked beats in a 100vh overflow:hidden stage) is a desktop
 * set-piece. On phones the homepage opens on the sector carousel instead.
 * Hero.jsx stops rendering it below 900px; the rule below is the CSS backstop.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  body.home .ondc-hero { display: none; }

  /* #site-header is position:fixed (the hero used to own the space beneath it),
     so without the hero the first section would start underneath the navbar. */
  body.home .tagline-strip { padding-top: calc(84px + clamp(34px, 5vw, 58px)); }
}

@media (max-width: 700px) {
  /* Vertically centred, the 44px arrows sit on top of the stacked slide copy. */
  body.home .hero-arrow { top: auto; bottom: 16px; transform: none; }
  body.home .hero-arrow:hover { transform: none; }
}

/* styles.css:974 turns .slide .container into a column here — headline on top,
   stats card below. A horizontal light-left veil would then put the card over
   the light end and the headline over nothing, so the ramp rotates to vertical
   and the navy seat moves to the bottom edge. */
@media (max-width: 900px) {
  body.home .slide::after {
    background:
      linear-gradient(178deg, rgba(247, 248, 248, .96) 0%, rgba(247, 248, 248, .90) 30%,
        rgba(247, 248, 248, .40) 58%, rgba(247, 248, 248, 0) 76%),
      linear-gradient(180deg, rgba(10, 20, 48, 0) 52%, rgba(10, 20, 48, .30) 100%);
  }
  body.home .slide-photo { object-position: center 35%; }
}

@media (max-width: 480px) {
  body.home .hero,
  body.home .slide { min-height: 560px; }

  body.home .stats-fig-num { font-size: clamp(22px, 6vw, 30px); }
  body.home .stats-fig-num.is-word { font-size: clamp(17px, 4.6vw, 22px); }
}


/* ═══ 4. CATEGORY PAGES (beckn.css) ══════════════════════════════════════
 * beckn.css collapses well down to 700px and then stops. These are the
 * sub-700px floors it never got.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* The marquee rails are decorative and expensive: beckn.js doubles their DOM
     to make the loop seamless, and skips that below 700px (its own comment
     documents the single-copy state as supported). The animation has to stop
     with it, or the row visibly runs out of cards.

     Keyed to the class beckn.js sets, not to the width: a phone rotated into
     landscape leaves a 700px query but cannot re-double the DOM, which would
     restart the loop over a single copy. The class only ever exists below
     700px, so this can never reach a desktop. */
  .bk-loop-static { animation: none !important; transform: none !important; }
}

@media (max-width: 700px) {
  /* Escalation spine: the 14% editorial indent on alternating steps and the
     oversized ghost numerals (top:-46px) both come from beckn.css with no
     narrow-width reset — steps drifted right and numerals overlapped the
     previous step's text on phones. */
  .bk-step-body.bk-indent { margin-left: 0; }
  .bk-step-ghost { font-size: clamp(56px, 16vw, 90px); top: -20px; }
}

@media (max-width: 480px) {
  /* Final step of the gutter token beckn.css steps to 16px at 700px. Every
     panel narrows together — the trio this used to name did not cover
     .bk-directory or .bk-escalate-panel, which is why the complaints page
     showed mismatched section edges on a phone. */
  .bk { --bk-gutter: 12px; }

  .bk-hero { padding-left: 16px; padding-right: 16px; }
  .bk-hero-card { width: 170px; min-height: 260px; }

  .bk-app-grid { grid-template-columns: 1fr; }
}


/* ═══ 5. PARTICIPANT DIRECTORY TABLES ════════════════════════════════════
 * A 13-column table cannot become 13 stacked cards without turning one screen
 * into ~260 labelled lines, so it stays a horizontal scroller — but the name
 * column is pinned so a row never loses its identity mid-scroll.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  /* beckn.css:3744 gives filter groups a 220px floor; below ~380px of usable
     width that alone overflows. */
  .bk-np-filters { flex-direction: column; }
  .bk-np-filter-group { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
  .bk-np-table-wrap { -webkit-overflow-scrolling: touch; }
  .bk-np-table { font-size: 13px; }

  .bk-np-table th:first-child,
  .bk-np-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 var(--bk-line);
  }

  /* The pinned cell has its own background, so it needs the row tint too or it
     stays white while the rest of the row highlights. */
  .bk-np-table tbody tr:hover td:first-child { background: var(--bk-canvas); }

  .bk-np-table th,
  .bk-np-table td { padding: 12px 10px; }
}


/* ═══ 6. LEGAL PAGES (.bk-legal-*) ═══════════════════════════════════════
 * These collapse to one column at 900px and then have nothing below it.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .bk-legal-body { padding-left: 20px; padding-right: 20px; }
  .bk-clause { padding-top: 32px; padding-bottom: 32px; }
  .bk-clause-num { font-size: 56px; }
}


/* ═══ 7. TOUCH TARGETS ═══════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .bk-np-pagenums button { min-width: 44px; height: 44px; }
  .bk-np-rpp select { min-height: 44px; }

  /* 15px checkboxes three indent levels deep. */
  .bk-np-chk { padding: 6px 0; }
  .bk-np-chk input { width: 20px; height: 20px; }

  /* `padding: 7px 3px` gave these roughly a 30px tap height. */
  body.home .sector-rail .sector-pill { min-height: 44px; padding-block: 12px; }
}


/* ═══ 8. TOUCH / NO-HOVER PARITY ═════════════════════════════════════════
 * Several of the site's signature moves live entirely in :hover, and
 * :focus-visible does not fire on a tap — so on a touch device the information
 * simply never appears. These give the resting state the hover payload.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (hover: none) {
  /* The news thumbnails develop from grayscale to colour on hover. On a phone
     that means a wall of grey photographs. */
  body.home .news-thumb img { filter: grayscale(0) contrast(1) sepia(0); }
  body.home .news-thumb::before { opacity: 0; }

  /* The metric cell's fill wash is its entire visual response. */
  body.home .metric .metric-fill { transform: scaleY(1); }

  /* Ten of the eleven sector pills carry no chrome at all — the underline on
     hover is the only affordance that they are tappable. */
  body.home .sector-rail .sector-pill::after { transform: scaleX(1); opacity: .3; }
  body.home .sector-rail .sector-pill.active::after { opacity: 1; }

  /* Decorative hover shifts that a tap would leave stuck mid-transform. */
  .bk-seat-row:hover > * { transform: none; }
  .bk-doc-index a:hover { transform: none; }
}


/* ═══ 9. OVERFLOW FLOORS ═════════════════════════════════════════════════
 * Found by measuring all 45 routes at 320px and 360px in a width-pinned
 * viewport, not by reading the stylesheets. Each rule closes a case where
 * section 1's `overflow-x: clip` sheared content off instead of it reflowing —
 * the clip keeps the page from scrolling sideways, but silently eats whatever
 * overhangs, so these read as "the sentence just stops" rather than as a
 * broken layout.
 *
 * Widest query here is 1000px, so the signed-off desktop is untouched.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* The pill is logo · burger · CTA. Both category-chrome.css:184 and
     legal.css:313 pin `.nav-right` at `flex-shrink: 0`, so a long CTA label
     ("Join as transport authority" renders 178px wide) could not give ground
     and pushed the button past the right edge — 10 of the 45 pages, losing up
     to 52px at 320px. Letting the group shrink and the label wrap holds the
     pill at its existing 78px height, so nothing below it moves. */
  .navbar .nav-right { flex-shrink: 1; min-width: 0; }

  .navbar .nav-cta {
    white-space: normal;
    height: auto;
    min-height: 40px;
    padding-block: 6px;
    line-height: 1.15;
    text-align: center;
  }

  /* fx.css:469 already hides this below 900px. contact-us.html is the single
     page that links legal.css AFTER fx.css, and legal.css:316's
     `.nav-back { display: inline-flex }` carries equal specificity — so source
     order won and the button survived, eating 92px of a 320px bar. A media
     query adds no specificity, which is why the ≤900px rule lost. mobile.css
     loads last on all 46 pages, so this settles it for every ordering. */
  .navbar .nav-back { display: none; }

  /* beckn.css:1285 sets `white-space: nowrap` here, fixing the line's
     min-content at ~442px — wider than any phone. This one clipped at EVERY
     phone width, not just the narrow end (52px lost at 390, 122px at 320).
     Above 900px the sentence fits on one row, so the nowrap stays desktop-side. */
  .bk-inst-count { white-space: normal; }
}

@media (max-width: 1000px) {
  /* resources.css:703 collapses the shell to `1fr` at this width. `1fr` means
     `minmax(auto, 1fr)`, and that `auto` floors the track at the widest child's
     min-content — measured at 359px inside a 270px shell, so the sidebar and
     every paragraph on all 18 resources pages overhung the viewport while the
     shell itself looked fine. Pinning the floor to 0 lets the track match its
     container and the content wrap. */
  .res-shell { grid-template-columns: minmax(0, 1fr); }
}


/* ═══ 10. TOUCH TARGETS, SECOND PASS ═════════════════════════════════════
 * Section 7 covered the participant directory and the sector rail. These are
 * the ones the full-site sweep turned up afterwards, all in shared chrome —
 * so each is a defect on all 45 pages at once.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* fx.css:899 wraps a bare 20x20 SVG with no padding — at 20px square this was
     the smallest tap target on the site. Growing the box rather than the mark
     keeps the icon itself at 20px; `gap: 0` on the row absorbs the extra width
     so five marks still measure 220px and cannot re-introduce an overflow. */
  html body footer .footer-social-link {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  html body footer .footer-social { gap: 0; }

  /* fx.css:433's `padding: 6px 0` gave these a 32px row. */
  html body footer .footer-link { padding-block: 12px; }

  /* fx.css:594's `padding: 7px 2px` gave these a 29px row. The row is already a
     horizontal scroller (fx.css:575), so a taller chip costs no width. */
  .more-sectors .pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  /* Same failure as .res-shell above, different stylesheet: beckn.css:3317
     collapses the legal body to `1fr`, and that `auto` min floor let the clause
     column and the document index overhang by 16px at 320px on privacy-policy,
     cookie-policy and terms-and-conditions. */
  .bk-legal-body { grid-template-columns: minmax(0, 1fr); }
}