/**
 * responsive.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Mobile-first responsive breakpoints.
 *
 * BREAKPOINTS:
 *   < 480px   — Small mobile
 *   480-768px — Large mobile / small tablet
 *   768-1024px — Tablet
 *   1024-1200px — Small desktop
 *   > 1200px  — Desktop (base styles)
 *
 * All base styles are written for desktop. This file overrides for smaller screens.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── TABLET (≤ 1024px) ──────────────────────────────────────────
──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero: stack vertically */
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-10);
  }

  .hero-content {
    align-items: center;
    order: 2;
  }

  .hero-image-wrapper {
    order: 1;
  }

  .hero-tagline {
    max-width: 100%;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-social-links {
    justify-content: center;
  }

  .hero-roles-wrapper {
    justify-content: center;
  }

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

  .about-sidebar {
    position: static;
  }

  /* Skills: 2 columns */
  .skills-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects: 2 columns */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── LARGE MOBILE / SMALL TABLET (≤ 768px) ──────────────────────
──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Navbar: show hamburger, hide desktop links */
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hero image: smaller */
  .hero-image-frame {
    width: 220px;
    height: 220px;
  }

  /* Skills: 1 column */
  .skills-container {
    grid-template-columns: 1fr;
  }

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

  /* Stats: 2 columns */
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact grid: 2 columns */
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Experience: full width */
  .experience-timeline {
    max-width: 100%;
  }

  /* Chatbot floating: full width on mobile */
  .chatbot-container.chatbot-floating {
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    bottom: calc(var(--chatbot-fab-size) + var(--space-4) + var(--space-3));
  }

  .chatbot-container.chatbot-floating .chatbot-panel {
    width: 100%;
    height: min(480px, 70vh);
  }

  /* FAB: slightly smaller on mobile */
  .chatbot-fab {
    bottom: var(--space-4);
    right: var(--space-4);
  }

  /* Section header: smaller text */
  .section-headline {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  }
}

/* ── SMALL MOBILE (≤ 480px) ─────────────────────────────────────
──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Reduce section padding */
  .section {
    padding-block: clamp(3rem, 10vw, 5rem);
  }

  /* Hero: smaller name */
  .hero-name {
    font-size: clamp(var(--text-4xl), 12vw, var(--text-5xl));
  }

  .hero-image-frame {
    width: 180px;
    height: 180px;
  }

  /* Stats: 2 columns, smaller */
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-value {
    font-size: var(--text-2xl);
  }

  /* Contact: 1 column */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Company header: stack on very small screens */
  .company-header {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* Role header: stack dates below title */
  .role-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .role-chevron {
    position: absolute;
    right: var(--space-4);
    top: var(--space-4);
  }

  .role-header {
    position: relative;
  }

  /* Filter buttons: scrollable row */
  .project-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .project-filters::-webkit-scrollbar {
    display: none;
  }

  /* Chatbot fullscreen: full screen on mobile */
  .chatbot-container.chatbot-fullscreen .chatbot-panel {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  /* Radials: smaller grid */
  .skills-radials {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero CTA: stack vertically */
  .hero-cta-group {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta-group .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ── LARGE DESKTOP (≥ 1400px) ───────────────────────────────────
   Wider layouts for large screens.
──────────────────────────────────────────────────────────────── */
@media (min-width: 1400px) {
  /* Projects: 3 columns */
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Skills: 3 columns */
  .skills-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── PRINT STYLES ───────────────────────────────────────────────
   Basic print-friendly styles.
──────────────────────────────────────────────────────────────── */
@media print {
  .navbar,
  .chatbot-container,
  .chatbot-fab,
  .loading-screen,
  .hero-canvas,
  .scroll-indicator {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section {
    page-break-inside: avoid;
  }
}