/* =============================================================
   RESPONSIVE.CSS — Media queries (tablet e desktop)
   Estratégia: mobile-first → sobrescreve apenas o necessário
   Breakpoints:
     sm  → 480px
     md  → 768px
     lg  → 1024px
     xl  → 1200px
   ============================================================= */

/* ===================== SM — 480px ===================== */
@media (min-width: 480px) {
  /* Form em duas colunas a partir do sm */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Card wide: thumb + info lado a lado */
  .project-card-wide .full-card-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================== MD — 768px ===================== */
@media (min-width: 768px) {
  /* Container */
  .container {
    padding: 0 2rem;
  }

  /* Nav: exibe links e CTA, oculta hambúrguer */
  .nav-links {
    display: flex;
    gap: 2.25rem;
    align-items: center;
  }

  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--accent);
    transition: background 0.2s, color 0.2s;
  }

  .nav-cta:hover {
    background: var(--accent);
    color: var(--bg);
  }

  .hamburger {
    display: none;
  }

  /* About: duas colunas */
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
  }

  /* Projects: header lado a lado */
  .projects-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  /* Projects: duas colunas */
  .projects-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Contact: duas colunas */
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  /* Footer: linha horizontal */
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Cursor personalizado (apenas em dispositivos com hover) */
  @media (hover: hover) {
    .cursor-dot {
      display: block;
    }
  }
}

/* ===================== LG — 1024px ===================== */
@media (min-width: 1024px) {
  /* Skills: 4 colunas */
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Projects: layout assimétrico */
  .projects-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .project-featured {
    grid-row: span 2;
  }

  .project-featured .project-thumb {
    aspect-ratio: auto;
    height: 60%;
  }

  /* Experience: duas colunas */
  .exp-layout {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  /* Testimonials: três colunas */
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================== SM/MD — Skills: 3 colunas intermediário ===================== */
@media (min-width: 640px) and (max-width: 1023px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================== MD — Testimonials: 2 colunas intermediário ===================== */
@media (min-width: 640px) and (max-width: 1023px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===================== XL — 1200px ===================== */
@media (min-width: 1200px) {
  .container {
    padding: 0 2.5rem;
  }
}

/* ===================== ACESSIBILIDADE — Sem animações ===================== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .skill-bar-fill {
    transition: none;
  }

  .mobile-menu {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ===================== CURSOR — apenas hover-capable devices ===================== */
@media (hover: none) {
  .cursor-dot {
    display: none;
  }
}