/* ══════════════════════════════════════════════════════════════════════════════
   responsive.css — Responsive adaptations for all pages
   Loaded AFTER all other stylesheets on every page.

   Breakpoints:
     Small monitor ≤ 1439px
     Tablet        ≤ 1199px
     Mobile        ≤ 767px
     Small mobile  ≤ 480px

   Structure: a handful of per-component overrides (vn-modules, tc-types,
   hil-principle*, about-portrait, about-credential-num, sec-hdr*, csp-sidenav,
   about-bio-pull, back-to-top, etc.) below, followed by the broader
   CURRENT-SYSTEM pass that drives layout for the rest of the site.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — SMALL MONITOR / LAPTOP ≤ 1439px
   4-column stat strips stay at 4 columns — just tighten gap and number size.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
  .cs-exec-grid { gap: 18px; }
  .about-credentials-inner { gap: 22px; }
  .about-credential-num { font-size: 58px; }

  /* Case-study cards: .cs-info carries 7+ stacked components (title, desc,
     phase/model/durability signal, tags, 3-col metric grid, lead-signal,
     CTA) — in the desktop 1fr/720px split, .cs-info's 1fr track is only
     ~225-390px below 1440px (narrower than mobile's single column), too
     tight for this much content. Stack instead, image first, so the
     browser preview becomes a full-width hero and .cs-info gets a
     comfortable, consistent reading width (capped to match .cs-desc's
     existing 640px measure). */
  .cs-row-inner,
  .cs-row:nth-of-type(even) .cs-row-inner { grid-template-columns: 1fr; }
  .cs-row .cs-row-inner .browser { order: -1; }
  .cs-info { max-width: 640px; }

  /* Case-study metric grid: .cs-info is the 1fr track of a 1fr/720px (or
     720px/1fr) split — only ~320-480px below 1440px, too narrow for 3
     columns once .cs-metric-value (30px serif) needs more than ~100px and
     wraps unevenly. Stack the 3 metrics instead; the old left-border
     column dividers have nothing to divide once stacked, so swap to
     horizontal dividers between rows. */
  .cs-metrics { grid-template-columns: 1fr; gap: 0; }
  .cs-metric { padding: 18px 0; }
  .cs-metric:not(:first-child) { padding-left: 0; border-left: none; border-top: 1px solid var(--hairline); }
  .cs-metric:first-child { padding-top: 0; }
  .cs-metric:last-child { padding-bottom: 0; }

  /* Case-study phase text (Dashboard card): the "N PHASES · A → B → C → D ·
     N YEARS" chain is flex-wrap and breaks into jagged fragments once
     .cs-info narrows below ~600px. Drop the embedded phase-chain detail,
     keep the two headline stats. */
  .cs-phase-text-detail,
  .cs-phase-text-detail + .cs-phase-text-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — TABLET ≤ 1199px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  .vn-modules,
  .tc-types { max-width: 100%; }

  /* ── Section headers ── */
  .sec-hdr--md .sec-hdr-title { font-size: 48px; }

  /* ── About hero portrait ── */
  /* .about-hero-inner is 1fr 1fr here (line ~195). At 360px, the portrait's
     fixed width exceeds its 1fr share (316.5px) at 768px, stealing space
     from .about-hero-info — squeezing it to 273px and wrapping the
     "Alam Khan." hero title across 2 lines. 300px stays under every 1fr
     share from 768-1199px, so both tracks split evenly and the title fits
     on one line. */
  .about-portrait { width: 300px; }

  /* ── How I Lead principles: card is a flex column, not a grid — the old
     300px/1fr + 48px "column gap" was actually a 48px+margin vertical gap
     between num/title/lead/detail (≈64px), far more than desktop. ── */
  .hil-principle { gap: 20px; }

  /* ── Varanasi modules ── */
  .vn-modules { grid-template-columns: repeat(2, 1fr); }

  /* ── TouchConfig types ── */
  .tc-types { gap: 24px; }

  /* ── Side nav: hide on smaller screens ── */
  .csp-sidenav { display: none; }

  /* ── Sticky columns: nothing stays pinned on tablet/mobile ── */
  .sticky-top,
  .sticky-top-nav,
  .about-bio-pull,
  .cs-col-left,
  .cs-phase-aside,
  .mh-quotes-right,
  .end-filter { position: static; }
  .sticky-top-hdr { position: static !important; }

  /* ── Hero / about portraits: drop the desktop scale-bleed ── */
  .hero-portrait img,
  .about-portrait img { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — MOBILE ≤ 767px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Section headers ── */
  .sec-hdr { margin-bottom: 32px; }
  .sec-hdr--md .sec-hdr-title { font-size: 36px; }

  /* ── About hero: stack ── */
  .about-subtitle { font-size: 20px; }
  .about-portrait {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    order: -1;
  }

  /* ── About credentials ── */
  .about-credential-num { font-size: 48px; }

  /* ── About bio: stack ── */
  .about-bio-prose p { font-size: 18px; }

  /* ── About available ── */
  .about-available-text { font-size: 20px; }

  /* ── About testimonials: tighten gap further (1-col from ≤1199px) ── */
  .about-tests-grid { gap: 24px; }

  /* ── How I Lead: stack principles (gap:20px inherited from ≤1199px) ── */
  .hil-principle-title { font-size: 24px; }
  .hil-principle-lead { font-size: 18px; }

  /* ── AI section cards: tighten gap further (1-col from ≤1199px) ── */
  .hil-ai-examples { gap: 20px; }

  /* ── Varanasi modules: 2 columns ── */
  .vn-modules { grid-template-columns: repeat(2, 1fr); }

  /* ── Back to top: smaller ── */
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  /* ── Hero & case-study cards: image on top when stacked ── */
  .hero-portrait { order: -1; }
  .cs-row .cs-row-inner .browser { order: -1; }

  /* ── Contact: even cells lose their 2-col left padding; add row gap ── */
  .contact-cell:nth-child(even) { padding-left: 0; }
  .contact-grid { gap: 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — SMALL MOBILE ≤ 480px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .about-credential-num { font-size: 36px; }
  .vn-modules { grid-template-columns: 1fr; }

  /* ── How I Lead: tighten principle gap further ── */
  .hil-principle { gap: 12px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   CURRENT-SYSTEM RESPONSIVE PASS
   Master lever: the --gutter / --section-pad tokens cascade to every container.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── TABLET ≤ 1199px ── */
@media (max-width: 1199px) {
  .page-root { --gutter: 40px; --section-pad: 60px; --section-pad-lg: 68px; --text-display: 64px; }
  .cs-exec-grid,
  .cs-timeline-grid,
  .vn-modules,
  .cs-phase-glance,
  .mh-findings-grid,
  .vr-stayed-grid,
  .cs-meta-grid,
  .about-credentials-inner { grid-template-columns: repeat(2, 1fr); }

  /* Fixed-px 2-col rows (520/480px image tracks) overflow or cramp at
     iPad widths — make both tracks flexible so they share the space.
     (.cs-row-inner is handled separately in the ≤1439px tier above —
     its .cs-info column needs more room than a 50/50 split gives it.) */
  .hero-body,
  .about-hero-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-portrait { width: 100%; }

  /* Prose/aside splits with a fixed 380-430px track (asides already
     non-sticky here, position:static above), the 350px/1fr reflection
     title+text split (.cs-reflection — 350px for a 2-3 line title leaves
     only ~243px for the prose answer, up to ~15 lines/488 characters), the
     1.1fr/1fr stats split (the "₹35L+" hero number's 168px font has a 364px
     min-content that out-muscles its 1.1fr share at this width, squeezing
     .stats-secondary), the two 1.5fr/1fr quote/impact + callout splits
     (.mh-quotes-grid, .cs-impact-grid — the latter's 1.5fr side also nests
     .cs-impact-row's fixed 220px+1fr columns, squeezing its description
     column to ~100px), plus 3-col/5-track content cards (testimonials,
     leadership band, TouchConfig types, Varanasi waste-flow, How-I-Use-AI
     examples): once --gutter drops to 40px these tracks invert or shrink to
     ~99-245px — too narrow for paragraph copy (the stat rows wrap to 3-4
     words/line, the callouts to ~16-20 lines, the impact description to
     ~221px tall, the AI example cards to ~1325px tall, at 768px). Stack to
     one column, natural DOM order (prose/image/first card first). */
  .cs-col-two,
  .cs-col-two-phases,
  .cs-img-row,
  .cs-gallery-main,
  .about-bio-inner,
  .about-tests-grid,
  .lead-band-grid,
  .tc-types,
  .tc-converge-rule,
  .vr-waste-flow,
  .mh-quotes-grid,
  .cs-impact-grid,
  .cs-reflection,
  .hil-ai-examples,
  .stats-grid { grid-template-columns: 1fr; }

  /* .tc-converge-rule must collapse at the exact same breakpoint as .tc-types
     above it — otherwise the connector's 3-column drops stop matching the
     cards' column count and the lines land in the wrong places. Once
     stacked, the bar (which only makes sense bridging 3 columns) is dropped
     and the 3 drops simply stack into one continuous line down to the dot. */
  .tc-converge-rule { height: 96px; }
  .tc-converge-bar { display: none; }
  .tc-converge-stem,
  .tc-converge-dot { top: 72px; }

  /* Contact: stack header/sub above the cell grid so cells get full width */
  .contact-inner { grid-template-columns: 1fr; }

  /* Media + frames never overflow their (now flexible) columns */
  .browser, .cs-img-visual, .about-portrait { max-width: 100%; }
  .cs-img-visual { min-width: 0; }
  .browser-body img { width: 100%; height: auto; display: block; }
  img { max-width: 100%; }

  /* Decorative connectors calibrated for the desktop column count don't
     translate to repeat(2,1fr) or a single column: the timeline's
     horizontal rail only reaches row 1 (and overshoots its marker), the
     3-col phase-glance/lead-band dividers land past their grid's right
     edge, and the Varanasi hairline only spans row 1 of 2. */
  .cs-timeline-grid::before,
  .cs-phase-glance-item:nth-child(2)::after,
  .lead-band-item::after,
  .vr-stayed-grid::before { display: none; }
}

/* ── MOBILE ≤ 767px ── */
@media (max-width: 767px) {
  .page-root {
    --gutter: 20px; --section-pad: 44px; --section-pad-lg: 48px;
    --text-display: 44px; --text-display-sm: 30px;
    --text-heading: 26px; --text-heading-sm: 24px; --text-heading-xs: 22px;
    --text-stat: 84px; --text-page-hdr: 44px;
  }
  .site-nav-name { font-size: 24px; }

  /* Hero stat number (e.g. "₹35L+") is one unbreakable token — at the
     desktop 168px size its min-content (~364px) overflows the single
     mobile column. Scale it (and its "+" suffix) down to fit. */
  .stat-hero-num small { font-size: 32px; }

  /* Stack two-column and asymmetric layouts. (.cs-col-two, .cs-col-two-phases,
     .cs-img-row, .about-bio-inner, .about-tests-grid, .lead-band-grid,
     .tc-types, .vr-waste-flow, .mh-quotes-grid, .cs-impact-grid,
     .cs-reflection and .stats-grid already stack from ≤1199px above.) */
  .hero-body,
  .about-hero-inner,
  .cs-row-inner,
  .cs-row:nth-of-type(even) .cs-row-inner,
  .contact-inner,
  .contact-grid,
  .stat-row,
  .cs-impact-row,
  .cs-phase-container,
  .cs-decision-row,
  .cs-changed-grid,
  .cs-pagenav,
  .endorse-row { grid-template-columns: 1fr; }

  /* Collapse multi-column card grids to one column */
  .footer-inner,
  .cs-meta-grid,
  .cs-metrics,
  .cs-phase-glance,
  .mh-findings-grid,
  .vr-stayed-grid,
  .hil-principles-grid,
  .vn-modules,
  .cs-timeline-grid,
  .end-cards-inner,
  .cs-exec-grid,
  .about-credentials-inner { grid-template-columns: 1fr; }

  /* About credentials: column divider lines have nothing to divide once
     each stat block is a full-width row — drop them. */
  .about-credential { padding: 0; }
  .about-credential:not(:first-child)::before { display: none; }

  /* Phase "at a glance" rows are single-column on mobile — the 3-column
     desktop divider (::after, offset into the column gap) has nothing
     to divide and just floats a stray line into the right gutter.
     (.lead-band-item::after is hidden from ≤1199px above.) */
  .cs-phase-glance-item::after { display: none; }

  /* Phase image browser-bar: the "PHASE NN · LABEL" badge is redundant
     with the .cs-phase-aside info just above it, and at mobile widths it
     was eating most of the bar, leaving the URL truncated to 1-2 chars
     (e.g. "touch…"). Drop it so the URL stays readable. */
  .cs-img-row .browser-meta { display: none; }

  /* .cs-img-visual is a grid item of .cs-img-row (single column on mobile)
     and a flex container around .browser. Without min-width:0, its auto
     min-width — driven by the screenshot's 16:9 intrinsic size inside
     .browser — wins and forces .cs-phase-container's whole column (and
     everything in it) wider than the viewport. (max-width/min-width/img
     rules now live in the ≤1199px block above and cascade down here.) */

  /* Hero portrait: fixed 520px box (index.css) must shrink to the
     single stacked column. */
  .hero-portrait { width: 100%; overflow: hidden; }

  /* Image rows: comfortable stacked spacing */
  .cs-img-row,
  .cs-gallery-main { gap: 22px; }
}

/* ── SMALL MOBILE ≤ 480px ── */
@media (max-width: 480px) {
  .page-root { --text-display: 38px; --text-display-sm: 27px; --text-stat: 64px; }
  .stat-hero-num small { font-size: 24px; }

  /* Contact cell value/CTA pair: the desktop 50px gap (sized for a wide
     two-column layout) pushes "linkedin.com/in/..." + "Open" past a
     320px viewport once the contact grid stacks to one column. */
  .contact-cell-value-wrap { gap: 12px; }

  /* Key decisions gallery tabs: 3-across gets too cramped for the label
     text at this width — stack to full-width rows instead. */
  .cs-gallery-tabs { grid-template-columns: 1fr; }
}