/* =========================
   GLOBAL RESPONSIVE BASE
========================= */

html,
body {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

main {
  width: 100%;
  overflow-x: clip;
}

section,
footer {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   TABLET (<= 1024)
========================= */

@media (max-width: 1024px) {
  nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1.35rem !important;
  }

  .nav-links {
    display: none !important;
  }

  .nav-btn {
    padding: 0.64rem 1.22rem !important;
    font-size: 0.68rem !important;
  }

  section {
    padding-top: 4.25rem !important;
    padding-bottom: 5rem !important;
    padding-left: 1.35rem !important;
    padding-right: 1.35rem !important;
  }

  #hero {
    min-height: 100svh;
    padding: 0 1.35rem !important;
    align-items: flex-start !important;
  }

  .hero-content {
    width: min(920px, 100%) !important;
    padding: 6.4rem 0 2.8rem !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  h1 {
    font-size: clamp(2.7rem, 7vw, 4.4rem) !important;
  }

  .hero-roles {
    min-height: 2.6em !important;
    place-items: start !important;
    margin-bottom: 1rem !important;
  }

  .hero-role {
    font-size: clamp(1.55rem, 4.8vw, 2.3rem) !important;
  }

  .hero-sub {
    position: static !important;
    margin-top: 0.85rem !important;
    max-width: min(700px, 100%) !important;
    text-align: left !important;
    line-height: 1.68 !important;
    font-size: 0.83rem !important;
  }

  .hero-actions {
    position: static !important;
    margin-top: 1rem !important;
    right: auto !important;
    bottom: auto !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }

  .hero-scroll {
    display: none !important;
  }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .about-visual {
    justify-self: center;
    width: min(560px, 100%);
  }

  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .experience-shell {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
  }

  .experience-entry {
    min-height: auto;
  }

  .projects-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.9rem !important;
  }

  .project-item {
    grid-template-columns: 2.2rem 1fr !important;
    gap: 0.9rem !important;
  }

  .project-meta {
    display: none !important;
  }

  .contact-links {
    flex-wrap: wrap;
  }
}

/* =========================
   MOBILE (<= 768)
========================= */

@media (max-width: 768px) {
  nav {
    padding: 0.9rem 1rem !important;
  }

  .nav-logo {
    font-size: 1rem !important;
  }

  .nav-btn {
    padding: 0.55rem 1rem !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.12em !important;
  }

  section {
    padding: 3.8rem 1rem 4.3rem !important;
  }

  #hero {
    padding: 0 1rem !important;
  }

  .hero-content {
    padding: 6.1rem 0 2.8rem !important;
  }

  h1,
  h2 {
    word-break: break-word;
  }

  h1 {
    font-size: clamp(2.2rem, 12vw, 2.85rem) !important;
  }

  .hero-roles {
    min-height: 2.4em !important;
  }

  .hero-role {
    font-size: clamp(1.35rem, 7vw, 1.95rem) !important;
  }

  .hero-sub {
    max-width: 100% !important;
    line-height: 1.65 !important;
    font-size: 0.8rem !important;
  }

  .hero-actions {
    width: 100%;
    gap: 0.7rem !important;
  }

  .about-grid,
  .about-metrics,
  .about-card-actions,
  .experience-shell {
    grid-template-columns: 1fr !important;
  }

  .about-photo-gallery {
    min-height: 330px !important;
  }

  .experience-list {
    padding-left: 0.85rem !important;
  }

  .experience-entry {
    padding: 0.95rem 1rem !important;
  }

  .experience-detail {
    min-height: auto !important;
    padding: 1.2rem !important;
  }

  .experience-detail-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .experience-detail-title {
    font-size: 1.45rem !important;
  }

  .experience-period {
    font-size: 0.74rem !important;
    padding: 0.58rem 0.82rem !important;
  }

  .experience-work-item,
  .project-desc {
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
  }

  .skills-grid {
    grid-template-columns: 1fr !important;
  }

  .skill-group {
    padding: 1rem !important;
  }

  .project-item {
    grid-template-columns: 1.8rem 1fr !important;
    gap: 0.7rem !important;
    width: 100%;
  }

  .project-title {
    font-size: 1rem !important;
  }

  #contact h2 {
    font-size: clamp(3rem, 12vw, 5rem);
  }

  footer {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
    padding: 1.2rem 1rem !important;
  }
}

/* =========================
   SMALL MOBILE (<= 480)
========================= */

@media (max-width: 480px) {
  nav {
    padding: 0.8rem 0.85rem !important;
  }

  .nav-logo {
    font-size: 0.94rem !important;
  }

  .nav-btn {
    padding: 0.52rem 0.88rem !important;
    font-size: 0.6rem !important;
    white-space: nowrap;
  }

  section {
    padding: 3.4rem 0.85rem 3.9rem !important;
  }

  #hero {
    padding: 0 0.85rem !important;
  }

  .hero-content {
    padding: 5.8rem 0 2.4rem !important;
  }

  .hero-actions {
    width: 100%;
    gap: 0.6rem !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.78rem 1rem !important;
  }

  .about-photo-gallery {
    min-height: 280px !important;
  }

  .project-item {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    padding: 1rem 0;
  }

  .project-num {
    font-size: 0.78rem !important;
  }
}

/* =========================
   TOUCH DEVICES
========================= */

@media (hover: none), (pointer: coarse) {
  body {
    cursor: auto !important;
  }

  #cursor,
  #cursor-ring {
    display: none !important;
  }

  a,
  button,
  [role="button"],
  .project-item,
  .experience-entry,
  .skill-group {
    cursor: pointer !important;
  }
}