/* =====================================================================
   responsive.css
   Custom responsive layer shared by all three pages — portfolio
   (Alen James), pipeline, and resume. Linked from each page's <helmet>
   AFTER its inline <style>, so these rules win on ties.

   Breakpoint ladder: 1024 -> 820 -> 600 -> 430 -> 360.
   Collapsed grids use minmax(0,1fr) (NOT plain 1fr) so a track can never
   grow past the container to fit an unbreakable child — that was the root
   cause of the stats / skills horizontal overflow. Component fixes
   (stats, project headers, ASCII banner, studio captions, skill rows)
   hang off small class hooks added in the markup.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SQUEEZED LAPTOP  =< 1230px — the zoomed pages (zoom 1.35 / 1.2) lay out
   ~1.5x narrower than the real window reports, so the widest grids need
   to ease off well before the classic tablet breakpoint.
   --------------------------------------------------------------------- */
@media (max-width: 1230px) {
  [style*="repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------------------------------------------------------------------
   LAPTOP  =< 1024px — widest grids ease off; gutters begin to tighten
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  [style*="max-width: 1180px"], [style*="max-width:1180px"],
  [style*="max-width: 1100px"], [style*="max-width:1100px"] {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  [style*="repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------------------------------------------------------------------
   TABLET  =< 820px — hero stacks; two-up content drops to one column
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* page gutters */
  [style*="max-width: 1180px"], [style*="max-width:1180px"],
  [style*="max-width: 1100px"], [style*="max-width:1100px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  [style*="max-width: 880px"], [style*="max-width:880px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* hero: the fixed min-widths are what overflow small screens — release
     them and let the two columns stack full width */
  .hero-card, .hero-term {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .hero-wrap {
    padding-top: 52px !important;
    padding-bottom: 58px !important;
    gap: 30px !important;
  }

  /* grids -> single / two column, capped at the container width */
  [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="2.4fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  .studio-grid { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="0.78fr"], [style*=".78fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="1.05fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="264px 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* keep the carving gallery two-up after the generic collapse above */
  .studio-quad { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* skills: let the flex chip-rows shrink and wrap inside their column,
     and let an over-long chip label wrap to two lines instead of overflowing */
  .capchips { min-width: 0 !important; }
  .chip { white-space: normal !important; }

  /* project headers (PSEG / myTown game / ReadMate): stack title-block
     above the big stat figures so the figures never clip on the right */
  .proj-head { flex-direction: column !important; gap: 22px !important; }
  .proj-stats { gap: 34px !important; }
}

/* ---------------------------------------------------------------------
   LARGE PHONE  =< 600px — single column nearly everywhere; nav wraps
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  [style*="max-width: 1180px"], [style*="max-width:1180px"],
  [style*="max-width: 1100px"], [style*="max-width:1100px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  [style*="max-width: 880px"], [style*="max-width:880px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* tall phone screenshots stack; app shots stay two-up */
  [style*="repeat(5"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(3"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* hero display type */
  .hero-card { box-shadow: 0 0 0 13px var(--paper) !important; }
  .hero-h1 { font-size: 31px !important; line-height: 1.07 !important; }
  .hero-em { font-size: 26px !important; }

  /* hero stats bar: smaller figures + tighter cells so 4 stats fit 2-up */
  .stat-num { font-size: 31px !important; line-height: 1.05 !important; }
  [style*="42px 22px"] { padding: 28px 10px !important; }

  /* myTown ASCII banner — render smaller so it sits comfortably in frame */
  .mt-art { font-size: 10px !important; }
  .mt-sub { font-size: 9px !important; letter-spacing: .14em !important; }

  /* studio gallery on phones: ONE full-width column so every carving gets
     the room Haku has; captions return to full size (no longer cramped) */
  .studio-quad { grid-template-columns: minmax(0, 1fr) !important; }
  .studio-cap { transform: none !important; }

  /* resume skills — stack the label above its list so every row reads the
     same full-width way (Languages / Software / Other all match) */
  .skill-row { flex-direction: column !important; gap: 4px !important; }
  .skill-row > div:first-child { min-width: 0 !important; }

  /* contact section: heading fits, roles line gets room for the bop
     animation, and the CTA buttons stack full-width so the email never clips */
  .contact-h2 { font-size: 30px !important; line-height: 1.06 !important; }
  .roles-p { line-height: 2 !important; }
  .contact-cta { flex-direction: column !important; align-items: flex-start !important; }
  .contact-cta > a { max-width: 100% !important; word-break: break-word !important; }

  /* nav wraps to two rows */
  .nav-inner {
    padding: 11px 18px !important;
    gap: 9px 14px !important;
    flex-wrap: wrap !important;
  }
  .nav-logo { font-size: 17px !important; }
  [style*="gap: 26px"][style*="nowrap"],
  [style*="gap:26px"][style*="nowrap"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
    white-space: normal !important;
  }

  /* pipeline: drop the page zoom so the diagram fits the viewport */
  [style*="zoom: 1.2"], [style*="zoom:1.2"] { zoom: 1 !important; }

  /* pipeline flow rail: the 6-step overview can't fit 6 fixed nodes on a
     phone, so let it scroll horizontally (keeps the traveling orb intact)
     instead of running off the page */
  .flow-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-top: 18px; }
  .flow-grid { min-width: 540px; }

  /* resume header row wraps; card padding eases in */
  [style*="padding: 14px 28px"], [style*="padding:14px 28px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .resume-card { padding: 30px 22px !important; }
  /* resume contact line (location / email / linkedin) — stack cleanly */
  [style*="gap: 6px 18px"], [style*="gap:6px 18px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 6px !important;
    line-height: 1.5 !important;
  }
}

/* ---------------------------------------------------------------------
   PHONE  =< 430px (iPhone / Pixel class) — tighter gutters, smaller type
   --------------------------------------------------------------------- */
@media (max-width: 430px) {
  [style*="max-width: 1180px"], [style*="max-width:1180px"],
  [style*="max-width: 1100px"], [style*="max-width:1100px"],
  [style*="max-width: 880px"], [style*="max-width:880px"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-h1 { font-size: 28px !important; }
  .hero-em { font-size: 24px !important; }
  .hero-wrap { padding-top: 42px !important; padding-bottom: 48px !important; }

  /* stats fit two-up at 360–430 too */
  .stat-num { font-size: 27px !important; }
  [style*="42px 22px"] { padding: 24px 8px !important; }

  /* shrink the ASCII banner a touch more on true phones */
  .mt-art { font-size: 8.5px !important; }
  .mt-sub { font-size: 8px !important; }

  .studio-quad { grid-template-columns: minmax(0, 1fr) !important; }
  .contact-h2 { font-size: 26px !important; }
}

/* ---------------------------------------------------------------------
   SMALL PHONE  =< 360px (iPhone SE / Galaxy S class) — final squeeze
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
  [style*="max-width: 1180px"], [style*="max-width:1180px"],
  [style*="max-width: 1100px"], [style*="max-width:1100px"],
  [style*="max-width: 880px"], [style*="max-width:880px"] {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
  .hero-h1 { font-size: 25px !important; }
  .hero-em { font-size: 22px !important; }
  .nav-logo { font-size: 15px !important; }
  .stat-num { font-size: 24px !important; }
}