/* ============================================================
   RESPONSIVE
   Breakpoint-specific overrides beyond what components handle
   ============================================================ */

/* ── Large Desktop ≥1649px ───────────────────────────────── */
@media (min-width: 1649px) {
  :root {
    --max-width: 1318px;
    --fs-hero: 108px;
  }

  .projects__row {
    gap: 140px;
  }
}

/* ── Standard Desktop 1200–1648px ───────────────────────── */
@media (min-width: 1200px) and (max-width: 1648px) {
  :root {
    --max-width: 1160px;
    --fs-hero: 96px;
  }
}

/* ── Tablet 810–1199px ───────────────────────────────────── */
@media (min-width: 810px) and (max-width: 1199px) {
  :root {
    --max-width: 100%;
    --section-pad-x: 40px;
    --fs-hero: 72px;
    --fs-5xl: 52px;
  }

  .hero__inner {
    padding: 40px var(--section-pad-x) 32px;
  }

  .about__inner {
    gap: 48px;
  }

  .projects__row {
    gap: 40px;
  }

  .site-nav {
    display: none;
  }
}

/* ── Mobile <810px ───────────────────────────────────────── */
@media (max-width: 809px) {
  :root {
    --section-pad-x: 20px;
    --fs-hero: clamp(44px, 12vw, 68px);
    --fs-5xl: 40px;
    --fs-4xl: 30px;
    --fs-3xl: 24px;
    --fs-2xl: 20px;
    --fs-xl: 17px;
    --fs-lg: 16px;
  }

  /* Hide floating decorative elements */
  .hero__deco {
    display: none;
  }

  /* Stack about section */
  .about__inner {
    flex-direction: column;
  }

  .about__visual {
    order: -1;
    height: 300px;
  }

  /* Stack experience */
  .experience-item {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Contact heading smaller */
  .contact__heading {
    font-size: clamp(36px, 9vw, 56px);
  }

  /* Footer stack */
  .site-footer__inner {
    flex-direction: column;
    gap: 12px;
  }
}

/* ── Utility: hide at breakpoints (mirrors Framer's .hidden-* classes) ── */
@media (min-width: 1649px) {
  .hide-large { display: none !important; }
}

@media (min-width: 1200px) and (max-width: 1648px) {
  .hide-desktop { display: none !important; }
}

@media (min-width: 810px) and (max-width: 1199px) {
  .hide-tablet { display: none !important; }
}

@media (max-width: 809px) {
  .hide-mobile { display: none !important; }
}

/* ── Keyboard navigation focus styles ───────────────────── */
body.keyboard-nav :focus {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

body:not(.keyboard-nav) :focus {
  outline: none;
}