/* ============================================
   RESPONSIVE.CSS — Mobile, Tablet, Desktop
   Portfolio: Anibal Jhamil Huaman Verastein
   ============================================ */

/* ─────────────────────────────────────────────
   TABLET (max 1024px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Projects: disable featured wide layout */
  .project-card.project-featured {
    flex-direction: column;
  }

  .project-card.project-featured .project-card-image {
    width: 100%;
    height: 220px;
  }

  /* Timeline: all on same side */
  .timeline::before {
    left: 20px;
    transform: none;
  }

  .timeline-item,
  .timeline-item[data-side="right"] {
    width: 100%;
    margin-left: 0;
    padding-left: var(--space-12);
    padding-right: 0;
    justify-content: flex-start;
  }

  .timeline-dot,
  .timeline-item[data-side="right"] .timeline-dot {
    left: 13px;
    right: auto;
    transform: none;
  }

  /* Arch diagram: allow horizontal scroll */
  .arch-inner {
    min-width: 700px;
  }
}

/* ─────────────────────────────────────────────
   MOBILE (max 768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Hide desktop cursor ── */
  #cursor,
  #cursor-follower {
    display: none !important;
  }

  /* ── Navbar ── */
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-logo-text {
    display: none;
  }

  .nav-actions .btn-primary {
    display: none;
  }

  /* ── Hero ── */
  .hero-inner {
    align-items: center;
    text-align: center;
  }

  .hero-overline {
    justify-content: center;
  }

  .hero-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .hero-tagline {
    font-size: var(--text-base);
    text-align: center;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero-indicators {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .hero-badge-sep {
    display: none;
  }

  /* ── Stack ── */
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* ── Build Steps ── */
  .build-steps {
    grid-template-columns: 1fr;
  }

  /* ── Arch diagram: simplify on mobile ── */
  .arch-inner {
    min-width: 500px;
  }

  .arch-node {
    min-width: 70px;
    padding: var(--space-3);
  }

  .arch-node-label {
    display: none;
  }

  /* ── Terminal ── */
  .terminal-body {
    height: 280px;
    font-size: var(--text-xs);
  }

  .terminal-ascii {
    display: none;
  }

  /* ── Contact ── */
  .contact-links {
    flex-direction: column;
    align-items: center;
  }

  .contact-meta {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* ── Footer ── */
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  /* ── Modal ── */
  .modal {
    padding: var(--space-3);
    align-items: flex-end;
  }

  .modal-container {
    max-height: 90vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .modal-content {
    padding: var(--space-6);
  }

  /* ── Section header ── */
  .section-title {
    font-size: var(--text-3xl);
  }
}

/* ─────────────────────────────────────────────
   SMALL MOBILE (max 480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {

  .tech-grid {
    grid-template-columns: 1fr;
  }

  .hero-indicators {
    display: none;
  }

  .hero-scroll-indicator {
    display: none;
  }

  .stack-tabs {
    gap: var(--space-1);
  }

  .stack-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .arch-inner {
    min-width: 400px;
  }

  .arch-arrow {
    padding: 0 var(--space-1);
  }

  .build-step-num {
    font-size: var(--text-2xl);
    min-width: 36px;
  }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }

  /* Keep layout, remove decorative motion */
  .hero-scroll-indicator {
    display: none;
  }

  .hero-status-dot,
  .status-dot {
    animation: none;
    opacity: 1;
  }

  .scroll-wheel {
    animation: none;
  }

  /* Remove parallax transforms */
  .hero-word,
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────
   TOUCH DEVICES — Remove hover effects
───────────────────────────────────────────── */
@media (hover: none) {
  .tech-card:hover {
    transform: none;
  }

  .project-card:hover {
    transform: none;
  }

  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }

  .project-card-overlay {
    opacity: 0 !important;
  }
}

/* ─────────────────────────────────────────────
   LARGE SCREENS (min 1440px)
───────────────────────────────────────────── */
@media (min-width: 1440px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}