/* ============================================================
   responsive.css — Mobile-first responsive adjustments
   ============================================================ */

/* --- Tablet (< 1024px) --- */
@media (max-width: 1024px) {
  .hub__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .hub__card--featured { grid-column: 1 / -1; grid-row: auto; }
  .hub__card--stat:nth-child(2) { grid-column: 1; }
  .hub__card--stat:nth-child(3) { grid-column: 2; }
  .hub__card--about   { grid-column: 1 / -1; }
  .hub__card--contact { grid-column: 1 / -1; }
  .hub__card--ticker  { grid-column: 1 / -1; }

  .work-item {
    grid-template-columns: 48px 1fr 44px;
    grid-template-rows: auto auto;
    gap: 12px 20px;
  }
  .work-item__desc {
    grid-column: 2 / 3;
    grid-row: 2;
  }
  .work-item__arrow {
    grid-row: 1 / 3;
    align-self: center;
  }

  .about__layout {
    grid-template-columns: 1fr;
  }
  .about__skills {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
  :root {
    --nav-h: 60px;
    --r-lg: 18px;
    --glass-blur: 20px;
  }

  .nav {
    padding: 0 16px;
  }
  .nav__logo { font-size: 17px; }
  .nav__links { gap: 20px; }
  .nav__link { font-size: 12px; }
  .nav__status { display: none; }

  /* Modal */
  .modal-overlay { padding: 16px; }
  .modal { padding: 28px; max-height: 90vh; }
  .modal__number { font-size: 40px; }
  .modal__title { font-size: 22px; }
  .modal__header { gap: 14px; }
  .modal__results { grid-template-columns: 1fr 1fr; }

  .hub {
    padding: calc(var(--nav-h) + 24px) 16px 40px;
  }
  .hub__intro { margin-bottom: 32px; }
  .hub__name { letter-spacing: -2px; }

  .hub__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hub__card--featured { min-height: 220px; }
  .hub__card { padding: 20px; min-height: 100px; }
  .hub__card h3 { font-size: 17px; }
  .stat-big { font-size: 36px; }

  .panel {
    padding: calc(var(--nav-h) + 24px) 16px 60px;
  }
  .panel__title { letter-spacing: -1.5px; }

  .work-item {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .work-item__number { font-size: 28px; }
  .work-item__desc { grid-column: 1; grid-row: auto; }
  .work-item__arrow {
    position: absolute; top: 20px; right: 20px;
    grid-row: auto;
  }

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

  .contact__grid {
    grid-template-columns: 1fr;
  }
  .contact-card { padding: 24px; }
}

/* --- Small phone (< 400px) --- */
@media (max-width: 400px) {
  .hub__grid {
    grid-template-columns: 1fr;
  }
  .hub__card--featured { grid-column: 1; }
  .hub__card--stat:nth-child(2),
  .hub__card--stat:nth-child(3) { grid-column: 1; }

  .nav__links { gap: 14px; }
}

/* --- Large desktop (> 1400px) --- */
@media (min-width: 1400px) {
  .hub__card--featured { min-height: 360px; }
}

/* --- Scroll UI: hide arrows on small screens, use dots only --- */
@media (max-width: 768px) {
  .scroll-arrow { display: none; }
  .scroll-dots { bottom: 16px; }
}

/* --- Reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .orb { animation: none; }
  .ticker { animation: none; }
  .cursor, .cursor-label { display: none; }
}