/* ─────────────────────────────────────────────────────────────
   responsive.css — site-wide breakpoint adjustments
   Branden K. Soo portfolio
   Loaded LAST so these rules win over inline + animations + polish.

   Breakpoints:
     Mobile     ≤ 740 px   (phones)
     Tablet     741–1023   (iPads, large phones, small laptops)
     Laptop     1024–1439  (DEFAULT — no overrides)
     Desktop    1440–1919  (large monitors)
     Ultrawide  ≥ 1920     (ultrawide / 4K)
   ───────────────────────────────────────────────────────────── */

/* ╔════════════════════════════════════════════════════════════╗
   ║  MOBILE  ≤ 740 px                                          ║
   ║  Goals: nothing overlaps, nothing clips, comfortable taps  ║
   ╚════════════════════════════════════════════════════════════╝ */
@media (max-width: 740px) {
  /* ── Nav: tighter so it doesn't wrap into 4 rows ── */
  nav {
    padding: .55rem 4% !important;
    gap: .25rem !important;
    align-items: center !important;
  }
  .nav-logo {
    font-size: .72rem !important;
    width: 100% !important;
    margin-bottom: .35rem !important;
    text-align: center !important;
  }
  nav .nav-links {
    width: 100% !important;
    justify-content: center !important;
    gap: .25rem !important;
  }
  .nav-links a {
    font-size: .65rem !important;
    padding: .22rem .55rem !important;
    letter-spacing: .02em !important;
  }
  .nav-dot { display: none !important; }

  /* ── Hero on index: extra top padding to clear the wrapped nav ── */
  .hero, .s-hero {
    padding-top: 150px !important;
    padding-bottom: 56px !important;
    min-height: auto !important;
  }
  .hero-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  .hero-photo-wrap, .hero-portrait, .hero-photo {
    max-width: 180px !important;
    width: 180px !important;
    margin: 0 auto !important;
  }
  .hero-name { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .hero-sub  { font-size: clamp(.78rem, 3.2vw, .95rem) !important; }
  .hero-tagline { font-size: .85rem !important; line-height: 1.6 !important; }
  .hero-bar { margin: 0 auto 1rem !important; }
  .hero-ctas {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
  .hero-ctas .btn {
    font-size: .78rem !important;
    padding: .55rem 1.1rem !important;
  }

  /* Project pages: same fix — push hero down past wrapped nav */
  .proj-hero { padding-top: 130px !important; }

  /* ── Section padding tighter ── */
  section { padding: 56px 5% !important; }
  .sec-title { font-size: 1.4rem !important; }
  .sec-label { font-size: .6rem !important; }

  /* ── Stats: 2×2 instead of 1×4 ── */
  .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  .stat-num { font-size: 1.6rem !important; }
  .stat-lbl { font-size: .68rem !important; }

  /* ── Card grids: single column ── */
  .proj-grid,
  .skills-grid,
  .orgs-grid,
  .edu-stack,
  .exp-stack {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .interests-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
  }
  .interest-photo { height: 130px !important; }

  /* ── Edu cards: vertical layout, no logo squeeze ── */
  .edu-card { padding: 1.1rem 1.2rem !important; gap: .85rem !important; }
  .school-logo { width: 42px !important; height: 42px !important; }

  /* ── Exp cards ── */
  .exp-card { padding: 1.2rem 1.25rem !important; }
  .exp-co { font-size: .9rem !important; }
  .exp-pts li { font-size: .8rem !important; }

  /* ── Project pages file cards ── */
  .file-card { padding: .7rem .9rem !important; gap: .65rem !important; }
  .file-name { font-size: .78rem !important; }
  .file-detail { font-size: .68rem !important; }

  /* ── Contact / Footer ── */
  .s-contact { padding: 56px 5% 40px !important; }
  .contact-hed { font-size: 1.3rem !important; }
  .contact-row { gap: .8rem !important; flex-direction: column !important; align-items: center !important; }

  /* ── Location ticker (added by polish.js) ── */
  .location-ticker { font-size: .55rem !important; height: 28px !important; }
  .location-ticker .ticker-track { gap: 32px !important; animation-duration: 22s !important; }
  .location-ticker .ticker-label { padding: 0 12px !important; font-size: .55rem !important; }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  GRID LOCK: PROJECTS + ORGANIZATIONS + INTERESTS           ║
   ║  Locked column counts above mobile; card/photo size + gap  ║
   ║  scale with viewport instead of column count.              ║
   ╚════════════════════════════════════════════════════════════╝ */
@media (min-width: 741px) {
  .proj-grid,
  .orgs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .interests-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  TABLET  741 – 1023 px                                     ║
   ╚════════════════════════════════════════════════════════════╝ */
@media (min-width: 741px) and (max-width: 1023px) {
  /* Nav stays single-row; logo regains its inline width */
  .nav-logo { width: auto !important; }

  /* Tighter gaps on smaller screens */
  .proj-grid,
  .orgs-grid {
    gap: .85rem !important;
  }
  .proj-card,
  .org-card {
    padding: 1.1rem 1.2rem !important;
  }
  .proj-name { font-size: .9rem !important; }
  .proj-desc { font-size: .76rem !important; }

  /* Skills stays 2-col; interests is locked to 5 above (size scales here) */
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.1rem !important;
  }
  .interests-grid { gap: .65rem !important; }
  .interest-photo { height: 110px !important; }
  .interest-card  { padding: .55rem !important; }
  .interest-name  { font-size: .72rem !important; }

  /* Hero portrait scales */
  .hero-photo-wrap, .hero-portrait, .hero-photo {
    max-width: 240px !important;
  }

  /* Section padding moderately tight */
  section { padding: 72px 7% !important; }
  .sec-inner { max-width: 880px !important; }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  LAPTOP  1024 – 1439 px  (DEFAULT — no overrides)          ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ╔════════════════════════════════════════════════════════════╗
   ║  DESKTOP  1440 – 1919 px                                   ║
   ║  Goals: wider container, more breathing room               ║
   ╚════════════════════════════════════════════════════════════╝ */
@media (min-width: 1440px) and (max-width: 1919px) {
  .sec-inner { max-width: 1180px !important; }
  section { padding: 96px 8% !important; }

  /* Same 3-col layout, but generously gapped + roomier cards */
  .proj-grid     { gap: 2rem !important; }
  .orgs-grid     { gap: 2rem !important; }
  .proj-card     { padding: 1.7rem 1.85rem !important; }
  .org-card      { padding: 1.6rem 1.75rem !important; }
  .proj-name     { font-size: 1.05rem !important; }
  .proj-desc     { font-size: .88rem !important; }

  /* Other grids */
  .skills-grid   { gap: 1.5rem !important; }
  .interests-grid{ gap: 1.5rem !important; }
  .interest-photo { height: 200px !important; }
  .exp-stack     { gap: 1.4rem !important; }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  ULTRAWIDE  ≥ 1920 px                                      ║
   ║  Goals: bigger cards, bigger photos, wider gaps            ║
   ╚════════════════════════════════════════════════════════════╝ */
@media (min-width: 1920px) {
  .sec-inner { max-width: 1440px !important; }
  section { padding: 110px 10% !important; }

  /* Project grid: still 3 cols, MUCH bigger cards + wider gaps */
  .proj-grid {
    gap: 2.75rem !important;
  }
  .proj-card { padding: 2.1rem 2.25rem !important; }
  .proj-name { font-size: 1.18rem !important; }
  .proj-desc { font-size: .95rem !important; line-height: 1.7 !important; }

  /* Skills: 4 cols (denser content type, OK to expand) */
  .skills-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  /* Orgs/Clubs: still 3 cols, bigger cards + wider gaps */
  .orgs-grid {
    gap: 2.75rem !important;
  }
  .org-card { padding: 1.95rem 2.1rem !important; }
  .org-name { font-size: 1.1rem !important; }
  .org-desc { font-size: .92rem !important; }

  /* Interests: still 5 cols, much bigger photos + wider gaps */
  .interests-grid { gap: 2rem !important; }
  .interest-photo { height: 240px !important; }
  .interest-card  { padding: 1rem !important; }
  .interest-name  { font-size: .95rem !important; }

  /* Interests: 5 cols, larger photos for that "gallery" feel */
  .interests-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.6rem !important;
  }
  .interest-photo { height: 220px !important; }
  .interest-name { font-size: .92rem !important; }

  /* Education + Experience cards: roomier */
  .edu-card { padding: 1.7rem 2rem !important; gap: 1.4rem !important; }
  .school-logo { width: 60px !important; height: 60px !important; }
  .exp-card { padding: 1.7rem 2rem !important; }
  .exp-stack { gap: 1.6rem !important; }

  /* Hero on index: more breathing space */
  .hero { padding: 120px 10% 96px !important; }
  .hero-inner { max-width: 1320px !important; gap: 5rem !important; }
  .hero-photo-wrap, .hero-portrait, .hero-photo {
    max-width: 380px !important;
  }
  .hero-name { font-size: clamp(3.5rem, 5vw, 5rem) !important; }

  /* Project page hero: wider */
  .proj-hero .sec-inner { max-width: 1180px !important; }
  .file-card { padding: 1.05rem 1.35rem !important; }
  .file-name { font-size: .9rem !important; }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  EXTREME ULTRAWIDE  ≥ 2560 px (5K, 32"+ monitors)          ║
   ║  Cap content so text doesn't span the whole screen         ║
   ╚════════════════════════════════════════════════════════════╝ */
@media (min-width: 2560px) {
  .sec-inner { max-width: 1620px !important; }
  section    { padding: 130px 12% !important; }

  /* Even more breathing room around the still-3-col grids */
  .proj-grid     { gap: 3.25rem !important; }
  .orgs-grid     { gap: 3.25rem !important; }
  .proj-card     { padding: 2.4rem 2.55rem !important; }
  .org-card      { padding: 2.2rem 2.4rem !important; }
  .proj-name     { font-size: 1.3rem !important; }
  .proj-desc     { font-size: 1rem !important; }

  /* Photo gallery: still 5 cols, even bigger */
  .interests-grid{ gap: 2.5rem !important; }
  .interest-photo { height: 290px !important; }
  .interest-card  { padding: 1.15rem !important; }
  .interest-name  { font-size: 1.05rem !important; }
  .hero-photo-wrap { max-width: 440px !important; }
}