/* ==========================================================================
   RESPONSIVE.CSS
   Audited breakpoints: 320 / 360 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920
   Most sizing is already fluid via clamp() in theme.css — this file only
   handles structural changes (grid columns, direction switches) that
   clamp() can't do alone, plus container-query upgrades for card grids.
   ========================================================================== */

/* touch targets — every interactive control gets a guaranteed 44px hit area
   regardless of its visual size, per WCAG 2.5.5 */
button, a, input, [role="button"], [role="tab"]{
  min-height:44px;
}

/* ---- ≥1920 : extra breathing room on ultra-wide, cap line length ------- */
@media (min-width:1920px){
  .container{ max-width:1320px; }
}

/* ---- ≤1024 : tablet — three-column grids drop to two -------------------- */
@media (max-width:1024px){
  .skills-grid, .build-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- ≤820 : nav becomes bottom bar (see style.css), stacked two-col grids */
@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ---- ≤768 : single column everywhere, centered hero -------------------- */
@media (max-width:768px){
  .skills-grid, .build-grid{ grid-template-columns:1fr; }
  .hero{ grid-template-columns:1fr; text-align:center; padding-top:var(--sp-l); gap:var(--sp-l); }
  .hero-ctas{ justify-content:center; }
  .eyebrow{ justify-content:center; }
}

/* ---- ≤414 / 390 / 360 : phones — tighten section padding, kill any
   residual two-up layouts --------------------------------------------- */
@media (max-width:414px){
  .section{ padding:var(--sp-xl) 0; }
  .quest-entry-btn{ padding:16px 16px 16px 52px; gap:10px; }
}

/* ---- ≤600 : the "table-like" rows (about HUD, skill heads, quest meta)
   were laid out with justify-content:space-between + nowrap, which reads
   fine on desktop but forces two columns to fight for space on a phone —
   long values truncate or the row squeezes its font down. Stack them
   instead so nothing competes for width. ------------------------------ */
@media (max-width:600px){
  .about-hud{ padding:18px 16px; }
  .hud-row{
    flex-direction:column; align-items:flex-start; gap:4px;
    padding:10px 0; font-size:.86rem;
  }
  .hud-row .k{ font-size:.7rem; }
  .hud-row .v{ font-size:.86rem; }

  .skill-item-head{ flex-wrap:wrap; row-gap:4px; }
  .skill-name{ font-size:.88rem; }

  .quest-entry-main{ flex-wrap:wrap; row-gap:6px; }
  .quest-date{ min-width:0; }
  .quest-status{ font-size:.62rem; padding:3px 8px; }

  /* terminal readability on small phones — desktop-sized mono type in a
     narrow column is what made it feel "too big" */
  .terminal-body{ font-size:.78rem; line-height:1.55; }
  .terminal-input{ font-size:.86rem; }
  .terminal-titletext{ font-size:.66rem; }
}

@media (max-width:380px){
  .hero-title{ font-size:clamp(2.1rem, 1.3rem + 7vw, 2.6rem); }
  .terminal-body{ font-size:.74rem; }
  .quest-title{ font-size:.94rem; }
  .quest-org{ font-size:.8rem; }
}

/* ---- ≤320 : smallest supported phone — collapse container gutters ----- */
@media (max-width:320px){
  .container{ padding-inline: var(--sp-2xs); }
  .contact-panel{ padding: var(--sp-m) var(--sp-s); }
}

/* ---- container queries: card grids reflow by available space, not
   viewport, so embedding a section (e.g. achievements) in a narrower
   layout later still gets correct column counts -------------------------- */
@supports (container-type: inline-size){
  .skills-grid, .build-grid{ container-type: inline-size; }
}

/* landscape phones — avoid the hero eating the whole viewport height */
@media (max-height:480px) and (orientation:landscape){
  .hero{ padding-top:var(--sp-m); padding-bottom:var(--sp-m); }
}