/* ============================================================
   RESPONSIVE — Breakpoints & Adaptive Layouts
   Portfolio | AI Engineer & Full Stack Developer

   Breakpoints:
   --xs:  < 400px   (small mobile)
   --sm:  < 640px   (mobile)
   --md:  < 768px   (large mobile / small tablet)
   --lg:  < 1024px  (tablet)
   --xl:  < 1280px  (laptop)
   --2xl: < 1440px  (desktop)
   ============================================================ */

/* ── Laptop (< 1280px) ───────────────────────────────────── */
@media (max-width: 1280px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

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

/* ── Tablet (< 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --navbar-height: 64px;
  }

  /* Navbar */
  .navbar__nav { display: none; }

  .navbar__hamburger {
    display: flex;
  }

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

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

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Section title */
  .section__title {
    font-size: var(--fs-3xl);
  }
}

/* ── Large Mobile (< 768px) ──────────────────────────────── */
@media (max-width: 768px) {
  /* Typography */
  h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  h2 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  h3 { font-size: clamp(1.4rem, 4vw, 2rem); }

  /* Grids collapse to single col */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
  }

  /* Buttons */
  .btn--xl {
    padding: 0.9em 2em;
    font-size: var(--fs-base);
  }

  /* Cards */
  .card { padding: var(--space-6); }

  /* Modal */
  .modal {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--border-radius-lg);
    max-height: 95vh;
  }

  /* Section padding reduction */
  :root {
    --section-py: clamp(48px, 8vw, 80px);
  }

  /* Mouse glow hidden on touch */
  .mouse-glow { display: none; }
}

/* ── Mobile (< 640px) ────────────────────────────────────── */
@media (max-width: 640px) {
  /* Navbar actions — hide resume on very small screens */
  .navbar__actions .btn--resume {
    display: none;
  }

  /* Stack hero buttons */
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn {
    justify-content: center;
  }

  /* Eyebrow smaller */
  .eyebrow,
  .section__eyebrow {
    font-size: 0.6rem;
    padding: 3px 10px;
  }

  /* Grid auto — smaller min */
  .grid-auto { grid-template-columns: 1fr; }
  .grid-auto-sm { grid-template-columns: repeat(2, 1fr); }

  /* Tags wrap tightly */
  .tags { gap: var(--space-1); }
  .tag { font-size: 0.6rem; padding: 2px 8px; }

  /* Progress shimmer off on low-end */
  .progress-bar__fill::after { display: none; }
}

/* ── Small Mobile (< 400px) ──────────────────────────────── */
@media (max-width: 400px) {
  .grid-auto-sm { grid-template-columns: 1fr; }

  .btn--lg,
  .btn--xl {
    padding: 0.75em 1.5em;
    font-size: var(--fs-base);
  }

  .card--stat .card__stat-number { font-size: var(--fs-3xl); }

  .navbar__logo-text { display: none; }
}

/* ── Landscape Mobile ────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --section-py: 48px;
    --navbar-height: 56px;
  }
}

/* ── High-DPI / Retina ───────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bg-noise { opacity: 0.018; }
}

/* ── Prefers 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; }

  .bg-blob { animation: none; }
  .mouse-glow { display: none; }
  #bg-canvas { display: none; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .navbar,
  .footer,
  #bg-canvas,
  .bg-blobs,
  .bg-noise,
  #page-loader,
  .mouse-glow,
  #cursor,
  #cursor-follower,
  #scroll-progress {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .card {
    border: 1px solid #ddd;
    box-shadow: none;
    background: #fff;
    break-inside: avoid;
  }

  a { color: #000; text-decoration: underline; }
}

/* ── Focus Visible (Keyboard Navigation) ────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--border-radius-xs);
}

/* Remove focus for mouse users */
:focus:not(:focus-visible) { outline: none; }

/* ── Custom cursor disabled on touch devices ─────────────── */
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
  button, a { cursor: pointer; }
  #cursor, #cursor-follower { display: none; }
}

/* ============================================================
   RESPONSIVE ADDITIONS — Contact, Timeline, Gallery, Lightbox
   ============================================================ */

/* ── Contact Page ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact__form-card {
    padding: var(--space-6);
  }

  .contact__info {
    order: 2; /* form first on mobile */
  }

  .contact__form-wrap {
    order: 1;
  }

  .contact__detail-cards {
    gap: var(--space-2);
  }

  .contact__detail-card {
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 640px) {
  /* contact form 2-col name/email → single col */
  .contact__form-card .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .contact__detail-value {
    font-size: var(--fs-xs);
    word-break: break-all;
  }

  .contact__availability {
    padding: var(--space-4);
  }
}

/* ── Timeline (Experience) ───────────────────────────────── */
@media (max-width: 768px) {
  .timeline {
    padding-left: var(--space-8);
  }

  .timeline__line {
    left: 5px;
  }

  .timeline__dot {
    left: calc(-1 * var(--space-8) + 0px);
    width: 10px;
    height: 10px;
    top: 20px;
  }

  .timeline-card {
    padding: var(--space-4) var(--space-5);
  }

  .timeline-card__role {
    font-size: var(--fs-lg);
  }

  .exp-tabs {
    gap: var(--space-2);
  }

  .exp-tabs .btn {
    font-size: var(--fs-xs);
    padding: 0.45em 1em;
  }
}

@media (max-width: 400px) {
  .timeline {
    padding-left: var(--space-6);
  }

  .timeline__dot {
    left: calc(-1 * var(--space-6) + 2px);
  }
}

/* ── Gallery Masonry ─────────────────────────────────────── */
@media (max-width: 1280px) {
  .gallery-masonry {
    columns: 3 200px;
  }
}

@media (max-width: 1024px) {
  .gallery-masonry {
    columns: 3 160px;
  }
}

@media (max-width: 768px) {
  .gallery-masonry {
    columns: 2 140px;
    column-gap: var(--space-3);
  }

  .gallery-item {
    margin-bottom: var(--space-3);
  }

  .gallery-hero-swiper {
    max-width: 100%;
  }

  .gallery-filters {
    gap: var(--space-2);
  }

  .gallery-filters .btn {
    font-size: var(--fs-xs);
    padding: 0.4em 0.9em;
  }
}

@media (max-width: 480px) {
  .gallery-masonry {
    columns: 2 120px;
    column-gap: var(--space-2);
  }

  .gallery-item {
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 360px) {
  .gallery-masonry {
    columns: 1;
  }
}

/* ── Lightbox ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lightbox-backdrop {
    padding: var(--space-3);
    align-items: flex-end;
  }

  .lightbox-content {
    max-width: 100%;
    max-height: 80vh;
  }

  .lightbox-image {
    max-height: 75vh;
    border-radius: var(--border-radius-md);
  }

  .lightbox-prev,
  .lightbox-next {
    position: fixed;
    top: auto;
    bottom: var(--space-6);
    transform: none;
    width: 40px;
    height: 40px;
  }

  .lightbox-prev { left: var(--space-4); }
  .lightbox-next { right: var(--space-4); }

  .lightbox-close {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
  }
}

/* ── Certificates Stats Row ──────────────────────────────── */
@media (max-width: 640px) {
  .cert-stats {
    gap: var(--space-3);
  }

  .cert-stat {
    min-width: 120px;
    padding: var(--space-4);
  }

  .cert-filters {
    gap: var(--space-2);
  }

  .cert-filters .btn {
    font-size: var(--fs-2xs);
    padding: 0.4em 0.8em;
  }
}

/* ── Projects Filters ────────────────────────────────────── */
@media (max-width: 640px) {
  .projects__filters {
    gap: var(--space-2);
  }

  .projects__filters .btn {
    font-size: var(--fs-2xs);
    padding: 0.4em 0.8em;
  }
}

/* ── Footer responsive additions ─────────────────────────── */
@media (max-width: 640px) {
  .footer {
    padding-block: var(--space-12) var(--space-8);
  }

  .footer__brand-desc {
    max-width: 100%;
  }

  .footer__col-title {
    font-size: var(--fs-xs);
    margin-bottom: var(--space-3);
  }

  .footer__link {
    font-size: var(--fs-xs);
  }
}

/* ── Navbar mobile menu refinements ──────────────────────── */
@media (max-width: 640px) {
  .navbar__mobile {
    padding: var(--space-4);
    gap: var(--space-1);
  }

  .navbar__mobile .navbar__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
  }
}

/* ── Section header responsive ───────────────────────────── */
@media (max-width: 480px) {
  .section__header {
    margin-bottom: var(--space-10);
  }

  .section__title {
    font-size: var(--fs-3xl);
  }

  .section__subtitle {
    font-size: var(--fs-base);
  }

  .divider {
    width: 60px;
    height: 2px;
  }
}

/* ── CTA section ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .cta-card {
    padding: var(--space-8) var(--space-5) !important;
  }
}

/* ── About grid ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .about__stats.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

/* ── Hero section mobile ──────────────────────────────────── */
@media (max-width: 640px) {
  .hero__heading {
    font-size: clamp(2.8rem, 10vw, 4rem);
  }

  .hero__typed-wrap {
    font-size: var(--fs-xl);
  }

  .hero__stats {
    gap: var(--space-4);
  }

  .hero__stat-number {
    font-size: var(--fs-xl);
  }

  .hero__badge {
    display: none; /* hide floating tech badges on small screens */
  }
}

/* ── Swiper responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

/* ── Page hero padding ───────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero,
  section[aria-label$="hero"] {
    padding-top: calc(var(--navbar-height) + var(--space-8)) !important;
  }
}

/* ── Toast ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    font-size: var(--fs-xs);
  }
}