/* 📱 Global phone layout fixes (≤480px wide) */
@media (max-width: 480px) {

  /* General typography scaling */
  body {
    font-size: 10px !important;  /* reset */
    line-height: 1.5;
  }

  /* Header */
  .site-header__inner {
    max-width: 100%;
    
    padding: 0 1rem;
  }
  .brand {
    font-size: 1rem;
  }

  /* Hero */
  .hero {
    height: auto;              /* let content drive height */
    padding: 4rem 1rem 2rem;
  }
  .hero__name-title {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .welcome h1 {
    font-size: clamp(1.8rem, 8vw, 3rem);
    letter-spacing: 0.2rem;
  }
  .scroll-hint {
    font-size: 1rem;
  }
  /* Projects / Wheel */
  .projects {
    height: auto;
    padding: 3rem 1rem;
    gap: 2rem;
  }
  .wheel {
    width: 100%;
    height: clamp(380px, 56vh, 560px);
  }

  /* Keep JS wheel behavior on phones; only lift buttons above cards */
  .wheel-btn {
    width: 3.1rem;
    top: 55%;
    z-index: 8;
    pointer-events: auto;
  }

  .wheel-btn--prev { left: 0.35rem; }
  .wheel-btn--next { right: 0.35rem; }

  /* Prevent side/hidden cards from stealing taps from nav buttons */
  #projectWheel .wheel__card { pointer-events: none; }
  #projectWheel .wheel__card.is-front { pointer-events: auto; }

  /* Skills */
  .skills {
    height: auto;
    padding: 3rem 1rem;
  }
  .skill-list {
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
  }

  /* Contact */
  .contact-card {
    padding: 1.5rem;
    grid-template-columns: 1fr;
  }
  .contact-card h3 {
    font-size: 1.6rem;
  }

  /* Footer */
  footer {
    padding: 1.2rem;
    font-size: .85rem;
  }
}

/* Mobile-only: hide decorative global drop + skills radar */
@media (max-width: 780px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  body{
    position: relative;
  }

  .hero,
  .projects,
  .skills,
  .about,
  .section-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .welcome,
  .welcome h1{
    max-width: 100%;
    overflow-x: clip;
  }

  .welcome h1 > span[data-reveal]:not(.is-visible)[data-reveal-from="left"],
  .welcome h1 > span[data-reveal]:not(.is-visible)[data-reveal-from="right"]{
    transform: translateX(0) !important;
  }

  .skills__grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "icons"
      "info" !important;
    width: 100% !important;
    gap: 1rem !important;
  }

  .skill-list{
    justify-self: center;
    max-width: 100%;
  }

  .skill-info{
    justify-self: center;
    max-width: min(90vw, 32ch);
    text-align: center;
  }

  .wheel {
    overflow: hidden;
  }

  .wheel-btn {
    display: none !important;
  }

  #global-drop {
    display: none !important;
  }

  .radar-box {
    display: none !important;
  }
}