/* ══════════════════════════════════════════════════════════════════
   responsive.css — SAGAR PORTFOLIO v5
   Loaded LAST on every page (after upgrade-v3.css). Fixes root causes
   found across the site rather than patching one page at a time:

     1. Fluid grids  — a fixed-width column inside a 1fr/1fr grid can
        force the grid wider than the viewport. `minmax(0, 1fr)` lets a
        column shrink below its content's natural width.
     2. A type floor  — many pixel-font labels were sized in the
        0.4–0.58rem range, well under the ~12px a phone can read.
     3. Real tap targets — 44×44px minimum on touch-sized viewports.
     4. The clipped hero stats row and empty first mobile screen.
     5. One global prefers-reduced-motion policy (also see
        upgrade-v3.css, which already disables animation durations;
        this file additionally removes transform-based motion that a
        0.001ms duration does not touch, e.g. autoplaying carousels).

   Breakpoints used across the codebase: 480, 600, 640, 768, 900
   (sidebar → topbar), 1024, 1100, 1200. This file follows the same
   set rather than inventing new ones.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Fluid grids — stop a fixed track forcing horizontal scroll ──
   NOTE: `repeat(auto-fit, minmax(0, 1fr))` is a trap — a 0 minimum
   gives auto-fit no real column size to divide the row by, so it packs
   in a large number of near-zero-width tracks instead of the 1–3
   columns each page actually wants. Each page already sets its own
   correct, fluid `grid-template-columns` (1fr 1fr, repeat(3,1fr), …);
   the fix that is actually needed is on the grid/flex ITEMS, not the
   container — a long unbroken string (an email, a URL, a skill name)
   otherwise refuses to shrink below its own width and can force the
   whole track wider than the viewport. */
.about-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
@media (max-width: 768px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

.hero-content, .stat, .qc-sub, .proj-content, .lab-info, .data-block,
.job-card, .edu-card, .ach-card, .skill-table td, .skill-table th,
.ind-item, .ind-name, .soft-card, .tool-card, .svc-card, .quick-card,
.hl-card, .cert-card, .quick-grid > *, .svc-grid > *, .about-grid > * {
  min-width: 0;
}

/* ── 2. Type floor ─────────────────────────────────────────────────
   Below 768px, raise every pixel-font label that carries real text
   (not a single decorative glyph) to a 12px floor. Written as a
   `max()` so a label already larger is never shrunk. */
@media (max-width: 768px) {
  .nav-section-label, .sb-badge, .player-xp-label, .player-xp-val,
  .sidebar-social, .nav-lvl, .filter-btn, .filter-panel::before,
  .labs-dot, .lab-year, .lab-tags li, .lab-cta, .cv-chip-lvl,
  .skill-lvl-badge, .proj-cat-badge, .stat-l, .gauge-label,
  .mech-sh-label, .conveyor-title, .esb-sep, .esb-val, .job-period,
  .edu-period, .d-key, .info-k, .ap-key, .assembly-wrap-title,
  .footer-copy, .footer-link, .form-label {
    font-size: max(0.75rem, 1em);
  }
  .hero-focus li { font-size: max(0.72rem, 1em); }
}

/* ── 3. Tap targets — 44×44px minimum wherever a finger, not a mouse,
   will be doing the tapping ── */
@media (max-width: 900px), (pointer: coarse) {
  .nav-link { min-height: 44px; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .filter-btn { min-height: 40px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .sidebar-social { min-height: 44px; }
  .hamburger { width: 44px; height: 44px; justify-content: center; align-items: center; }
  .labs-btn { width: 44px; height: 44px; }
  .labs-dot { min-height: 12px; padding: 6px 0; background-clip: content-box; }
  .rbt-chip { min-height: 40px; }
  .form-control, .btn, .filter-btn, .quick-card, .soc-row, .footer-link {
    min-height: 44px;
  }
  .form-control { font-size: 16px; } /* stops iOS auto-zoom on focus */
  .btn { padding-top: 0.85rem; padding-bottom: 0.85rem; }
}

/* ── 4. Home hero ──────────────────────────────────────────────────
   Two separate bugs on a short mobile viewport:
   a) `.hero-section{min-height:100vh}` + `align-items:center` centres
      the (shorter) mobile-stacked content vertically inside a full
      screen, leaving a large empty gap above AND below it — the
      "first screen is nearly empty" report. Below 900px the content
      should simply start after the topbar, not be centred in 100vh.
   b) `.hero-stats` used `width:fit-content` with no wrap, so on a
      360px phone the 4th stat ("VISITS") was pushed outside the
      visible box instead of wrapping to a second line. */
@media (max-width: 900px) {
  .hero-section { min-height: 0; align-items: flex-start; }
}
.hero-stats {
  flex-wrap: wrap;
  width: auto;
  max-width: 100%;
  row-gap: 0.6rem;
}
@media (max-width: 900px) {
  .hero-stats { justify-content: center; }
}
@media (max-width: 480px) {
  .hero-stats { gap: 0.75rem 1rem; padding: 0.75rem 0.9rem; }
  .hero-name { font-size: clamp(2.1rem, 12vw, 3rem); }
  .hero-focus { justify-content: center; }
}

/* ── 5. Motion ─────────────────────────────────────────────────────
   upgrade-v3.css already collapses every CSS animation/transition
   duration to ~0 for prefers-reduced-motion. This adds the pieces a
   duration override cannot reach: autoplay that is driven by JS
   timers, and transform states set as inline styles. main.js,
   mechanical.js and labs-slider.js all check the same media query
   before starting a timer, so this is belt-and-braces for anyone
   whose styles load before those scripts run. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
  .cursor-ball, .cursor-trail, .mech-cursor-cross, .mech-cursor-gear { display: none !important; }
}

/* ── 5b. Decorative section header (mechanical.js) ────────────────
   .mech-section-header replaces every page's H1 with a decorative
   flex row: a ghost page number, the label + heading, and a pair of
   "bolt" dots pinned right with margin-left:auto. At narrow widths a
   long single-word heading (e.g. "CERTIFICATIONS") cannot shrink
   below its own width, and the flex row had nothing to give up, so it
   ran past the viewport edge by a few dozen pixels. The ghost number
   and bolts are purely decorative (aria-hidden via the whole header),
   so they are the first things to go. */
@media (max-width: 480px) {
  .mech-sh-num { display: none; }
  .mech-section-header > div:last-child { display: none; }
  .mech-sh-title { font-size: 1.15rem; }
}

/* ── 6. Misc overflow guards ──────────────────────────────────────── */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
pre, code, .job-points li, .proj-desc, .hero-bio, .bio-card p {
  overflow-wrap: break-word;
  word-break: break-word;
}
table { max-width: 100%; }

/* ── 7. Safe-area insets for fixed chrome on notched phones ───────── */
.mobile-topbar {
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(56px + env(safe-area-inset-top, 0px));
}
@media (max-width: 900px) {
  .main-content { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
}